How marwanatef96/marwan-portfolio-v1 works
This is a Next.js personal portfolio: visitors browse an assembled home page containing an introduction, biography, skills, project showcase, contact form, and footer. The contact form validates input and sends submissions through EmailJS; visitors can also switch the site theme, whose preference is stored in local storage. The sampled source shows page composition, theme wiring, project/skill data usage, and the EmailJS call. Other section internals were not sampled, so their finer interactions are omitted.
Main entry points: page.tsx Home Page · ThemeProviderClient.tsx Theme Provider · layout.tsx Root Layout · Navbar.tsx Navigation
Components 16
Portfolio Site
- Root Layout
src/app/layout.tsx - Home Page
src/app/page.tsx - Navigation
src/app/components/Navbar.tsx
Portfolio Content
- Hero
src/app/components/Hero.tsx - About
src/app/components/About.tsx - Skills
src/app/components/Skills.tsx - Projects
src/app/components/Projects.tsx - Contact Form
src/app/components/Contact.tsx - Footer
src/app/components/Footer.tsx - Project Data
src/app/data/projects.ts - Skill Data
src/app/data/skills.ts
Theme and Presentation
- Theme Provider
src/app/ThemeProviderClient.tsx - Theme Context
src/app/context/ThemeContext.tsx - Theme Tokens
src/app/theme/theme.ts
Other components
- Visitor
- EmailJS
Connections 15
- Visitor → Home Page: views
README.md - Root Layout → Navigation: renders
src/app/layout.tsx - Root Layout → Theme Provider: wraps
src/app/layout.tsx - Home Page → Hero: renders
src/app/page.tsx - Home Page → About: renders
src/app/page.tsx - Home Page → Skills: renders
src/app/page.tsx - Home Page → Projects: renders
src/app/page.tsx - Home Page → Contact Form: renders
src/app/page.tsx - Home Page → Footer: renders
src/app/page.tsx - Projects → Project Data: reads
src/app/components/Projects.tsx - Skills → Skill Data: reads
src/app/components/Skills.tsx - Theme Provider → Theme Context: uses
src/app/ThemeProviderClient.tsx - Theme Provider → Theme Tokens: loads tokens
src/app/ThemeProviderClient.tsx - Navigation → Theme Context: toggles theme
src/app/components/Navbar.tsx - Contact Form → EmailJS: sends email
src/app/components/Contact.tsx