DEV Community

Cover image for Wake Me Up When It Deploys: The Story of My Portfolio Website
Don Laliberte
Don Laliberte

Posted on

Wake Me Up When It Deploys: The Story of My Portfolio Website

So... Where Do I Begin...

I've never really written a technical blog before so I guess this will be my first one. I'm free-balling it with all of the whimsy of a sleep deprived and overworked Computer Science Student but here we go. I recently made a giant breakthrough for my growth as a developer.

In 2022, I had graduated from SAIT for Software Development and I started building my original portfolio website in React 16 and Tailwind.

I was literally awful at UI/UX, like, take 6 hours to centre a div awful. Progress was a slog and I was still juggling all of the beginner struggles of web development. There was a vision but I wasn't fully confident in carrying it out.

Okay So What Changed?

Well after some personal developments I ended up going back to school for Computer Science at University of Calgary in 2024. This decision would go on to change my life. The community got me super invested and inspired. My fellow peers convinced me I had the gusto to finally go back and revive the skeleton in the closet. The goal was simple, finally make something I could be proud of deploying.

What Did I Do Differently?

One of the first steps was not using a guide this time. Sounds wrong, but the first time I just followed a guide step by step and that really suppressed my creative freedom. I took the time to actually boot up Figma, a program I used to hate, and actually mock up a design. The same visions I had for making a unique logo and theme for myself had shifted. Blue used to be my favourite colour but I decided to lean more into a magenta/pastel pink aesthetic for the colors. 1BitHeart, an indie game by one person, was an inspiration for a lot of the design choices. As an aside the main character is a programmer as well and one I connected with a lot during my time playing. I let my creativity run wild for a bit to see what I could come up with.

Initial Version

The initial version was good I even went out of my way to create my only little logo inspired by the chibi version of Nanashi from 1BitHeart. I added framer motion, chose I nice clean color. I kept it simple.

At the current moment this was looking quite similar to my initial version in 2022. I was approaching it however, with the skills acquired from other work I've done in University. Admittedly there was some A.I assistance... I thought about it harder and really asked myself "This is just A.I cookie cutter... what can I do that's unique to me?" and that's when it clicked for me

I Do It For The Love Of The Game

As I find myself becoming more corporatized in the culture I'm surrounded by I find that the initial reasons for why I loved programming in the first place get lost in the plot of it all. I love to create, I've always been someone who loves self expression. That outlet was important to me so I did something I never would have expected

Putting My Ideas In a Blender

I found myself watching a tutorial on how to make a donut on blender and trying to make sense of it all. The goal was simple, make a laptop that I can use in-place of the A.I cookie cutter portrait that I had been using. Hindsight should have told me to do it at home with a mouse but I was really committed so I did it on a trackpad, to the dismay of my wrists. I learned how to properly parent, slice, extrude, and texture my very own laptop model. All by myself, minus the video teaching me how to use blender. I was very proud of what I accomplished. I even gave it my own cute little logo on the lid.

From here I implemented something I've always wanted to try, Three.js. Using it I was able to replace the profile picture on the hero page with a canvas featuring myself on the laptop, within the canvas, computer-ception!

It Needs More

After implementing a cute little opening animation for the main Hero page using keyframes, it still felt a little..... "empty" in the personality department. Searching for a solution I started to lean more heavy into that retro-gamer pixel art aesthetic. I booted up Aseprite and got to work. I started making dedicated icons for both my theme-toggle switch, links, and more. I switched the font to the aptly chosen Jersey25 and Pixelfy-sans. No shortage of magenta too, that got added whoever I could fit without burning out someone's eyeballs, sorry not sorry.

I changed my resume to be better than a basic PDF implementation. Curated directly for the site and tweaked aesthetically to match in a way that's easy to read but stylish. Added some cute neon colours to the socials page. The posts section was an afterthought but spoiler alert, here we are writing out the reason for its existence I guess.

Getting Artsy

A long time ago my friend gifted me Aseprite, which was one of the best things he could've done. Pixel Art was never my forte but as of recently I've fallen involve with making silly sprites.

Material-UI toggle switches are cool but I wanted my own cute switch. So went and made one. I then went on to make more miscellaneous sprites for funnies when it occurred to me that it would be really cool if they could bounce around in the background randomly. Who doesn't love boba?

The Final Result

I'm so happy and proud to show my site in it's full glory. It was long overdue and a long time coming. It taught me a lot about modelling and art rather than coding surprisingly. To reward myself I went out and bought my first domain, donlaliberte.dev, which was like a rite-of-passage to me. I definitely want to add more to the site, but for now this marks a first step for me as a developer. Hope y'all enjoyed reading my yappage.

Top comments (0)