Project POWER
Project POWER - Repo
POWER stands for Personalized Organization of Works, Experiences and Reflections
Personal Website huh?
I did it! I finally have my own custom-designed personalized website. I have dreamt about this since the first day I started learning web dev almost a year ago during my time on Dollar Finder. I could not stop thinking about the endless possibilities to design and create stuff, and the kind on content I could put on the website. I guess I alwayed wanted a way to channel my creative desires, be it in the from of a tiny no-longer funtional YouTube channel (RIP) or just experimenting with a camera.
Choosing the right tools
During the winter vacation of 2021, I heard from a friend about this framework called Next.js and how it takes an already powerful framework like React to the next level. I looked it up and learnt that it has some interesting features that solve the key pain points I faced during my time on React. The insanely complicated React router can now be replaced with a simple file-system based paging, the easy to write dynamic routing, and best of all - image optimization. I also felt that this would be an appropriate time to test out SASS and up my CSS game (If you didn't know, I enjoy designing in CSS). In that way, I set out to build a minimalistic, fast and efficient website in the shortest time I could.
Brace for some more technical jargon
Content for the About page and all the Project articles writted in markdown and embedded html is stored in their own separate markdown files. These markdown files are then parsed using unified and its plugins, converted to html and inserted into their respective pages. The images (sadly, compressed versions) are currently stored in the codebase on github. Themeing, formatting and styling is done using SASS modules. Harnessing the Next.js' power of Static Site Generation (SSG), all the HTML pages are pre-rendered at build time, ready to be reused and served upon each request.
At this point, there was still some room for a potential "WOW" factor on the website. That resulted in me spending about an hour on animating my name at the top left of the header bar. It was totally worth it!
So what's next?
For starters, I need to look into using a Content Delivery Network (CDN) to host images for my Gallery page. This should make my codebase lighter, improve website load time, reduce bandwidth usage on Vercel, and enable me to host and serve a larger quantity of images with efficieny. I'll probably give light-mode theme a try in the process.
I also want to add a "Blog" section to the website; somewhere I can write about stuff in general, you know, the non-technical kind. Maybe I saw a movie and I liked it too much or maybe I hated it to hell and back. Somewhere I can praise and/or rant about something, or just be myself. But there's still a long way ahead for that. Most importantly, I need to learn how to be comfortable and satisfied with the content I put out on the open internet.
Stats, cause why not?
- Project started on March 6th, 2022
- Time taken to build: 20 hours
- Tears of happiness shed: 4
Built using
- Next.js - Written in Next.js 12.0.7
- React.js - Written in React.js 17.0.2
- Remark.js and Rehype.js - Markdown and HTML processors, Part of the Unified collective
- rehype-shiki - rehype plugin for Shiki.js (a really beautiful syntax highlighter)
- SASS - Written using SASS 1.49.9
- Vercel - Hosted on Vercel
Manifested by
- Yeluri Ketan - Undergraduate, Computer Science, NUS '24