diff --git a/src/app.css b/src/app.css index e193aa3..366204c 100644 --- a/src/app.css +++ b/src/app.css @@ -36,6 +36,10 @@ border-radius: var(--radius-md); } + button:hover { + background-color: var(--color-gray-300); + } + /* svx post styling */ .post h1 { @apply text-3xl; @@ -83,6 +87,16 @@ @apply list-disc; @apply pl-6; } + + .post ol { + @apply list-decimal; + @apply pl-7; + } + + .post ol li::marker { + @apply font-semibold; + @apply text-black; + } } @layer components { diff --git a/src/lib/assets/making-of/inspiration.png b/src/lib/assets/making-of/inspiration.png new file mode 100644 index 0000000..04b6557 Binary files /dev/null and b/src/lib/assets/making-of/inspiration.png differ diff --git a/src/lib/assets/making-of/old.png b/src/lib/assets/making-of/old.png new file mode 100644 index 0000000..b82badf Binary files /dev/null and b/src/lib/assets/making-of/old.png differ diff --git a/src/lib/yap/_layout.svelte b/src/lib/yap/_layout.svelte index ff2a92d..43c654e 100644 --- a/src/lib/yap/_layout.svelte +++ b/src/lib/yap/_layout.svelte @@ -8,13 +8,27 @@ layout for posts, used by mdsvex title, date: _date, posted: _posted, + minimized, children, - }: { title: string; date: string; posted: string; children: Snippet } = $props(); - let date = $derived(new Date(_date)); - let posted = $derived(new Date(_posted)); - let expanded = $state(true); + }: { + title: string; + date: string; + posted: string; + minimized?: boolean; + children: Snippet; + } = $props(); + + // commented out for now since I want to display og timezone, and I realized there's no sorting the list atm + // let date = $derived(new Date(_date)); + // let posted = $derived(new Date(_posted)); + + // svelte-ignore state_referenced_locally + let expanded = $state(minimized ? false : true); + + +
@@ -25,7 +39,7 @@ layout for posts, used by mdsvex onclick={() => { expanded = !expanded; }} - class="aspect-square h-5 sm:absolute text-md sm:-right-7 sm:top-1" + class="aspect-square h-5 sm:absolute sm:-right-7 sm:top-1" >
{#if expanded} @@ -36,8 +50,8 @@ layout for posts, used by mdsvex
-

dated {date.toISOString()}

-

posted {posted.toISOString()}

+

dated {_date}

+

posted {_posted}

{#if expanded}
diff --git a/src/lib/yap/index.ts b/src/lib/yap/index.ts index d91851c..fe819c7 100644 --- a/src/lib/yap/index.ts +++ b/src/lib/yap/index.ts @@ -1,4 +1,7 @@ import Welcome, { metadata as welcomeMeta } from "$lib/yap/welcome.svx"; +import MakingOfPt1, { metadata as makingOfMetaPt1 } from "$lib/yap/making-of-pt1.svx"; +import MakingOfPt2, { metadata as makingOfMetaPt2 } from "$lib/yap/making-of-pt2.svx"; +import MakingOfPt3, { metadata as makingOfMetaPt3 } from "$lib/yap/making-of-pt3.svx"; import type { Component } from "svelte"; export type Post = { @@ -17,6 +20,27 @@ const posts: Post[] = [ posted: new Date(welcomeMeta.posted), raw: welcomeMeta.raw, }, + { + component: MakingOfPt1, + title: makingOfMetaPt1.title, + date: new Date(makingOfMetaPt1.date), + posted: new Date(makingOfMetaPt1.posted), + raw: makingOfMetaPt1.raw, + }, + { + component: MakingOfPt2, + title: makingOfMetaPt2.title, + date: new Date(makingOfMetaPt2.date), + posted: new Date(makingOfMetaPt2.posted), + raw: makingOfMetaPt2.raw, + }, + { + component: MakingOfPt3, + title: makingOfMetaPt3.title, + date: new Date(makingOfMetaPt3.date), + posted: new Date(makingOfMetaPt3.posted), + raw: makingOfMetaPt3.raw, + }, ]; export default posts; diff --git a/src/lib/yap/making-of-pt1.svx b/src/lib/yap/making-of-pt1.svx new file mode 100644 index 0000000..804752f --- /dev/null +++ b/src/lib/yap/making-of-pt1.svx @@ -0,0 +1,38 @@ +--- +title: making of (pt. 1) +date: !!str 2026-06-01T23:16:13+10:00 +posted: !!str 2026-06-01T23:16:13+10:00 +minimized: true +raw: > + So, for some context, if you're an og you may remember my old webpage: + + ![old]($lib/assets/making-of/old.png) + + I built this page at the end of 2023 -- at the time my CS club, PROJECT Emory, had engineers that needed support in web design and development -- I knew my way around backend development, so I decided to tackle a personal portfolio project to learn the basics of frontend development, both in design best practices and in tools such as Figma and React. If you're interested in my processes at the time, you can still find the old dev logs [here](https://github.com/andrewtlu/andrewtlu.github.io/tree/v1/dev_log). + + However, after making the website (which did land me my first internship!), I didn't touch it after ending said internship, and it's remained the same since then. I've grown/changed a lot, and so has what I want to communicate to recruiters and other people visiting my site. I designed my old site to be much more "demo-y," but I've found many of the old features no longer necessary/aesthetically pleasing to myself. I also figured that since I've graduated from Emory, it's about time to spruce up the site. + + So, while browsing around and looking at PROJECT Emory/Emory Hack's team members' profiles, I found our [lead engineer (Ethan)'s personal site](https://taehoonlee.dev/): + + ![inspiration]($lib/assets/making-of/inspiration.png) + + I loved how minimalistic yet sophisticated his page was, and decided I wanted to do something like this. I've also always wanted to have a blog of sorts. So, I settled on building a simple, monochrome(ish) webpage using spacing, text size, color, and weight to provide visual hierarchy and group content. + + ... +--- + +So, for some context, if you're an og you may remember my old webpage: + +![old]($lib/assets/making-of/old.png) + +I built this page at the end of 2023 -- at the time my CS club, PROJECT Emory, had engineers that needed support in web design and development -- I knew my way around backend development, so I decided to tackle a personal portfolio project to learn the basics of frontend development, both in design best practices and in tools such as Figma and React. If you're interested in my processes at the time, you can still find the old dev logs [here](https://github.com/andrewtlu/andrewtlu.github.io/tree/v1/dev_log). + +However, after making the website (which did land me my first internship!), I didn't touch it after ending said internship, and it's remained the same since then. I've grown/changed a lot, and so has what I want to communicate to recruiters and other people visiting my site. I designed my old site to be much more "demo-y," but I've found many of the old features no longer necessary/aesthetically pleasing to myself. I also figured that since I've graduated from Emory, it's about time to spruce up the site. + +So, while browsing around and looking at PROJECT Emory/Emory Hack's team members' profiles, I found our [lead engineer (Ethan)'s personal site](https://taehoonlee.dev/): + +![inspiration]($lib/assets/making-of/inspiration.png) + +I loved how minimalistic yet sophisticated his page was, and decided I wanted to do something like this. I've also always wanted to have a blog of sorts. So, I settled on building a simple, monochrome(ish) webpage using spacing, text size, color, and weight to provide visual hierarchy and group content. + +... diff --git a/src/lib/yap/making-of-pt2.svx b/src/lib/yap/making-of-pt2.svx new file mode 100644 index 0000000..2ee7a3b --- /dev/null +++ b/src/lib/yap/making-of-pt2.svx @@ -0,0 +1,74 @@ +--- +title: making of (pt. 2) +date: !!str 2026-06-02T15:18:29+10:00 +posted: !!str 2026-06-02T15:18:29+10:00 +minimized: true +raw: > + ... + + To get started, I decided to ditch React entirely. I've always been a huge fan of Svelte, and I figured the minimal, ordered philosophy behind Svelte gave me a developing experience similar to what I was going for on the user experience side. Additionally, while building the page itself I found some cool tools to help make developing this blog a bit easier. + + My tech stack ended up being pretty slim: + + - Svelte, TypeScript, Vite + - [SvelteKit](https://svelte.dev/docs/kit/adapter-static) for cleaner routing (paired with the static adapter for deployment via GitHub Pages) + - [tailwindcss](https://tailwindcss.com/docs/installation/using-vite) for a cleaner CSS experience + - [mdsvex](https://mdsvex.pngwn.io/) for preprocessing markdown (in order to write posts in markdown) + - You can also find all the code in [this website's GitHub repository](https://github.com/andrewtlu/andrewtlu.github.io) + + I didn't use any component/style libraries or icon libraries because I found them unnecessary for what I was trying to do here. + + ### The landing page + + I decided to tackle the landing page first, as I was just going to do the bulk of the designing while setting up my pages. So, I set up the base page route (and a dummy blog route) and its layout, adding some filler content in order to mess with fonts, sizing, and spacing, before settling on a version similar to what is used now. I added some base global variables to reduce duplication (such as `` styling or `