saif-ullah0/saifullaharshad-portfolio

Purpose and Runtime

A single-page personal portfolio built with Next.js App Router and TypeScript. It presents profile, experience, projects, skills, certificates, and contact content with animation-heavy, interactive visual sections. The primary runtime is the Next.js server/client React application; deployment is suited to Vercel per the project README.

Application Entry and Shell

app/page.tsx is the page-level composition entry point. app/layout.tsx establishes the global document shell, fonts, metadata, and shared styling boundary via app/globals.css. app/opengraph-image.tsx generates the social preview image through Next.js metadata conventions.

Page Composition

The page is organized as independently owned feature sections, likely mounted in sequence by the root page:

• Hero and first-impression visuals: features/hero/Hero.tsx, features/hero/HeroCanvas.tsx, features/hero/HeroReveal.tsx

• Professional/profile content: features/about/About.tsx, features/experience/Experience.tsx

• Portfolio and capabilities: features/projects/Projects.tsx, features/skills/Skills.tsx

• Closing conversion sections: features/certificates/Certificates.tsx, features/contact/Contact.tsx

This creates a clear boundary between page orchestration and section-specific UI/animation logic.

Shared Interaction Layer

Cross-section navigation and presentation behavior live in reusable components: components/Navbar.tsx, components/Footer.tsx, and components/SectionWrapper.tsx. Visual interaction primitives—including cursor effects, scroll state, loading, and text effects—are centralized in components/CustomCursor.tsx, components/ScrollProgress.tsx, and components/LoadingScreen.tsx. This shared layer should remain separate from feature-owned content.

Animation, Canvas, and Scroll Flow

The portfolio’s main control flow is browser interaction → shared scroll/cursor providers/hooks → animated feature components. Smooth scrolling is introduced at an application-wide provider boundary in providers/SmoothScrollProvider.tsx. Reusable animation definitions and hooks are separated into lib/animations.ts, hooks/useScrollAnimation.ts, and hooks/useScrambleText.ts. Canvas-oriented visuals are feature-local in features/hero/HeroCanvas.tsx and features/skills/SkillsCanvas.tsx, keeping rendering-heavy effects scoped to their sections.

Content and Type Boundaries

Portfolio content is local, static, typed data rather than a CMS or API integration. Domain datasets reside in data/profile.ts, data/projects.ts, and data/experience.ts, with shared contracts in types/index.ts. Feature components consume these datasets to render cards, timelines, skill displays, and profile information; adding content should generally modify data files before presentation components.

Client State and External Boundaries

Global UI state is isolated in store/useAppStore.ts, likely coordinating application-wide interaction state such as theme, loading, or navigation behavior. Theme presentation is encapsulated by components/ThemeToggle.tsx. The only explicit static external asset boundary is public/, including certificate imagery under public/images/certs and the downloadable resume at public/resume.pdf; no backend, database, authentication service, or API route is present in the tree.