apollo

Recreating my Website

Hello, and welcome to my first ever blog post where I'll be going through the process of recreating my website (for the 4th time).

To preface, I used to really like using component libraries to create my websites. For my old website, I tried out the Ant Design library.

What I noticed during its development was that I felt restricted in my ability to customize and design my website in my vision.

Of course, these libraries are great for quickly prototyping designs and saving developers' time from reinventing common components, but for this use case, they definitely felt like they lacked the personal expression that made a website yours.

The Solution

To make this website feel like mine, I knew I had to make all the components from scratch.

I got started by using my 1 month trial of Sketch and creating a design which you can check out here.

The Project Page

On a lot of websites including my own, I see that projects are typically layed out in a generic grid.

I found that in this way, it was difficult to gauge the features of each project and you could easily miss some gems by not inspecting each one.

My solution to this was to have a featured project section, where you can showcase your best project and all its cool features that used to be hidden behind a vague summary.

The Skills Page

I think that a lot of people like to list all the skills they have, but this can quickly become overwhelming to a reader.

To really show off my own unique skillset, I chose to only show the skills that I'm passionate about in an easy to digest manner through characteristic icons.

In addition, I also added my take on each technology to really give it a personalized feel and additional insight on why I enjoy using it.

The Career Page

I had this really cool idea of creating an interactive timeline to display the different roles I've taken on so far in my life.

Not only is a timeline interactive and easy to process, it was a great way to showcase my frontend ability in creating a unique component.

I think this was an interesting component to make because it was something different and I had to account for things like responsiveness in this age where mobile users are extremely prominent.

Using Next.js

I really enjoyed using Next.js for this project and I'm looking forward to exploring more of its features and would definitely use it again in the future.

Some great features I took advantage of was their TypeScript and Sass support, their static generation, and deploying was so easy it only took 2 minutes!

And having coming from create-react-app, my favourite feature was their file-system routing for its effectiveness and simplicity, instead of having to use react-router.

Creating the Icon

I based my icon off of my favourite boy Apollo, but I had to turn him into a grey shiba because I didn't plan ahead and his sunny vibes didn't fit well with the rest of my website.

Unfortunately, my legally obtained version of Illustrator stopped working, so I decided to use an open source program called InkScape.

For a free program, it wasn't too bad to use and it got the job done, although there were a lot of bugs that slightly hindered my productivity.

The Result

Overall, I'm happy with the way my website turned out and I'm hoping to stick with this one for a while (until I get bored).

I definitely achieved my goals of building something that aligned with my personal vision and I learned a lot of new technologies along the way.

I'm also happy with the way I structured my components which was a huge benefit towards reusability, consistency, and maintainability throughout the site and is something I will continue to apply towards my future work.

Comments