A developer portfolio is more than a personal website. In my case, I wanted to solve a very practical problem: I needed a single place where I could present my profile, organize my technical projects, and make it easy for people to contact me. As I kept building projects related to Python, automation, backend development, and data-oriented tools, it became clear that I needed a portfolio that felt professional, maintainable, and real.
This project was especially interesting to me because it was not only about design. It was also about architecture, content organization, deployment, and user experience.
The project environment
Instead of working with a dataset, this project was built around a real frontend and deployment environment. The main challenge was to create a site that could combine presentation and structure without becoming difficult to maintain.
The portfolio was built with:
- TanStack Start
- React 19
- TypeScript
- Tailwind CSS 4
- typed Markdown content collections
- Vercel for deployment
- Resend for the contact form
The content includes several structured sections: About, Skills, Projects, Experience, Education, Resume, and Contact. One important requirement was that the portfolio should support both Spanish and English, work well on desktop and mobile, and include a real contact form instead of a static email link.
The process
The first step was defining the structure of the portfolio. I wanted a homepage with section-based navigation, but also standalone routes for pages like /resume, /projects, and /contact. This made the project feel more complete and easier to navigate.
The next step was content management. Instead of hardcoding projects, work experience, and education directly in components, I used Markdown files with typed frontmatter. That decision made the project much easier to scale, because adding or updating content became a matter of editing structured files instead of modifying UI code.
After that, I focused on the interface itself. I built clear sections for the main information and paid special attention to the projects area. Rather than using a basic static grid, I implemented an interactive card deck. The main card opens the GitHub repository, while side cards can be brought to the front by clicking them. I chose this approach because it made the section more dynamic without hurting usability.
I also added theme switching, bilingual support, responsive design improvements, and a contact form connected to a server-side API route. Finally, I deployed the site to Vercel and configured the environment variables needed for email sending.
Results
The final result is a portfolio that is fully deployed and publicly accessible. It includes:
- a responsive layout
- dark and light mode
- language switching between Spanish and English
- interactive project cards
- a functional contact form
- a detailed resume page
- structured project, education, and experience content
From a technical point of view, one of the best outcomes was having a project that is visually polished while still being easy to maintain. The use of typed content collections and a clean route structure helped a lot with that.
I also documented the project properly in GitHub, including screenshots and setup instructions, so it can be presented as a complete academic and professional project.
What I learned
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.
I also learned the value of separating content from presentation, especially in projects that will continue evolving over time. If I had to improve something in the future, I would spend more time on SEO, richer project detail pages, and perhaps more analytics around how visitors interact with the site.
A logical next step would be to keep expanding the portfolio with new projects and technical articles, turning it into a stronger public record of my work.
You can find the GitHub repository here:
GitHub: Proyecto-Master-DataScience-Evolve-DanielJoseSanchezMoares
This project was developed during my Master's at Evolve
(https://evolve.es).
Top comments (0)