Portfolio site

A static portfolio site. My third iteration. This time, I wanted to use SvelteKit for its component and routes system.

Setup was not too bad. Sveltekit was rather straightforward in its instructions. I did find Svelte to be generally very easy to pick up, and very smooth. Tailwind helped a lot in terms of getting something up and running.

Skeleton took care of the color scheme situation, since it auto-creates the color palette based upon my choice of primary/secondary/tertiary etc. I wanted to use the color scheme of my icon that I often use, which is easier said than done. It was a bit difficult to handle its theme creator since it freezes up if you take the wrong route, but the results speak for themselves.

The displayed file system goes through the routes folder and populates it with the accurate file structure. It reads the frontmatter of sdx files using gray-matter and gets the titles, icon, etc. It cleans up the svelte-routing related file names (e.g. (projects) becomes projects) and all +pages.svx files are subsumed by their parents. The file tree itself is Lucide's File Tree.

npm run generate:projects runs the script to generate the file structure json, although this also occurs on every npm build instance. I currently have it fetching the json when the page loads, but I may experiment with localStorage.

I'd like to also integrate Tiptap as a WYSIWYG editor, but that is a bit of scope creep. Mostly noting it here in case I forget my aspirations.

I utilized:

• SvelteKit deployed with Netlify
• TailwindCSS
• UI components from Skeleton and Svelte Animation Components
• icons from Iconify using unplugin-icons, usually from Material Design
• mdsvex for markdown to svelte

Color palette is my own invention, favicons/profile icons were also done by myself.