How sabbirchowdhury12/next-js-portfolio works
This repository is a personal portfolio website for a full-stack developer. A visitor browses the home page’s introduction, biography, skills, projects, experience, and contact sections; they can also download a CV, follow social links, switch themes, and submit a message by email. The page composition, contact submission, and shared state are supported by sampled source. Several section implementations were not sampled, so their internal behavior and wiring are represented only where the tree or documented data supports it.
Main entry points: page.tsx Home page · hooks.ts Section visibility hook · layout.tsx Root layout · data.ts Portfolio data
Components 20
Portfolio site
- Root layout
app/layout.tsx - Home page
app/page.tsx - Header navigation
components/header.tsx - Footer
components/footer.tsx
Portfolio content
- Introduction
components/intro.tsx - About
components/about.tsx - Skills
components/skills.tsx - Projects
components/projects.tsx - Experience
components/experience.tsx - Portfolio data
lib/data.ts - CV document
public/CV.pdf
Shared interaction
- Active section state
context/active-section-context.tsx - Theme state
context/theme-context.tsx - Section visibility hook
lib/hooks.ts - Theme switch
components/theme-switch.tsx
Contact messaging
- Contact section
components/contact.tsx - Email action
actions/sendEmail.ts - Email template
email/contact-form-email.tsx
Other components
- Visitor
- Resend email service
Connections 33
- Visitor → Root layout: opens site
- Root layout → Home page: renders page
- Root layout → Header navigation: renders
- Root layout → Footer: renders
- Root layout → Active section state: provides state
- Root layout → Theme state: provides state
- Home page → Introduction: renders
- Home page → About: renders
- Home page → Skills: renders
- Home page → Projects: renders
- Home page → Experience: renders
- Home page → Contact section: renders
- Header navigation → Portfolio data: reads links
- About → Portfolio data: reads profile
- Skills → Portfolio data: reads skills
- Projects → Portfolio data: reads projects
- Experience → Portfolio data: reads history
- Introduction → CV document: links download
- Introduction → Active section state: updates section
- Introduction → Section visibility hook: tracks visibility
- About → Section visibility hook: tracks visibility
- Skills → Section visibility hook: tracks visibility
- Projects → Section visibility hook: tracks visibility
- Experience → Section visibility hook: tracks visibility
- Contact section → Section visibility hook: tracks visibility
- Section visibility hook → Active section state: updates section
- Theme switch → Theme state: toggles theme
- Theme state → Visitor: persists preference
- Visitor → Contact section: submits message
- Contact section → Email action: sends form
- Email action → Email template: renders email
- Email action → Resend email service: dispatches email
- Contact section → Portfolio data: reads contact details