daanny214/portfolio

Purpose and Runtime

This is a personal Web & Mobile Developer portfolio built with Next.js and TypeScript. It renders a single marketing-style portfolio page and exposes a server API endpoint for contact-form submissions. It is intended for Node.js deployment, with the live site hosted on Vercel.

Key entry points:

• app/layout.tsx defines the application document shell, global metadata, and shared styling boundary.

• app/page.tsx composes the portfolio landing page.

• app/api/contact/route.ts is the backend HTTP entry point for contact requests.

App Router Composition

The repository uses the Next.js App Router under app/. app/page.tsx is the root route (/) and assembles the primary page sections into one scroll-oriented experience.

The root layout applies site-wide concerns before page rendering:

• app/layout.tsx

• app/globals.css

This keeps page composition separate from document-level metadata, fonts/styles, and global visual rules.

Portfolio Content Sections

The visible portfolio is divided into independently maintainable React section components:

• app/components/Hero.tsx

• app/components/About.tsx

• app/components/Skills.tsx

• app/components/Projects.tsx

• app/components/Contact.tsx

app/page.tsx controls their order and therefore the top-level user journey: introduction, profile/skills, work samples, and contact conversion. Project-related static assets are served from public/projects, while the downloadable CV is available at public/cv.pdf.

Shared Navigation and Presentation Layer

Shared interface components support consistent navigation, section structure, animation, and footer content:

• app/components/Navbar.tsx

• app/components/Footer.tsx

• app/components/SectionHeading.tsx

• app/components/Reveal.tsx

The navbar likely anchors navigation to sections of the single page. Reveal.tsx forms an animation/presentation boundary that can be reused by content sections without coupling animation behavior to portfolio data.

Site Metadata and Centralized Constants

Site-level identity or reusable portfolio constants are centralized rather than embedded throughout components:

• app/lib/site.ts

• app/layout.tsx

This is the likely source for global branding, social links, URLs, or metadata consumed by the layout and presentation components. Changes to portfolio identity should preferentially flow through this module.

Contact Submission Boundary

The client contact UI is separated from server-side request handling:

• app/components/Contact.tsx

• app/api/contact/route.ts

The browser submits contact data to /api/contact; the route handler validates/processes that request and returns an HTTP response. This boundary allows the UI to remain a React component while server-only integration details, such as a messaging or email provider, stay in the API route.

Infrastructure and Delivery

Next.js provides rendering, routing, static asset serving, and API route execution. Core deployment/build configuration is in:

• next.config.ts

• package.json

Vercel is the stated hosting target. Public files under public/ are served directly, while application routes and the contact endpoint are built and deployed through the Next.js runtime.