Typography
Clear heading and body-text hierarchy.
Web Design · Development
Personal Portfolio Website
Designed and developed my digital professional identity. Thank you to Elena Godin for her support, mentorship, and guidance throughout this project.
01 · Project overview
A central place for my work and growth.
I designed and developed my personal portfolio website to showcase my work in data analytics, AI, user-centered design, and technology.
Rather than using a website template, I built the site to reflect my professional identity while practicing front-end development and user-centered design. It continues to evolve as I add new projects, experiences, and skills.
02 · The challenge
Bring projects from many platforms into one clear story.
My work was spread across GitHub, Figma, presentations, course materials, and other platforms. I needed to communicate not only what I created, but also how I approached each problem and what I learned.
How might I create a professional portfolio that clearly communicates my work across data, design, AI, and technology while remaining easy to explore?
03 · Project goals
Design for clarity, credibility, and continued growth.
- Build a professional online presence
- Showcase projects through structured case studies
- Demonstrate technical and design skills
- Make projects easy to explore
- Document my learning journey
- Create a responsive experience
- Develop the website directly from code
04 · Planning the experience
Information organized around what visitors need.
Home
AboutProjectsNotes from My JourneyResumeContact
Projects → Undergraduate · Study Abroad · Self-Directed Internship · Graduate
Organizing projects by experience allows visitors to follow my academic and professional growth while quickly finding individual projects.
05 · Design system
Creating a consistent visual identity.
Color
A consistent palette across navigation, cards, buttons, and sections.
Photography
Images communicate the human side of my work.
Reusable components
Shared navigation, cards, galleries, calls to action, and footers.
06 · Development
Built with front-end web technologies.
HTML
Structures navigation, case studies, project galleries, resume content, contact information, and footers.
CSS
Creates layouts, typography, color, responsive behavior, project cards, menus, hover effects, and buttons.
JavaScript
Adds interaction where needed for navigation and other website components.
07 · Reusable case studies
Show the thinking—not only the final screen.
Problem → Research → Process → Solution → Results → Reflection
Depending on the project, case studies can include data visualizations, Figma prototypes, repositories, research findings, technical documentation, user feedback, and image galleries.
08 · Development workflow
From local code to a live domain.
- Design
- Develop
- Test
- Commit
- Push to GitHub
- Deploy
- Test live website
- Iterate
Moving from local HTML and CSS through GitHub, deployment, and a custom domain gave me practical experience across the complete website-development lifecycle.
09 · User-centered improvements
Refining the experience through iteration.
- Simplified navigation
- Added a Projects dropdown
- Separated work into meaningful categories
- Improved project descriptions
- Standardized case-study layouts
- Improved image presentation
- Added clear calls to action
- Tested responsive layouts
- Connected GitHub, LinkedIn, and email
10 · Key features
Multiple paths into my work.
Project navigation
Work organized by academic and professional experience.
Interactive prototypes
UX projects can include embedded Figma experiences.
Project galleries
Visual work presented through images and project cards.
Notes from my journey
Learning experiences and professional growth in one place.
Resume
Quick access to professional qualifications.
Professional connections
Clear links to LinkedIn, GitHub, and email.
11 · What I learned
A portfolio is more than a collection of projects.
Building this website taught me how to combine content strategy, user-centered design, front-end development, version control, and deployment into a complete digital experience.
The project also strengthened my ability to communicate technical and design work to different audiences.
12 · Reflection
Building my portfolio brought data, design, and technology together while showcasing my work and growth.
