Overview
This portfolio website is built with Astro 5.13.4 and TailwindCSS 4.1.12, following a clean and organized structure that separates concerns into logical directories.Root Directory
Source Directory (src/)
The main application code is organized into the following directories:
assets/
assets/
Contains static assets like images and other media files used throughout the site.Location:
src/assets/Subdirectories
Image assets for projects, logos, and branding.Files:
avatar.svg- User avatar imagegora-logo.png- Gora project logokeyframed-logo.png- Keyframed project logonodejs-logo.svg- Node.js project logotermview-logo.png- Termview project logo
components/
components/
Reusable Astro components organized by category.Location:
src/components/Subdirectories
Card components for displaying content items.Files:
AchievementCard.astro- Displays individual achievementsBlogCard.astro- Displays blog post previewsProjectCard.astro- Displays project informationWorkExperienceCard.astro- Displays work experience entries
Shared components used across multiple pages.Files:
BackLink.astro- Navigation back link componentShareButtons.astro- Social media share buttonsSocialLinks.astro- Social media profile links
Site navigation components.Files:
Footer.astro- Site footer with links and informationHeader.astro- Site header with navigation menu
Page section components.Files:
Hero.astro- Hero section for landing page
Low-level UI building blocks and design system components.Files:
Badge.astro- Badge component for tags and labelsButton.astro- Button componentCard.astro- Generic card containerIcon.astro- Icon wrapper componentSection.astro- Page section wrapperSectionHeader.astro- Section heading componentStatCard.astro- Statistics display cardTimeline.astro- Timeline visualization component
data/
data/
TypeScript files containing structured data for the portfolio content.Location:
src/data/Central data export file containing:
socialLinks- Social media profile linksnavigation- Site navigation menu itemssiteConfig- Site metadata and configuration- Re-exports from other data files
Array of project data conforming to the
Project interface.Array of achievement data conforming to the
Achievement interface.Array of work experience data conforming to the
WorkExperience interface.layouts/
layouts/
pages/
pages/
Astro page components that map to routes.Location:
src/pages/Homepage with hero section and overview.Route:
/Projects showcase page.Route:
/projectsWork experience timeline page.Route:
/experienceAchievements and recognitions page.Route:
/achievementsBlog listing page.Route:
/blogCustom 404 error page.Route:
/404styles/
styles/
Global CSS styles and Tailwind configuration.Location:
src/styles/Global CSS styles and Tailwind directives.
types/
types/
TypeScript type definitions and interfaces.Location:
src/types/All TypeScript interfaces for the application. See the Types Reference for detailed documentation.
utils/
utils/
Utility functions and helper modules.Location:
src/utils/Utility functions for social sharing and other helpers. See the Utilities Reference for detailed documentation.
Public Directory (public/)
Static assets served directly without processing:
Configuration Files
Astro framework configuration including integrations and build settings.Key features:
- Sitemap generation
- SEO optimization
- Icon integration
TailwindCSS configuration for styling.
TypeScript compiler configuration.
ESLint configuration for code quality.
Project dependencies and npm scripts.Available Scripts:
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLintnpm run format:write- Format code with Prettier
File Naming Conventions
- Components: PascalCase (e.g.,
ProjectCard.astro) - Data files: camelCase (e.g.,
achievements.ts) - Pages: kebab-case or lowercase (e.g.,
index.astro,404.astro) - Types: camelCase for files, PascalCase for interfaces
- Utilities: camelCase
