<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Daniel Sánchez Moares</title>
    <description>The latest articles on Forem by Daniel Sánchez Moares (@danisanchezdevx).</description>
    <link>https://forem.com/danisanchezdevx</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3914552%2Fa59e7ee6-0c1e-4c71-b63b-c2465f41eced.jpeg</url>
      <title>Forem: Daniel Sánchez Moares</title>
      <link>https://forem.com/danisanchezdevx</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/danisanchezdevx"/>
    <language>en</language>
    <item>
      <title>How I built my developer portfolio with React and TanStack Start — my project at Evolve</title>
      <dc:creator>Daniel Sánchez Moares</dc:creator>
      <pubDate>Tue, 05 May 2026 19:07:49 +0000</pubDate>
      <link>https://forem.com/danisanchezdevx/building-my-developer-portfolio-as-a-data-science-masters-project-11f2</link>
      <guid>https://forem.com/danisanchezdevx/building-my-developer-portfolio-as-a-data-science-masters-project-11f2</guid>
      <description>&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj3fjry3znri7en450v00.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj3fjry3znri7en450v00.png" alt=" " width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;h2&gt;
  
  
  The project environment
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;The portfolio was built with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;TanStack Start&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;React 19&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;TypeScript&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Tailwind CSS 4&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;typed Markdown content collections&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Vercel&lt;/strong&gt; for deployment&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Resend&lt;/strong&gt; for the contact form&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The content includes several structured sections: About, Skills, Projects, Experience, Education, Resume, and Contact. One important requirement was that the portfolio should support both &lt;strong&gt;Spanish and English&lt;/strong&gt;, work well on desktop and mobile, and include a real contact form instead of a static email link.&lt;/p&gt;

&lt;h2&gt;
  
  
  The process
&lt;/h2&gt;

&lt;p&gt;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 &lt;code&gt;/resume&lt;/code&gt;, &lt;code&gt;/projects&lt;/code&gt;, and &lt;code&gt;/contact&lt;/code&gt;. This made the project feel more complete and easier to navigate.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1bm9dvb032q9h1b6lfnu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1bm9dvb032q9h1b6lfnu.png" alt=" " width="800" height="399"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;h2&gt;
  
  
  Results
&lt;/h2&gt;

&lt;p&gt;The final result is a portfolio that is fully deployed and publicly accessible. It includes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;a responsive layout&lt;/li&gt;
&lt;li&gt;dark and light mode&lt;/li&gt;
&lt;li&gt;language switching between Spanish and English&lt;/li&gt;
&lt;li&gt;interactive project cards&lt;/li&gt;
&lt;li&gt;a functional contact form&lt;/li&gt;
&lt;li&gt;a detailed resume page&lt;/li&gt;
&lt;li&gt;structured project, education, and experience content&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqp6ukmg5wt7f2xckboj5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqp6ukmg5wt7f2xckboj5.png" alt=" " width="800" height="398"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I learned
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;You can find the GitHub repository here:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;GitHub:&lt;/strong&gt; &lt;a href="https://github.com/DaniSanchezDevx/Proyecto-Master-DataScience-Evolve-DanielJoseSanchezMoares" rel="noopener noreferrer"&gt;Proyecto-Master-DataScience-Evolve-DanielJoseSanchezMoares&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This project was developed during my Master's at Evolve&lt;br&gt;
(&lt;a href="https://evolve.es" rel="noopener noreferrer"&gt;https://evolve.es&lt;/a&gt;).&lt;/p&gt;

</description>
      <category>datascience</category>
      <category>react</category>
      <category>typescript</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
