How I created my portfolio

Jump to Frameworks and tools if you don’t want to read me yapping on my design choices.

Introduction

Since my early days of web development, Vue has always been my good to go, not only because of the community but the expressive and simple syntax with Single File Components.

A few years ago I discovered Svelte and how magic it was, which was a big selling point to me, driving me to finally make my portfolio website. That portfolio was designed and made in a week of mid 2023, with far less experience of the framework.

Almost 2 years later, I’ve been trying to rework it and luckily Svelte 5 was the final push to make it happen. Btw, while Svelte initially attracted me due to its magic, I acknowledge that runes explicitness is far better than implicit reactivity. I loved working with runes in this new website!

Design

My previous design was inspired in one of sammwy.com previous designs, which included a sidebar with some of her details and a top bar for navigation, which looks simple and beatiful. I love 8-bit stuff, pixel-art and terminals, so everything was also inspired on that stuff, making custom hand-made icons with Krita (for everything).

Yeah, my previous portfolio was basically plagiarism...

Time passes, thoughts change, and what I previously thought was amazing it’s no longer. With today’s eyes, I still think my previous portfolio had a wonderful design (and I’m really proud of it) but it always lacked a nice aesthetic that could attract anyone other than me. Therefore, I decided to redesign it all over again.

Now, this website has a paper-like rudimentary aesthetic, with some glassmorphism so it looks cool. “Why?” you may ask, well that’s because I like how analogic stuff looks like (yeah, paper is analogic) while I also like modern and simple designs. Thus, I wanted a simple, good looking design that had textures all over the place, mimicking a news paper or a cardboard wall. And yeah, I like coffee.

Frameworks and tools

SvelteKit

SvelteKit is just an amazing and wonderful framework to work with. SvelteKit is a big plus to a Svelte project, with a powerful route system (layouts, groups, pages), and its separation of browser, universal and server code while working together.

Like, I can make a lot of fetches inside a load function in a +page.server.ts or +layout.server.ts file, enable SSR or pre-rendering and this code is never executed in the browser, nor referenced. And, more importantly, I can get this data in my pages and layouts without any headache, it just works.

I still don’t like how I have to approach localization with svelte-i18n, and I’ve seen that Paraglide works amazing with SvelteKit, but it just works right now and I won’t touch it.

Tailwind

Tailwind. I love it.

I’m using Tailwind in all files that contains a single byte of markup language, even in TOML files. It works, it may be a bit too overwhelming with dozens of classes, but meh, it doesn’t bother me.

Also, I just recently migrated to Tailwind v4. So far so good~

svelte-i18n

svelte-i18n is a simple localization library, which allows me to use JSON files for defining translations for both English and Spanish (btw, I’m using TOML files). And, due to its simplicity and SvelteKit powerful route management, I’m able to use routing for pre-rendering both localizations while also allowing to change the language dynamically at runtime.

I use the following routing for localization with svelte-i18n:

[[language=lang]]/
    | (main)/
    | blog/         << We're somewhere here!
    | +layout.ts    << Where I setup the locale based on URL
+layout.svelte
+layout.ts          << Initial i18n setup

However, I’m not planning in translating these posts to Spanish… Lo siento, no me pagan por esto xd Y si alguna vez publico un post en español, no se traducirá a Inglés :D

I’ve seen other options like Paraglide, but I haven’t tried them, svelte-i18n was the first option that looked good to me and went with it since my first portfolio design.

MDSveX

MDSveX is a library for rendering Markdown as HTML content inside Svelte. I’m using it right now for building this post! It uses Unifiedjs libraries like Remark and Rehype, which allows to mix and match various plugins or even create your own.

My current implementation was inspired by xyven.dev, a nice website made also with SvelteKit and MDSveX.

Also, highlight to the benallfree/mdsvex-enhanced-images library, which makes possible to use SvelteKit enhanced images feature in markdown.

Krita

Krita is an amazing tool for photo editing and art creation that I’ve used for a long long time. Even if it’s not exactly designed for pixel-art, it was a great experience overall when creating all those custom icons.

In this new design, I used it for editing and creating the paper-like texture, in conjunction with Pixelmator Pro… And that’s it. Haven’t used it extensively for this design, but useful nonetheless.

Figma

I’m not that much of a web designer but I think I can defend myself in this area. Figma is an amazing tool that I don’t use like a pro; for example, I just placed the elements where I wanted them to be, with a bit of color here and there, as simple as I could, everything else just came from ~IMAGINATION~.

Final thoughts

I love this new look. I think it represents me, what I love, and what I want to continue doing in the future.