Portfolio Website
Santiago Segovia
May 2026 - Present
Technologies — TypeScript · JavaScript · HTML · CSS · React · Next.js · Tailwind CSS
Abstract
Designed and developed a Next.js and TypeScript portfolio combining reusable project data, dedicated technical case studies, interactive mathematical graphics, responsive layouts, and a Resend-powered contact workflow.
Project Overview
This portfolio presents my mathematics and computer science background through project summaries, detailed technical explanations, and an interactive mathematical visual identity. The site serves two related audiences: visitors who need a quick overview of my work and readers who want to examine the methods, implementation choices, and limitations behind an individual project.
Coordinate planes, graph-paper backgrounds, and plotted equations connect the presentation to my interests in numerical computing and mathematical modeling. The design objective is to make that connection visible while maintaining readable content and clear navigation. Project cards provide an initial point of entry, and dedicated pages allow the technical discussion to expand beyond the space available on the homepage.
Application Structure
The application is built with Next.js, React, and TypeScript, with Tailwind CSS providing styling. Reusable components organize recurring interface elements so that visual and structural decisions can be maintained consistently across pages. TypeScript supports explicit expectations about the data passed between these components.
A shared project array supplies both homepage cards and individual project pages. Each entry contains identifying metadata, a short description, and structured sections for the longer explanation. A project's slug connects its summary to its dedicated route. This arrangement separates editorial content from page layout, allowing descriptions to evolve without duplicating the rendering logic for every project.
Interactive Design
The homepage combines animated graph elements with a Desmos-inspired panel that lets visitors interact with the mathematical presentation. React state tracks the selected graph and whether the panel is collapsed, connecting user actions to the visible interface. The equations function as part of the site's identity while also providing a concrete interactive element.
Framer Motion supplies entrance and hover animations, and responsive layout rules adapt spacing and placement to different screen sizes. The principal design constraint is the relationship between movement and legibility: animated graphics should remain compatible with reading, selecting links, and navigating project content. This requires considering the visual density of the graph, the position of text, and the space available to interactive controls.
Contact System
The contact form collects a visitor's name, email address, and message, then submits those fields to a backend endpoint that supports the Resend email workflow. This connects the browser interface to server-side message processing, giving visitors a direct way to initiate contact from the portfolio.
The interface displays success or failure feedback after submission so that the visitor can distinguish an accepted request from an unsuccessful attempt. These states are part of the form's behavior, rather than merely visual details: without feedback, a user cannot determine whether to wait, retry, or correct an issue. A successful submission response describes the application's handling of the request; final inbox delivery is a separate stage of the email process.
Challenges and Continued Development
A recurring challenge is balancing a distinctive visual design with the practical purpose of a professional portfolio. Mathematical graphics and animations need to coexist with clear project descriptions, predictable navigation, and layouts that remain usable when screen space is limited. The technical content also needs room to grow without making every homepage card excessively long.
The shared project data model supports continued development by allowing summaries and detailed explanations to be revised through the same content source. This project demonstrates the integration of component-based interface development, application state, routing, and a backend contact workflow. Assessing its effect on visitor engagement or recruiting outcomes would require separate usage evidence.