December 22, 2021
Welcome to andrewrodebaugh.dev! This is my personal website that I have been working on for quite a bit to help advertise myself/been using the experience of making this site to try out new web frameworks and libraries. So this is post will be briefly going over how I created/designed this site.
I think when creating a personal site the best thing is to give it a bit of personality because at the end of the day visitors of your site are trying to learn a bit about you as a person. And if like me you are trying to sell your services it's great to give them an idea of your skills as a programmer/designer. So that was my initial goal when setting out creating this website... how can I create an experience that leaves people with a good first impression?
I went through a few iterations of the website design but it always had a touch of inspiration from the Apple website (if that was not obvious from the rounded corners and scrolling animations). Always loved how the team is able to every time nail this fun and futuristic vibe throughout the website.
If you're a friend of mine you are aware of my excesive emoji usage... and in website design it's just an easy way to add some fun to design. To help with consistensy of emoji styles across browsers/operating systems I used Twitter's awesome library Twemoji.
The color pallete for the gradient background was based on the colors seen in the sky because look nature is stunning and wanted to give a bit more life to my design.
I wanted the projects that I am very proud of to be the center of attention. I am eventually planning to swap them out every so often depending on what personal projects I've been working on recently. But the two I picked inititally were Mirror Journal and Spotify Music Player because they are visually interesting and have a wide audience of potential users. Also it's always good to back claims in skills with evidence.
Recently I have fallen in love with React.js how it makes it super easy to make reusable and reactive components. Pairing it with Next.js makes it super easy to make the site super fast and easy to maintain content. Especially this blog where I can simply create Markdown files in a folder and it will generate a page for it.
For styling the site I used Tailwindcss the infamous CSS framework. In my personal preferance, I've found it an easy and time saving framework to use.
Animation wise I found the React Awesome Reveal library which uses the Intersection Observer API and CSS animation library to create cross compatable scroll animations. The library is component based which made it quick and easy to throw in.
For hosting I am using the super amazing Vercel! I have a private GitHub repo that I simply have to push my changes to it and before I know it the site is rebuilt/live. And since they are the creaters of Next.js it ends up being well optimized without much extra work.
These are the amazing teams/people who's resources and services I used in this site:
