Back

Revamping my website's UI/UX

Major Website Revamp

UPLOADED ON

July 27, 2024

WEB DEV TECHNOLOGY
/_astro/pc_home.CeK15rEX.png

Old Website

Here is the old website which very minimal and also lacking in modern UI/UX designs. When I was making this website, it was my first actual try at making a quick blogsite using only the fundamentals tools (HTML and CSS) along with the framework Astro. Since my first year of college already finished and in the coming semester, we’ll get web development subjects, I thought it would be a good time to remake it.
/_astro/pc_home.CeK15rEX.png /_astro/pc_article.B_c76-7e.png
/_astro/cp_home.COcPrz04.jpeg /_astro/cp_article.DvaW6oFJ.jpeg

New Website

Admittedly, I’m not good at the front-end side of development, the most I could do is making a CLI and TUI application that looks decent enough for other tech-savvy people instead of end-users. So I paid my classmate to make a design in Figma (which was taught to us during the first year), and I just had to reference it.
/_astro/new_pc_about.BHgPr-Uy.png /_astro/new_pc_article.BZF_QK6p.png
/_astro/new_cp_home.CUWdi0Zz.png /_astro/new_cp_article.IX0aZCML.png

Technologies Used

I wanted to make things easier myself while also learning some better web dev tools, which led me to using Tailwind CSS. Tailwind had definitely made everything so much easier for me and they even had really documentation.
  • Astro Framework
  • HTML
  • Tailwind CSS
  • Some Typescript (for Astro)
  • Some Alpine.JS (Mobile Navigation Menu)