This isn't my main piece for the week, it's more of a "contributes nothing to knowledge" kind of post.
Last week I took another look at my portfolio and thought, "Hey, why not make this feel a bit more like me?" So I set out to give it a makeover, stuffed as much of my personality into it as I could, and et voilà, done.
The old one was kinda too formal.
TL;DR: I gave my portfolio a personality transplant. If you'd rather just look than read: a-thedeveloper.vercel.app
Vibe / Tone Option
By default, the professional option is enabled. But if you're not too sensitive and want to have a little fun, try toggling over to the unfiltered version of me, lol.
I don't actually talk like that in real life anymore, but having grown up speaking English, that's pretty much how I sounded back in my teenage years. I was a grumpy teenager like everyone else, the difference is I was extra grumpy compared to most. 😭 I also lost access to my Instagram account, so all of it is still sitting there, public, for anyone to see. Every day I hope that account just quietly gets deleted.
And if you're wondering whether that same energy has been erased, nope, it's still very much here. I just keep it contained to appropriate contexts now, lol.
I also found these while digging through my old microsoft drive, weird 16 year old me stuff. I actually said this in a debate, by the way. Can't remember if my team won that one or lost.
Weather Options
Kinda irrelevant to how it actually describes my portfolio, but I initially wanted to make rainy the only option, because I'm a big fan of dark, gloomy, cloudy weather — the kind that makes England look like heaven to me. 😭
Then I thought, why not just have all of them? So now each weather option comes with its own falling elements based on the selection, plus music that I feel fits the atmosphere.
Again, it doesn't really serve any practical purpose, but I think it's a nice little touch to have, haha.
DEV Writing Views with an API Key
When I joined DEV in 2023, I saw the option to generate an API key. I had no idea what it was for and didn't bother checking the docs, I just assumed that to display your articles on your own site, you'd need one. Turns out: yes and no. DEV already gives you a public URL you can use to showcase your articles without any API key at all but they don't give you the views.
I was browsing around and came across this article by @ketanchavan
and I thought, ohhh, maybe it'd be nice to show view counts on the articles displayed on my portfolio too. So I did.
With this block of code:
async function fetchFromUpstream(): Promise<DevToArticle[]> {
const apiKey = process.env.DEVTO_API_KEY;
if (!apiKey) {
throw new Error("DEVTO_API_KEY is not configured");
}
const upstreamResponse = await fetch(DEVTO_PUBLISHED_URL, {
headers: {
"api-key": apiKey,
Accept: "application/json",
},
});
if (!upstreamResponse.ok) {
throw new Error(`Failed to fetch dev articles (${upstreamResponse.status})`);
}
const payload = (await upstreamResponse.json()) as DevToArticlePayload[];
return mapArticles(payload);
}
I got this!!
Beautiful!!!
Finally, The Archives
Of course I know version control, but it's way better when I can see all of them at once, in pictures.
I've changed my portfolio's design multiple times over the years, ever since I first built one back in 2023, just two years into my professional career. Yeah, I already had a portfolio after landing my second job as a software engineer. Looking back, that's kinda crazy.
Top comments (1)
What a beautiful portfolio!!! I liked the music 😍 I also need to get myself together and make a portfolio site, but I'm too lazy for that 🤣