Web Development and Personal Branding
Mechanical Engineering Portfolio
A responsive portfolio website designed and developed to communicate my engineering experience, project work, and professional goals clearly to recruiters and engineering teams.
Role
Designer and Developer
Timeline
Summer 2026
Tools
Next.js, TypeScript, Tailwind CSS, Vercel, AI
Focus
Responsive design, project storytelling, and personal branding
Objective
Present engineering experience in a clear, professional format.
The goal was to create more than a digital resume. The site was designed to give recruiters a visual overview of my engineering interests while providing enough depth to understand the process, tools, and decisions behind each project.
Since this was my first website project, I developed it incrementally by building reusable components, testing each page locally, and deploying updates through GitHub and Vercel.
Key Features
Responsive layouts designed for desktop and mobile devices
Project case studies presenting engineering work and design decisions
Consistent maroon visual identity based on the professional headshot
Reusable React components for navigation, project cards, and page sections
SEO metadata, social sharing previews, loading states, and a custom 404 page
Continuous deployment through GitHub and Vercel
Development Process
Built through iterative design, testing, and deployment.
I began by defining the site structure and visual direction, choosing a minimal layout with subtle engineering details and a maroon accent color drawn from my professional headshot.
I then built the site using Next.js and TypeScript, with Tailwind CSS controlling the responsive layouts and visual system. Reusable components helped maintain consistency across the home page, project pages, gallery, about page, contact page, navigation, and footer.
Throughout development, I tested the site locally, corrected mobile layout issues, resolved TypeScript deployment errors, and used Git and GitHub to track changes. Vercel was used for production deployment and automatic updates after each push.
Explore another project