Skip to main content
Back to all posts
Blog Update

Hello World: Building yuerei.dev

Welcome to my personal site! A look behind the scenes at how I built my portfolio and blog using Next.js, Velite, Tailwind CSS, and shadcn/ui.

2 min read

Welcome to my corner of the web! After spending time tinkering with design ideas, tweaking glassmorphic tokens, and breaking code blocks, yuerei.dev is officially live.

This space will serve as my personal digital garden where I share my journey through competitive programming, cybersecurity / CTF writeups, web development, and personal side projects.


Why Next.js & Velite?#

When building this site, I wanted a solution that was blazingly fast, type-safe, and effortless to author content for.

Here is what powers the stack:

  • Next.js (App Router): Provides server-side rendering, static generation, and sleek routing.
  • Velite: A lightweight, type-safe content engine that validates frontmatter schemas with Zod and compiles MDX seamlessly at build time.
  • Tailwind CSS & shadcn/ui: Offers custom design tokens, dark mode compatibility, and fluid UI components.

Type-Safe Content Engine#

One of the best features of Velite is having automatic TypeScript inference for every blog post. Instead of worrying about missing fields in frontmatter, Velite catches errors during the build step.

Here is a quick look at how static post data is loaded and rendered:

import { posts } from "@/.velite"
 
// Process posts at module load time for maximum performance
const publishedPosts = posts
  .filter((post) => post.published)
  .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
 

"Continuous learning isn't just about reading documentation—it's about building, breaking things, and documenting the process."


What to Expect Next#

Moving forward, I'll be publishing articles covering:

  1. CTF Writeups: Solutions and OSINT/web security techniques learned from CTF competitions.
  2. Algorithm Notebooks: Deep dives into data structures, dynamic programming, and competitive coding problems.
  3. Project Development: Updates and technical architecture notes on utilities like LumInstaller.

Thanks for dropping by! Feel free to explore the site, connect on Discord, or check out my open-source projects on GitHub.