aswinajay312004-ux/dubai-portfolio

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