How ryharjr/portofoliov2 works
RyHar Portfolio is a personal portfolio site: visitors browse profile, experience, skills, and projects, then reach the contact section, which also provides a chat interface. The home page composes the sections; chat handling uses session history stored in SQLite and an OpenAI-compatible service. The README also documents responsive layouts, animations, and project links. Some route-to-client wiring and email delivery details are not shown in the excerpts, so those links are marked unverified.
Main entry points: page.tsx Home composition · contact.tsx Contact and chat UI · FadeDown.tsx Fade down · about.tsx About section
Components 23
Portfolio experience
- Home composition
app/page.tsx - Hero section
app/hero.tsx - About section
app/about.tsx - Experience section
app/experience.tsx - Tech stack
app/tech-stack.tsx - Project showcase
app/project.tsx - Contact and chat UI
app/contact.tsx
Reusable interface
- Navigation
components/Header.tsx - Footer
components/Footer.tsx - Page loader
components/PageLoader.tsx - Alert message
components/Alert.tsx - Glare hover
components/GlareHover.tsx - Scroll velocity
components/ScrollVelocity.tsx - Fade down
components/animations/FadeDown.tsx - Fade left
components/animations/FadeLeft.tsx - Fade up
components/animations/FadeUp.tsx
Chat services
- Chat endpoint
app/api/chat/route.ts - Message history endpoint
app/api/chat/messages/route.ts - Chat history store
lib/db.ts - Email endpoint
app/api/send-email/route.ts
External services
- OpenAI-compatible service
- Mail service
Other components
- Visitor
Connections 28
- Visitor → Home composition: visits
README.md - Home composition → Navigation: renders
app/page.tsx - Home composition → Hero section: renders
app/page.tsx - Home composition → About section: renders
app/page.tsx - Home composition → Experience section: renders
app/page.tsx - Home composition → Tech stack: renders
app/page.tsx - Home composition → Project showcase: renders
app/page.tsx - Home composition → Contact and chat UI: renders
app/page.tsx - Home composition → Footer: renders
app/page.tsx - Home composition → Page loader: includes
- About section → Scroll velocity: renders
app/about.tsx - About section → Fade down: uses
app/about.tsx - About section → Fade left: uses
app/about.tsx - Experience section → Fade down: uses
app/experience.tsx - Tech stack → Fade down: uses
app/tech-stack.tsx - Tech stack → Fade up: uses
app/tech-stack.tsx - Project showcase → Fade down: uses
app/project.tsx - Project showcase → Fade up: uses
app/project.tsx - Project showcase → Glare hover: renders
app/project.tsx - Contact and chat UI → Alert message: renders
app/contact.tsx - Contact and chat UI → Fade down: uses
app/contact.tsx - Contact and chat UI → Chat endpoint: submits chat
- Contact and chat UI → Message history endpoint: loads history
- Contact and chat UI → Email endpoint: submits contact
- Chat endpoint → Chat history store: reads and writes
app/api/chat/route.ts - Message history endpoint → Chat history store: reads and writes
app/api/chat/messages/route.ts - Chat endpoint → OpenAI-compatible service: requests completion
app/api/chat/route.ts - Email endpoint → Mail service: sends email