When I first created this website back in August 2023, I did it for learning purposes and I wasn't expecting to use it that long and being used by others.
Becouse the reason of me creating this site and the one I currently use at TbnMC Minecraft server, was to learning how things were worked. And while creating this website I wasn't even able to center a div properly lol.
But since then, my capabilities on Website designing and developing has improved and I wanted to get rid of that old looking design and create a fancy new website that shows off my design capabilities to others.
And while I was thinking about what could I do on this site, we got a client that wanted an futuristic looking website from us for a club project and when that happened I found out a UI component library named Aceternity UI.
And that component library was a goldmine for us. Becouse it had everything our client has wanted from us and best part all those components were open sourced! Which means we can easly copy them, modify in order of our needs and use them.
And after we finish our clients website and get a positive feedback from them, I decided to "get some ideas" from their website and after some time I got an idea of the design I wanted.
And I went on search again for right components and after finding them I started to rebuild this website on strong design schemes.
Landing page
Old version of that landing page was very simple. It just had an section with my photo, name and short bio with some links with blogposts of mine following it. It looked good actually it had what it needed. A simple website.
I completely redesigned the landing page to have a much futuristic look. Firstly I relocated the introduction part with some tiny design changes. After that I put my focus on the background. I used the "Background Boxes" component from Aceternity UI and modified the way it works and looks. And after that I got this beautiful look.
After that I started to work on a header bar for to make navigating around site much easier. At the first I tried to use the old one with a slight blur and rounded corners in it. But it did look awfull and out of place. So I come up with another header design only for this page.
And here it's. With a much simple and better design.
Pages header
But after designing a new header for this page I wanted to improve the old one a bit. To be honest I wanted it to be a navigation bar between pages as bread cumbs. I know that doesn't sounds right but it actually works great. Here it's.
This header design is very simple and blends in with the page as you scroll. It let's you navigate between pages. For example you can go to other pages just by clicking at the current page text.
I haven't finished it yet but when I do, you can click to the current page text and get an list of other pages you can navigate in a dropdown. Or just click into the site title and go back to homepage.
And of course I've added an button that leads to my RSS Feed to make my content more reachable.
Landing Page posts section
And of course I haven't forgotten the posts section on my landing page. After redesigning the main section of the landing page, this part didn't looked good so I've made some changes.
Firstly I switched to a card based design with a little effort and it turned up much better than I expected.
And in the end here is the old site and new site both open side by side.
And that's it for this post. Please let me know what you think about those changes via e-mail or Mastodon. If you have any other ideas about design I would like to hear them out tho.
If you don't know, you can access the source code of this website here. So without any furter words, see you next time!
Reply via E-Mail
Thank You!
02.05.2024 - 49/100