Server-first
Content-heavy pages default to Server Components to keep client-side JavaScript focused.
Loading...
Loading...
Case Study
completed
Production-grade engineering portfolio built with Next.js to showcase technical experience, projects, and engineering decisions while prioritizing performance, accessibility, SEO, and maintainability.
Designed and developed a production portfolio as a professional engineering platform rather than a traditional static personal website. The application centralizes technical experience, projects, professional branding, and contact capabilities within a minimal product-oriented interface. The implementation focuses on server-first rendering, strong SEO, accessibility, responsive behavior, production email delivery, custom theming, and a maintainable component architecture designed to evolve through independent releases.
Server-first application where content is modeled through strongly typed constants and rendered through reusable sections and components. Client-side boundaries are intentionally limited to functionality that requires browser interaction. Contact submissions are processed through a Next.js Route Handler with server-side schema validation, honeypot protection, IP-based rate limiting, and Resend integration. The application is continuously deployed to Vercel from GitHub, with Cloudflare managing the custom domain, DNS, and inbound email routing.
Core Architecture Decisions
Content-heavy pages default to Server Components to keep client-side JavaScript focused.
Browser-dependent behavior is isolated to focused Client Components such as theme switching and contact interaction.
Deployment, DNS, email delivery, analytics, and monitoring are separated across dedicated production services.
Designed and implemented the complete portfolio architecture using the Next.js App Router.
Built reusable and strongly typed sections for professional experience, skills, projects, profile information, and navigation.
Created a custom responsive dark and light theme system using CSS variables, localStorage, system preference detection, and explicit client-side state synchronization.
Built a production contact workflow using React Hook Form, Zod, Next.js Route Handlers, and Resend.
Implemented honeypot bot detection and IP-based request throttling for the public contact endpoint.
Implemented comprehensive SEO metadata, Open Graph metadata, Twitter metadata, sitemap generation, robots directives, web manifest, and custom social preview assets.
The portfolio uses Server Components as the default rendering model because most of the application is content-driven and does not require browser-side state. Client Components are introduced only where browser APIs or direct user interaction are necessary, including theme switching and the contact form.
Rather than introducing a theme library, I implemented a focused light and dark theme system using CSS variables, localStorage, matchMedia, and a small initialization script executed before hydration.
The contact form performs client-side validation for user experience, but the server remains the source of trust. Submissions are processed through /api/contact, validated with Zod, and passed to a dedicated email service so provider credentials never reach browser code.
I chose a honeypot and lightweight IP-based rate limiting instead of adding CAPTCHA. The goal was to reduce basic automated abuse while keeping the contact experience frictionless for legitimate users.
SEO and social metadata are implemented through the Next.js metadata APIs, including Open Graph, Twitter metadata, sitemap generation, robots directives, and per-project metadata.
Creating a distinctive professional identity without sacrificing readability, accessibility, responsive behavior, or loading performance.
Defining clear Server and Client Component boundaries while keeping unnecessary client-side JavaScript to a minimum.
Building a custom theme implementation that respects the operating system preference, persists explicit user choices, and avoids visible theme flashing during initialization.
Building a secure public contact workflow without exposing email provider credentials or backend configuration to the browser.
Protecting the contact endpoint against automated submissions while keeping the contact experience frictionless and avoiding CAPTCHA.
Coordinating Vercel deployment, Cloudflare DNS and email routing, and Resend transactional email under a single professional domain.
Resend credentials and email configuration are stored in environment variables and used exclusively from server-side code. The browser never communicates directly with the email provider.
Contact submissions are validated again with Zod inside the Route Handler, even though the form also performs client-side validation.
A hidden company field helps identify simple automated submissions. Detected submissions receive a normal success response without triggering email delivery.
The public contact endpoint applies lightweight IP-based throttling with a five-request limit over a ten-minute window within the active server instance.
Deployed a production-ready engineering portfolio on the custom alexbenavidez.dev domain.
Achieved approximately 99 Performance and 100 Accessibility, Best Practices, and SEO scores in Lighthouse Desktop testing.
Established a centralized professional destination for technical experience, projects, engineering capabilities, professional branding, and recruiter contact.
Implemented a production contact workflow connected to the branded contact@alexbenavidez.dev professional email identity.
Integrated production analytics and performance monitoring through Vercel Analytics and Speed Insights.
Created an extensible project architecture capable of evolving from project cards into detailed technical case studies in Release 2.
A portfolio does not need enterprise complexity, but rendering, content modeling, accessibility, deployment, and security still benefit from clear boundaries and intentional architecture.
Starting with Server Components for content-heavy pages made it easier to keep client-side behavior focused and avoid unnecessary JavaScript.
The public contact form required protection against malformed input and basic automated abuse, but not a heavy security layer. Server validation, honeypot detection, and request throttling provided an appropriate balance.
SEO, accessibility, analytics, performance monitoring, transactional email, DNS configuration, and deployment are part of delivering a complete production application, not just finishing touches.