diff --git a/.github/workflows/develop.yml b/.github/workflows/develop.yml
index 748fb5c..106d52d 100644
--- a/.github/workflows/develop.yml
+++ b/.github/workflows/develop.yml
@@ -2,7 +2,7 @@
 #
 # To get started with Nuxt see: https://nuxtjs.org/docs/get-started/installation
 #
-name: Deploy Nuxt site to Pages
+name: "[DEV] Deploy Nuxt site to GitHub Pages"
 
 on:
   # Runs on pushes targeting the default branch
diff --git a/.github/workflows/prod.yml b/.github/workflows/prod.yml
index 00992c6..162230f 100644
--- a/.github/workflows/prod.yml
+++ b/.github/workflows/prod.yml
@@ -2,7 +2,7 @@
 #
 # To get started with Nuxt see: https://nuxtjs.org/docs/get-started/installation
 #
-name: Deploy Nuxt site to Pages
+name: "[PROD] Deploy Nuxt site to GitHub Pages"
 
 on:
   # Runs on pushes targeting the default branch
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..de6e88a
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,306 @@
+# Changelog
+
+All notable changes to the Arckie Jadulco Portfolio project will be documented in this file.
+
+---
+
+## [Unreleased]
+
+### Phase 1: Design System Foundation
+
+#### Added
+- **`app/assets/css/main.css`** - Core design system with Tailwind CSS 4
+  - Custom color palette (Soft Muted Dark theme)
+    - `--color-bg-primary: #1a1a1f` (deep charcoal)
+    - `--color-bg-secondary: #242429` (cards/sections)
+    - `--color-bg-tertiary: #2d2d33` (hover states)
+    - `--color-text-primary: #e8e6e3` (warm off-white)
+    - `--color-text-secondary: #9d9a95` (muted gray)
+    - `--color-text-muted: #6b6965` (subtle gray)
+    - `--color-accent-primary: #c9a87c` (warm gold/amber)
+    - `--color-accent-secondary: #8fa3a8` (soft sage/teal)
+    - `--color-border: #3a3a40` (subtle borders)
+  - Font families: Playfair Display, Source Sans 3, JetBrains Mono
+  - Custom animations: fade-in, slide-up, float, typing, blink
+  - Custom box shadows: soft, glow
+  - Base layer styles (scrollbar, selection, focus states)
+  - Component utilities: container-narrow, heading-display, heading-section, text-body, btn-primary, btn-secondary, card, link-underline, grain-overlay, reveal classes
+  - Page transition CSS
+
+- **`app/app.config.ts`** - Nuxt UI v4 theme configuration
+  - Primary color set to amber
+  - Secondary color set to slate
+  - Neutral color set to stone
+
+#### Modified
+- **`nuxt.config.ts`**
+  - Added CSS file to `css` array
+  - Added `colorMode` config (dark mode default)
+  - Added `@nuxtjs/google-fonts` module
+  - Configured Google Fonts: Playfair Display, Source Sans 3, JetBrains Mono
+
+#### Dependencies Added
+- `@nuxtjs/google-fonts` - Google Fonts integration
+
+---
+
+### Phase 2: Layout and Navigation
+
+#### Added
+- **`app/layouts/default.vue`** - Default layout wrapper
+  - Grain texture overlay (decorative)
+  - Ambient background glow with radial gradients
+  - Skip-to-content accessibility link
+  - Header, mobile menu, and footer component integration
+  - Mobile menu state management
+
+- **`app/components/TheHeader.vue`** - Fixed header component
+  - Logo/brand mark ("AJ." with accent dot)
+  - Desktop navigation with 6 links (About, Skills, Projects, Experience, Blog, Contact)
+  - Mobile menu toggle button (hamburger icon)
+  - Scroll detection for background blur effect
+  - Hover animations on nav links (underline effect)
+
+- **`app/components/TheMobileMenu.vue`** - Full-screen mobile menu
+  - Teleported to body for proper stacking
+  - Backdrop blur and dark overlay
+  - Close button (X icon)
+  - Navigation links with staggered animation
+  - Keyboard accessibility (Escape to close)
+  - Body scroll lock when open
+  - Social links section
+
+- **`app/components/TheFooter.vue`** - Footer component
+  - Border-top separator
+  - Dynamic copyright year
+  - Social links with icons (GitHub, LinkedIn, Twitter)
+  - Hover color transitions
+
+#### Modified
+- **`app/app.vue`** - Wrapped NuxtPage with NuxtLayout
+
+---
+
+### Phase 3: Reusable UI Components
+
+#### Added
+- **`app/components/ui/SkillCard.vue`** - Skill display card
+  - Props: name, icon, level (expert/advanced/intermediate)
+  - 3-bar level indicator
+  - Hover border and shadow effects
+
+- **`app/components/ui/ProjectCard.vue`** - Project showcase card
+  - Props: title, description, tags[], image, demoUrl, repoUrl, featured
+  - Aspect-ratio image area with placeholder
+  - Hover overlay with demo/repo link buttons
+  - "Featured" badge for highlighted projects
+  - Spans 2 columns when featured
+
+- **`app/components/ui/TimelineItem.vue`** - Experience timeline entry
+  - Props: title, company, period, description, technologies[], isLast
+  - Vertical timeline with connecting line
+  - Dot indicator with accent border
+  - Period badge and technology tags
+
+- **`app/components/ui/BlogCard.vue`** - Blog post preview card
+  - Props: title, description, date, slug, readingTime, tags[]
+  - Formatted date display
+  - 2-line clamped description
+  - Tags with # prefix
+  - "Read article" indicator on hover
+
+---
+
+### Phase 4: Home Page Sections
+
+#### Added
+- **`app/components/sections/HeroSection.vue`** - Full-height hero
+  - Floating background blobs with animation
+  - Typing animation cycling through roles
+  - CTA buttons (View My Work, Get In Touch)
+  - Animated scroll indicator
+
+- **`app/components/sections/AboutSection.vue`** - About section
+  - 2-column grid (image | content)
+  - Floating code snippet card
+  - Bio paragraphs
+  - Stats grid (Years, Projects, Clients)
+
+- **`app/components/sections/SkillsSection.vue`** - Skills section
+  - 3-column category grid (Frontend, Backend, DevOps)
+  - Uses SkillCard components
+  - Categorized skill listing
+
+- **`app/components/sections/ProjectsSection.vue`** - Projects section
+  - 2-column project grid
+  - 6 placeholder projects (2 featured)
+  - Uses ProjectCard components
+  - "View More on GitHub" button
+
+- **`app/components/sections/ExperienceSection.vue`** - Experience section
+  - Sticky header with download resume button
+  - Timeline layout with 4 entries
+  - Uses TimelineItem components
+
+- **`app/components/sections/ContactSection.vue`** - Contact section
+  - Contact info cards (Email, Location, Availability)
+  - Contact form with validation
+  - Success/error states
+  - Social links reminder
+
+- **`app/pages/index.vue`** - Main portfolio page
+  - Assembles all section components
+  - SEO meta tags configured
+
+#### Removed
+- **`app/pages/[...slug].vue`** - Removed catch-all route
+
+---
+
+### Phase 5: Blog System
+
+#### Added
+- **`app/pages/blog/index.vue`** - Blog listing page
+  - Back to home link
+  - Page header with description
+  - Posts grid using BlogCard components
+  - Empty state for no posts
+
+- **`app/pages/blog/[slug].vue`** - Blog post detail page
+  - Dynamic routing by slug
+  - 404 handling for missing posts
+  - Post header with meta, title, description, tags
+  - Prose styling for markdown content
+  - SEO meta tags from post data
+
+- **`content/blog/hello-world.md`** - Sample blog post
+  - Introduction post with personal story
+  - Demonstrates markdown features
+
+- **`content/blog/building-with-nuxt-4.md`** - Technical blog post
+  - Tutorial-style content
+  - Code examples and best practices
+
+#### Modified
+- **`content.config.ts`** - Added blog collection
+  - Schema with title, description, date, tags, readingTime, image
+  - Source path set to `blog/**`
+
+#### Removed
+- **`content/index.md`** - Removed demo content
+- **`content/about.md`** - Removed demo content
+- **`app/components/Alert.vue`** - Removed demo component
+- **`app/components/Counter.vue`** - Removed demo component
+
+---
+
+### Phase 6: Polish and Optimization
+
+#### Added
+- **`app/plugins/scroll-reveal.client.ts`** - Scroll reveal animations
+  - IntersectionObserver-based reveal
+  - Adds `.is-visible` class on scroll
+  - Re-observes on route changes
+
+- **`public/resume.pdf`** - Placeholder resume file
+
+#### Modified
+- **`nuxt.config.ts`**
+  - Added page transitions (`name: 'page'`, `mode: 'out-in'`)
+  - Added SEO meta tags (title, description, theme-color)
+  - Added Open Graph meta tags
+  - Added Twitter card meta tags
+  - Set HTML lang attribute to 'en'
+  - Added favicon link
+
+---
+
+### Phase 7: Tailwind CSS 4 Preflight Fix
+
+Tailwind CSS 4 uses native CSS cascade layers. The `@layer components` block has lower cascade priority than the utilities layer, so preflight resets (`color: inherit`, `padding: 0`, `border: none`, `font-size: inherit`, `font-weight: inherit`) were overriding custom component classes on `<a>`, `<button>`, and heading elements. Migrating to `@utility` blocks (highest priority layer) resolves these specificity conflicts.
+
+#### Modified
+- **`app/assets/css/main.css`** - Migrated component classes to `@utility` blocks
+  - **Typography** (moved to `@utility`):
+    - `heading-display` — display heading with Playfair Display, clamp sizing
+    - `heading-section` — section heading with Playfair Display
+    - `text-body` — body text with Source Sans 3
+    - `text-body-lg` — large body text variant
+  - **Buttons** (moved to `@utility` with nested `&:hover`):
+    - `btn-primary` — accent background, hover glow + lift
+    - `btn-secondary` — bordered, hover accent color + lift
+  - **Links** (moved to `@utility` with nested `&::after` and `&:hover`):
+    - `link-underline` — animated underline on hover
+  - **Overlay** (moved to `@utility`):
+    - `grain-overlay` — fixed noise texture overlay
+  - **Layout** (moved to `@utility` with responsive CSS custom properties):
+    - `container-narrow` — max-width container with responsive padding via `--container-padding` (1rem → 1.5rem at 640px)
+    - `section-spacing` — vertical padding via `--section-pt` / `--section-pb` (4rem → 6rem at 640px → 8rem at 768px)
+  - Added `:root` responsive custom properties block for breakpoint-dependent values used by `@utility` blocks (since `@utility` cannot contain `@media` queries directly)
+
+#### Removed
+- `.card` class — unused in any Vue template (components use inline Tailwind utilities instead)
+
+#### Kept in `@layer components`
+- `[id] { scroll-margin-top }` — attribute selector, no preflight conflict
+- `.reveal` / `.reveal.is-visible` / `.reveal-delay-*` — compound selectors driven by JS IntersectionObserver, applied to `<div>` elements with no preflight conflict
+
+---
+
+## Notes for Reviewer
+
+### Suggested Commit Messages (in order)
+
+**Phase 1:**
+```
+feat: configure design system with Tailwind CSS 4 and custom tokens
+
+- Add custom color palette (Soft Muted Dark theme)
+- Configure typography with Google Fonts
+- Add custom animations and component utilities
+- Set dark mode as default
+```
+
+**Phase 2:**
+```
+feat: add base layout with header, footer, and mobile navigation
+
+- Create default layout with grain overlay and ambient glow
+- Add fixed header with scroll blur effect
+- Add full-screen mobile menu with keyboard support
+- Add footer with social links
+```
+
+**Phase 3:**
+```
+feat: add reusable UI components
+
+- Add SkillCard with level indicator
+- Add ProjectCard with hover overlay and featured badge
+- Add TimelineItem for experience section
+- Add BlogCard with formatted date and tags
+```
+
+**Phase 4:**
+```
+feat: add home page sections and main index page
+
+- Add HeroSection with typing animation and CTAs
+- Add AboutSection with stats and floating code snippet
+- Add SkillsSection with categorized skill grid
+- Add ProjectsSection with featured projects
+- Add ExperienceSection with timeline layout
+- Add ContactSection with form validation
+- Create index.vue assembling all sections
+```
+
+**Phase 5:**
+```
+feat: add blog system with Nuxt Content v3
+
+- Configure blog collection with schema in content.config.ts
+- Add blog index page with posts grid
+- Add blog post detail page with prose styling
+- Create sample blog posts (hello-world, building-with-nuxt-4)
+- Remove demo content and components
+```
diff --git a/app/app.config.ts b/app/app.config.ts
new file mode 100644
index 0000000..a09fd56
--- /dev/null
+++ b/app/app.config.ts
@@ -0,0 +1,10 @@
+export default defineAppConfig({
+  ui: {
+    // Set primary color to our warm gold/amber accent
+    colors: {
+      primary: 'amber',
+      secondary: 'slate',
+      neutral: 'stone',
+    },
+  },
+})
diff --git a/app/app.vue b/app/app.vue
index 0acd39e..06ef1a5 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,4 +1,6 @@
 <template>
   <NuxtRouteAnnouncer />
-  <NuxtPage />
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
 </template>
\ No newline at end of file
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
new file mode 100644
index 0000000..add6234
--- /dev/null
+++ b/app/assets/css/main.css
@@ -0,0 +1,342 @@
+@import "tailwindcss";
+
+/* =========================================
+   Design System - Tailwind CSS 4
+   Arckie Jadulco Portfolio
+   ========================================= */
+
+@theme {
+  /* Color Palette - Soft Muted Dark */
+  --color-bg-primary: #1a1a1f;
+  --color-bg-secondary: #242429;
+  --color-bg-tertiary: #2d2d33;
+  --color-text-primary: #e8e6e3;
+  --color-text-secondary: #9d9a95;
+  --color-text-muted: #6b6965;
+  --color-accent-primary: #c9a87c;
+  --color-accent-secondary: #8fa3a8;
+  --color-border: #3a3a40;
+
+  /* Font Families */
+  --font-display: "Playfair Display", ui-serif, Georgia, Cambria, serif;
+  --font-body: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
+
+  /* Custom Animations */
+  --animate-fade-in: fade-in 0.6s ease-out forwards;
+  --animate-slide-up: slide-up 0.6s ease-out forwards;
+  --animate-float: float 6s ease-in-out infinite;
+  --animate-typing: typing 3.5s steps(40) infinite;
+  --animate-blink: blink 1s step-end infinite;
+
+  /* Custom Box Shadows */
+  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.3);
+  --shadow-glow: 0 0 30px rgba(201, 168, 124, 0.15);
+}
+
+/* Keyframe Definitions */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+@keyframes typing {
+  from, to {
+    width: 0;
+  }
+  50% {
+    width: 100%;
+  }
+}
+
+@keyframes blink {
+  from, to {
+    border-color: transparent;
+  }
+  50% {
+    border-color: var(--color-accent-primary);
+  }
+}
+
+/* =========================================
+   Base Layer
+   ========================================= */
+
+@layer base {
+  html {
+    scroll-behavior: smooth;
+    background-color: var(--color-bg-primary);
+    color: var(--color-text-primary);
+  }
+
+  body {
+    font-family: var(--font-body);
+    line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  ::selection {
+    background-color: var(--color-accent-primary);
+    color: var(--color-bg-primary);
+  }
+
+  /* Custom Scrollbar */
+  ::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--color-bg-secondary);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--color-border);
+    border-radius: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--color-text-muted);
+  }
+
+  /* Focus styles for accessibility */
+  *:focus-visible {
+    outline: 2px solid var(--color-accent-primary);
+    outline-offset: 2px;
+  }
+}
+
+/* =========================================
+   Responsive Custom Properties
+   Used by @utility blocks that need responsive values
+   ========================================= */
+
+:root {
+  --container-padding: 1rem;
+  --section-pt: 4rem;
+  --section-pb: 4rem;
+}
+
+@media (min-width: 640px) {
+  :root {
+    --container-padding: 1.5rem;
+    --section-pt: 6rem;
+    --section-pb: 6rem;
+  }
+}
+
+@media (min-width: 768px) {
+  :root {
+    --section-pt: 4rem;
+    --section-pb: 4rem;
+  }
+}
+
+/* =========================================
+   Component Layer
+   ========================================= */
+
+@layer components {
+  /* Scroll offset for fixed header */
+  [id] {
+    scroll-margin-top: 5.5rem;
+  }
+
+  /* Scroll Reveal Animations */
+  .reveal {
+    opacity: 0;
+    transform: translateY(30px);
+    transition: opacity 0.6s ease, transform 0.6s ease;
+  }
+
+  .reveal.is-visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .reveal-delay-1 {
+    transition-delay: 0.1s;
+  }
+
+  .reveal-delay-2 {
+    transition-delay: 0.2s;
+  }
+
+  .reveal-delay-3 {
+    transition-delay: 0.3s;
+  }
+
+  .reveal-delay-4 {
+    transition-delay: 0.4s;
+  }
+}
+
+/* =========================================
+   Utility Layer
+   Using @utility so they override preflight's
+   element resets (color: inherit, padding: 0, etc.)
+   ========================================= */
+
+@utility container-narrow {
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--container-padding);
+  padding-right: var(--container-padding);
+}
+
+@utility section-spacing {
+  padding-top: var(--section-pt);
+  padding-bottom: var(--section-pb);
+}
+
+@utility heading-display {
+  font-family: var(--font-display);
+  font-size: clamp(2.5rem, 5vw, 4rem);
+  font-weight: 700;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+  color: var(--color-text-primary);
+}
+
+@utility heading-section {
+  font-family: var(--font-display);
+  font-size: clamp(1.75rem, 3vw, 2.5rem);
+  font-weight: 600;
+  line-height: 1.2;
+  color: var(--color-text-primary);
+}
+
+@utility text-body {
+  font-family: var(--font-body);
+  font-size: 1rem;
+  line-height: 1.625;
+  color: var(--color-text-secondary);
+}
+
+@utility text-body-lg {
+  font-family: var(--font-body);
+  font-size: 1.125rem;
+  line-height: 1.75;
+  color: var(--color-text-secondary);
+}
+
+@utility btn-primary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.875rem 1.75rem;
+  background-color: var(--color-accent-primary);
+  color: var(--color-bg-primary);
+  font-family: var(--font-body);
+  font-weight: 600;
+  font-size: 0.9375rem;
+  border-radius: 0.5rem;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: color-mix(in srgb, var(--color-accent-primary) 85%, white);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-glow);
+  }
+}
+
+@utility btn-secondary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.875rem 1.75rem;
+  background-color: transparent;
+  color: var(--color-text-primary);
+  font-family: var(--font-body);
+  font-weight: 600;
+  font-size: 0.9375rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: var(--color-accent-primary);
+    color: var(--color-accent-primary);
+    transform: translateY(-2px);
+  }
+}
+
+@utility link-underline {
+  position: relative;
+  color: var(--color-text-primary);
+  text-decoration: none;
+  transition: color 0.2s ease;
+
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: -2px;
+    left: 0;
+    width: 0;
+    height: 1px;
+    background-color: var(--color-accent-primary);
+    transition: width 0.3s ease;
+  }
+
+  &:hover {
+    color: var(--color-accent-primary);
+    &::after {
+      width: 100%;
+    }
+  }
+}
+
+@utility grain-overlay {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 1000;
+  opacity: 0.03;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+}
+
+/* =========================================
+   Page Transitions
+   ========================================= */
+
+.page-enter-active,
+.page-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.page-enter-from {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.page-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
diff --git a/app/assets/images/profile-cowboy-hat-1.jpg b/app/assets/images/profile-cowboy-hat-1.jpg
new file mode 100644
index 0000000..9c32a3d
Binary files /dev/null and b/app/assets/images/profile-cowboy-hat-1.jpg differ
diff --git a/app/assets/images/profile-cowboy-hat-1.jpg~RF50941ce.TMP b/app/assets/images/profile-cowboy-hat-1.jpg~RF50941ce.TMP
new file mode 100644
index 0000000..0d3135a
Binary files /dev/null and b/app/assets/images/profile-cowboy-hat-1.jpg~RF50941ce.TMP differ
diff --git a/app/assets/images/profile-cowboy-hat-2.jpg b/app/assets/images/profile-cowboy-hat-2.jpg
new file mode 100644
index 0000000..b7d7673
Binary files /dev/null and b/app/assets/images/profile-cowboy-hat-2.jpg differ
diff --git a/app/components/Alert.vue b/app/components/Alert.vue
deleted file mode 100644
index 17daeb8..0000000
--- a/app/components/Alert.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <div class="alert" :style="{ 'border-color': color }">
-    <slot></slot>
-  </div>
-</template>
-
-<script setup lang="ts">
-const { color } = defineProps({
-  color: {
-    type: String,
-    default: 'orange'
-  }
-})
-</script>
-
-<style scoped>
-.alert {
-  display: flex;
-  align-items: center;
-  padding: 1rem;
-  border: 2px solid;
-  border-radius: 0.5rem;
-  background-color: #fff;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-
-.alert:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
-}
-</style>
\ No newline at end of file
diff --git a/app/components/Counter.vue b/app/components/Counter.vue
deleted file mode 100644
index f68fe61..0000000
--- a/app/components/Counter.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-  <div>
-    <h3>Counter: {{ count }}</h3>
-    <button @click="increment">
-      Increment
-    </button>
-    <button @click="decrement">
-      Decrement
-    </button>
-  </div>
-</template>
-
-<script setup lang="ts">
-const count = ref(0)
-
-const increment = () => {
-  count.value++
-}
-
-const decrement = () => {
-  count.value--
-}
-</script>
-
-<style scoped>
-button {
-  margin: 5px;
-}
-</style>
diff --git a/app/components/TheFooter.vue b/app/components/TheFooter.vue
new file mode 100644
index 0000000..0e738ec
--- /dev/null
+++ b/app/components/TheFooter.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+const currentYear = new Date().getFullYear()
+
+const socialLinks = [
+  {
+    label: 'GitHub',
+    href: 'https://github.com',
+    icon: 'i-lucide-github',
+  },
+  {
+    label: 'LinkedIn',
+    href: 'https://linkedin.com',
+    icon: 'i-lucide-linkedin',
+  },
+  {
+    label: 'Twitter',
+    href: 'https://twitter.com',
+    icon: 'i-lucide-twitter',
+  },
+]
+</script>
+
+<template>
+  <footer class="border-t border-[var(--color-border)] bg-[var(--color-bg-primary)]">
+    <div class="container-narrow">
+      <div class="flex flex-col items-center justify-between gap-6 py-8 md:flex-row">
+        <!-- Copyright -->
+        <p class="text-sm text-[var(--color-text-muted)]">
+          &copy; {{ currentYear }} Arckie Jadulco. All rights reserved.
+        </p>
+
+        <!-- Social Links -->
+        <div class="flex items-center gap-4">
+          <a
+            v-for="link in socialLinks"
+            :key="link.label"
+            :href="link.href"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="flex h-10 w-10 items-center justify-center rounded-lg text-[var(--color-text-muted)] transition-colors hover:bg-[var(--color-bg-tertiary)] hover:text-[var(--color-accent-primary)]"
+            :aria-label="link.label"
+          >
+            <UIcon :name="link.icon" class="h-5 w-5" />
+          </a>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
diff --git a/app/components/TheHeader.vue b/app/components/TheHeader.vue
new file mode 100644
index 0000000..6b750de
--- /dev/null
+++ b/app/components/TheHeader.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+const emit = defineEmits<{
+  'toggle-menu': []
+}>()
+
+const isScrolled = ref(false)
+
+const navLinks = [
+  { label: 'About', href: '#about' },
+  { label: 'Skills', href: '#skills' },
+  { label: 'Projects', href: '#projects' },
+  { label: 'Experience', href: '#experience' },
+  { label: 'Blog', href: '/blog' },
+  { label: 'Contact', href: '#contact' },
+]
+
+onMounted(() => {
+  const handleScroll = () => {
+    isScrolled.value = window.scrollY > 50
+  }
+
+  window.addEventListener('scroll', handleScroll, { passive: true })
+
+  onUnmounted(() => {
+    window.removeEventListener('scroll', handleScroll)
+  })
+})
+</script>
+
+<template>
+  <header
+    class="fixed left-0 right-0 top-0 z-50 transition-all duration-300"
+    :class="[
+      isScrolled
+        ? 'bg-[var(--color-bg-primary)]/80 backdrop-blur-lg border-b border-[var(--color-border)]'
+        : 'bg-transparent'
+    ]"
+  >
+    <div class="container-narrow">
+      <nav class="flex h-20 items-center justify-between">
+        <!-- Logo -->
+        <NuxtLink
+          to="/"
+          class="font-display text-2xl font-bold tracking-tight text-[var(--color-text-primary)] transition-colors hover:text-[var(--color-accent-primary)]"
+        >
+          AJ<span class="text-[var(--color-accent-primary)]">.</span>
+        </NuxtLink>
+
+        <!-- Desktop Navigation -->
+        <div class="hidden items-center gap-4 md:flex lg:gap-8">
+          <template v-for="link in navLinks" :key="link.label">
+            <NuxtLink
+              v-if="link.href.startsWith('/')"
+              :to="link.href"
+              class="link-underline text-sm font-medium tracking-wide text-[var(--color-text-secondary)] transition-colors hover:text-[var(--color-text-primary)]"
+            >
+              {{ link.label }}
+            </NuxtLink>
+            <a
+              v-else
+              :href="link.href"
+              class="link-underline text-sm font-medium tracking-wide text-[var(--color-text-secondary)] transition-colors hover:text-[var(--color-text-primary)]"
+            >
+              {{ link.label }}
+            </a>
+          </template>
+        </div>
+
+        <!-- Mobile Menu Toggle -->
+        <button
+          type="button"
+          class="flex h-10 w-10 items-center justify-center rounded-lg text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-bg-tertiary)] md:hidden"
+          aria-label="Toggle navigation menu"
+          @click="emit('toggle-menu')"
+        >
+          <UIcon name="i-lucide-menu" class="h-6 w-6" />
+        </button>
+      </nav>
+    </div>
+  </header>
+</template>
diff --git a/app/components/TheMobileMenu.vue b/app/components/TheMobileMenu.vue
new file mode 100644
index 0000000..adea177
--- /dev/null
+++ b/app/components/TheMobileMenu.vue
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+const props = defineProps<{
+  isOpen: boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const navLinks = [
+  { label: 'About', href: '#about' },
+  { label: 'Skills', href: '#skills' },
+  { label: 'Projects', href: '#projects' },
+  { label: 'Experience', href: '#experience' },
+  { label: 'Blog', href: '/blog' },
+  { label: 'Contact', href: '#contact' },
+]
+
+// Handle escape key
+const handleKeydown = (e: KeyboardEvent) => {
+  if (e.key === 'Escape' && props.isOpen) {
+    emit('close')
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeydown)
+})
+
+// Prevent body scroll when menu is open
+watch(() => props.isOpen, (isOpen) => {
+  if (isOpen) {
+    document.body.style.overflow = 'hidden'
+  } else {
+    document.body.style.overflow = ''
+  }
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="mobile-menu">
+      <div
+        v-if="isOpen"
+        class="fixed inset-0 z-[60] md:hidden"
+      >
+        <!-- Backdrop -->
+        <div
+          class="absolute inset-0 bg-[var(--color-bg-primary)]/95 backdrop-blur-xl"
+          @click="emit('close')"
+        />
+
+        <!-- Menu Content -->
+        <div class="relative flex h-full flex-col px-6 py-8">
+          <!-- Close Button -->
+          <div class="flex justify-end">
+            <button
+              type="button"
+              class="flex h-10 w-10 items-center justify-center rounded-lg text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-bg-tertiary)]"
+              aria-label="Close navigation menu"
+              @click="emit('close')"
+            >
+              <UIcon name="i-lucide-x" class="h-6 w-6" />
+            </button>
+          </div>
+
+          <!-- Navigation Links -->
+          <nav class="mt-8 flex flex-1 flex-col items-center justify-center gap-5 sm:mt-12 sm:gap-8">
+            <template v-for="(link, index) in navLinks" :key="link.label">
+              <NuxtLink
+                v-if="link.href.startsWith('/')"
+                :to="link.href"
+                class="font-display text-2xl font-semibold text-[var(--color-text-primary)] transition-colors hover:text-[var(--color-accent-primary)] sm:text-3xl"
+                :style="{ animationDelay: `${index * 50}ms` }"
+                @click="emit('close')"
+              >
+                {{ link.label }}
+              </NuxtLink>
+              <a
+                v-else
+                :href="link.href"
+                class="font-display text-2xl font-semibold text-[var(--color-text-primary)] transition-colors hover:text-[var(--color-accent-primary)] sm:text-3xl"
+                :style="{ animationDelay: `${index * 50}ms` }"
+                @click="emit('close')"
+              >
+                {{ link.label }}
+              </a>
+            </template>
+          </nav>
+
+          <!-- Social Links -->
+          <div class="flex justify-center gap-6">
+            <a
+              href="https://github.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-[var(--color-text-muted)] transition-colors hover:text-[var(--color-accent-primary)]"
+              aria-label="GitHub"
+            >
+              <UIcon name="i-lucide-github" class="h-6 w-6" />
+            </a>
+            <a
+              href="https://linkedin.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-[var(--color-text-muted)] transition-colors hover:text-[var(--color-accent-primary)]"
+              aria-label="LinkedIn"
+            >
+              <UIcon name="i-lucide-linkedin" class="h-6 w-6" />
+            </a>
+            <a
+              href="https://twitter.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-[var(--color-text-muted)] transition-colors hover:text-[var(--color-accent-primary)]"
+              aria-label="Twitter"
+            >
+              <UIcon name="i-lucide-twitter" class="h-6 w-6" />
+            </a>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.mobile-menu-enter-active,
+.mobile-menu-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.mobile-menu-enter-from,
+.mobile-menu-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/app/components/sections/AboutSection.vue b/app/components/sections/AboutSection.vue
new file mode 100644
index 0000000..5872cbf
--- /dev/null
+++ b/app/components/sections/AboutSection.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+const stats = [
+  { value: '7+', label: 'Years Experience' },
+  { value: 'USC', label: 'BS Computer Engineering' },
+  { value: '5', label: 'Companies' },
+]
+</script>
+
+<template>
+  <section id="about" class="section-spacing">
+    <div class="container-narrow">
+      <div class="grid gap-6 sm:grid-cols-[2fr_3fr] sm:gap-8 lg:grid-cols-2 lg:gap-16">
+        <!-- Image Column -->
+        <div class="relative">
+          <!-- Main Image Placeholder -->
+          <div
+            class="relative mx-auto aspect-square max-w-[280px] overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-bg-secondary)] sm:mx-0 sm:max-w-none"
+          >
+            <div class="flex h-full w-full justify-center items-start">
+              <UIcon
+                name="i-lucide-user"
+                class="h-24 w-24 text-[var(--color-text-muted)]"
+              />
+              <img
+                src="/assets/images/profile-cowboy-hat-1.jpg"
+                alt="Profile Picture"
+                class="rounded"
+              >
+            </div>
+
+            <!-- Decorative Frame -->
+            <div
+              class="absolute -bottom-4 -right-4 -z-10 h-full w-full rounded-2xl border-2 border-[var(--color-accent-primary)] opacity-20"
+            />
+          </div>
+
+          <!-- Floating Code Snippet -->
+          <div
+            class="absolute -bottom-6 left-0 hidden rounded-xl border border-[var(--color-border)] bg-[var(--color-bg-secondary)] p-4 shadow-[var(--shadow-soft)] sm:block sm:-left-6 lg:-left-12"
+          >
+            <pre class="font-mono text-xs text-[var(--color-text-secondary)]"><code><span class="text-[var(--color-accent-secondary)]">const</span> <span class="text-[var(--color-accent-primary)]">arckie</span> = {
+  role: <span class="text-green-400">"Senior SWE"</span>,
+  focus: <span class="text-green-400">"Backend"</span>,
+  learning: <span class="text-[var(--color-accent-primary)]">true</span>
+};</code></pre>
+          </div>
+        </div>
+
+        <!-- Content Column -->
+        <div class="flex flex-col justify-center">
+          <!-- Section Header -->
+          <p class="font-mono text-sm text-[var(--color-accent-primary)]">
+            // About Me
+          </p>
+
+          <h2 class="heading-section mt-4">
+            Turning ideas into<br />
+            <span class="text-[var(--color-accent-primary)]">digital reality</span>
+          </h2>
+
+          <!-- Bio -->
+          <div class="mt-6 space-y-4 text-body md:text-body-lg">
+            <p>
+              I am and always will be a student. That's not just a mindset—it's how I
+              approach every line of code, every new framework, every problem that lands
+              on my desk. Based in Cebu, Philippines, I've built my career on the belief
+              that learning should never feel like a chore. It should feel like discovery.
+            </p>
+            <p>
+              Currently at Arch Global Services as a Senior Software Engineer, I build
+              backend systems for insurance claims orchestration—Python, Azure Functions,
+              and MSSQL powering workflows that help claims specialists do their jobs better.
+            </p>
+            <p>
+              My journey spans startup chaos to enterprise scale: from setting up Kubernetes
+              clusters and CI/CD workflows at TV Startup, to building Google Maps integrations at Navagis, to developing
+              serverless applications that orchestrate multiple internal and external at Arch Global Services. Each role taught me something different
+              about what good software looks like.
+            </p>
+            <p>
+              The tech industry moves fast. Frameworks rise and fall. But curiosity?
+              That stays. And as long as there's something new to learn, I'll be here ready to figure it out.
+            </p>
+          </div>
+
+          <!-- Stats -->
+          <div class="mt-10 grid grid-cols-3 gap-3 sm:gap-6">
+            <div
+              v-for="stat in stats"
+              :key="stat.label"
+              class="text-center"
+            >
+              <div class="font-display text-2xl font-bold text-[var(--color-accent-primary)] sm:text-3xl">
+                {{ stat.value }}
+              </div>
+              <div class="mt-1 text-xs text-[var(--color-text-muted)]">
+                {{ stat.label }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/app/components/sections/ContactSection.vue b/app/components/sections/ContactSection.vue
new file mode 100644
index 0000000..0cf2d24
--- /dev/null
+++ b/app/components/sections/ContactSection.vue
@@ -0,0 +1,231 @@
+<script setup lang="ts">
+const contactInfo = [
+  {
+    icon: 'i-lucide-mail',
+    label: 'Email',
+    value: 'arckie.jadulco@gmail.com',
+    href: 'mailto:arckie.jadulco@gmail.com',
+  },
+  {
+    icon: 'i-lucide-map-pin',
+    label: 'Location',
+    value: 'Cebu, Philippines',
+    href: '',
+  },
+  {
+    icon: 'i-lucide-clock',
+    label: 'Availability',
+    value: 'Open to opportunities',
+    href: '',
+  },
+]
+
+const form = reactive({
+  name: '',
+  email: '',
+  message: '',
+})
+
+const isSubmitting = ref(false)
+const isSuccess = ref(false)
+const errorMessage = ref('')
+
+const handleSubmit = async () => {
+  isSubmitting.value = true
+  errorMessage.value = ''
+
+  // Basic validation
+  if (!form.name || !form.email || !form.message) {
+    errorMessage.value = 'Please fill in all fields'
+    isSubmitting.value = false
+    return
+  }
+
+  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) {
+    errorMessage.value = 'Please enter a valid email address'
+    isSubmitting.value = false
+    return
+  }
+
+  try {
+    // Placeholder for form submission
+    console.log('Form submitted:', form)
+
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 1000))
+
+    isSuccess.value = true
+    form.name = ''
+    form.email = ''
+    form.message = ''
+
+    // Reset success message after 5 seconds
+    setTimeout(() => {
+      isSuccess.value = false
+    }, 5000)
+  } catch {
+    errorMessage.value = 'Something went wrong. Please try again.'
+  } finally {
+    isSubmitting.value = false
+  }
+}
+</script>
+
+<template>
+  <section id="contact" class="section-spacing">
+    <div class="container-narrow">
+      <!-- Section Header -->
+      <div class="text-center">
+        <p class="font-mono text-sm text-[var(--color-accent-primary)]">
+          // Get In Touch
+        </p>
+        <h2 class="heading-section mt-4">
+          Let's work together
+        </h2>
+        <p class="mx-auto mt-4 max-w-2xl text-body md:text-body-lg">
+          Have a project in mind or just want to say hello? I'd love to hear from you.
+          Fill out the form below or reach out directly.
+        </p>
+      </div>
+
+      <div class="mt-8 grid gap-8 lg:mt-12 lg:grid-cols-2 lg:gap-12">
+        <!-- Contact Info -->
+        <div class="space-y-6">
+          <div
+            v-for="info in contactInfo"
+            :key="info.label"
+            class="flex items-start gap-4 rounded-xl border border-[var(--color-border)] bg-[var(--color-bg-secondary)] p-5"
+          >
+            <div
+              class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-[var(--color-bg-tertiary)] text-[var(--color-accent-primary)]"
+            >
+              <UIcon :name="info.icon" class="h-6 w-6" />
+            </div>
+            <div>
+              <p class="text-sm text-[var(--color-text-muted)]">
+                {{ info.label }}
+              </p>
+              <component
+                :is="info.href ? 'a' : 'p'"
+                :href="info.href || undefined"
+                class="mt-1 font-medium text-[var(--color-text-primary)]"
+                :class="{ 'transition-colors hover:text-[var(--color-accent-primary)]': info.href }"
+              >
+                {{ info.value }}
+              </component>
+            </div>
+          </div>
+
+          <!-- Social Reminder -->
+          <p class="text-sm text-[var(--color-text-muted)]">
+            You can also find me on
+            <a
+              href="https://github.com/zethcode"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-[var(--color-accent-primary)] hover:underline"
+            >GitHub</a> and
+            <a
+              href="https://www.linkedin.com/in/arckie-jadulco/"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-[var(--color-accent-primary)] hover:underline"
+            >LinkedIn</a>.
+          </p>
+        </div>
+
+        <!-- Contact Form -->
+        <form
+          class="space-y-6 rounded-xl border border-[var(--color-border)] bg-[var(--color-bg-secondary)] p-6 lg:p-8"
+          @submit.prevent="handleSubmit"
+        >
+          <!-- Success Message -->
+          <div
+            v-if="isSuccess"
+            class="rounded-lg bg-green-500/10 p-4 text-sm text-green-400"
+          >
+            Thanks for reaching out! I'll get back to you soon.
+          </div>
+
+          <!-- Error Message -->
+          <div
+            v-if="errorMessage"
+            class="rounded-lg bg-red-500/10 p-4 text-sm text-red-400"
+          >
+            {{ errorMessage }}
+          </div>
+
+          <!-- Name Field -->
+          <div>
+            <label
+              for="name"
+              class="mb-2 block text-sm font-medium text-[var(--color-text-primary)]"
+            >
+              Name
+            </label>
+            <input
+              id="name"
+              v-model="form.name"
+              type="text"
+              placeholder="John Doe"
+              class="w-full rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-primary)] px-4 py-3 text-[var(--color-text-primary)] placeholder-[var(--color-text-muted)] transition-colors focus:border-[var(--color-accent-primary)] focus:outline-none"
+            />
+          </div>
+
+          <!-- Email Field -->
+          <div>
+            <label
+              for="email"
+              class="mb-2 block text-sm font-medium text-[var(--color-text-primary)]"
+            >
+              Email
+            </label>
+            <input
+              id="email"
+              v-model="form.email"
+              type="email"
+              placeholder="john@example.com"
+              class="w-full rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-primary)] px-4 py-3 text-[var(--color-text-primary)] placeholder-[var(--color-text-muted)] transition-colors focus:border-[var(--color-accent-primary)] focus:outline-none"
+            />
+          </div>
+
+          <!-- Message Field -->
+          <div>
+            <label
+              for="message"
+              class="mb-2 block text-sm font-medium text-[var(--color-text-primary)]"
+            >
+              Message
+            </label>
+            <textarea
+              id="message"
+              v-model="form.message"
+              rows="4"
+              placeholder="Tell me about your project..."
+              class="w-full resize-none rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-primary)] px-4 py-3 text-[var(--color-text-primary)] placeholder-[var(--color-text-muted)] transition-colors focus:border-[var(--color-accent-primary)] focus:outline-none"
+            />
+          </div>
+
+          <!-- Submit Button -->
+          <button
+            type="submit"
+            class="btn-primary w-full"
+            :disabled="isSubmitting"
+          >
+            <UIcon
+              v-if="isSubmitting"
+              name="i-lucide-loader-2"
+              class="h-5 w-5 animate-spin"
+            />
+            <UIcon
+              v-else
+              name="i-lucide-send"
+              class="h-5 w-5"
+            />
+            {{ isSubmitting ? 'Sending...' : 'Send Message' }}
+          </button>
+        </form>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/app/components/sections/ExperienceSection.vue b/app/components/sections/ExperienceSection.vue
new file mode 100644
index 0000000..b2d7fc4
--- /dev/null
+++ b/app/components/sections/ExperienceSection.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+const experiences = [
+  {
+    title: 'Senior Software Engineer',
+    company: 'Arch Global Services (Philippines) Inc.',
+    period: '2024 - Present',
+    description: 'Backend development for insurance claims orchestration system. Building Azure Functions and Python services for claim scoring workflows used by claims specialists.',
+    technologies: ['Python', 'Azure Functions', 'MSSQL', 'REST APIs'],
+  },
+  {
+    title: 'Full Stack Developer',
+    company: 'TV Startup Inc.',
+    period: 'Nov 2023 - 2024',
+    description: 'Built CMS with Django APIs and Kubernetes integration. Set up DevOps pipelines with Jenkins and Docker on Oracle Cloud bare metal servers.',
+    technologies: ['Python', 'Django', 'Angular', 'Kubernetes', 'Oracle Cloud'],
+  },
+  {
+    title: 'Full Stack Developer',
+    company: 'Navagis',
+    period: 'Oct 2021 - Nov 2023',
+    description: 'Developed business applications with Google Maps integration. Handled frontend enhancements, security upgrades, and GCP server management.',
+    technologies: ['C#', '.NET', 'Python', 'Django', 'PostgreSQL', 'ReactJS', 'GCP'],
+  },
+  {
+    title: 'SQL Developer',
+    company: 'Signant Health',
+    period: 'Nov 2021 - Aug 2022',
+    description: 'Built data applications for digitizing customer records. Created stored procedures, data migrations, and custom functions via MSSQL.',
+    technologies: ['MSSQL', 'SSMS', 'Git', 'Bitbucket', 'JIRA'],
+  },
+  {
+    title: 'Full Stack Developer',
+    company: 'Accenture',
+    period: '2018 - 2021',
+    description: 'Developed CRM web features for consumer goods company. Implemented CI/CD with TFS and Azure DevOps. Led client requirement discussions.',
+    technologies: ['C#', '.NET', 'MSSQL', 'ReactJS', 'JavaScript', 'Azure DevOps'],
+  },
+]
+</script>
+
+<template>
+  <section id="experience" class="section-spacing bg-[var(--color-bg-secondary)]">
+    <div class="container-narrow">
+      <div class="grid gap-8 lg:grid-cols-[1fr,2fr] lg:gap-16">
+        <!-- Left Column - Sticky Header -->
+        <div class="lg:top-24 lg:self-start">
+          <p class="font-mono text-sm text-[var(--color-accent-primary)]">
+            // Experience
+          </p>
+          <h2 class="heading-section mt-4">
+            My professional journey
+          </h2>
+          <p class="mt-4 text-body md:text-body-lg">
+            Over the years, I've had the opportunity to work with amazing teams
+            and contribute to impactful projects.
+          </p>
+
+          <!-- Download Resume Button -->
+          <a
+            href="/resume.pdf"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="btn-primary mt-8 inline-flex"
+          >
+            <UIcon name="i-lucide-download" class="h-5 w-5" />
+            Download Resume
+          </a>
+        </div>
+
+        <!-- Right Column - Timeline -->
+        <div>
+          <UiTimelineItem
+            v-for="(exp, index) in experiences"
+            :key="exp.company"
+            :title="exp.title"
+            :company="exp.company"
+            :period="exp.period"
+            :description="exp.description"
+            :technologies="exp.technologies"
+            :is-last="index === experiences.length - 1"
+          />
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/app/components/sections/HeroSection.vue b/app/components/sections/HeroSection.vue
new file mode 100644
index 0000000..d3ace34
--- /dev/null
+++ b/app/components/sections/HeroSection.vue
@@ -0,0 +1,128 @@
+<script setup lang="ts">
+const roles = ['Senior Software Engineer', 'Full Stack Developer', 'Lifelong Learner']
+const currentRoleIndex = ref(0)
+const displayedRole = ref('')
+const isTyping = ref(true)
+
+let typingInterval: ReturnType<typeof setInterval> | null = null
+
+const typeRole = () => {
+  const currentRole = roles[currentRoleIndex.value]
+  let charIndex = 0
+  isTyping.value = true
+  displayedRole.value = ''
+
+  typingInterval = setInterval(() => {
+    if (charIndex < currentRole.length) {
+      displayedRole.value += currentRole[charIndex]
+      charIndex++
+    } else {
+      clearInterval(typingInterval!)
+      isTyping.value = false
+
+      // Wait before deleting
+      setTimeout(() => {
+        deleteRole()
+      }, 2000)
+    }
+  }, 100)
+}
+
+const deleteRole = () => {
+  isTyping.value = true
+
+  typingInterval = setInterval(() => {
+    if (displayedRole.value.length > 0) {
+      displayedRole.value = displayedRole.value.slice(0, -1)
+    } else {
+      clearInterval(typingInterval!)
+      currentRoleIndex.value = (currentRoleIndex.value + 1) % roles.length
+      setTimeout(() => {
+        typeRole()
+      }, 500)
+    }
+  }, 50)
+}
+
+onMounted(() => {
+  typeRole()
+})
+
+onUnmounted(() => {
+  if (typingInterval) {
+    clearInterval(typingInterval)
+  }
+})
+</script>
+
+<template>
+  <section
+    id="hero"
+    class="relative flex min-h-[100svh] items-center justify-center overflow-hidden"
+  >
+    <!-- Floating Background Blobs -->
+    <div class="pointer-events-none absolute inset-0" aria-hidden="true">
+      <div
+        class="absolute left-1/4 top-1/4 h-72 w-72 animate-[float_6s_ease-in-out_infinite] rounded-full bg-[var(--color-accent-primary)] opacity-[0.05] blur-[80px]"
+      />
+      <div
+        class="absolute bottom-1/4 right-1/4 h-96 w-96 animate-[float_8s_ease-in-out_infinite_reverse] rounded-full bg-[var(--color-accent-secondary)] opacity-[0.05] blur-[100px]"
+      />
+    </div>
+
+    <div class="container-narrow relative text-center">
+      <!-- Greeting -->
+      <p class="text-lg text-[var(--color-text-secondary)]">
+        Hello, I'm
+      </p>
+
+      <!-- Name -->
+      <h1 class="heading-display mt-4">
+        Arckie Jadulco<span class="text-[var(--color-accent-primary)]">.</span>
+      </h1>
+
+      <!-- Typing Animation -->
+      <div class="mt-6 flex h-10 items-center justify-center">
+        <span class="font-mono text-xl text-[var(--color-accent-primary)] md:text-2xl">
+          {{ displayedRole }}<span
+            class="ml-0.5 inline-block w-0.5 animate-[blink_1s_step-end_infinite] bg-[var(--color-accent-primary)]"
+            :class="{ 'h-6': true }"
+          />
+        </span>
+      </div>
+
+      <!-- Tagline -->
+      <p class="mx-auto mt-8 max-w-2xl text-body md:text-body-lg">
+        Senior Software Engineer with expertise on building web applications and backend systems.
+        From startup environments to enterprise solutions. Based in Cebu, Philippines.
+      </p>
+
+      <!-- CTA Buttons -->
+      <div class="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
+        <a href="#projects" class="btn-primary">
+          <UIcon name="i-lucide-folder-open" class="h-5 w-5" />
+          View My Work
+        </a>
+        <a href="#contact" class="btn-secondary">
+          <UIcon name="i-lucide-mail" class="h-5 w-5" />
+          Get In Touch
+        </a>
+      </div>
+    </div>
+
+    <!-- Scroll Indicator -->
+    <div class="absolute bottom-8 left-1/2 -translate-x-1/2">
+      <a
+        href="#about"
+        class="flex flex-col items-center gap-2 text-[var(--color-text-muted)] transition-colors hover:text-[var(--color-accent-primary)]"
+        aria-label="Scroll to about section"
+      >
+        <span class="text-xs uppercase tracking-widest">Scroll</span>
+        <UIcon
+          name="i-lucide-chevron-down"
+          class="h-5 w-5 animate-bounce"
+        />
+      </a>
+    </div>
+  </section>
+</template>
diff --git a/app/components/sections/ProjectsSection.vue b/app/components/sections/ProjectsSection.vue
new file mode 100644
index 0000000..45e83de
--- /dev/null
+++ b/app/components/sections/ProjectsSection.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+const projects = [
+  {
+    title: 'JTransit',
+    description: 'A navigation app for Cebu jeepney commuters. Helps locals and visitors navigate traditional jeepney routes across the city.',
+    tags: ['Mobile App', 'Navigation', 'Collaboration'],
+    image: '',
+    demoUrl: 'https://jtransit.github.io/',
+    repoUrl: '',
+  },
+  {
+    title: 'Tela At Iba Pa Clothing',
+    description: 'E-commerce platform for a clothing brand. Features product catalog, cart functionality, and checkout process.',
+    tags: ['React', 'Firebase', 'E-commerce'],
+    image: '',
+    demoUrl: 'https://zethcode.github.io/tabp-clothing/',
+    repoUrl: '',
+  },
+  {
+    title: 'Developer Portfolio',
+    description: 'This website. A showcase built with modern web technologies and clean design principles.',
+    tags: ['Nuxt 4', 'Tailwind CSS', 'TypeScript'],
+    image: '',
+    demoUrl: '',
+    repoUrl: 'https://github.com/zethcode',
+  },
+]
+</script>
+
+<template>
+  <section id="projects" class="section-spacing">
+    <div class="container-narrow">
+      <!-- Section Header -->
+      <div class="text-center">
+        <p class="font-mono text-sm text-[var(--color-accent-primary)]">
+          // Featured Work
+        </p>
+        <h2 class="heading-section mt-4">
+          Projects I've built
+        </h2>
+        <p class="mx-auto mt-4 max-w-2xl text-body md:text-body-lg">
+          A selection of projects that showcase my skills and passion for building
+          great software. Each project represents unique challenges and solutions.
+        </p>
+      </div>
+
+      <!-- Projects Grid -->
+      <div class="mt-8 grid gap-6 sm:mt-12 sm:grid-cols-2 sm:gap-8 lg:grid-cols-3">
+        <UiProjectCard
+          v-for="project in projects"
+          :key="project.title"
+          :title="project.title"
+          :description="project.description"
+          :tags="project.tags"
+          :image="project.image"
+          :demo-url="project.demoUrl"
+          :repo-url="project.repoUrl"
+        />
+      </div>
+
+      <!-- View More Button -->
+      <div class="mt-12 text-center">
+        <a
+          href="https://github.com/AJadulco"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="btn-secondary"
+        >
+          <UIcon name="i-lucide-github" class="h-5 w-5" />
+          View More on GitHub
+        </a>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/app/components/sections/SkillsSection.vue b/app/components/sections/SkillsSection.vue
new file mode 100644
index 0000000..39907ba
--- /dev/null
+++ b/app/components/sections/SkillsSection.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+const skillCategories = [
+  {
+    title: 'Frontend',
+    icon: 'i-lucide-layout',
+    skills: [
+      { name: 'ReactJS', icon: 'i-lucide-atom', level: 'advanced' as const },
+      { name: 'Angular', icon: 'i-lucide-component', level: 'advanced' as const },
+      { name: 'TypeScript', icon: 'i-lucide-file-code', level: 'advanced' as const },
+      { name: 'Bootstrap / Material UI', icon: 'i-lucide-palette', level: 'advanced' as const },
+    ],
+  },
+  {
+    title: 'Backend',
+    icon: 'i-lucide-server',
+    skills: [
+      { name: 'Python / Django', icon: 'i-lucide-code', level: 'advanced' as const },
+      { name: 'C# / .NET Core', icon: 'i-lucide-hexagon', level: 'advanced' as const },
+      { name: 'Node.js / NestJS', icon: 'i-lucide-server', level: 'advanced' as const },
+      { name: 'MSSQL / PostgreSQL', icon: 'i-lucide-database', level: 'advanced' as const },
+    ],
+  },
+  {
+    title: 'DevOps & Cloud',
+    icon: 'i-lucide-cloud',
+    skills: [
+      { name: 'Docker / Kubernetes', icon: 'i-lucide-container', level: 'advanced' as const },
+      { name: 'Jenkins / GitLab CI', icon: 'i-lucide-workflow', level: 'advanced' as const },
+      { name: 'GCP / AWS / Oracle', icon: 'i-lucide-cloud', level: 'intermediate' as const },
+      { name: 'Git / TFS / Azure DevOps', icon: 'i-lucide-git-branch', level: 'advanced' as const },
+    ],
+  },
+]
+</script>
+
+<template>
+  <section id="skills" class="section-spacing bg-[var(--color-bg-secondary)]">
+    <div class="container-narrow">
+      <!-- Section Header -->
+      <div class="text-center">
+        <p class="font-mono text-sm text-[var(--color-accent-primary)]">
+          // Skills & Expertise
+        </p>
+        <h2 class="heading-section mt-4">
+          Technologies I work with
+        </h2>
+        <p class="mx-auto mt-4 max-w-2xl text-body md:text-body-lg">
+          I'm constantly learning and expanding my toolkit. Here are the technologies
+          I use most frequently to bring ideas to life.
+        </p>
+      </div>
+
+      <!-- Skills Grid -->
+      <div class="mt-8 grid gap-6 sm:mt-12 sm:grid-cols-2 sm:gap-8 lg:grid-cols-3">
+        <div
+          v-for="category in skillCategories"
+          :key="category.title"
+          class="rounded-xl border border-[var(--color-border)] bg-[var(--color-bg-primary)] p-6"
+        >
+          <!-- Category Header -->
+          <div class="mb-6 flex items-center gap-3">
+            <div
+              class="flex h-10 w-10 items-center justify-center rounded-lg bg-[var(--color-bg-tertiary)] text-[var(--color-accent-primary)]"
+            >
+              <UIcon :name="category.icon" class="h-5 w-5" />
+            </div>
+            <h3 class="font-display text-lg font-semibold text-[var(--color-text-primary)]">
+              {{ category.title }}
+            </h3>
+          </div>
+
+          <!-- Skills List -->
+          <div class="space-y-3">
+            <UiSkillCard
+              v-for="skill in category.skills"
+              :key="skill.name"
+              :name="skill.name"
+              :icon="skill.icon"
+              :level="skill.level"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/app/components/ui/BlogCard.vue b/app/components/ui/BlogCard.vue
new file mode 100644
index 0000000..174056a
--- /dev/null
+++ b/app/components/ui/BlogCard.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+interface Props {
+  title: string
+  description: string
+  date: string
+  slug: string
+  readingTime?: string
+  tags?: string[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  readingTime: '',
+  tags: () => [],
+})
+
+const formattedDate = computed(() => {
+  const date = new Date(props.date)
+  return date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
+})
+</script>
+
+<template>
+  <article
+    class="group rounded-xl border border-[var(--color-border)] bg-[var(--color-bg-secondary)] p-6 transition-all duration-300 hover:border-[var(--color-accent-primary)] hover:shadow-[var(--shadow-soft)]"
+  >
+    <NuxtLink :to="`/blog/${slug}`" class="block">
+      <!-- Meta -->
+      <div class="flex items-center gap-3 text-xs text-[var(--color-text-muted)]">
+        <time :datetime="date">{{ formattedDate }}</time>
+        <span v-if="readingTime" class="flex items-center gap-1">
+          <span class="h-1 w-1 rounded-full bg-[var(--color-text-muted)]" />
+          {{ readingTime }}
+        </span>
+      </div>
+
+      <!-- Title -->
+      <h3
+        class="mt-3 font-display text-xl font-semibold text-[var(--color-text-primary)] transition-colors group-hover:text-[var(--color-accent-primary)]"
+      >
+        {{ title }}
+      </h3>
+
+      <!-- Description -->
+      <p class="mt-2 line-clamp-2 text-sm leading-relaxed text-[var(--color-text-secondary)]">
+        {{ description }}
+      </p>
+
+      <!-- Tags -->
+      <div v-if="tags.length" class="mt-4 flex flex-wrap gap-2">
+        <span
+          v-for="tag in tags"
+          :key="tag"
+          class="text-xs text-[var(--color-text-muted)]"
+        >
+          #{{ tag }}
+        </span>
+      </div>
+
+      <!-- Read More Indicator -->
+      <div
+        class="mt-4 flex items-center gap-2 text-sm font-medium text-[var(--color-accent-primary)] opacity-0 transition-opacity group-hover:opacity-100"
+      >
+        <span>Read article</span>
+        <UIcon name="i-lucide-arrow-right" class="h-4 w-4" />
+      </div>
+    </NuxtLink>
+  </article>
+</template>
diff --git a/app/components/ui/ProjectCard.vue b/app/components/ui/ProjectCard.vue
new file mode 100644
index 0000000..35a8382
--- /dev/null
+++ b/app/components/ui/ProjectCard.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+interface Props {
+  title: string
+  description: string
+  tags: string[]
+  image?: string
+  demoUrl?: string
+  repoUrl?: string
+  featured?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  image: '',
+  demoUrl: '',
+  repoUrl: '',
+  featured: false,
+})
+</script>
+
+<template>
+  <article
+    class="group relative overflow-hidden rounded-xl border border-[var(--color-border)] bg-[var(--color-bg-secondary)] transition-all duration-300 hover:border-[var(--color-accent-primary)] hover:shadow-[var(--shadow-soft)]"
+    :class="{ 'md:col-span-2': featured }"
+  >
+    <!-- Featured Badge -->
+    <div
+      v-if="featured"
+      class="absolute right-4 top-4 z-10 rounded-full bg-[var(--color-accent-primary)] px-3 py-1 text-xs font-semibold text-[var(--color-bg-primary)]"
+    >
+      Featured
+    </div>
+
+    <!-- Image Area -->
+    <div
+      class="relative aspect-video overflow-hidden bg-[var(--color-bg-tertiary)]"
+    >
+      <!-- Placeholder or Image -->
+      <div
+        v-if="!image"
+        class="flex h-full w-full items-center justify-center"
+      >
+        <UIcon
+          name="i-lucide-image"
+          class="h-12 w-12 text-[var(--color-text-muted)]"
+        />
+      </div>
+      <NuxtImg
+        v-else
+        :src="image"
+        :alt="title"
+        class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
+      />
+
+      <!-- Hover Overlay (desktop only) -->
+      <div
+        class="absolute inset-0 hidden items-center justify-center gap-4 bg-[var(--color-bg-primary)]/80 opacity-0 backdrop-blur-sm transition-opacity duration-300 group-hover:opacity-100 md:flex"
+      >
+        <a
+          v-if="demoUrl"
+          :href="demoUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--color-accent-primary)] text-[var(--color-bg-primary)] transition-transform hover:scale-110"
+          aria-label="View live demo"
+        >
+          <UIcon name="i-lucide-external-link" class="h-5 w-5" />
+        </a>
+        <a
+          v-if="repoUrl"
+          :href="repoUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="flex h-12 w-12 items-center justify-center rounded-full border border-[var(--color-text-primary)] text-[var(--color-text-primary)] transition-transform hover:scale-110"
+          aria-label="View source code"
+        >
+          <UIcon name="i-lucide-github" class="h-5 w-5" />
+        </a>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div class="p-6">
+      <h3
+        class="font-display text-xl font-semibold text-[var(--color-text-primary)] transition-colors group-hover:text-[var(--color-accent-primary)]"
+      >
+        {{ title }}
+      </h3>
+
+      <p class="mt-2 line-clamp-2 text-sm text-[var(--color-text-secondary)]">
+        {{ description }}
+      </p>
+
+      <!-- Tags -->
+      <div class="mt-4 flex flex-wrap gap-2">
+        <span
+          v-for="tag in tags"
+          :key="tag"
+          class="rounded-full bg-[var(--color-bg-tertiary)] px-3 py-1 text-xs font-medium text-[var(--color-text-secondary)]"
+        >
+          {{ tag }}
+        </span>
+      </div>
+
+      <!-- Mobile Action Links -->
+      <div v-if="demoUrl || repoUrl" class="mt-4 flex gap-3 md:hidden">
+        <a
+          v-if="demoUrl"
+          :href="demoUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center gap-1.5 text-sm font-medium text-[var(--color-accent-primary)] transition-colors hover:text-[var(--color-text-primary)]"
+        >
+          <UIcon name="i-lucide-external-link" class="h-4 w-4" />
+          Live Demo
+        </a>
+        <a
+          v-if="repoUrl"
+          :href="repoUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center gap-1.5 text-sm font-medium text-[var(--color-text-secondary)] transition-colors hover:text-[var(--color-text-primary)]"
+        >
+          <UIcon name="i-lucide-github" class="h-4 w-4" />
+          Source
+        </a>
+      </div>
+    </div>
+  </article>
+</template>
diff --git a/app/components/ui/SkillCard.vue b/app/components/ui/SkillCard.vue
new file mode 100644
index 0000000..0ce7920
--- /dev/null
+++ b/app/components/ui/SkillCard.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+interface Props {
+  name: string
+  icon?: string
+  level?: 'expert' | 'advanced' | 'intermediate'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  icon: 'i-lucide-code',
+  level: 'intermediate',
+})
+
+const levelBars = computed(() => {
+  switch (props.level) {
+    case 'expert':
+      return 3
+    case 'advanced':
+      return 2
+    case 'intermediate':
+    default:
+      return 1
+  }
+})
+</script>
+
+<template>
+  <div
+    class="group flex items-center gap-4 rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-secondary)] px-4 py-3 transition-all duration-300 hover:border-[var(--color-accent-primary)] hover:shadow-[var(--shadow-soft)]"
+  >
+    <!-- Icon -->
+    <div
+      class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--color-bg-tertiary)] text-[var(--color-text-secondary)] transition-colors group-hover:text-[var(--color-accent-primary)]"
+    >
+      <UIcon :name="icon" class="h-5 w-5" />
+    </div>
+
+    <!-- Content -->
+    <div class="flex flex-1 items-center justify-between">
+      <span class="text-sm font-medium text-[var(--color-text-primary)]">
+        {{ name }}
+      </span>
+
+      <!-- Level Indicator -->
+      <div class="flex gap-1">
+        <div
+          v-for="i in 3"
+          :key="i"
+          class="h-1.5 w-4 rounded-full transition-colors"
+          :class="[
+            i <= levelBars
+              ? 'bg-[var(--color-accent-primary)]'
+              : 'bg-[var(--color-bg-tertiary)]'
+          ]"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/components/ui/TimelineItem.vue b/app/components/ui/TimelineItem.vue
new file mode 100644
index 0000000..d618d5f
--- /dev/null
+++ b/app/components/ui/TimelineItem.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+interface Props {
+  title: string
+  company: string
+  period: string
+  description: string
+  technologies: string[]
+  isLast?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  isLast: false,
+})
+</script>
+
+<template>
+  <div class="relative flex gap-6">
+    <!-- Timeline Line & Dot -->
+    <div class="flex flex-col items-center">
+      <!-- Dot -->
+      <div
+        class="relative z-10 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 border-[var(--color-accent-primary)] bg-[var(--color-bg-primary)]"
+      >
+        <div class="h-2 w-2 rounded-full bg-[var(--color-accent-primary)]" />
+      </div>
+
+      <!-- Line -->
+      <div
+        v-if="!isLast"
+        class="w-px flex-1 bg-[var(--color-border)]"
+      />
+    </div>
+
+    <!-- Content -->
+    <div class="pb-12" :class="{ 'pb-0': isLast }">
+      <!-- Period Badge -->
+      <span
+        class="inline-block rounded-full bg-[var(--color-bg-tertiary)] px-3 py-1 text-xs font-medium text-[var(--color-text-secondary)]"
+      >
+        {{ period }}
+      </span>
+
+      <!-- Card -->
+      <div
+        class="mt-3 rounded-xl border border-[var(--color-border)] bg-[var(--color-bg-secondary)] p-6 transition-all duration-300 hover:border-[var(--color-accent-primary)] hover:shadow-[var(--shadow-soft)]"
+      >
+        <h3 class="font-display text-xl font-semibold text-[var(--color-text-primary)]">
+          {{ title }}
+        </h3>
+
+        <p class="mt-1 text-sm font-medium text-[var(--color-accent-primary)]">
+          {{ company }}
+        </p>
+
+        <p class="mt-3 text-sm leading-relaxed text-[var(--color-text-secondary)]">
+          {{ description }}
+        </p>
+
+        <!-- Technologies -->
+        <div class="mt-4 flex flex-wrap gap-2">
+          <span
+            v-for="tech in technologies"
+            :key="tech"
+            class="rounded-full bg-[var(--color-bg-tertiary)] px-3 py-1 text-xs font-medium text-[var(--color-text-secondary)]"
+          >
+            {{ tech }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
new file mode 100644
index 0000000..3b39c10
--- /dev/null
+++ b/app/layouts/default.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+const isMobileMenuOpen = ref(false)
+
+const toggleMobileMenu = () => {
+  isMobileMenuOpen.value = !isMobileMenuOpen.value
+}
+
+const closeMobileMenu = () => {
+  isMobileMenuOpen.value = false
+}
+</script>
+
+<template>
+  <div class="relative min-h-screen bg-[var(--color-bg-primary)]">
+    <!-- Grain Texture Overlay -->
+    <div class="grain-overlay" aria-hidden="true" />
+
+    <!-- Ambient Background Glow -->
+    <div
+      class="pointer-events-none fixed inset-0 overflow-hidden"
+      aria-hidden="true"
+    >
+      <div
+        class="absolute -left-1/4 -top-1/4 h-[600px] w-[600px] rounded-full bg-[var(--color-accent-primary)] opacity-[0.03] blur-[120px]"
+      />
+      <div
+        class="absolute -bottom-1/4 -right-1/4 h-[500px] w-[500px] rounded-full bg-[var(--color-accent-secondary)] opacity-[0.03] blur-[100px]"
+      />
+    </div>
+
+    <!-- Skip to Content Link (Accessibility) -->
+    <a
+      href="#main-content"
+      class="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-[100] focus:rounded-md focus:bg-[var(--color-accent-primary)] focus:px-4 focus:py-2 focus:text-[var(--color-bg-primary)]"
+    >
+      Skip to main content
+    </a>
+
+    <!-- Header -->
+    <TheHeader @toggle-menu="toggleMobileMenu" />
+
+    <!-- Mobile Menu -->
+    <TheMobileMenu
+      :is-open="isMobileMenuOpen"
+      @close="closeMobileMenu"
+    />
+
+    <!-- Main Content -->
+    <main id="main-content" class="relative">
+      <slot />
+    </main>
+
+    <!-- Footer -->
+    <TheFooter />
+  </div>
+</template>
diff --git a/app/pages/[...slug].vue b/app/pages/[...slug].vue
deleted file mode 100644
index a25f3b4..0000000
--- a/app/pages/[...slug].vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-const route = useRoute()
-
-const { data: page } = await useAsyncData('page-' + route.path, () => {
-  return queryCollection('content').path(route.path).first()
-})
-
-if (!page.value) {
-  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
-}
-</script>
-
-<template>
-  <ContentRenderer
-    v-if="page"
-    :value="page"
-  />
-</template>
diff --git a/app/pages/blog/[slug].vue b/app/pages/blog/[slug].vue
new file mode 100644
index 0000000..3e51528
--- /dev/null
+++ b/app/pages/blog/[slug].vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+const route = useRoute()
+const slug = route.params.slug as string
+
+const { data: post } = await useAsyncData(`blog-${slug}`, () =>
+  queryCollection('blog').path(`/blog/${slug}`).first()
+)
+
+if (!post.value) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: 'Post not found',
+  })
+}
+
+const formattedDate = computed(() => {
+  if (!post.value?.date) return ''
+  const date = new Date(post.value.date)
+  return date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
+})
+
+useSeoMeta({
+  title: () => `${post.value?.title} | Arckie Jadulco`,
+  description: () => post.value?.description,
+  ogTitle: () => `${post.value?.title} | Arckie Jadulco`,
+  ogDescription: () => post.value?.description,
+  ogImage: () => post.value?.image || '/og-image.png',
+})
+</script>
+
+<template>
+  <article class="section-spacing">
+    <div class="container-narrow">
+      <!-- Back Link -->
+      <NuxtLink
+        to="/blog"
+        class="inline-flex items-center gap-2 text-sm text-[var(--color-text-muted)] transition-colors hover:text-[var(--color-accent-primary)]"
+      >
+        <UIcon name="i-lucide-arrow-left" class="h-4 w-4" />
+        Back to blog
+      </NuxtLink>
+
+      <!-- Post Header -->
+      <header class="mt-8">
+        <!-- Meta -->
+        <div class="flex flex-wrap items-center gap-3 text-sm text-[var(--color-text-muted)]">
+          <time :datetime="post?.date">{{ formattedDate }}</time>
+          <span v-if="post?.readingTime" class="flex items-center gap-2">
+            <span class="h-1 w-1 rounded-full bg-[var(--color-text-muted)]" />
+            {{ post.readingTime }}
+          </span>
+        </div>
+
+        <!-- Title -->
+        <h1 class="heading-display mt-4">
+          {{ post?.title }}
+        </h1>
+
+        <!-- Description -->
+        <p class="mt-4 text-xl text-[var(--color-text-secondary)]">
+          {{ post?.description }}
+        </p>
+
+        <!-- Tags -->
+        <div v-if="post?.tags?.length" class="mt-6 flex flex-wrap gap-2">
+          <span
+            v-for="tag in post.tags"
+            :key="tag"
+            class="rounded-full bg-[var(--color-bg-secondary)] px-3 py-1 text-sm text-[var(--color-text-secondary)]"
+          >
+            #{{ tag }}
+          </span>
+        </div>
+      </header>
+
+      <!-- Post Content -->
+      <div class="prose-custom mt-8 sm:mt-12">
+        <ContentRenderer v-if="post" :value="post" />
+      </div>
+    </div>
+  </article>
+</template>
+
+<style>
+@reference "tailwindcss";
+
+/* Prose Styling for Blog Content */
+.prose-custom {
+  @apply max-w-3xl;
+}
+
+.prose-custom h2 {
+  font-family: var(--font-display);
+  @apply text-2xl font-semibold text-[var(--color-text-primary)] mt-12 mb-4;
+}
+
+.prose-custom h3 {
+  font-family: var(--font-display);
+  @apply text-xl font-semibold text-[var(--color-text-primary)] mt-8 mb-3;
+}
+
+.prose-custom p {
+  @apply text-[var(--color-text-secondary)] leading-relaxed mb-6;
+}
+
+.prose-custom a {
+  @apply text-[var(--color-accent-primary)] underline underline-offset-2 hover:text-[var(--color-accent-primary)]/80;
+}
+
+.prose-custom ul,
+.prose-custom ol {
+  @apply text-[var(--color-text-secondary)] mb-6 pl-6;
+}
+
+.prose-custom ul {
+  @apply list-disc;
+}
+
+.prose-custom ol {
+  @apply list-decimal;
+}
+
+.prose-custom li {
+  @apply mb-2;
+}
+
+.prose-custom blockquote {
+  @apply border-l-4 border-[var(--color-accent-primary)] bg-[var(--color-bg-secondary)] pl-6 py-4 pr-4 my-6 italic text-[var(--color-text-secondary)];
+}
+
+.prose-custom code {
+  font-family: var(--font-mono);
+  @apply text-sm bg-[var(--color-bg-secondary)] px-1.5 py-0.5 rounded text-[var(--color-accent-primary)];
+}
+
+.prose-custom pre {
+  @apply bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded-lg p-3 sm:p-4 overflow-x-auto my-6 text-sm;
+  -webkit-overflow-scrolling: touch;
+}
+
+.prose-custom pre code {
+  @apply bg-transparent p-0 text-[var(--color-text-primary)];
+}
+
+.prose-custom img {
+  @apply rounded-lg my-8 max-w-full h-auto;
+}
+
+.prose-custom hr {
+  @apply border-[var(--color-border)] my-12;
+}
+
+.prose-custom strong {
+  @apply font-semibold text-[var(--color-text-primary)];
+}
+</style>
diff --git a/app/pages/blog/index.vue b/app/pages/blog/index.vue
new file mode 100644
index 0000000..ee6ee97
--- /dev/null
+++ b/app/pages/blog/index.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+useSeoMeta({
+  title: 'Blog | Arckie Jadulco',
+  description: 'Thoughts, tutorials, and insights on web development, technology, and software engineering.',
+  ogTitle: 'Blog | Arckie Jadulco',
+  ogDescription: 'Thoughts, tutorials, and insights on web development, technology, and software engineering.',
+})
+
+const { data: posts } = await useAsyncData('blog-posts', () =>
+  queryCollection('blog').order('date', 'DESC').all()
+)
+</script>
+
+<template>
+  <div class="section-spacing">
+    <div class="container-narrow">
+      <!-- Back Link -->
+      <NuxtLink
+        to="/"
+        class="inline-flex items-center gap-2 text-sm text-[var(--color-text-muted)] transition-colors hover:text-[var(--color-accent-primary)]"
+      >
+        <UIcon name="i-lucide-arrow-left" class="h-4 w-4" />
+        Back to home
+      </NuxtLink>
+
+      <!-- Page Header -->
+      <div class="mt-8">
+        <p class="font-mono text-sm text-[var(--color-accent-primary)]">
+          // Blog
+        </p>
+        <h1 class="heading-display mt-4">
+          Thoughts & Writings
+        </h1>
+        <p class="mt-4 max-w-2xl text-body md:text-body-lg">
+          Sharing my experiences, learnings, and insights about web development,
+          technology, and the craft of building software.
+        </p>
+      </div>
+
+      <!-- Posts Grid -->
+      <div v-if="posts?.length" class="mt-12 grid gap-6 md:grid-cols-2">
+        <UiBlogCard
+          v-for="post in posts"
+          :key="post.stem"
+          :title="post.title"
+          :description="post.description"
+          :date="post.date"
+          :slug="post.stem?.replace('blog/', '') || ''"
+          :reading-time="post.readingTime"
+          :tags="post.tags"
+        />
+      </div>
+
+      <!-- Empty State -->
+      <div
+        v-else
+        class="mt-12 rounded-xl border border-[var(--color-border)] bg-[var(--color-bg-secondary)] p-12 text-center"
+      >
+        <UIcon
+          name="i-lucide-file-text"
+          class="mx-auto h-12 w-12 text-[var(--color-text-muted)]"
+        />
+        <p class="mt-4 text-[var(--color-text-secondary)]">
+          No posts yet. Check back soon!
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
new file mode 100644
index 0000000..b1ffa93
--- /dev/null
+++ b/app/pages/index.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+useSeoMeta({
+  title: 'Arckie Jadulco | Full Stack Developer',
+  description: 'Full Stack Developer crafting elegant digital experiences with clean code and thoughtful design. Explore my portfolio of projects and get in touch.',
+  ogTitle: 'Arckie Jadulco | Full Stack Developer',
+  ogDescription: 'Full Stack Developer crafting elegant digital experiences with clean code and thoughtful design.',
+  ogImage: '/og-image.png',
+  twitterCard: 'summary_large_image',
+})
+</script>
+
+<template>
+  <div>
+    <SectionsHeroSection />
+    <SectionsAboutSection />
+    <SectionsSkillsSection />
+    <SectionsProjectsSection />
+    <SectionsExperienceSection />
+    <SectionsContactSection />
+  </div>
+</template>
diff --git a/app/pages/resume.vue b/app/pages/resume.vue
new file mode 100644
index 0000000..f8612ff
--- /dev/null
+++ b/app/pages/resume.vue
@@ -0,0 +1,397 @@
+<script setup lang="ts">
+// SEO
+useSeoMeta({
+  title: 'Resume - Arckie Zeth Jadulco',
+  description: 'Senior Software Engineer resume',
+  robots: 'noindex', // Don't index resume page
+})
+
+const handlePrint = () => {
+  window.print()
+}
+</script>
+
+<template>
+  <div class="resume-page">
+    <!-- Print Button (hidden when printing) -->
+    <div class="print-controls no-print">
+      <button @click="handlePrint" class="print-btn">
+        Print / Save as PDF
+      </button>
+      <p class="print-hint">Use "Save as PDF" in print dialog for best results</p>
+    </div>
+
+    <!-- Resume Content -->
+    <div class="resume-content">
+      <!-- Page 1 -->
+      <section class="page">
+        <!-- Header -->
+        <header class="resume-header">
+          <h1>ARCKIE ZETH JADULCO</h1>
+          <p class="title">Senior Software Engineer</p>
+          <div class="contact-row">
+            <span>arckie.jadulco@gmail.com</span>
+            <span>+63 9667 424 504</span>
+            <span>Cebu, Philippines</span>
+            <span>linkedin.com/in/arckie-jadulco</span>
+          </div>
+        </header>
+
+        <!-- Summary -->
+        <section class="resume-section">
+          <h2>SUMMARY</h2>
+          <p>
+            Senior Software Engineer with 6+ years of experience building scalable backend systems
+            and full-stack applications. Expertise in Python, C#/.NET, and cloud infrastructure
+            (Azure, GCP, Oracle Cloud). Track record of delivering production systems from startup
+            MVPs to enterprise-scale platforms. Strong foundation in DevOps practices, database
+            optimization, and cross-functional team collaboration.
+          </p>
+        </section>
+
+        <!-- Experience -->
+        <section class="resume-section">
+          <h2>PROFESSIONAL EXPERIENCE</h2>
+
+          <div class="job">
+            <div class="job-header">
+              <strong>Senior Software Engineer</strong>
+              <span class="company">Arch Global Services (Philippines) Inc.</span>
+              <span class="period">2024 - Present</span>
+            </div>
+            <ul>
+              <li>Design and implement backend services for insurance claims orchestration platform processing thousands of claims daily</li>
+              <li>Build serverless Azure Functions with Python for automated claim scoring and routing workflows</li>
+              <li>Develop RESTful APIs integrating with legacy systems and third-party insurance data providers</li>
+              <li>Optimize MSSQL database queries and stored procedures, improving claim processing performance</li>
+              <li>Collaborate with claims specialists to translate business requirements into technical solutions</li>
+            </ul>
+          </div>
+
+          <div class="job">
+            <div class="job-header">
+              <strong>Full Stack Developer</strong>
+              <span class="company">TV Startup Inc.</span>
+              <span class="period">Nov 2023 - 2024</span>
+            </div>
+            <ul>
+              <li>Architected and built content management system with Django REST APIs serving Angular frontend</li>
+              <li>Deployed containerized applications on Kubernetes clusters hosted on Oracle Cloud bare metal servers</li>
+              <li>Established CI/CD pipelines using Jenkins, reducing deployment time from hours to minutes</li>
+              <li>Configured Docker-based development environments ensuring parity between local and production</li>
+              <li>Set up monitoring, logging, and alerting infrastructure for production reliability</li>
+            </ul>
+          </div>
+
+          <div class="job">
+            <div class="job-header">
+              <strong>Full Stack Developer</strong>
+              <span class="company">Navagis</span>
+              <span class="period">Oct 2021 - Nov 2023</span>
+            </div>
+            <ul>
+              <li>Developed location-based business applications integrating Google Maps APIs for fleet tracking and geofencing</li>
+              <li>Built backend services with C#/.NET and Python/Django, connecting to PostgreSQL databases</li>
+              <li>Led frontend development with ReactJS, implementing responsive designs and real-time data visualization</li>
+              <li>Upgraded legacy applications to modern frameworks, improving performance and maintainability</li>
+              <li>Managed GCP infrastructure including Compute Engine instances, Cloud SQL, and Cloud Storage</li>
+            </ul>
+          </div>
+
+          <div class="job">
+            <div class="job-header">
+              <strong>SQL Developer</strong>
+              <span class="company">Signant Health (Part-time)</span>
+              <span class="period">Nov 2021 - Aug 2022</span>
+            </div>
+            <ul>
+              <li>Developed data applications to digitize and validate clinical trial customer records</li>
+              <li>Wrote complex stored procedures and functions for data transformation and validation</li>
+              <li>Performed database migrations ensuring data integrity across multiple environments</li>
+              <li>Collaborated with QA and business analysts to meet strict SLA requirements</li>
+            </ul>
+          </div>
+        </section>
+      </section>
+
+      <!-- Page 2 -->
+      <section class="page">
+        <div class="job">
+          <div class="job-header">
+            <strong>Full Stack Developer</strong>
+            <span class="company">Accenture</span>
+            <span class="period">2018 - 2021</span>
+          </div>
+          <ul>
+            <li>Developed CRM web application features for a global consumer goods company using C#/.NET and ReactJS</li>
+            <li>Built and maintained MSSQL database schemas, stored procedures, and reporting queries</li>
+            <li>Implemented CI/CD pipelines with TFS and Azure DevOps, automating build and deployment processes</li>
+            <li>Led requirements gathering sessions with client stakeholders, translating business needs into user stories</li>
+            <li>Mentored junior developers on coding standards, code reviews, and agile practices</li>
+          </ul>
+        </div>
+
+        <!-- Skills -->
+        <section class="resume-section">
+          <h2>TECHNICAL SKILLS</h2>
+          <div class="skills-grid">
+            <div class="skill-category">
+              <strong>Languages:</strong>
+              <span>Python, C#, TypeScript, JavaScript, SQL</span>
+            </div>
+            <div class="skill-category">
+              <strong>Frameworks:</strong>
+              <span>Django, .NET Core, Node.js, NestJS, ReactJS, Angular</span>
+            </div>
+            <div class="skill-category">
+              <strong>Databases:</strong>
+              <span>MSSQL, PostgreSQL, MongoDB</span>
+            </div>
+            <div class="skill-category">
+              <strong>Cloud & DevOps:</strong>
+              <span>Azure, GCP, AWS, Docker, Kubernetes, Jenkins, GitLab CI/CD</span>
+            </div>
+            <div class="skill-category">
+              <strong>Tools:</strong>
+              <span>Git, Azure DevOps, TFS, Linux, REST APIs, Agile/Scrum</span>
+            </div>
+          </div>
+        </section>
+
+        <!-- Education -->
+        <section class="resume-section">
+          <h2>EDUCATION</h2>
+          <div class="education">
+            <strong>Bachelor of Science in Computer Engineering</strong>
+            <p>University of San Carlos | 2013 - 2018</p>
+          </div>
+        </section>
+
+        <!-- Projects -->
+        <section class="resume-section">
+          <h2>PROJECTS</h2>
+          <div class="project">
+            <div class="project-header">
+              <strong>JTransit</strong>
+              <span class="project-link">jtransit.github.io</span>
+            </div>
+            <p class="project-desc">Navigation app helping Cebu commuters find jeepney routes. Built with collaborative mapping and route optimization.</p>
+          </div>
+          <div class="project">
+            <div class="project-header">
+              <strong>Tela At Iba Pa</strong>
+              <span class="project-link">zethcode.github.io/tabp-clothing</span>
+            </div>
+            <p class="project-desc">E-commerce platform built with React and Firebase. Features product catalog, cart, and checkout functionality.</p>
+          </div>
+        </section>
+      </section>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Screen styles */
+.resume-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 2rem;
+}
+
+.print-controls {
+  max-width: 210mm;
+  margin: 0 auto 1rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.print-btn {
+  background: #c9a87c;
+  color: #1a1a1f;
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 0.5rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.print-hint {
+  color: #4a4a4a;
+  font-size: 0.875rem;
+}
+
+.resume-content {
+  max-width: 210mm;
+  margin: 0 auto;
+  background: white;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+}
+
+.page {
+  padding: 15mm 20mm;
+  min-height: 297mm;
+  page-break-after: always;
+}
+
+.page:last-child {
+  page-break-after: avoid;
+}
+
+/* Typography */
+.resume-header h1 {
+  font-family: 'Playfair Display', serif;
+  font-size: 2rem;
+  color: #1a1a1f;
+  margin: 0;
+  letter-spacing: 0.1em;
+}
+
+.resume-header .title {
+  color: #c9a87c;
+  font-size: 1.1rem;
+  margin: 0.25rem 0 0.75rem;
+}
+
+.contact-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  font-size: 0.85rem;
+  color: #4a4a4a;
+  border-bottom: 2px solid #c9a87c;
+  padding-bottom: 1rem;
+}
+
+.resume-section {
+  margin-top: 1.5rem;
+}
+
+.resume-section h2 {
+  font-family: 'Source Sans 3', sans-serif;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: #8a7355;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  border-bottom: 1px solid #e0e0e0;
+  padding-bottom: 0.35rem;
+  margin-bottom: 0.85rem;
+}
+
+.job {
+  margin-bottom: 1rem;
+}
+
+.job-header {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: baseline;
+  margin-bottom: 0.35rem;
+}
+
+.job-header strong {
+  font-size: 0.95rem;
+}
+
+.job-header .company {
+  color: #8a7355;
+}
+
+.job-header .period {
+  margin-left: auto;
+  color: #4a4a4a;
+  font-size: 0.875rem;
+}
+
+.job ul {
+  margin: 0;
+  padding-left: 1.25rem;
+  color: #2d2d2d;
+  font-size: 0.85rem;
+  line-height: 1.5;
+}
+
+.job li {
+  margin-bottom: 0.2rem;
+}
+
+.skills-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.4rem 1.5rem;
+  font-size: 0.875rem;
+}
+
+.skill-category {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.skill-category strong {
+  color: #1a1a1f;
+  white-space: nowrap;
+}
+
+.skill-category span {
+  color: #2d2d2d;
+}
+
+.education p, .project p {
+  margin: 0;
+  color: #4a4a4a;
+  font-size: 0.875rem;
+}
+
+.project {
+  margin-bottom: 0.5rem;
+}
+
+.project-header {
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+}
+
+.project-header strong {
+  color: #1a1a1f;
+}
+
+.project-link {
+  font-size: 0.8rem;
+  color: #8a7355;
+}
+
+.project-desc {
+  margin: 0.15rem 0 0 0;
+  color: #4a4a4a;
+  font-size: 0.85rem;
+}
+
+/* Print styles */
+@media print {
+  .no-print {
+    display: none !important;
+  }
+
+  .resume-page {
+    background: white;
+    padding: 0;
+  }
+
+  .resume-content {
+    box-shadow: none;
+  }
+
+  .page {
+    padding: 10mm 15mm;
+    min-height: auto;
+  }
+
+  @page {
+    size: A4;
+    margin: 0;
+  }
+}
+</style>
diff --git a/app/plugins/scroll-reveal.client.ts b/app/plugins/scroll-reveal.client.ts
new file mode 100644
index 0000000..e52f8f0
--- /dev/null
+++ b/app/plugins/scroll-reveal.client.ts
@@ -0,0 +1,34 @@
+export default defineNuxtPlugin(() => {
+  if (typeof window === 'undefined') return
+
+  const observerCallback: IntersectionObserverCallback = (entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('is-visible')
+      }
+    })
+  }
+
+  const observerOptions: IntersectionObserverInit = {
+    root: null,
+    rootMargin: '0px 0px -50px 0px',
+    threshold: 0.1,
+  }
+
+  const observer = new IntersectionObserver(observerCallback, observerOptions)
+
+  // Function to observe elements
+  const observeElements = () => {
+    const elements = document.querySelectorAll('.reveal')
+    elements.forEach((el) => observer.observe(el))
+  }
+
+  // Initial observation
+  setTimeout(observeElements, 100)
+
+  // Re-observe on route change
+  const nuxtApp = useNuxtApp()
+  nuxtApp.hook('page:finish', () => {
+    setTimeout(observeElements, 100)
+  })
+})
diff --git a/content.config.ts b/content.config.ts
index 0ec56d3..8f65775 100644
--- a/content.config.ts
+++ b/content.config.ts
@@ -1,4 +1,4 @@
-import { defineContentConfig, defineCollection } from '@nuxt/content'
+import { defineContentConfig, defineCollection, z } from '@nuxt/content'
 
 export default defineContentConfig({
   collections: {
@@ -6,5 +6,17 @@ export default defineContentConfig({
       type: 'page',
       source: '**',
     }),
+    blog: defineCollection({
+      type: 'page',
+      source: 'blog/**',
+      schema: z.object({
+        title: z.string(),
+        description: z.string(),
+        date: z.string(),
+        tags: z.array(z.string()).optional(),
+        readingTime: z.string().optional(),
+        image: z.string().optional(),
+      }),
+    }),
   },
 })
diff --git a/content/about.md b/content/about.md
deleted file mode 100644
index a381b6f..0000000
--- a/content/about.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# About Content Version 3
-
-[Back home](/)
diff --git a/content/blog/building-with-nuxt-4.md b/content/blog/building-with-nuxt-4.md
new file mode 100644
index 0000000..66fcc0a
--- /dev/null
+++ b/content/blog/building-with-nuxt-4.md
@@ -0,0 +1,109 @@
+---
+title: "Building Modern Websites with Nuxt 4"
+description: "A comprehensive look at Nuxt 4's new features and how to leverage them for building fast, modern web applications."
+date: "2024-02-01"
+tags: ["nuxt", "vue", "web-development", "tutorial"]
+readingTime: "8 min read"
+---
+
+Nuxt 4 is here, and it brings a host of improvements that make building Vue applications even more enjoyable. Let's explore what's new and how to make the most of these features.
+
+## What's New in Nuxt 4
+
+Nuxt 4 introduces several exciting features:
+
+- **Improved Performance** - Faster builds and better runtime performance
+- **Enhanced TypeScript Support** - First-class TypeScript integration
+- **New File-Based Routing** - More intuitive routing conventions
+- **Better Developer Experience** - Improved error messages and debugging
+
+## Setting Up a Nuxt 4 Project
+
+Getting started is straightforward:
+
+```bash
+npx nuxi init my-project
+cd my-project
+npm install
+npm run dev
+```
+
+## Project Structure
+
+Nuxt 4 maintains the familiar structure with some refinements:
+
+```
+my-project/
+├── app/
+│   ├── components/
+│   ├── composables/
+│   ├── layouts/
+│   ├── pages/
+│   └── app.vue
+├── content/
+├── public/
+├── nuxt.config.ts
+└── package.json
+```
+
+## Key Features to Leverage
+
+### 1. Auto-Imports
+
+Nuxt automatically imports components, composables, and utilities:
+
+```vue
+<script setup>
+// No need to import ref or computed!
+const count = ref(0)
+const doubled = computed(() => count.value * 2)
+</script>
+```
+
+### 2. File-Based Routing
+
+Create pages simply by adding files to the `pages` directory:
+
+```
+pages/
+├── index.vue        → /
+├── about.vue        → /about
+├── blog/
+│   ├── index.vue    → /blog
+│   └── [slug].vue   → /blog/:slug
+```
+
+### 3. Server Routes
+
+Create API endpoints with the `server/api` directory:
+
+```typescript
+// server/api/hello.ts
+export default defineEventHandler((event) => {
+  return { message: 'Hello from the API!' }
+})
+```
+
+## Best Practices
+
+Here are some tips for building with Nuxt 4:
+
+1. **Use TypeScript** - Take advantage of Nuxt's excellent TypeScript support
+2. **Leverage Composables** - Extract reusable logic into composables
+3. **Optimize Images** - Use `@nuxt/image` for automatic optimization
+4. **Configure SEO** - Use `useSeoMeta` for better search engine visibility
+
+## Performance Tips
+
+To maximize performance:
+
+- Enable static site generation when possible
+- Use lazy loading for components
+- Implement proper caching strategies
+- Optimize your images and assets
+
+## Conclusion
+
+Nuxt 4 is a fantastic framework for building modern web applications. Its developer experience, performance, and ecosystem make it an excellent choice for projects of any size.
+
+Happy coding!
diff --git a/content/blog/hello-world.md b/content/blog/hello-world.md
new file mode 100644
index 0000000..cdeab55
--- /dev/null
+++ b/content/blog/hello-world.md
@@ -0,0 +1,40 @@
+---
+title: "Hello World: Starting My Blog"
+description: "Welcome to my corner of the internet! In this first post, I share why I decided to start blogging and what you can expect from this space."
+date: "2024-01-15"
+tags: ["personal", "blogging", "introduction"]
+readingTime: "3 min read"
+---
+
+Welcome to my blog! After years of consuming content from other developers, I've finally decided to contribute back to the community by sharing my own thoughts and experiences.
+
+## Why Start a Blog?
+
+There are several reasons why I decided to start writing:
+
+1. **Learning in public** - Writing forces me to organize my thoughts and understand concepts more deeply
+2. **Helping others** - If my experiences can help even one person, it's worth the effort
+3. **Building a portfolio** - A blog showcases not just coding skills but also communication abilities
+
+## What to Expect
+
+I'll be covering a variety of topics including:
+
+- **Web Development** - Tutorials, tips, and best practices for modern web development
+- **Tech Reviews** - My honest opinions on tools, frameworks, and technologies I use
+- **Career Insights** - Lessons learned from my journey as a developer
+- **Personal Projects** - Deep dives into side projects and what I learned building them
+
+## My Commitment
+
+I aim to publish at least one quality post per month. I believe in quality over quantity, so each post will be thoroughly researched and carefully written.
+
+> "The best time to plant a tree was 20 years ago. The second best time is now." - Chinese Proverb
+
+This quote resonates with me because I've been putting off starting a blog for years. But here we are, finally taking that first step!
+
+## Let's Connect
+
+I'd love to hear from you! Whether you have questions, suggestions for topics, or just want to say hi, feel free to reach out through the contact form or connect with me on social media.
+
+Thanks for being here. Let's learn and grow together!
diff --git a/content/index.md b/content/index.md
deleted file mode 100644
index 0c686d0..0000000
--- a/content/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-# Welcome to Nuxt Content Starter
-
-This is the main page displaying Markdown located at [content/index.md](https://github.com/nuxt/starter/blob/content/content/index.md).
-
-Move to [about](/about) page.
-
-## Manage your Contents
-
-Create new pages or modify the existing ones in `content/` directory.
-
-## Query & Render Pages
-
-You can find an example of querying contents and rendering them in a [catch-all page](https://github.com/nuxt/starter/blob/content/app/pages/%5B...slug%5D.vue)
-
-## Integrate Vue Component
-
-::alert{color="green"}
-The current [alert](https://github.com/nuxt/starter/blob/content/app/components/Alert.vue) and the [counter](https://github.com/nuxt/starter/blob/content/app/components/Counter.vue) below are `Vue` components integrated into the Markdown.
-::
-
-::counter
-::
-
-Checkout out the [documentation](https://content.nuxt.com/docs/getting-started) to learn more.
diff --git a/docs/plans/2026-01-31-resume-page-redesign.md b/docs/plans/2026-01-31-resume-page-redesign.md
new file mode 100644
index 0000000..8e0333c
--- /dev/null
+++ b/docs/plans/2026-01-31-resume-page-redesign.md
@@ -0,0 +1,704 @@
+# Resume Page Redesign Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Redesign the resume page with improved readability, better typography contrast, and expanded job descriptions that fill 2 pages without overwhelming the reader.
+
+**Architecture:** Update the single `resume.vue` file with darker text colors for readability, refined spacing, improved section hierarchy, and expanded bullet points for each role. Maintain minimal aesthetic with clean lines and ample whitespace.
+
+**Tech Stack:** Vue 3, CSS (scoped styles), print-optimized layout
+
+---
+
+## Summary of Changes
+
+### Readability Issues to Fix:
+- Contact row uses `#666` (too light on white background)
+- Job bullet points use `#444` (could be darker)
+- Skills/education paragraphs use `#666` (too light)
+- Company name accent color `#c9a87c` may be hard to read
+
+### Content Improvements:
+- Expand each job from 3 bullets to 4-5 bullets
+- Add more specific achievements and technologies
+- Improve summary to be more compelling
+- Add descriptions to projects section
+
+### Layout Refinements:
+- Better visual hierarchy with subtle section separators
+- Consistent spacing rhythm
+- Skills section in 2-column layout
+- Refined typography sizes
+
+---
+
+## Task 1: Update Color Palette for Readability
+
+**Files:**
+- Modify: `app/pages/resume.vue` (lines 236-312, style section)
+
+**Step 1: Update contact row color**
+
+Change line 241 from:
+```css
+color: #666;
+```
+
+To:
+```css
+color: #4a4a4a;
+```
+
+**Step 2: Update job bullet point color**
+
+Change line 291 from:
+```css
+color: #444;
+```
+
+To:
+```css
+color: #2d2d2d;
+```
+
+**Step 3: Update skills paragraph color**
+
+Change lines 304-307 from:
+```css
+.skills-grid p {
+  margin: 0;
+  color: #444;
+}
+```
+
+To:
+```css
+.skills-grid p {
+  margin: 0;
+  color: #2d2d2d;
+}
+```
+
+**Step 4: Update education/project paragraph color**
+
+Change lines 309-313 from:
+```css
+.education p, .project p {
+  margin: 0;
+  color: #666;
+  font-size: 0.85rem;
+}
+```
+
+To:
+```css
+.education p, .project p {
+  margin: 0;
+  color: #4a4a4a;
+  font-size: 0.875rem;
+}
+```
+
+**Step 5: Update company name for better contrast**
+
+Change lines 277-279 from:
+```css
+.job-header .company {
+  color: #c9a87c;
+}
+```
+
+To:
+```css
+.job-header .company {
+  color: #8a7355;
+}
+```
+
+**Step 6: Save and verify in browser**
+
+Run: `npm run dev`
+Navigate to: `http://localhost:3000/resume`
+Verify: Text should be noticeably darker and more readable
+
+---
+
+## Task 2: Improve Summary Section
+
+**Files:**
+- Modify: `app/pages/resume.vue` (lines 43-48)
+
+**Step 1: Replace summary paragraph**
+
+Change lines 43-48 from:
+```vue
+<p>
+  Senior Software Engineer with 6+ years of experience in full-stack development,
+  backend systems, and DevOps. Skilled in Python, C#/.NET, and cloud platforms.
+  Proven track record from startup to enterprise environments. Eager to learn and
+  deliver impactful solutions.
+</p>
+```
+
+To:
+```vue
+<p>
+  Senior Software Engineer with 6+ years of experience building scalable backend systems
+  and full-stack applications. Expertise in Python, C#/.NET, and cloud infrastructure
+  (Azure, GCP, Oracle Cloud). Track record of delivering production systems from startup
+  MVPs to enterprise-scale platforms. Strong foundation in DevOps practices, database
+  optimization, and cross-functional team collaboration.
+</p>
+```
+
+**Step 2: Save and verify**
+
+---
+
+## Task 3: Expand Arch Global Services Role
+
+**Files:**
+- Modify: `app/pages/resume.vue` (lines 55-66)
+
+**Step 1: Replace job entry with expanded bullets**
+
+Change lines 55-66 from:
+```vue
+<div class="job">
+  <div class="job-header">
+    <strong>Senior Software Engineer</strong>
+    <span class="company">Arch Global Services (Philippines) Inc.</span>
+    <span class="period">2024 - Present</span>
+  </div>
+  <ul>
+    <li>Build backend services for insurance claims orchestration system</li>
+    <li>Develop Azure Functions and Python APIs for claim scoring workflows</li>
+    <li>Work with MSSQL databases serving claims specialists</li>
+  </ul>
+</div>
+```
+
+To:
+```vue
+<div class="job">
+  <div class="job-header">
+    <strong>Senior Software Engineer</strong>
+    <span class="company">Arch Global Services (Philippines) Inc.</span>
+    <span class="period">2024 - Present</span>
+  </div>
+  <ul>
+    <li>Design and implement backend services for insurance claims orchestration platform processing thousands of claims daily</li>
+    <li>Build serverless Azure Functions with Python for automated claim scoring and routing workflows</li>
+    <li>Develop RESTful APIs integrating with legacy systems and third-party insurance data providers</li>
+    <li>Optimize MSSQL database queries and stored procedures, improving claim processing performance</li>
+    <li>Collaborate with claims specialists to translate business requirements into technical solutions</li>
+  </ul>
+</div>
+```
+
+**Step 2: Save and verify**
+
+---
+
+## Task 4: Expand TV Startup Role
+
+**Files:**
+- Modify: `app/pages/resume.vue` (lines 68-79)
+
+**Step 1: Replace job entry with expanded bullets**
+
+Change lines 68-79 from:
+```vue
+<div class="job">
+  <div class="job-header">
+    <strong>Full Stack Developer</strong>
+    <span class="company">TV Startup Inc.</span>
+    <span class="period">Nov 2023 - 2024</span>
+  </div>
+  <ul>
+    <li>Built CMS with Django APIs integrated with Kubernetes</li>
+    <li>Set up CI/CD pipelines with Jenkins, Docker on Oracle Cloud</li>
+    <li>Configured development and production environments from scratch</li>
+  </ul>
+</div>
+```
+
+To:
+```vue
+<div class="job">
+  <div class="job-header">
+    <strong>Full Stack Developer</strong>
+    <span class="company">TV Startup Inc.</span>
+    <span class="period">Nov 2023 - 2024</span>
+  </div>
+  <ul>
+    <li>Architected and built content management system with Django REST APIs serving Angular frontend</li>
+    <li>Deployed containerized applications on Kubernetes clusters hosted on Oracle Cloud bare metal servers</li>
+    <li>Established CI/CD pipelines using Jenkins, reducing deployment time from hours to minutes</li>
+    <li>Configured Docker-based development environments ensuring parity between local and production</li>
+    <li>Set up monitoring, logging, and alerting infrastructure for production reliability</li>
+  </ul>
+</div>
+```
+
+**Step 2: Save and verify**
+
+---
+
+## Task 5: Expand Navagis Role
+
+**Files:**
+- Modify: `app/pages/resume.vue` (lines 81-92)
+
+**Step 1: Replace job entry with expanded bullets**
+
+Change lines 81-92 from:
+```vue
+<div class="job">
+  <div class="job-header">
+    <strong>Full Stack Developer</strong>
+    <span class="company">Navagis</span>
+    <span class="period">Oct 2021 - Nov 2023</span>
+  </div>
+  <ul>
+    <li>Developed business applications with Google Maps integration</li>
+    <li>Upgraded application technologies and enhanced security</li>
+    <li>Managed project delivery on GCP with Docker containers</li>
+  </ul>
+</div>
+```
+
+To:
+```vue
+<div class="job">
+  <div class="job-header">
+    <strong>Full Stack Developer</strong>
+    <span class="company">Navagis</span>
+    <span class="period">Oct 2021 - Nov 2023</span>
+  </div>
+  <ul>
+    <li>Developed location-based business applications integrating Google Maps APIs for fleet tracking and geofencing</li>
+    <li>Built backend services with C#/.NET and Python/Django, connecting to PostgreSQL databases</li>
+    <li>Led frontend development with ReactJS, implementing responsive designs and real-time data visualization</li>
+    <li>Upgraded legacy applications to modern frameworks, improving performance and maintainability</li>
+    <li>Managed GCP infrastructure including Compute Engine instances, Cloud SQL, and Cloud Storage</li>
+  </ul>
+</div>
+```
+
+**Step 2: Save and verify**
+
+---
+
+## Task 6: Expand Signant Health Role
+
+**Files:**
+- Modify: `app/pages/resume.vue` (lines 94-105)
+
+**Step 1: Replace job entry with expanded bullets**
+
+Change lines 94-105 from:
+```vue
+<div class="job">
+  <div class="job-header">
+    <strong>SQL Developer</strong>
+    <span class="company">Signant Health (Part-time)</span>
+    <span class="period">Nov 2021 - Aug 2022</span>
+  </div>
+  <ul>
+    <li>Built applications to digitize customer records</li>
+    <li>Created stored procedures, data migrations via MSSQL</li>
+    <li>Delivered within SLAs alongside cross-functional teams</li>
+  </ul>
+</div>
+```
+
+To:
+```vue
+<div class="job">
+  <div class="job-header">
+    <strong>SQL Developer</strong>
+    <span class="company">Signant Health (Part-time)</span>
+    <span class="period">Nov 2021 - Aug 2022</span>
+  </div>
+  <ul>
+    <li>Developed data applications to digitize and validate clinical trial customer records</li>
+    <li>Wrote complex stored procedures and functions for data transformation and validation</li>
+    <li>Performed database migrations ensuring data integrity across multiple environments</li>
+    <li>Collaborated with QA and business analysts to meet strict SLA requirements</li>
+  </ul>
+</div>
+```
+
+**Step 2: Save and verify**
+
+---
+
+## Task 7: Expand Accenture Role (Page 2)
+
+**Files:**
+- Modify: `app/pages/resume.vue` (lines 111-122)
+
+**Step 1: Replace job entry with expanded bullets**
+
+Change lines 111-122 from:
+```vue
+<div class="job">
+  <div class="job-header">
+    <strong>Full Stack Developer</strong>
+    <span class="company">Accenture</span>
+    <span class="period">2018 - 2021</span>
+  </div>
+  <ul>
+    <li>Developed CRM web features for consumer goods company</li>
+    <li>Implemented CI/CD using TFS and Azure DevOps</li>
+    <li>Led client discussions on requirements and deliverables</li>
+  </ul>
+</div>
+```
+
+To:
+```vue
+<div class="job">
+  <div class="job-header">
+    <strong>Full Stack Developer</strong>
+    <span class="company">Accenture</span>
+    <span class="period">2018 - 2021</span>
+  </div>
+  <ul>
+    <li>Developed CRM web application features for a global consumer goods company using C#/.NET and ReactJS</li>
+    <li>Built and maintained MSSQL database schemas, stored procedures, and reporting queries</li>
+    <li>Implemented CI/CD pipelines with TFS and Azure DevOps, automating build and deployment processes</li>
+    <li>Led requirements gathering sessions with client stakeholders, translating business needs into user stories</li>
+    <li>Mentored junior developers on coding standards, code reviews, and agile practices</li>
+  </ul>
+</div>
+```
+
+**Step 2: Save and verify**
+
+---
+
+## Task 8: Improve Skills Section Layout
+
+**Files:**
+- Modify: `app/pages/resume.vue` (lines 124-145 and styles)
+
+**Step 1: Update skills section HTML**
+
+Change lines 124-145 from:
+```vue
+<!-- Skills -->
+<section class="resume-section">
+  <h2>SKILLS</h2>
+  <div class="skills-grid">
+    <div>
+      <strong>Languages & Frameworks:</strong>
+      <p>Python, Django, C#, .NET Core, Node.js, NestJS, TypeScript, JavaScript, ReactJS, Angular</p>
+    </div>
+    <div>
+      <strong>Databases:</strong>
+      <p>MSSQL, PostgreSQL, MongoDB</p>
+    </div>
+    <div>
+      <strong>DevOps & Cloud:</strong>
+      <p>Docker, Kubernetes, Jenkins, GitLab CI/CD, Git, TFS, Azure DevOps, GCP, AWS, Oracle Cloud</p>
+    </div>
+    <div>
+      <strong>Other:</strong>
+      <p>Agile methodologies, Linux server setup, REST APIs</p>
+    </div>
+  </div>
+</section>
+```
+
+To:
+```vue
+<!-- Skills -->
+<section class="resume-section">
+  <h2>TECHNICAL SKILLS</h2>
+  <div class="skills-grid">
+    <div class="skill-category">
+      <strong>Languages:</strong>
+      <span>Python, C#, TypeScript, JavaScript, SQL</span>
+    </div>
+    <div class="skill-category">
+      <strong>Frameworks:</strong>
+      <span>Django, .NET Core, Node.js, NestJS, ReactJS, Angular</span>
+    </div>
+    <div class="skill-category">
+      <strong>Databases:</strong>
+      <span>MSSQL, PostgreSQL, MongoDB</span>
+    </div>
+    <div class="skill-category">
+      <strong>Cloud & DevOps:</strong>
+      <span>Azure, GCP, AWS, Docker, Kubernetes, Jenkins, GitLab CI/CD</span>
+    </div>
+    <div class="skill-category">
+      <strong>Tools:</strong>
+      <span>Git, Azure DevOps, TFS, Linux, REST APIs, Agile/Scrum</span>
+    </div>
+  </div>
+</section>
+```
+
+**Step 2: Update skills-grid styles**
+
+Replace lines 298-307 from:
+```css
+.skills-grid {
+  display: grid;
+  gap: 0.5rem;
+  font-size: 0.9rem;
+}
+
+.skills-grid p {
+  margin: 0;
+  color: #444;
+}
+```
+
+To:
+```css
+.skills-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.4rem 1.5rem;
+  font-size: 0.875rem;
+}
+
+.skill-category {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.skill-category strong {
+  color: #1a1a1f;
+  white-space: nowrap;
+}
+
+.skill-category span {
+  color: #2d2d2d;
+}
+```
+
+**Step 3: Save and verify**
+
+---
+
+## Task 9: Expand Projects Section
+
+**Files:**
+- Modify: `app/pages/resume.vue` (lines 156-167)
+
+**Step 1: Update projects with descriptions**
+
+Change lines 156-167 from:
+```vue
+<!-- Projects -->
+<section class="resume-section">
+  <h2>PROJECTS</h2>
+  <div class="project">
+    <strong>JTransit - Cebu Jeepney Navigation App</strong>
+    <p>https://jtransit.github.io/</p>
+  </div>
+  <div class="project">
+    <strong>Tela At Iba Pa - E-Commerce Shop</strong>
+    <p>https://zethcode.github.io/tabp-clothing/</p>
+  </div>
+</section>
+```
+
+To:
+```vue
+<!-- Projects -->
+<section class="resume-section">
+  <h2>PROJECTS</h2>
+  <div class="project">
+    <div class="project-header">
+      <strong>JTransit</strong>
+      <span class="project-link">jtransit.github.io</span>
+    </div>
+    <p class="project-desc">Navigation app helping Cebu commuters find jeepney routes. Built with collaborative mapping and route optimization.</p>
+  </div>
+  <div class="project">
+    <div class="project-header">
+      <strong>Tela At Iba Pa</strong>
+      <span class="project-link">zethcode.github.io/tabp-clothing</span>
+    </div>
+    <p class="project-desc">E-commerce platform built with React and Firebase. Features product catalog, cart, and checkout functionality.</p>
+  </div>
+</section>
+```
+
+**Step 2: Add project styles**
+
+Add after `.project` styles (around line 318):
+```css
+.project-header {
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+}
+
+.project-header strong {
+  color: #1a1a1f;
+}
+
+.project-link {
+  font-size: 0.8rem;
+  color: #8a7355;
+}
+
+.project-desc {
+  margin: 0.15rem 0 0 0;
+  color: #4a4a4a;
+  font-size: 0.85rem;
+}
+```
+
+**Step 3: Save and verify**
+
+---
+
+## Task 10: Refine Typography and Spacing
+
+**Files:**
+- Modify: `app/pages/resume.vue` (style section)
+
+**Step 1: Improve section header styling**
+
+Change lines 250-259 from:
+```css
+.resume-section h2 {
+  font-family: 'Source Sans 3', sans-serif;
+  font-size: 0.9rem;
+  font-weight: 700;
+  color: #1a1a1f;
+  letter-spacing: 0.15em;
+  border-bottom: 1px solid #ddd;
+  padding-bottom: 0.25rem;
+  margin-bottom: 0.75rem;
+}
+```
+
+To:
+```css
+.resume-section h2 {
+  font-family: 'Source Sans 3', sans-serif;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: #8a7355;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  border-bottom: 1px solid #e0e0e0;
+  padding-bottom: 0.35rem;
+  margin-bottom: 0.85rem;
+}
+```
+
+**Step 2: Improve job header spacing**
+
+Change lines 265-271 from:
+```css
+.job-header {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: baseline;
+  margin-bottom: 0.25rem;
+}
+```
+
+To:
+```css
+.job-header {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: baseline;
+  margin-bottom: 0.35rem;
+}
+
+.job-header strong {
+  font-size: 0.95rem;
+}
+```
+
+**Step 3: Adjust job list spacing**
+
+Change lines 287-296 from:
+```css
+.job ul {
+  margin: 0;
+  padding-left: 1.25rem;
+  color: #444;
+  font-size: 0.9rem;
+}
+
+.job li {
+  margin-bottom: 0.15rem;
+}
+```
+
+To:
+```css
+.job ul {
+  margin: 0;
+  padding-left: 1.25rem;
+  color: #2d2d2d;
+  font-size: 0.85rem;
+  line-height: 1.5;
+}
+
+.job li {
+  margin-bottom: 0.2rem;
+}
+```
+
+**Step 4: Save and verify**
+
+---
+
+## Task 11: Final Verification and Print Test
+
+**Step 1: Run dev server**
+```bash
+npm run dev
+```
+
+**Step 2: Visual checklist in browser at `/resume`:**
+- [ ] All text is easily readable (no light gray on white)
+- [ ] Job descriptions fill page 1 appropriately
+- [ ] Page 2 has balanced content (not too sparse or crowded)
+- [ ] Skills section has 2-column layout
+- [ ] Projects have descriptions
+- [ ] Section headers have consistent styling
+- [ ] Company names are readable but distinct
+
+**Step 3: Print test**
+- Click "Print / Save as PDF"
+- Verify 2-page layout in print preview
+- Check no content is cut off at page breaks
+- Confirm consistent margins
+
+**Step 4: Build verification**
+```bash
+npm run build
+```
+Expected: Build completes with no errors
+
+---
+
+## Verification Summary
+
+| Section | Change |
+|---------|--------|
+| Colors | Darker text (#2d2d2d, #4a4a4a), muted accent (#8a7355) |
+| Summary | Expanded with more specific expertise |
+| Each Job | 4-5 detailed bullets instead of 3 |
+| Skills | 2-column grid with 5 categories |
+| Projects | Added descriptions, improved layout |
+| Typography | Refined sizes, better hierarchy |
+
+Expected result: A clean, readable 2-page resume that fills the space appropriately without feeling cluttered.
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 2d3f1bd..2e25655 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -9,7 +9,59 @@ export default defineNuxtConfig({
     '@nuxt/scripts',
     '@nuxt/test-utils',
     '@nuxt/ui',
+    '@nuxtjs/google-fonts',
   ],
+
+  googleFonts: {
+    families: {
+      'Playfair Display': [400, 500, 600, 700],
+      'Source Sans 3': [300, 400, 500, 600, 700],
+      'JetBrains Mono': [400, 500, 600],
+    },
+    display: 'swap',
+    preload: true,
+  },
+
+  css: ['~/assets/css/main.css'],
+
+  colorMode: {
+    preference: 'dark',
+    fallback: 'dark',
+  },
+
+  app: {
+    pageTransition: {
+      name: 'page',
+      mode: 'out-in',
+    },
+    head: {
+      htmlAttrs: {
+        lang: 'en',
+      },
+      title: 'Arckie Jadulco | Full Stack Developer',
+      meta: [
+        { charset: 'utf-8' },
+        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+        { name: 'description', content: 'Full Stack Developer crafting elegant digital experiences with clean code and thoughtful design.' },
+        { name: 'theme-color', content: '#1a1a1f' },
+        // Open Graph
+        { property: 'og:type', content: 'website' },
+        { property: 'og:site_name', content: 'Arckie Jadulco' },
+        { property: 'og:title', content: 'Arckie Jadulco | Full Stack Developer' },
+        { property: 'og:description', content: 'Full Stack Developer crafting elegant digital experiences with clean code and thoughtful design.' },
+        { property: 'og:image', content: '/og-image.png' },
+        // Twitter
+        { name: 'twitter:card', content: 'summary_large_image' },
+        { name: 'twitter:title', content: 'Arckie Jadulco | Full Stack Developer' },
+        { name: 'twitter:description', content: 'Full Stack Developer crafting elegant digital experiences with clean code and thoughtful design.' },
+        { name: 'twitter:image', content: '/og-image.png' },
+      ],
+      link: [
+        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
+      ],
+    },
+  },
+
   devtools: { enabled: true },
   compatibilityDate: '2024-04-03',
 })
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 15b8ee1..4445cff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@nuxt/scripts": "^0.13.2",
         "@nuxt/test-utils": "^3.23.0",
         "@nuxt/ui": "^4.4.0",
+        "@nuxtjs/google-fonts": "^3.2.0",
         "@unhead/vue": "^2.1.2",
         "better-sqlite3": "^12.6.2",
         "eslint": "^9.39.2",
@@ -4026,6 +4027,61 @@
       "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
       "license": "MIT"
     },
+    "node_modules/@nuxtjs/google-fonts": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/google-fonts/-/google-fonts-3.2.0.tgz",
+      "integrity": "sha512-cGAjDJoeQ2jm6VJCo4AtSmKO6KjsbO9RSLj8q261fD0lMVNMZCxkCxBkg8L0/2Vfgp+5QBHWVXL71p1tiybJFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "^3.10.3",
+        "google-fonts-helper": "^3.5.0",
+        "pathe": "^1.1.2"
+      }
+    },
+    "node_modules/@nuxtjs/google-fonts/node_modules/@nuxt/kit": {
+      "version": "3.21.0",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.21.0.tgz",
+      "integrity": "sha512-KMTLK/dsGaQioZzkYUvgfN9le4grNW54aNcA1jqzgVZLcFVy4jJfrJr5WZio9NT2EMfajdoZ+V28aD7BRr4Zfw==",
+      "license": "MIT",
+      "dependencies": {
+        "c12": "^3.3.3",
+        "consola": "^3.4.2",
+        "defu": "^6.1.4",
+        "destr": "^2.0.5",
+        "errx": "^0.1.0",
+        "exsolve": "^1.0.8",
+        "ignore": "^7.0.5",
+        "jiti": "^2.6.1",
+        "klona": "^2.0.6",
+        "knitwork": "^1.3.0",
+        "mlly": "^1.8.0",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.3.0",
+        "rc9": "^2.1.2",
+        "scule": "^1.3.0",
+        "semver": "^7.7.3",
+        "tinyglobby": "^0.2.15",
+        "ufo": "^1.6.3",
+        "unctx": "^2.5.0",
+        "untyped": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/@nuxtjs/google-fonts/node_modules/@nuxt/kit/node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "license": "MIT"
+    },
+    "node_modules/@nuxtjs/google-fonts/node_modules/pathe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
+      "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
+      "license": "MIT"
+    },
     "node_modules/@nuxtjs/mdc": {
       "version": "0.20.0",
       "resolved": "https://registry.npmjs.org/@nuxtjs/mdc/-/mdc-0.20.0.tgz",
@@ -12103,6 +12159,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/google-fonts-helper": {
+      "version": "3.7.3",
+      "resolved": "https://registry.npmjs.org/google-fonts-helper/-/google-fonts-helper-3.7.3.tgz",
+      "integrity": "sha512-dENZeK6RMvkCOFoKbLbS+pyoDgpmk4U6BYmfXnztMar2d8SjEG6valxql/Lkyi7bu5F+3FTdE+gAEYSYZ5zzMA==",
+      "license": "MIT",
+      "dependencies": {
+        "deepmerge": "^4.3.1",
+        "hookable": "^5.5.3",
+        "ofetch": "^1.4.1",
+        "ufo": "^1.5.4"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -18459,9 +18527,9 @@
       }
     },
     "node_modules/tar": {
-      "version": "7.5.6",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.6.tgz",
-      "integrity": "sha512-xqUeu2JAIJpXyvskvU3uvQW8PAmHrtXp2KDuMJwQqW8Sqq0CaZBAQ+dKS3RBXVhU4wC5NjAdKrmh84241gO9cA==",
+      "version": "7.5.7",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.7.tgz",
+      "integrity": "sha512-fov56fJiRuThVFXD6o6/Q354S7pnWMJIVlDBYijsTNx6jKSE4pvrDTs6lUnmGvNyfJwFQQwWy3owKz1ucIhveQ==",
       "license": "BlueOak-1.0.0",
       "dependencies": {
         "@isaacs/fs-minipass": "^4.0.0",
diff --git a/package.json b/package.json
index 9f71a62..f24a0fc 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "type": "module",
   "scripts": {
     "build": "nuxt build",
-    "dev": "nuxt dev",
+    "dev": "nuxt dev --host 0.0.0.0",
     "generate": "nuxt generate",
     "preview": "nuxt preview"
   },
@@ -17,6 +17,7 @@
     "@nuxt/scripts": "^0.13.2",
     "@nuxt/test-utils": "^3.23.0",
     "@nuxt/ui": "^4.4.0",
+    "@nuxtjs/google-fonts": "^3.2.0",
     "@unhead/vue": "^2.1.2",
     "better-sqlite3": "^12.6.2",
     "eslint": "^9.39.2",
diff --git a/public/og-image.png b/public/og-image.png
new file mode 100644
index 0000000..54329fe
Binary files /dev/null and b/public/og-image.png differ
diff --git a/public/resume.pdf b/public/resume.pdf
new file mode 100644
index 0000000..ce07877
Binary files /dev/null and b/public/resume.pdf differ
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..517dc15
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,38 @@
+import type { Config } from 'tailwindcss'
+import typography from '@tailwindcss/typography'
+
+export default {
+  theme: {
+    extend: {
+      typography: {
+        DEFAULT: {
+          css: {
+            h1: {
+              fontSize: 'clamp(2.5rem, 5vw, 4rem)',
+              fontWeight: '700',
+              lineHeight: '1.1',
+              letterSpacing: '-0.02em',
+              color: 'var(--color-text-primary)',
+              fontFamily: 'var(--font-display)',
+            },
+            h2: {
+              fontSize: 'clamp(1.75rem, 3vw, 2.5rem)',
+              fontWeight: '600',
+              lineHeight: '1.2',
+              color: 'var(--color-text-primary)',
+              fontFamily: 'var(--font-display)',
+            },
+            h3: {
+              fontSize: 'clamp(1.5rem, 2.5vw, 2rem)',
+              fontWeight: '600',
+              lineHeight: '1.2',
+              color: 'var(--color-text-primary)',
+              fontFamily: 'var(--font-display)',
+            },
+          },
+        },
+      },
+    },
+  },
+  plugins: [typography],
+} satisfies Config