How I made my portfolio site

Welcome to my portfolio and my blog! I created this iteration of my portfolio after shifting my tech stack preferences toward Astro and SolidJS, and after coming across a really interesting library called Swup for creating page transitions. Swup is a really interesting library that exchanges pages in typically the main element of your page, while keeping everything else persistent. This kind of aerial-view approach to the DOM seemed to fit the Astro approach a lot more than using React, so this seemed like a perfect opportunity to try it out.

This current portfolio website is my third rendition from about two and a half years ago. Each iteration represents a major evolution of knowledge and phases in my tech stack; my first site was a simple HTML page with CSS, my second being a React site statically generated with the Gatsby framework, and now a minimal-JS implementation using Astro and an occasional SolidJS “island”.

Initially, I had a top half of my site a full viewport section for making an interactive GSAP animation. Once I started my own blog, the animation felt extraneous, so I moved it to my “Intro” section, letting a more elaborate idea incubate. When I implement it, I’ll write a small blog entry explaining my method.

Swup was very flexible to work with, with many options clearly outline in the official docs, but there were complications when it came to using Solid with Astro and Swup; the injected scripts that the solid renderer uses would be separated from the javascript-swapped pages that Swup manipulated. There is a Swup plugin for this occasion, but it took a while to figure out the ins and outs. If it was static HTML page, Swup would work beautifully, but the way Astro can layer layouts hindered some of the way Swup worked out-of-the-box.

Swup also broke my favorite CSS approach of using CSS modules; I had to result to using global CSS spreadsheets. The great thing about that though is SCSS/Sass is very easy to implement. I used Sass “partials”, or modular .scss files that are imported into the global spreadsheet to keep components modular.