cx18dev/premium-portfolio

Purpose and Runtime

This is an Astro-based personal portfolio site. Astro provides file-based routing and builds static pages; TypeScript/TSX components supply interactive UI where configured. The starter README does not document deployment, adapters, or third-party services.

Key runtime/build files:

• package.json

• astro.config.mjs

• src/pages/index.astro

Route and Page Entry Points

Astro exposes pages from src/pages/:

• src/pages/index.astro is the portfolio’s primary single-page entry point.

• src/pages/404.astro provides the not-found route.

• src/pages/api/contact.ts is the server/API boundary for contact submissions.

The primary page likely composes a shared layout and a sequence of portfolio sections rather than separate content routes.

Site Shell and Global Presentation

src/layouts/Layout.astro is the shared document/page shell, responsible for wrapping page content and likely centralizing head metadata and global styling. Global CSS lives in src/styles/global.css.

Persistent page framing is separated from content:

• src/components/layout/Navigation.tsx

• src/components/layout/Footer.tsx

• src/layouts/Layout.astro

This boundary lets the index page assemble content while layout components own site-wide navigation and footer behavior.

Portfolio Content Model

Portfolio content is centralized in src/data/portfolio.ts, separating structured personal, project, experience, and testimonial data from rendering components. Section components consume or present that content:

• src/components/sections/Projects.tsx

• src/components/sections/Experience.tsx

• src/components/sections/Timeline.tsx

Additional content stages cover introduction, skills, about, blog, contact, and testimonials under src/components/sections/. The likely flow is index.astro → layout/navigation → ordered sections → footer.

Interaction and Animation Layer

Reusable UI primitives encapsulate client-side visual behavior instead of embedding it across sections:

• src/components/ui/LoadingScreen.tsx

• src/components/ui/SectionReveal.tsx

• src/components/ui/CustomCursor.tsx

Other interaction primitives include animated counters and magnetic buttons. This creates a boundary between portfolio content/layout and browser-dependent effects. Shared low-level formatting or class helpers are located in src/lib/utils.ts.

Contact Submission Boundary

The contact section is the user-facing producer, while the API route is the backend-facing handler:

• src/components/sections/Contact.tsx

• src/pages/api/contact.ts

No external email, CRM, database, or anti-spam provider is identifiable from the supplied tree. Any such integration would belong behind src/pages/api/contact.ts, keeping credentials and request handling out of client components.

Assets and Delivery

Static assets are served from public/. Astro’s build pipeline produces the deployable site from source pages, layouts, styles, and components. No dedicated backend service, database schema, worker, or infrastructure-as-code directory is present, so the architecture is primarily a static Astro site with a single contact API endpoint.