NEW PROJECT – Simple Responsive Portfolio Svelte

The Simple Responsive Portfolio Svelte is a remake of my Simple Responsive Portfolio project in Svelte 5.

Objective

I need to brush up on my Svelte skills since it updated to v5. My last foray was a photo album for my wedding that used Svelte Cloudinary to handle uploads. This project was just a simple refresher and didn’t make use of any Runes. Will save that for a SvelteKit version of the Game Picker 9000 that is soon to come.

Development

For the most part, I just ported my React version of the portfolio and emulated the state functionality with Svelte syntax instead. I added some small improvements that I’ve picked up on other projects. The first is a barrel file in the components directory to make importing components simpler. Secondly, I made the Work component data-driven. There are a pair of object arrays in the assets folder that imitate portfolio entries for the Work and Play sections that are passed in as props. This enabled me to consolidate both of those sections under one component.

Hurdles

I had to revise the mobile nav functionality because Svelte’s component styles are restricted in scope. In the React version, the toggle was being handled under the Header element’s styles, but that couldn’t communicate with the Nav component in Svelte. Instead I passed the open state for the nav as a prop into the Nav component and re-styled the state there.

Takeaways

I’m glad I was able to incorporate some new techniques and improvements to this app. I was worried that it would be too under-baked and simplistic to warrant doing at all, but it turned out to be the most intuitive iteration of the app that I’ve built so far. I intend to use this project format to explore Sanity.io in the future.