Back to selected engineering work

Case study

Marcio Merlone Portfolio

A Next.js 16 portfolio showcasing selected engineering work, career path, selected experience, compressed technical skills, résumé, and contact information. Built as a living sandbox and experimentation lab in permanent evolution.

Marcio Merlone Portfolio homepage screenshot showing the hero section and navigation

Role

I designed and built this portfolio from scratch aiming for the simplest and most effective way to showcase my work leveraging AI tools and modern web technologies.

Context

A portfolio is needed to showcase engineering work, career progression, and technical skills using modern React and Next.js patterns while serving as a hands-on sandbox for evaluating AI-enabled development tools.

Constraints

  • Must work end-to-end with modern Next.js App Router and React 19 patterns. Even if it could be much simpler, down to a static HTML file.
  • Must pass all popular performance and accessibility checks.
  • Must use native and idiomatic HTML and CSS over custom code when possible.
  • Must support content negotiation for Markdown output and structured data.
  • Must showcase my career path and evolution, while also demonstrating some of my technical skills and contributions.
  • Must use free-tiers of various AI-enabled tools and IDEs, as well as hosting and backend services.

Decisions

  • Next.js App Router with Server and Client components where each is needed.
  • React 19 with TypeScript for type-safe component composition.
  • Tailwind CSS 4 with Sass and Open Props for a hybrid utility and token-based styling system.
  • Phosphor Icons for a consistent, accessible icon family.
  • next-themes for theme management with Light, System, and Dark choices.
  • Vercel for hosting, deployment, and edge functions.
  • Content negotiation via Accept header for HTML/Markdown variants with Vary: Accept handling.
  • Pino Logger for structured server-side logs.
  • Reduced-motion-aware carousel with isolated CSS transforms.
  • Cookie consent with analytics opt-in for Google Analytics, Google Tag Manager, and Ahrefs Analytics.
  • Automated quality gates: ESLint, TypeScript, Knip, Jest, and build verification in CI.

Trade-offs

  • Using free tiers of AI tools trades some stability for rapid experimentation and learning.
  • The portfolio itself is a living sandbox in permanent evolution, while published npm modules and YwyBase prioritize stability and maintainability.
  • Hybrid styling (Tailwind + Open Props + Sass) requires discipline to avoid conflicting utility and token styles.
  • Content negotiation adds complexity but enables machine-readable portfolio data.

Outcome

A working, deployable portfolio at mmerlone.dev.br that showcases engineering work, career path, and technical skills while serving as evidence of modern full-stack React/Next.js patterns and AI-assisted development workflows.