Skip to main content

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

aviv.sh/
├── .github/          # GitHub workflows and configuration
├── .vscode/          # VS Code workspace settings
├── public/           # Static assets served directly
├── src/              # Source code and components
├── astro.config.mjs  # Astro configuration
├── eslint.config.mjs # ESLint configuration
├── package.json      # Project dependencies and scripts
├── tailwind.config.mjs # TailwindCSS configuration
└── tsconfig.json     # TypeScript configuration

Source Directory (src/)

The main application code is organized into the following directories:
Contains static assets like images and other media files used throughout the site.Location: src/assets/

Subdirectories

images/
directory
Image assets for projects, logos, and branding.Files:
  • avatar.svg - User avatar image
  • gora-logo.png - Gora project logo
  • keyframed-logo.png - Keyframed project logo
  • nodejs-logo.svg - Node.js project logo
  • termview-logo.png - Termview project logo
Reusable Astro components organized by category.Location: src/components/

Subdirectories

cards/
directory
Card components for displaying content items.Files:
  • AchievementCard.astro - Displays individual achievements
  • BlogCard.astro - Displays blog post previews
  • ProjectCard.astro - Displays project information
  • WorkExperienceCard.astro - Displays work experience entries
common/
directory
Shared components used across multiple pages.Files:
  • BackLink.astro - Navigation back link component
  • ShareButtons.astro - Social media share buttons
  • SocialLinks.astro - Social media profile links
navigation/
directory
Site navigation components.Files:
  • Footer.astro - Site footer with links and information
  • Header.astro - Site header with navigation menu
sections/
directory
Page section components.Files:
  • Hero.astro - Hero section for landing page
ui/
directory
Low-level UI building blocks and design system components.Files:
  • Badge.astro - Badge component for tags and labels
  • Button.astro - Button component
  • Card.astro - Generic card container
  • Icon.astro - Icon wrapper component
  • Section.astro - Page section wrapper
  • SectionHeader.astro - Section heading component
  • StatCard.astro - Statistics display card
  • Timeline.astro - Timeline visualization component
TypeScript files containing structured data for the portfolio content.Location: src/data/
index.ts
file
Central data export file containing:
  • socialLinks - Social media profile links
  • navigation - Site navigation menu items
  • siteConfig - Site metadata and configuration
  • Re-exports from other data files
projects.ts
file
Array of project data conforming to the Project interface.
achievements.ts
file
Array of achievement data conforming to the Achievement interface.
experience.ts
file
Array of work experience data conforming to the WorkExperience interface.
Astro layout components that define page structure.Location: src/layouts/
BaseLayout.astro
file
Base layout with HTML structure, meta tags, and global styles.
MainLayout.astro
file
Main layout extending BaseLayout with header and footer.
StaticLayout.astro
file
Layout for static content pages.
Astro page components that map to routes.Location: src/pages/
index.astro
file
Homepage with hero section and overview.Route: /
projects.astro
file
Projects showcase page.Route: /projects
experience.astro
file
Work experience timeline page.Route: /experience
achievements.astro
file
Achievements and recognitions page.Route: /achievements
blog.astro
file
Blog listing page.Route: /blog
404.astro
file
Custom 404 error page.Route: /404
Global CSS styles and Tailwind configuration.Location: src/styles/
global.css
file
Global CSS styles and Tailwind directives.
TypeScript type definitions and interfaces.Location: src/types/
index.ts
file
All TypeScript interfaces for the application. See the Types Reference for detailed documentation.
Utility functions and helper modules.Location: src/utils/
index.ts
file
Utility functions for social sharing and other helpers. See the Utilities Reference for detailed documentation.

Public Directory (public/)

Static assets served directly without processing:
public/
├── assets/
│   └── documents/
│       ├── nasa_rec.pdf     # NASA recommendation letter
│       └── verizon_rec.pdf  # Verizon recommendation letter
├── favicon.ico              # Site favicon
└── robots.txt              # Search engine crawler instructions

Configuration Files

astro.config.mjs
file
Astro framework configuration including integrations and build settings.Key features:
  • Sitemap generation
  • SEO optimization
  • Icon integration
tailwind.config.mjs
file
TailwindCSS configuration for styling.
tsconfig.json
file
TypeScript compiler configuration.
eslint.config.mjs
file
ESLint configuration for code quality.
package.json
file
Project dependencies and npm scripts.Available Scripts:
  • npm run dev - Start development server
  • npm run build - Build for production
  • npm run preview - Preview production build
  • npm run lint - Run ESLint
  • npm 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

Import Patterns

// Type imports
import type { Project, Achievement } from "../types";

// Data imports
import { projects, achievements } from "../data";

// Component imports (in Astro files)
import ProjectCard from "../components/cards/ProjectCard.astro";

// Asset imports
import avatar from "../assets/images/avatar.svg";

Build docs developers (and LLMs) love