Update styling, add new colors and a background image.

Update bullet point styling issue.
manpreeeeeet · Nov 30, 2024 · 0b3e53c · 0b3e53c
1 parent e638e28
commit 0b3e53c
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 34 deletions.
diff --git a/public/background.jpg b/public/background.jpg
diff --git a/public/lain.webp b/public/lain.webp
diff --git a/public/lain1.png b/public/lain1.png
diff --git a/src/components/WritingLayout.astro b/src/components/WritingLayout.astro
@@ -9,17 +9,19 @@ const { title } = Astro.props;
 ---
 
 <!doctype html>
-<html lang="en">
+<html lang="en" class="bg-frieren bg-no-repeat bg-cover bg-fixed bg-center">
   <Header title={title} />
-  <body class="bg-background font-mono">
+  <body
+    class="font-mono min-h-screen backdrop-blur-[5px] bg-background/85 tracking-wide"
+  >
     <Analytics />
     <div
       class="container mx-auto my-0 lg:max-w-[850px] text-zinc-50 p-5 text-sm md:text-base"
     >
       <a
         href="/"
         class="hover:cursor-pointer hover:bg-slate-800 text-blue-500 py-2"
-        >[ home ]</a
+        >[ Home ]</a
       >
       <slot />
       <div class="my-10"></div>

diff --git a/src/content/writings/deploy-ktor-to-vps.mdx b/src/content/writings/deploy-ktor-to-vps.mdx
@@ -5,17 +5,17 @@ import { Image } from 'astro:assets';
 import githubActionImage from '../assets/github-action.png';
 
 
-# Deploying Ktor app in a VPS using github actions
+# \# Deploying Ktor app in a VPS using github actions
 <div class="h-1 w-full my-4 bg-slate-800"></div>
 
-## Overview
+## \#\# Overview
 This is my simple docker + VPS setup for deploying Ktor application. Read [ktor's deployment documentation](https://ktor.io/docs/server-deployment.html) if you want to learn about different/right way of deploying a Ktor app.
 
 In this setup we deploy automatically whenever a code change is pushed to `GitHub`. We rely on [`github actions`](https://docs.github.com/en/actions) to build and push the docker image to [`ghcr`](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-container-registry), and to trigger a new deployment on the server.
 <Image src={githubActionImage} alt="A rocketship in space." class="max-w-[100%] mx-auto my-4"/>
 
-## Setting up the project
-### Ktor Gradle Plugin
+## \#\# Setting up the project
+### \#\#\# Ktor Gradle Plugin
 Configure [`ktor gradle plugin`](https://ktor.io/docs/server-fatjar.html), so we can build a `fatJar` using `gradlew fatJar` command.
 ```kts
 plugins {
@@ -35,7 +35,7 @@ ktor {
 }
 ```
 
-### Dockerfile
+### \#\#\# Dockerfile
 We will use a simple `Dockerfile`. This `image` requires us to build the `fatJar` externally before building our docker image.
 
 
@@ -98,7 +98,7 @@ Your directory should look like this after these steps
 ```
 
 
-### Github Action Setup
+### \#\#\# Github Action Setup
 Create a [github workflow](https://docs.github.com/en/actions/writing-workflows/about-workflows) that deploys whenever new changes are merged into our `main` branch.
 
 ```yaml
@@ -192,7 +192,7 @@ VPS_USERNAME=
 ```
 
 
-## Final notes
+## \#\# Final notes
 * No rolling release: This setup stops the running application before deploying the new version.
 * Assumption: VPS has docker installed and is authenticated with [`ghcr`](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-container-registry#authenticating-in-a-github-actions-workflow).
 * Due to the way docker compose is setup the `jdbc` url in our application should look like: `"jdbc:postgresql://db:5432/$dbName"` i.e. should use `db` as a hostname rather than `localhost`.
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -6,23 +6,20 @@ import Analytics from "@vercel/analytics/astro";
 import { Image } from "astro:assets";
 import frieren from "../../public/frieren.png";
 const posts = await getCollection("writings");
-
-import landingPageOG from "../assets/images/landing-page.png";
 ---
 
 <!doctype html>
-<html lang="en">
+<html lang="en" class="bg-frieren bg-no-repeat bg-cover bg-fixed bg-center" }>
   <Header
-    title="mnprt"
-    image={landingPageOG}
+    title="mnprt's site"
     description="hey! i am manpreet. i love the kotlin."
   />
-  <body class="bg-background font-sans">
+  <body class="font-sans min-h-screen backdrop-blur-[5px] bg-background/85">
     <Analytics />
     <div
-      class="container mx-auto my-0 lg:max-w-screen-md text-zinc-50 p-5 text-sm md:text-base"
+      class="container mx-auto lg:max-w-screen-md text-zinc-50 text-sm md:text-base p-5 tracking-wide"
     >
-      <div class="flex gap-10 mt-20 items-start">
+      <div class="flex gap-10 pt-20 items-start">
         <Image
           class="w-full max-w-[200px] md:max-w-[400px] h-auto object-contain"
           alt="frieren standing in garden of flowers"
@@ -36,23 +33,37 @@ import landingPageOG from "../assets/images/landing-page.png";
               <a
                 href="https://github.com/manpreeeeeet"
                 target="_blank"
-                class="hover:cursor-pointer hover:bg-slate-800 text-blue-500 py-2"
+                class="hover:cursor-pointer hover:bg-blue-400 text-blue-500 py-2"
                 >[ <span class="underline">github</span> ]
               </a>
             </li>
           </ul>
         </div>
       </div>
-      <div class="h-1 w-full my-4 bg-slate-800"></div>
-      <div class="flex flex-col gap-4">
-        <p>hey! i am manpreet. i love the kotlin.</p>
+      <div class="flex flex-col gap-2 py-4">
+        <h1 class="text-sm md:text-xl py-4 text-peacock">## About</h1>
+        <p>
+          Hey! I'm <span class="px-2 bg-slate-800 text-pink-400">manpreet</span
+          >.
+        </p>
         <p>
-          i am in my final year studying computer science @ university in 🇨🇦
+          I enjoy writing <span class="px-2 bg-slate-800 text-pink-400"
+            >Kotlin</span
+          >, learning new technologies and reading <a
+            href="https://news.ycombinator.com/"
+            class="hover:cursor-pointer hover:bg-blue-400/30 text-blue-500"
+            >[ hackernews ]</a
+          > articles.
+        </p>
+        <p>
+          I am studying <span class="px-2 bg-slate-800 text-pink-400"
+            >Computer Science</span
+          > at <span class="text-fadegreen">University of Alberta</span>. I am
+          currently interested in information retrieval and distributed systems.
         </p>
       </div>
-      <div class="h-1 w-full my-4 bg-slate-800"></div>
       <div>
-        <h1 class="text-sm md:text-xl pb-4">posts</h1>
+        <h1 class="text-sm md:text-xl py-4 text-peacock">## Posts</h1>
         <ul class="flex flex-col gap-2">
           {
             posts.map((post) => (
@@ -68,22 +79,25 @@ import landingPageOG from "../assets/images/landing-page.png";
           }
         </ul>
       </div>
-      <div class="h-1 w-full my-4 bg-slate-800"></div>
-      <div>
-        <h1 class="text-sm md:text-xl pb-4">contact</h1>
+      <div class="flex flex-col gap-2">
+        <h1 class="text-sm md:text-xl py-4 text-peacock">## Contact</h1>
+        <p class="pb-2">
+          I go by <span class="px-2 bg-slate-800 text-pink-400">mnprt</span> online.
+          Contact me via:
+        </p>
         <ul class="flex flex-col gap-2">
           <li>
             <a
               href="mailto:manpreetrahal27@gmail.com"
-              class="hover:cursor-pointer hover:bg-slate-800 text-blue-500"
+              class="hover:cursor-pointer hover:bg-blue-400/30 text-blue-500"
             >
               [ email: <span class="underline">mnprt@mnprt.me</span> ]
             </a>
           </li>
           <li>
             <a
               href="https://bsky.app/profile/mnprt.me"
-              class="hover:cursor-pointer hover:bg-slate-800 text-blue-500"
+              class="hover:cursor-pointer hover:bg-blue-400/30 text-blue-500"
             >
               [ bsky: <span class="underline">mnprt.me</span> ]
             </a>

diff --git a/src/styles/writings.css b/src/styles/writings.css
@@ -56,7 +56,7 @@
   h3,
   h4,
   h5 {
-    @apply font-bold mt-4 md:mt-8 leading-3;
+    @apply font-bold mt-4 md:mt-8 leading-3 text-peacock;
   }
   h1 {
     @apply text-xl md:text-3xl;
@@ -83,7 +83,7 @@
   }
 
   li {
-    @apply my-2 list-inside -indent-6 pl-6;
+    @apply my-2 ml-6;
   }
 
   ul li {
@@ -99,7 +99,7 @@
   }
 
   p code {
-    @apply bg-[#24292e] inline-block rounded-sm text-sm md:text-base px-1;
+    @apply bg-[#24292e] inline-block rounded-sm text-sm md:text-base px-2 py-0 text-pink-400;
   }
 
   blockquote {

diff --git a/tailwind.config.mjs b/tailwind.config.mjs
@@ -3,8 +3,13 @@ export default {
   content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
   theme: {
     extend: {
+      backgroundImage: {
+        frieren: "url('/lain.webp')",
+      },
       colors: {
-        background: "#151515",
+        background: "#000000e6",
+        peacock: "#31748f",
+        fadegreen: "#9cd8a0",
       },
       fontFamily: {
         mono: ["JetBrains Mono", "monospace"],