devla.dev

In the summer of 2024 I finally decided to create my own personal website and portfolio. I wanted to have a place where I could showcase my projects and publish my existence to the world.

Features

• ✅ Projects, Experiences, Skills, Repositories, Favorite Songs and Blog pages.
• ✅ Blog posts statically generated from markdown.
• ✅ Real-time data like Discord status and currently playing song.
• ✅ Dark & Light mode with local storage persistence.
• ✅ Fully responsive design.
• ✅ SEO optimized.
• ✅ Self-hosted on my home server.

Tech Stack

Framework and Styling

• Next.js: I was torn between Next.js and Astro for the framework. While Astro offers a zero-JavaScript with incredibly fast SEO performance, I still wanted to have some real-time data on my website. Thankfully the new /app router in Next.js 12 allows for a hybrid approach where I can have both static and dynamic pages. It also helped that I already had some experience with the old /pages Next.js & React.
• Tailwind CSS: For styling, I opted for Tailwind CSS. This is my first time using Tailwind, I used to write my own CSS or use a full fledged CSS framework like Bootstrap and it was always a headache. I wanted to try something new and I'm really happy with the results.

Site Generation

I'm using a mix of SSG/ISR/CSR for my website. Non-dynamic pages are statically generated at build time, while dynamic pages like my blog posts are generated at runtime at set intervals. Whilst real-time data like my Discord status and currently playing are fetched client-side.
Blogs are written in markdown and converted into HTML using gray-matter.

API's

• GitHub API & GitTea API: To display my public repositories and their stats.
• Phineas/lanyard: A public API for Discord's Rich Presence. I'm using this to display my current activity on Discord.
• postTop: A custom API/extension I created to track my most listened songs on Youtube.

Hosting

The website is fully self-hosted on my home server using Docker and Nginx. I'm using Cloudflare for DNS and SSL and overall extra security.