Portfolio Site V2

Portfolio Site V2

Feb 2025 - Aug 2025

Category: Portfolio
Obsidian icon Obsidian
Used in 2 projects
Netlify icon Netlify
Used in 13 projects
GitHub icon GitHub
Used in 16 projects
Zod icon Zod
Used in 1 project
Jest icon Jest
Used in 2 projects
Umami icon Umami
Used in 2 projects
Typescript icon Typescript
Used in 7 projects
ESLint icon ESLint
Used in 7 projects
Prettier icon Prettier
Used in 7 projects
Cursor icon Cursor
Used in 3 projects
Playwright icon Playwright
Used in 2 projects
Astro.js icon Astro.js
Used in 1 project
Tailwind CSS icon Tailwind CSS
Used in 3 projects
Preact icon Preact
Used in 1 project
Node.js icon Node.js
Used in 2 projects

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.

After writing the backend Node setup for gathering the data from the notes, I built the framework from a template, extending the design to include special sections that I wished to display such as the skills bubble graphic, the timeline and carousel components.

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.