raynold.dev

raynold.dev is my personal portfolio site — a fast, minimal, and statically generated website built with Next.js and styled using shadcn/ui. It serves as a home for my projects, a living résumé, and a sandbox for exploring modern frontend tools.

✍️ Content Architecture

All content — including project writeups like this one — is written in MDX. I use next-mdx-remote to serialize and render MDX files at build time, transforming them into static pages with React components embedded where needed.

This gives me:

• A developer-friendly, file-based content workflow
• Full Markdown expressiveness, plus custom interactive components
• Cleanly separated content and layout logic

Each MDX file includes frontmatter metadata (like title, description, and tech stack), which I manually validate and map into props for display and SEO.

🆚 Why Not Use a CMS?

I explored a few CMS options during the build:

• Sanity: It offered a great editing interface, but I didn’t want to introduce a dependency on a SaaS platform that could change its pricing model or API stability over time.
• Payload CMS: Self-hosted and powerful, but far too complex for my needs. It felt like setting up an entire backend for something I could achieve with static files.

By using MDX + next-mdx-remote, I kept the site lightweight, version-controlled, and fully under my control — ideal for a personal project where I'm the only author.

🚀 Deployment & Analytics

The site is deployed on Vercel, taking advantage of:

• Preview deployments for every pull request
• Atomic, zero-downtime production pushes
• Edge CDN for performance

For analytics, I use PostHog to capture:

• Page views
• UTM sources (e.g. from résumé links or LinkedIn)
• User interactions like outbound clicks and CTA taps

🎨 Design & Theming

The UI is built using:

• shadcn/ui — accessible, themeable component primitives
• Tailwind CSS — for responsive, utility-first layout
• OKLCH color system — for perceptually consistent color contrast across themes

I used TweakCN to generate the Tailwind color tokens and fine-tune the theme palette, ensuring strong contrast and harmony in both light and dark modes. This integrates cleanly with shadcn/ui’s design system and Tailwind’s utility classes.

The site respects system preference for dark mode and includes smooth transitions between themes.

📊 Lighthouse Report

As of July 2025, raynold.dev scores a perfect 100/100 across all Lighthouse categories — reflecting a strong focus on performance, accessibility, and modern best practices.

⚡ Performance — 100

• Pages are statically generated and edge-cached via Vercel

• Images are optimized using the Next.js Image component

• Fonts are preloaded, and JavaScript is kept minimal

♿ Accessibility — 100

• Built with shadcn/ui and Radix

• Fully keyboard accessible with proper focus management and ARIA roles

• Complies with color contrast and motion preferences

🧼 Best Practices — 100

• Secure HTTPS delivery, responsive layout, and no console errors

• No use of deprecated APIs

• Built on stable, modern libraries with strong community support

🔍 SEO — 100

• Semantic HTML and structured content from MDX

• All images use alt attributes

• Optimized metadata for previews and search engines

✅ Outcome

raynold.dev is fully static, dependency-light, and fast. I have full ownership of the content, no runtime complexity, and a clean workflow for updating or expanding the site over time.

Demo: You're already here!