How patriciasegantine/portfolio works
This is a personal engineering portfolio: visitors browse selected work and detailed case studies, explore the engineer’s background and skills, and can send a contact message. Project content is fetched from an external content source for server-rendered routes or through a projects API for client-side browsing; contact submissions are validated and emailed to both the portfolio owner and sender. README capabilities such as responsive presentation, theme selection, and reveal effects are represented at the page/component level. Detailed project-route wiring was not sampled, so its internal transitions are intentionally not inferred.
Main entry points: app/page.tsx Home page · route.ts Email API · [slug]/page.tsx Case study route · layout.tsx Shared layout
Components 26
Portfolio presentation
- Shared layout
src/app/layout.tsx - Home page
src/app/page.tsx - About section
src/components/section/About/About.tsx - Skills section
src/components/section/Skills/Skills.tsx - Beyond-code section
src/components/section/BeyondCode/BeyondCode.tsx - Theme controls
src/components/ui/ToggleThemeButton/ToggleThemeButton.tsx
Project discovery
- Featured projects
src/components/section/Projects/Projects.tsx - All projects page
src/app/all-projects/page.tsx - Project listing
src/app/projects/AllProjects.tsx - Project card
src/components/ui/ProjectCard/ProjectCard.tsx - Case study route
src/app/projects/[slug]/page.tsx - Case study content
src/app/projects/[slug]/components/ProjectDetailsSection.tsx
Content access
- Projects API
src/app/api/projects/route.ts - Server content fetch
src/services/content/contentServerService.ts - Client content service
src/services/content/contentClientService.ts - Remote content hook
src/hook/useRemoteContent.ts
Contact workflow
- Contact section
src/components/section/Contact/Contact.tsx - Contact form
src/components/ui/ContactForm/ContactForm.tsx - Email submission hook
src/hook/useSendEmail.ts - Email API
src/app/api/sendEmail/route.ts - SMTP service
- Email templates
src/utils/personalInboxTemplate.ts - Confirmation template
src/utils/confirmationTemplate.ts
Other components
- Visitor
- External project content
- Portfolio owner
Connections 30
- Visitor → Shared layout: opens
- Shared layout → Home page: renders
- Home page → About section: presents
- Home page → Skills section: presents
- Home page → Beyond-code section: presents
- Home page → Featured projects: presents
- Home page → Contact section: presents
- Shared layout → Theme controls: provides
- Visitor → All projects page: opens
- All projects page → Project listing: renders
- Featured projects → Project card: displays
- Project listing → Project card: displays
- Project card → Case study route: opens case study
- Visitor → Case study route: opens
- Case study route → Case study content: renders
- Project listing → Remote content hook: loads content
- Remote content hook → Client content service: invokes
- Client content service → Projects API: requests
- Projects API → Server content fetch: fetches
- Server content fetch → External project content: reads
- Case study route → Server content fetch: fetches content
- Visitor → Contact form: submits message
- Contact section → Contact form: renders
- Contact form → Email submission hook: submits
- Email submission hook → Email API: posts
- Email API → Email templates: renders owner email
- Email API → Confirmation template: renders reply
- Email API → SMTP service: sends mail
- SMTP service → Portfolio owner: delivers message
- SMTP service → Visitor: delivers confirmation