How clyvsdigs/clyvs-portfolio works
This is a React portfolio site for presenting Clyvs’s profile, skills, projects, and contact links. A visitor enters through the React app, which routes requests through a shared layout to the home, projects, about, or contact page; those pages render portfolio content, including project links and social profiles. The source index identifies additional section components, but excerpts do not show their page wiring, so those connections are omitted. No backend or persistent store is evident in the provided material.
Main entry points: App.tsx Route table · ProjectsSection.tsx Project showcase · SectionTitle.tsx Section title · SocialLinks.tsx Social links
Components 22
App routing
- React entry
src/main.tsx - Route table
src/App.tsx - Shared layout
src/Layouts/MainLayout.tsx
Portfolio content
- Home page
src/pages/Home.tsx - Projects page
src/pages/Projects.tsx - About page
src/pages/About.tsx - Contact page
src/pages/Contact.tsx - Navigation bar
src/components/features/Navbar.tsx - Hero section
src/components/features/HeroSection.tsx - About section
src/components/features/AboutSection.tsx - Skills section
src/components/features/SkillsSection.tsx - Project showcase
src/components/features/ProjectsSection.tsx - Contact section
src/components/features/ContactSection.tsx
Shared UI
- Brand logo
src/components/common/Logo.tsx - Social links
src/components/common/SocialLinks.tsx - Button
src/components/ui/Button.tsx - Card
src/components/ui/Card.tsx - Section title
src/components/ui/SectionTitle.tsx - Class utilities
src/lib/utils.ts
Other components
- Visitor
- Social sites
- Live projects
Connections 23
- Visitor → React entry: opens site
- React entry → Route table: renders
src/main.tsx - Route table → Shared layout: routes within
src/App.tsx - Route table → Home page: routes to
src/App.tsx - Route table → Projects page: routes to
src/App.tsx - Route table → About page: routes to
src/App.tsx - Route table → Contact page: routes to
src/App.tsx - Shared layout → Navigation bar: renders
src/Layouts/MainLayout.tsx - Navigation bar → Brand logo: renders
src/components/features/Navbar.tsx - Projects page → Project showcase: renders
src/pages/Projects.tsx - Project showcase → Card: renders
src/components/features/ProjectsSection.tsx - Project showcase → Section title: renders
src/components/features/ProjectsSection.tsx - Project showcase → Live projects: links to
src/components/features/ProjectsSection.tsx - Contact page → Social links: renders
src/pages/Contact.tsx - Contact section → Social links: renders
src/components/features/ContactSection.tsx - Social links → Social sites: links to
src/components/common/SocialLinks.tsx - Button → Class utilities: uses
src/components/ui/Button.tsx - Card → Class utilities: uses
src/components/ui/Card.tsx - About page → Section title: renders
src/pages/About.tsx - Hero section → Button: uses
src/components/features/HeroSection.tsx - About section → Section title: renders
src/components/features/AboutSection.tsx - Skills section → Section title: renders
src/components/features/SkillsSection.tsx - Skills section → Card: renders
src/components/features/SkillsSection.tsx