Personal
Portfolio & Blog

The Challenge

Portfolios built with pure React or Next.js often suffer from 'Hydration Mismatch' and bloated JS payloads for pages that are, in practice, almost entirely static. The challenge was:

• / Ensuring perfect Lighthouse scores (Performance and SEO).
• / Building an easy-to-maintain local 'Headless' CMS without relying on an external database.
• / Maintaining strict typing (TypeScript) across all content data.

The Solution

I solved this using Astro Content Collections: all content data (experiences, projects) becomes a JSON file validated against a strict Zod schema at build time — if a field is malformed, the build breaks before deployment, never in production.

const experience = defineCollection({
  loader: glob({ pattern: "**/*.json", base: "./src/content/experience" }),
  schema: z.object({
    company: z.string(),
    role: z.string(),
    rotation: z.array(z.object({
      project: z.string(),
      stack: z.string()
    })).optional()
  })
});