Making robert.krivelis.com

99 performance screenshot

I resdesigned and redeveloped my website for better performance, and for it to look really cool.

Step 1: Design

I saw this design on dribbble and loved it, so I started using it as a base for my new site. Just look at those animations!

I opened figma and started sketching out what it would look like on different sites. I enjoyed using Midjourney and Photopea for creating the assets. The icon of myself was a big improvement from my previous site which had a photo of the real me (how creepy!! 🫣😋)

Why?

There were three main objectives I wanted to accomplish by making this website

  • 1. Have a stronger grasp of css animations.
  • 2. Gain more experience developing with Vue 3/ Nuxt 3 and static site generation.
  • 3. Improve my design skills.
I ended up doing so much more than I set out to! I did all the art and design myself, such as creating a logo using the AI tool (midjourney), sketching out the concept with figma. Honestly it was fun and I learned so much from playing around here that I wouldn't be able to do during work projects.

What was wrong with the old site?

There were so many things I wanted to fix. check out the previous design here

Notice how the page stutters and rearranges content as it's loading? Notice how the blog css is completely and entirely broken? This initial website was actually pretty cool because you could post a python jupyter notebook as a blogpost and it would automatically generate the CSS and everything for it to turn into a post. This was thanks to fastpages, a now deprecated project. Because it relied on a version of jekyll to build that netlify no longer supported, new site builds would no longer create the blog posts properly, prompting me to upgrade my site.

How did it turn out?

I took a small problem of my blog breaking and made it into a more fun one, where I fixed so many things that nagged me about the first site. The first site? no dark mode. This site does dark mode based on your initial color-preference-scheme (browser dark mode setting). Developing on it late at night doesn't sear my retinas :). Making any changes to the formatting of a blogpost is simple because it's just HTML and CSS, no longer a jupyter notebook.

Another nice thing is that I can host on a wider variety of sites and modes. Because it's simply a Nuxt 3 project, this can run as a full fledged application with a node.js server (built from a docker container on fly.io) or just a regular statically hosted site as it is now.

Contact me..?

This is a static site, so where does the contact me info go? It goes through a AWS lambda that connects to AWS SES(simple email service) and sends me fanmail whenever someone submits a message. It's simple and effective!

Challenges and lessons learned

Implementing dark mode at first was a goal of this site so that it would look good on all devices. Thinking it would be an easy feat, I jumped straight in. Realistically, I had to style the whole site twice, and think about more things than regular when styling, such as inverting the colors of icons in dark mode! This was a pretty ambitious undertaking in the amount of time spent, but I learned so much about styling and frontend work especially that it was incredibly worthwhile.