Portfolio Site V2

Portfolio Site V2

Feb 2025 - Present

Category: Portfolio
Obsidian icon Obsidian
Used in 1 project
Netlify icon Netlify
Used in 11 projects
GitHub icon GitHub
Used in 15 projects
Astro icon Astro
Used in 1 project
Tailwind CSS icon Tailwind CSS
Used in 1 project
Preact icon Preact
Used in 1 project
Zod icon Zod
Used in 1 project
Jest icon Jest
Used in 1 project
Node.js icon Node.js
Used in 1 project

Description

An updated personal portfolio website for displaying my skills and past projects, building on my previous site with my newly learned skills.

Every project, skill, role, company, education and reference is stored in Obsidian Markdown notes, processed by Node.js scripts and loaded into the Astro site for display.

Lessons Learned

Initially I set the project up with an Astro front end and started doing GraphQL calls to my Backend Server project to collect the portfolio data I had stored in the Neo4j graph. However I soon realized that I was undoing the speed of Astro and switched to a script that loads the required portfolio data (stored in Obsidian Markdown files) into the portfolio repo and used Astro collections to gather and display the data that way.

The project taught me about defining npm functions in the `package.json` file and how to pass variables through to these scripts using the `cross-env` package.

It was also my first taste of Tailwind CSS and although I began to grasp the utility class names towards the end of development, I found it easier in a lot of situations to extract a class and define it in the main CSS file. I see it's benefits for fast prototyping, but I'm not a big fan from what I've seen.