dev-sahad/portfolio-v1

1. Overall shape

- This is a Next.js App Router application with two major surfaces: a public portfolio site and a protected admin console.

- The repo is structured as a single deployable web app, not a separate frontend/backend split.

2. Public site

- src/app/page.tsx is the main landing page, composed from reusable sections in src/components/sections.

- The public experience is built from Hero, About, PortfolioShowcase, and contact-related sections, so the site is primarily content-driven and presentation-focused.

3. Portfolio content flow

- Portfolio data appears to be fetched through src/hooks/usePortfolio.ts and src/lib/portfolioService.ts.

- Public listing/detail views live under src/app/portfolio/[id]/page.tsx, indicating dynamic routes for individual projects.

- PortfolioCard and PortfolioShowcase are the presentation layer for this data.

4. Comments/contact flow

- Contact interaction is split into a form and comments area under src/components/sections/contact.

- src/hooks/useComments.ts and src/lib/commentService.ts suggest comments are persisted in the backend and read back into the UI.

- This same data source is also visible in the admin side, which implies a shared moderation/content workflow.

5. Admin subsystem

- The entire admin area is isolated under src/app/admin.

- It includes dedicated pages for dashboard, login, projects, tech, comments, and certificates.

- src/app/admin/Sidebar.tsx indicates a persistent admin navigation shell around those management views.

6. Admin CRUD boundaries

- src/app/admin/projects/[id]/page.tsx and src/app/admin/projects/AddProjectModal.tsx show project management supports both creation and item-level editing.

- Separate admin pages for tech, certificates, and comments imply each content type is managed independently rather than through one generic CMS screen.

7. Backend/data layer

- src/lib/supabase.ts and src/lib/supabaseServer.ts show the app uses Supabase as its data/auth backend, with both client and server access paths.

- backup.sql suggests the underlying data model is backed by a relational schema, likely for Supabase/Postgres.

- The architecture therefore centers on the browser and Next.js server components talking directly to Supabase rather than a custom API server.

8. Authentication and route protection

- src/app/admin/login/page.tsx is the admin entry point for authentication.

- middleware.ts likely enforces access control for protected admin routes and handles redirects for unauthenticated users.

- src/components/RefreshRedirect.tsx suggests there is additional session/redirect handling after auth state changes.

9. Shared UI and layout

- src/app/layout.tsx, src/components/LayoutWrapper.tsx, and src/components/ui/Navbar.tsx provide the common shell for the public-facing app.

- src/app/globals.css plus Tailwind/PostCSS config imply the UI is styled through utility-first CSS with global overrides where needed.

10. Experience/animation layer

- AnimatedBackground, WelcomeScreen, and the band components indicate a strong visual/interactive layer on top of the content site.

- public/assets/kartu.glb is a 3D asset, so the public experience includes nontrivial graphics/animation content, not just static pages.

11. Deployment/runtime

- netlify.toml shows the app is configured for Netlify deployment.

- next.config.ts and the presence of middleware.ts indicate the app relies on Next.js runtime features such as routing, server-side rendering, and edge-aware request handling.

12. Architecture summary for diagramming

- Think of this repo as a Next.js presentation app backed by Supabase:

- Public visitors consume portfolio/content pages and submit contact/comments.

- Admin users authenticate, then manage projects, tech stack entries, certificates, and comments.

- Next.js provides routing/layout/protection; Supabase stores content and auth state; static assets and animated components handle the visual experience.