About this page
My personal site designed & developed using HTML, CSS, and Bootstrap. Features a simple one-page review of my past work, my online presence, my taste in music, and my travel history. The design was intended to be clean and simple in nature, where the reader can quickly and easily read it and learn about myself and my work. I hope to add more to this page in the future!
Feel free to use this as a template for your own sites, and see the evolution of the design below.
I'm continuing the evolution of this website to be more professional and conveying the important information as simply and cleanly as possible.
- I updated the typography to Courier (serifs) and removed lowercasing to take on a more professional look.
- The landing page was overwhelming and a poor mobile screen experience, with the huge picture of me and huge header. So, I made the text and photo size smaller and decreased the width margins in order to fit more content on smaller screens.
- I replaced the icons with emojis, since emojis are always more fun (and have a cleaner pixel ratio).
- I broke down the paragraph on the landing page into smaller bullets and links. Nobody wants to read through a full block of text to get the information they want, so this parses it out for them.
- I removed the Music tab as I haven't been updating my Spotify playlist in a long time.
- I updated the Projects tab to a cleaner table UI to better organize the info (time, technology, description). I also removed a lot of extraneous projects to focus on a smaller amount of ones I am more proud of. Now, much less scrolling is needed.
Decided to make the color scheme a little classier by switching from a purple-white palette to a black-white palette with a blue accent for links. I realized the level of purple can be distracting and overwhelming to look at, and keeping a simpler color set can make the website look more professional.
Decided to change the layout from all the information being on a single view to adding a tabbed menu pointing to each category (travel, music, projects). With all the categories on a single view, I realized it would be overwhelming to view this all at once. Instead, giving the user the option to click the tab to find the specific information they want would be more ideal. For instance, some users may not be interested in my music playlist, so there is no reason to crowd the space with that as well. The website opens with the "about" tab, which has a short bio, a picture of me, and a few links. I figured this would be the most relevant information when people visit. The tabs are also a part of the single page so the user does not have to leave the home page and come back. In other words, the URL will stay the same, providing a quicker and more fluid change of page as one tab fades out and the other fades in. The travel map has also been added via Google Maps, as I had wanted to do earlier.
Updated the look to clearly define and separate each block of information, while keeping the design flat and clean. I removed the highlighting on hover for the different blocks to take away any confusion that they were actually links. Now, only links will highlight on hover.
One of the more initial designs for the site, inspired by a more tabular, blocky format to clearly represent hierarchy of information, but clearly not as visually pleasing with so many lines everywhere that only distract from content.
Things to do
- Add links to past writings, resume, etc.
- Continue to improve the user experience