Attempts

Some of the attempts and plans I made were the following:

  • Add a unique hover effect for key elements
  • Clean up the website a lot and remove distracting elements
    • Blogs should be front and center. They are your focus.
  • Write an about section
  • Clean up the search UI
  • Unify the fonts and modernize them
    • Hero sections need larger ones
  • Blog hero sections should have metadata minimally displayed
  • Revamp the 404 Page
  • Add an animated background with Vanta
  • Fix bug where code blocks are hard to read

Accomplishments

Here is what I did compared to the list.

  • Add a unique hover effect for key elements: Key elements like blog links or search results have this effect. Less important elements like the hamburger menu and the navbar links don’t have this.
  • Clean up the website a lot and remove distracting elements: any other links were removed and added to the About section. It makes more sense for my GitHub to be linked there rather than being in the site footer.
    • Blogs should be front and center. They are your focus: Blogs are now the home.
  • Write an about section: An about section with some links was made.
  • Clean up the search UI: Search UI is easier to read and is modernized.
  • Unify the fonts and modernize them: All fonts use standardized fonts so they work across all devices.
    • Hero sections need larger ones: Hero sections have more weighted fonts and are a good call to action
  • Blog hero sections should have metadata minimally displayed: metadata is more minimally displayed with the title taking the most space.
  • Revamp the 404 Page: 404 page has a unique, neon look
  • Fixed the color scheme for the code blocks so it’s more readable. The scheme is based off of the Atom One Dark Pro theme (I was an Atom user before VSCode. RIP Atom - I loved it so much).

What I couldn’t do:

  • Add an animated background with Vanta: I wanted to have the vanta animations display on the home page in the background. A backdrop filter with a blur effect would be added on top to bring more attention to the content and increase readability. Still, the animated background would provide interest and a pop of color. This will only be on the home page since blogs and other sections should have all the focus diverted to the content itself. I still plan to do this and there is room for improvement.

  • Fix bug where code blocks are hard to read: I was not able to fix this. I am still debugging this issue and trying to find a solution to this since a lot of blogs have code elements. Don’t worry though, I will get it fixed with certaintity. I just need to debug more. On the bright side, it provides a sector for improvement!

    • NOTE: I did fix this