Loading...
Overview
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.
Architecture
Server-first application built with Next.js App Router, React, and TypeScript, using Tailwind CSS and shadcn/ui for the presentation layer. Portfolio 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, including theme switching and the contact form. A custom light and dark theme system uses CSS variables, localStorage, system color preference detection, and an initialization script executed before the application renders to minimize theme flashing. 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.
Tech Stack
Frontend
Security
Integration
Cloud
Infrastructure
Tools
Key Contributions
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.
Implemented pre-render theme initialization to reduce visible theme changes during application startup.
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.
Configured the custom domain, DNS infrastructure, inbound email routing, and branded professional email.
Implemented comprehensive SEO metadata, Open Graph metadata, Twitter metadata, sitemap generation, robots directives, web manifest, and custom social preview assets.
Implemented custom loading, error, and not-found experiences using Next.js App Router conventions.
Integrated Vercel Analytics and Speed Insights for production traffic and performance observability.
Configured continuous production deployment through GitHub and Vercel.
Optimized the production experience for performance, accessibility, SEO, responsive behavior, and maintainability.
Engineering Decisions
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. This keeps client-side boundaries explicit and avoids shipping unnecessary JavaScript.
Rather than introducing a theme library, I implemented a focused light and dark theme system using CSS variables, localStorage, system preference detection through matchMedia, and a small initialization script executed before hydration. The behavior remains explicit and fully aligned with the portfolio design tokens.
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 preserving a frictionless contact experience. Detected honeypot submissions intentionally receive a normal success response without triggering email delivery.
Key Challenges
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.
Supporting comprehensive SEO and social-sharing behavior while keeping metadata centralized and maintainable inside the App Router architecture.
Maintaining a clean visual system with minimal animation and decorative complexity while still creating a distinctive modern engineering portfolio.
Security Considerations
Resend API credentials, sender configuration, and destination email settings are stored in environment variables and used exclusively from server-side code. The browser never communicates directly with the email provider.
The contact form validates input in the browser for immediate feedback, but every submission is validated again with Zod inside the Route Handler. Server-side validation defines the real trust boundary.
A hidden company field is invisible to normal users but may be populated by simple automated bots. When that happens, the endpoint returns a normal success response without sending an email, reducing the chance of exposing the detection mechanism.
The public contact endpoint applies lightweight IP-based throttling with a limit of five requests within a ten-minute window for the active server instance. This provides a practical first layer of abuse protection without introducing external persistence or infrastructure.
Validation failures, throttled requests, email delivery errors, and unexpected server exceptions return controlled responses that avoid exposing provider details, credentials, stack traces, or other internal implementation information.
Impact
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.
Established automated production deployments through the GitHub and Vercel workflow.
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.
Established a production foundation that can evolve through additional releases without requiring a redesign of the core portfolio architecture.