How I Built My Professional Portfolio with React 19 and Vite 7

When I decided to upgrade my professional portfolio, I had a clear objective: I didn't want a simple static template. As a Solution Architect and Software Engineer, my professional showcase needed to reflect my engineering standards: optimal performance, clean architecture, scalability, native internationalization, and flawless SEO.

In this post, I will share the details of how I designed and built this site from scratch, the technology choices I made, and the technical solutions I implemented.

---

🛠️ The Tech Stack: Why These Tools?

To achieve an ultra-fast, modern, and easily maintainable site, I selected a powerful ecosystem of tools:

Category	Chosen Technology	Primary Reason
Core	React 19 + Vite 7	Blazing-fast development speed and the latest React capabilities for efficient state and component management.
Routing	react-router-dom 7	Seamless SPA navigation and clean routing for an optimal user experience.
Styling	Tailwind CSS + Ant Design 6	Tailwind for bespoke layouts and full responsive control; Ant Design for complex, enterprise-grade UI components.
Backend & DB	Neon PostgreSQL + Vercel Functions	Cloud-native, serverless database architecture combined with serverless API endpoints for an infrastructure-free backend.
Rendering	react-markdown + remark-gfm	Allows writing articles (like this one) directly in Markdown with native support for tables and code blocks.

---

🏗️ Architecture & Project Structure

To ensure long-term maintainability, I chose a serverless, decoupled directory structure. The project is split into a cloud-native backend layer hosted via Vercel Functions and a modular frontend architecture:

• api/: Houses our Vercel Serverless Functions, mapping out native REST API endpoints (/api/posts, /api/auth/verify) to process backend requests in production.
• server/: Manages our main PostgreSQL pool connection utilizing the edge-compatible @neondatabase/serverless package.
• src/: Houses our atomic frontend components (SEO trackers, BlogCards, layout shells), localization bundles (en/es), and application route views.

---

🚀 Key Implementation Features

1. Advanced SEO & Structured Data

A portfolio that nobody can find is not effective. To maximize organic reach and search indexing, I implemented:

• react-helmet-async: Dynamic injection of metadata (title, description, canonical, Open Graph, and Twitter Cards) tailored for every individual route.
• Structured JSON-LD Data: Injection of rich schema markup (Person, WebSite, ProfilePage) to provide search engines with clear context about my role and skills.
• Automation: A custom script (generate-sitemap.js) integrated into the build pipeline that automatically regenerates the sitemap.xml file on every deployment.

2. Native Internationalization (i18n)

Working with global clients and enterprise teams meant that bilingual support was a core requirement. Using i18next combined with i18next-browser-languagedetector, the application:

• Automatically detects the user's preferred browser language.
• Persists manual language overrides seamlessly in localStorage.
• Localizes both the UI shell and the structural content (projects, experience, and biography).

3. Serverless Blog Engine & Neon PostgreSQL

To make the content truly dynamic without managing heavy infrastructure, I transitioned to a decoupled database-as-a-service model:

• Storage: Data is securely stored in a cloud-hosted PostgreSQL database provided by Neon, connecting seamlessly over the edge via @neondatabase/serverless.
• Serverless Backend: Built out a lightweight API gateway inside the /api directory using Vercel Serverless Functions. This processes secure GET, POST, PUT, and DELETE transactions.
• Vite Dev Proxy: Configured Vite's dev server middleware to intercept local proxy calls to /api/* during local development, mimicking the cloud serverless environment locally before pushing to production.

4. Continuous Analytics & Performance Monitoring

Performance shouldn't be guessed—it should be quantified. The application is deployed on Vercel, leveraging its native observability toolset:

• Vercel Analytics: Provides privacy-centric audience insights without performance overhead.
• Vercel Speed Insights: Real-time tracking of Core Web Vitals (LCP, FID, CLS) to guarantee instantaneous load speeds.

---

💡 Lessons Learned

Building this portfolio provided a perfect environment to test drive the latest features of React 19, the build speeds of Vite 7, and serverless database integrations. Transitioning from a local environment to cloud-native Serverless Functions using Neon Postgres allowed me to keep the entire setup zero-maintenance while retaining massive scalability.

This platform will continue to evolve, serving not only as my digital resume but also as a sandbox for testing new architectural patterns and tools.

---

What do you think about this serverless architecture setup? If you are planning to build your own portfolio or have questions regarding SEO in SPAs or serverless database connections, feel free to drop me a message via the contact page!