The screen glowed, a solitary beacon in a dimly lit room, displaying lines of code that promised more than just a digital resume.
Look, building a developer portfolio. Everyone needs one. It’s where you dump your life’s work. But this isn’t that. This is about craft. This is about making something that works, that doesn’t fall apart the moment you look away. The original author wanted a single spot for their profile, projects, and contact info. Fine. Standard stuff. But they wanted it to feel professional. Maintainable. Real. And frankly, that’s a higher bar than most clear.
They didn’t just tack on a pretty face. This was architecture. Content organization. Deployment. User experience. The whole nine yards. Building a site that looks good and is easy to manage? That’s the unicorn.
The Toolkit: Not Your Average Dev Stack
Here’s what went into this digital edifice:
- TanStack Start: For the foundational scaffolding.
- React 19: The ever-present frontend titan.
- TypeScript: Because we’re not savages.
- Tailwind CSS 4: Styling, quickly and efficiently.
- Typed Markdown Content Collections: The secret sauce for content.
- Vercel: Deployment, made simple (supposedly).
- Resend: For a contact form that doesn’t just spit back errors.
Forget static lists. This portfolio boasts actual sections: About, Skills, Projects, Experience, Education, Resume, and Contact. Bilingual support (Spanish and English) was a must, as was responsiveness. And a real contact form. Not just an mailto: link. We’re living in the future, people.
Structure and Substance: More Than Just Code
Defining the structure was key. A homepage with slick navigation, sure, but also dedicated pages for /resume and /projects. This makes it feel… complete. Less like a landing page, more like an actual destination.
Content management. This is where many projects devolve into madness. Hardcoding everything? Terrible idea. Instead, they used Markdown files with typed frontmatter. Adding or changing a project becomes editing a file. Not wrestling with JSX. Scalability achieved. Genius.
Then came the interface. Clear sections, naturally. But the projects area? That’s where things got interesting. No boring grid. An interactive card deck. Click the main card, it goes to GitHub. Click the side cards, they pop forward. Dynamic. Usable. It’s a small touch, but it elevates the whole thing.
Theme switching, language support, responsive design, a functional contact form – all wired up to a serverless function. Then, boom, deployed to Vercel. Environment variables sorted. Done.
The result? A polished, accessible portfolio. Dark mode, light mode, two languages, interactive cards, a working contact form, detailed pages. Technically speaking, it’s visually appealing and easy to maintain. That’s the win. Typed content collections and a clean route structure don’t lie.
And yes, they documented it properly on GitHub. Screenshots. Setup instructions. It’s presented as a proper academic and professional piece. Because it is.
The Portfolio as a Product
Here’s the real insight. The author learned that a portfolio is a product itself. Not just a place to show off other projects. It’s a direct reflection of how you think about development. Your architectural choices speak volumes. The value of separating content from presentation is enormous, especially for anything that will grow over time.
If there’s a critique, it’s that SEO, richer project detail pages, and visitor analytics could be expanded. Standard stuff for future iterations. The logical next step? Keep adding projects. Write articles. Build a stronger public record.
This project, developed during their Master’s at Evolve, is a blueprint. It’s proof that you can build something that looks good, feels good, and doesn’t require a team of developers to update.
One of the main things I learned is that a portfolio is itself a product. It is not only a container for other projects, but also a direct reflection of how you think about development.
Check the code. It’s publicly available.
GitHub: Proyecto-Master-DataScience-Evolve-DanielJoseSanchezMoares
Why Does This Matter for Developers?
This project isn’t just about building a personal website. It’s a case study in building scalable, maintainable, and user-friendly frontend applications. The use of TanStack Start, coupled with React 19 and TypeScript, demonstrates a modern approach to development that prioritizes developer experience and long-term project health. By separating content from presentation using typed Markdown collections, the developer has created a system that is both strong and adaptable. This is the kind of thinking that separates a hobbyist from a seasoned professional.
🧬 Related Insights
- Read more: Duolingo’s Kubernetes Leap: Ditching ECS for a Scalable Future
- Read more: Cage 0.3 Lands with wlroots 0.20, Unlocking New Wayland Protocols and VR Potential
Frequently Asked Questions
What is TanStack Start? TanStack Start is a framework for building web applications that emphasizes flexibility and developer experience, built on top of React.
Is this portfolio difficult to maintain? No, the article emphasizes that a key design goal was maintainability, achieved through structured content management (typed Markdown collections) and a clean architecture.
Can I use this approach for my own portfolio? Absolutely. The article details the technologies and strategies used, making it a valuable guide for developers looking to build their own professional online presence.
