# aswinajay312004-ux/dubai-portfolio architecture

> Architecture diagram of the GitHub repository aswinajay312004-ux/dubai-portfolio, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/aswinajay312004-ux/dubai-portfolio
- Repository: https://github.com/aswinajay312004-ux/dubai-portfolio

## Overview

#### Purpose and Runtime
This is a single-page UI/UX designer portfolio built with React, TypeScript, Vite, and Tailwind/PostCSS styling. It presents personal profile, skills, experience, selected projects, and contact details; it has no backend, persistence layer, or server-side API boundary.

Entry and startup composition:
- `src/main.tsx`
- `src/App.tsx`
- `src/pages/Index.tsx`

#### Application Shell and Page Assembly
`App.tsx` is the application-level shell, while the index page composes the portfolio into a vertically navigable landing page. `NotFound` exists as a separate fallback page, though the file tree does not show a routing layer.

Primary paths:
- `src/App.tsx`
- `src/pages/Index.tsx`
- `src/pages/NotFound.tsx`

#### Global Presentation and Design System
Global CSS establishes the visual baseline, with Tailwind configured as the utility/design-token system. Reusable primitive UI components under `components/ui` provide an imported component-library layer for controls, overlays, cards, and notifications; portfolio-specific sections sit above this layer.

Primary paths:
- `src/index.css`
- `src/App.css`
- `tailwind.config.ts`

#### Navigation and Section Flow
The page flow is anchored by the navbar and section components. Navigation links likely target page sections and coordinate the user’s movement from the hero introduction through profile, skills, experience, work, and contact content. The footer closes the primary document structure.

Primary paths:
- `src/components/Navbar.tsx`
- `src/components/NavLink.tsx`
- `src/components/HeroSection.tsx`

#### Portfolio Content Stages
The main content is split into independent presentational sections, making each portfolio domain editable without changing the application shell. Projects represent the primary work showcase, while about, skills, and experience establish the author’s background and capabilities.

Primary paths:
- `src/components/AboutSection.tsx`
- `src/components/SkillsSection.tsx`
- `src/components/ExperienceSection.tsx`
- `src/components/ProjectsSection.tsx`
- `src/components/ContactSection.tsx`

#### Interaction, Motion, and Visual Effects
Visual differentiation is implemented client-side through dedicated animated and parallax components. These are presentation boundaries rather than data services: they enhance the page experience while the content sections retain responsibility for business/portfolio information. Tilt cards likely provide interactive project or content-card behavior.

Primary paths:
- `src/components/AnimatedBackground.tsx`
- `src/components/FloatingElements.tsx`
- `src/components/ParallaxSection.tsx`
- `src/components/TiltCard.tsx`

#### Cross-Cutting User Preferences
Theme and language are modeled as React contexts, allowing controls and consuming sections to access shared preference state without prop drilling. The corresponding toggle/switcher components are the user-facing control boundary. Mobile behavior is supported by a responsive hook and CSS/Tailwind layout.

Primary paths:
- `src/contexts/ThemeContext.tsx`
- `src/contexts/LanguageContext.tsx`
- `src/components/ThemeToggle.tsx`
- `src/components/LanguageSwitcher.tsx`
- `src/hooks/use-mobile.tsx

#### External Boundaries and Delivery
The application is a static Vite build intended for browser deployment, with GitHub Pages indicated as the intended public host. External references are limited to portfolio contact channels and README-hosted visual assets; no runtime integration with Figma, LinkedIn, email, or external APIs is evidenced by the tree.

Primary paths:
- `vite.config.ts`
- `package.json`
- `public/robots.txt`

Main entry points: [`src/pages/Index.tsx`](https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/src/pages/Index.tsx) (Portfolio landing page), [`src/App.tsx`](https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/src/App.tsx) (Application shell), [`vite.config.ts`](https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/vite.config.ts) (Vite build), [`src/main.tsx`](https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/src/main.tsx) (Browser entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Runtime & Delivery"]
  node_vite{{"Vite build<br/>build config<br/>[vite.config.ts]"}}
  node_package["Package runtime<br/>package manifest<br/>[package.json]"]
  node_public["Static public files<br/>public assets<br/>[robots.txt]"]
end

subgraph group_shell["App Shell"]
  node_main(("Browser entry<br/>React entry<br/>[main.tsx]"))
  node_app["Application shell<br/>React shell<br/>[App.tsx]"]
  node_index["Portfolio landing page<br/>page composition<br/>[Index.tsx]"]
  node_notfound["Fallback page<br/>[NotFound.tsx]"]
end

subgraph group_content["Portfolio Sections"]
  node_navbar["Navigation<br/>[Navbar.tsx]"]
  node_hero["Hero introduction<br/>portfolio section<br/>[HeroSection.tsx]"]
  node_profile["Profile &amp; skills<br/>portfolio sections<br/>[AboutSection.tsx]"]
  node_experience["Experience<br/>portfolio section"]
  node_projects["Project showcase<br/>portfolio section"]
  node_contact["Contact<br/>portfolio section<br/>[ContactSection.tsx]"]
end

subgraph group_presentation["Presentation &amp; Preferences"]
  node_styles["Global styles &amp; tokens<br/>CSS design system<br/>[index.css]"]
  node_ui["Reusable UI primitives<br/>component library"]
  node_preferences["Theme &amp; language state<br/>React contexts<br/>[ThemeContext.tsx]"]
  node_controls["Preference controls<br/>toggle components<br/>[ThemeToggle.tsx]"]
  node_motion["Motion effects<br/>visual components"]
end

node_package -->|"provides toolchain"| node_vite
node_vite -->|"builds"| node_main
node_public -->|"included in output"| node_vite
node_main -->|"mounts"| node_app
node_app -->|"renders"| node_index
node_app -.->|"fallback"| node_notfound
node_index -->|"composes"| node_navbar
node_index -->|"composes"| node_hero
node_index -->|"composes"| node_profile
node_index -->|"composes"| node_experience
node_index -->|"composes"| node_projects
node_index -->|"composes"| node_contact
node_navbar -.->|"anchors section flow"| node_index
node_controls -->|"updates"| node_preferences
node_app -->|"provides shared state"| node_preferences
node_index -.->|"uses visual effects"| node_motion
node_projects -.->|"uses cards"| node_ui
node_app -->|"applies"| node_styles

click node_vite "https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/vite.config.ts"
click node_package "https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/package.json"
click node_public "https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/public/robots.txt"
click node_main "https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/src/main.tsx"
click node_app "https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/src/App.tsx"
click node_index "https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/src/pages/Index.tsx"
click node_notfound "https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/src/pages/NotFound.tsx"
click node_navbar "https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/src/components/Navbar.tsx"
click node_hero "https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/src/components/HeroSection.tsx"
click node_profile "https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/src/components/AboutSection.tsx"
click node_experience "https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/src/components/ExperienceSection.tsx"
click node_projects "https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/src/components/ProjectsSection.tsx"
click node_contact "https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/src/components/ContactSection.tsx"
click node_styles "https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/src/index.css"
click node_ui "https://github.com/aswinajay312004-ux/dubai-portfolio/tree/main/src/components/ui"
click node_preferences "https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/src/contexts/ThemeContext.tsx"
click node_controls "https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/src/components/ThemeToggle.tsx"
click node_motion "https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/src/components/AnimatedBackground.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_vite,node_package,node_public toneBlue
class node_main,node_app,node_index,node_notfound toneAmber
class node_navbar,node_hero,node_profile,node_experience,node_projects,node_contact toneMint
class node_styles,node_ui,node_preferences,node_controls,node_motion toneRose
```

## Components

### Runtime & Delivery

- [Vite build](https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/vite.config.ts): build config · Builds the static browser application. · `vite.config.ts`
- [Package runtime](https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/package.json): package manifest · `package.json`
- [Static public files](https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/public/robots.txt): public assets · `public/robots.txt`

### App Shell

- [Browser entry](https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/src/main.tsx): React entry · `src/main.tsx`
- [Application shell](https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/src/App.tsx): React shell · `src/App.tsx`
- [Portfolio landing page](https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/src/pages/Index.tsx): page composition · Assembles the vertically navigable portfolio. · `src/pages/Index.tsx`
- [Fallback page](https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/src/pages/NotFound.tsx): page · `src/pages/NotFound.tsx`

### Portfolio Sections

- [Navigation](https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/src/components/Navbar.tsx): section navigation · `src/components/Navbar.tsx`
- [Hero introduction](https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/src/components/HeroSection.tsx): portfolio section · `src/components/HeroSection.tsx`
- [Profile & skills](https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/src/components/AboutSection.tsx): portfolio sections · `src/components/AboutSection.tsx`
- [Experience](https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/src/components/ExperienceSection.tsx): portfolio section · `src/components/ExperienceSection.tsx`
- [Project showcase](https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/src/components/ProjectsSection.tsx): portfolio section · `src/components/ProjectsSection.tsx`
- [Contact](https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/src/components/ContactSection.tsx): portfolio section · `src/components/ContactSection.tsx`

### Presentation & Preferences

- [Global styles & tokens](https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/src/index.css): CSS design system · `src/index.css`
- [Reusable UI primitives](https://github.com/aswinajay312004-ux/dubai-portfolio/tree/main/src/components/ui): component library · Shared controls, overlays, cards, and notifications. · `src/components/ui`
- [Theme & language state](https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/src/contexts/ThemeContext.tsx): React contexts · Shared user preference state. · `src/contexts/ThemeContext.tsx`
- [Preference controls](https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/src/components/ThemeToggle.tsx): toggle components · `src/components/ThemeToggle.tsx`
- [Motion effects](https://github.com/aswinajay312004-ux/dubai-portfolio/blob/main/src/components/AnimatedBackground.tsx): visual components · Animated, parallax, and tilt presentation effects. · `src/components/AnimatedBackground.tsx`

## Connections

- Package runtime → Vite build: provides toolchain
- Vite build → Browser entry: builds
- Static public files → Vite build: included in output
- Browser entry → Application shell: mounts
- Application shell → Portfolio landing page: renders
- Application shell → Fallback page: fallback
- Portfolio landing page → Navigation: composes
- Portfolio landing page → Hero introduction: composes
- Portfolio landing page → Profile & skills: composes
- Portfolio landing page → Experience: composes
- Portfolio landing page → Project showcase: composes
- Portfolio landing page → Contact: composes
- Navigation → Portfolio landing page: anchors section flow
- Preference controls → Theme & language state: updates
- Application shell → Theme & language state: provides shared state
- Portfolio landing page → Motion effects: uses visual effects
- Project showcase → Reusable UI primitives: uses cards
- Application shell → Global styles & tokens: applies