Building a Modern Portfolio with Vanilla CSS & HTML

When I decided to rebuild my personal website, the first question was: Which framework should I use? React, Next.js, and Astro were all strong contenders. However, for a landing page designed to host my portfolio and a few blog posts, I realized that "Vanilla" was the most powerful choice.

The Power of Pure Web Standards

Using pure HTML5 and CSS3 allows for ultra-fast load times and zero dependency overhead. In the world of AdSense and SEO, "Speed is King." By removing heavy JavaScript bundles, the Time to Interactive (TTI) is virtually instantaneous.

Implementing Glassmorphism

The aesthetic of uiyoung.com relies heavily on Glassmorphism. This effect is achieved through a combination of backdrop-filter: blur(), semi-transparent backgrounds, and subtle borders.

.glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
          

This creates a sleek, premium feel that doesn't distract from the technical content but rather enhances it, providing a professional "digital workspace" vibe.

Grid Layouts & Responsiveness

CSS Grid has completely changed the way we handle layouts. For the projects section, I used grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)). This single line of code handles everything from a 4-column desktop layout to a 1-column mobile view seamlessly.

Why This Matters for AdSense

Google AdSense values User Experience (UX). A site that is easy to navigate, fast to load, and visually consistent has a much higher chance of approval. Moving away from "link-tree" style pages to content-rich, custom-coded environments is the first step toward building a high-value digital asset.