asrathoredev/asrathore-portfolio

1. Repo shape

- This is a Next.js App Router portfolio application written in TypeScript.

- The architecture is mostly single-page, section-based UI composition with one server API endpoint for contact form submission.

2. Application entry points

- src/app/page.tsx is the main landing page and likely composes the entire portfolio from section components.

- src/app/layout.tsx defines the global shell, and src/app/globals.css provides app-wide styling tokens and base styles.

- src/app/api/get-in-touch/route.ts is the only explicit backend boundary in the repo.

3. Page composition model

- The UI is split into page-level sections under src/sections/: Hero, About, Skills, Works, AdiVerse, and GetInTouch.

- This suggests a scrolling portfolio experience where each section is a self-contained content block, assembled at the page level rather than routed to separate pages.

4. Content/data layer

- src/data/adiverse.ts holds structured content for the AdiVerse section, likely including project or experience metadata.

- This keeps presentation components separated from static content, making the portfolio easier to update without changing UI logic.

5. Reusable component layer

- src/components/ contains shared building blocks like Navbar and Container.

- src/components/ui/ contains more specialized interactive UI pieces such as ProjectCard, ContactForm, Lightbox, FloatingInput, MagneticButton, PixelReveal, and StatsTicker.

- These components act as the presentation layer beneath the section-level composition.

6. Interactive portfolio features

- The UI includes motion-heavy and interactive elements, consistent with the README’s mention of Framer Motion.

- Likely interaction boundaries include animated buttons, reveal effects, project cards, a lightbox for media viewing, and ticker/stat presentation, all encapsulated inside the ui layer.

7. Contact flow boundary

- src/sections/GetInTouch.tsx likely renders ContactForm.

- src/components/ui/ContactForm.tsx is the client-facing form component.

- Form submission is routed to src/app/api/get-in-touch/route.ts, which serves as the server-side processing endpoint. This is the main request/response data flow in the repo.

8. AdiVerse subsystem

- src/sections/AdiVerse.tsx plus src/components/ui/AdiVerseGrid.tsx and src/data/adiverse.ts form a distinct content subsystem.

- This appears to be a portfolio showcase area with structured project/story content, likely using a grid presentation and one or more card/lightbox interactions.

9. Styling and design system

- The project uses Tailwind CSS for utility-driven styling, supported by tailwind.config.ts and postcss.config.mjs.

- components.json and src/components/ui/card.tsx indicate a design-system-style component set similar to shadcn/ui conventions.

- src/lib/utils.ts likely contains shared helpers for class composition or UI utilities.

10. Infrastructure and runtime boundaries

- The app runs in the Next.js runtime, with the portfolio rendered from React components and the contact endpoint handled server-side in the App Router.

- public/ provides static assets such as images, icons, or media used throughout the portfolio.

- There is no sign of a database, authentication system, or external CMS; content appears to be mostly local and code-driven.

11. How to draw the architecture

- At the center: page.tsx assembling section components.

- Under that: reusable UI components and shared utilities.

- Side branch: local content/data files feeding specific sections.

- Separate server boundary: the get-in-touch API route receiving form submissions from the contact UI.

- Around everything: global layout/styles, Tailwind, and static assets.