How I Created My Personal Website
In this day and age, having a personal website as a software engineer is pretty much a must. It can give people a quick rundown of who you are and what you like to do, whilst showing off the skills you possess in a much more personal fashion than a social media site like LinkedIn. As I am beginning to start my journey as a senior at Make School, I decided that now would be the perfect time to create my own. What’s even better is that I was able to create this as a final project for one of my classes! In this post, I am going to walk you through my creation process and discuss the challenges and decisions I faced along the way. Alright, let's jump in!
Planning
I am a BEW (Backend Web) developer, so designing and creating a mostly frontend site is not necessarily my cup of tea. I am more than capable of doing frontend work, I just far more prefer doing backend tasks in contrast. One big reason for this is the design aspect. I can usually picture how I want something to look just fine in my head, but translating that to an actual product is where it starts to get tricky for me. I have a want to make things exactly like how I envision it in my head. This isn’t inherently a bad thing, but it often times causes me to focus on, say an element of a webpage, for an extended amount of time which hinders the overall amount of time it takes me to complete a project. Even this is still not usually a bad thing; hard work often makes for some great results. However, It’s when the element that is being worked on has a problem so small, that only I, the designer of the page could ever even notice it. That is when spending too much time on a problem slows my progress, kind of like getting stuck on a question for a math test, and not moving on to any other questions until it’s solved. Nevertheless, I always end up getting done on time and being proud of my work, so in reality, I do not have much to complain about.
My relationship with website design aside, I first wanted to try and find some inspiration on the web for what I might want my own site to look like. I eventually stumbled upon this article, titled “21 unique personal website examples in 2021”. Scrolling through the list, number four immediately caught my eye.
I love the pure simplicity of the single-paged site. It’s contents are, quite literally, black and white (with a nice blue accent, of course) with any information any future employer would ever need being laid out front and center. In addition, the nice and smooth animations just make the site that much easier to enjoy. You can check Ojieame’s site out for yourself here.
I knew that I wanted this site to be the main inspiration for my own, now I just needed a method of building it. Through the GitHub student developer pack, I was able to get a license of bootstrap studio. This app has greatly sped up my work on previous frontend-related projects so it seemed like a no-brainer to use it now.
Getting to Work
Now that I knew how I was going to build my site, it was time for the rubber to hit the road. The top of the page is what I ended up spending most of my time on. I wanted to convey the clean and put together look like Ojieame’s site, while at the same time being original with my design. I started first with the picture and then built everything else off of that. I graduated high school last year, so I had a bunch of senior photos lying around just waiting to be used for something. Below is the original photo:
What’s already here is great, but I felt that it needed a little more focus on me as this is a personal site, after all. To remedy this problem I simply loaded the photo into photoshop, blurred and took out the color of the entire background, cropped it, and gave myself some depth with a slight drop shadow.
Much better. The black and white background will really help drive home the dark theme of the site. Now onto everything else. Refer to the next image, showing the final version of this section for the following analysis.
For the NavBar, I wanted to make it as minimalistic as possible. With only two items and a black to transparent gradient, it never gets in the way when scrolling whilst providing easy access for someone to contact me at all times.
Now for the header text that reads “Hey! I’m Jaylen.”. This text is actually animated and cycles through a few similar phrases. Check it out for yourself here. Getting this, along with the paragraph below positioned the way I wanted, turned out to be an oddly difficult task for me that took up much more time than it should have. I could get everything positioned fine on bigger screens, but as the screen size shrunk, the quality of this section did as well. The flexbox setup for these elements was not handling the positioning the way I had intended, so I ended up having to put multiple media queries in to make the section look good on mobile devices. At the end of the day, this site was designed for bigger screens, but knowing that the mobile version is presentable at the very least gives me peace of mind. In the future I wish to revisit this and completely revamp the mobile version, but that is a story for another time.
As for the rest of the site, it was pretty much smooth sailing. I went on to add an about me, recent projects, timeline, and contact section. Bootstrap studio made the contact section especially easy. They have this feature called “Smart Forms”, which is basically a plug and play backend module that allows users to send me emails through the form on my site. So now, in addition to linking to my GitHub and LinkedIn, I am able to offer direct emailing (with optional file uploads) with no time lost on coding the backend. The final thing I added to my site was animations. I made sure to not overdo it, as too many animations is arguably worse than none at all. Again, bootstrap studio makes adding animations super easy, allowing me to focus more on how they will look and go together, and less on what the proper syntax/name is ect.
Deployment was also very simple. I connected my custom domain to GitHub pages in a previous class, so as long as the current version of my site was pushed to the online repository, everything was live. Note that GitHub pages only works well with sites that are frontend only (HTML, CSS, JS). Because of this, if I were to ever add any backend functionality, I would need to take a different route for deployment like Heroku or DigitalOcean. Regardless, my site is currently live over at https://jayjay.me.
Moving Forward
When all is said and done, I am really happy with how my personal website turned out. There are a couple of things I want to add in the future, however. Taking inspiration from the personal website of one of my instructors, Dani Roxberry (linked here), I want to add progress bars for all the languages and technologies that I know, with the progress bar indicating how well I know that language or technology. Additionally, I would like to add a section that highlights some of the blog posts that I have written. My plan is to add this once I get a few more posts under my belt, making sure that the section will be of significance.
So, there you have it, that is how I created my own personal website. I will be updating this site frequently as I continue my journey as a software engineer. Again, in case you missed it, you can check my site out here. Have a good one!
Update — 9/23/2021
Some time has passed now and I have gotten the chance to reflect on how this page looks. After careful consideration, I have decided to remove the SmartForms “Contact Me” section in favor for a simple email button right next to the existing GitHub and LinkedIn ones.
Additionally, I also added in a new section to showcase the articles that I have written, including this one!