Skip to main content

​
Overview

CV Staff Web follows a standard Astro project structure with clear separation between public assets, source code, and configuration files. The project is organized to maximize maintainability and developer experience.

​
Root Directory Structure

cv-staff-web/
├── .git/                    # Git repository
├── .vscode/                 # VS Code workspace settings
├── node_modules/            # NPM dependencies
├── public/                  # Static assets (served as-is)
├── src/                     # Source code (processed by Astro)
├── .env.example             # Environment variables template
├── .gitignore              # Git ignore rules
├── astro.config.mjs        # Astro configuration
├── package.json            # NPM package configuration
├── package-lock.json       # NPM lock file
├── README.md               # Project documentation
└── tsconfig.json           # TypeScript configuration

​
Public Directory

The public/ directory contains static assets that are served directly without processing. 
public/
├── assets/
│   ├── images/             # Static images
│   └── videos/             # Video files
├── favicon.svg             # Site favicon
└── profile_01.jpeg         # Main profile photo
Files in the public/ directory are served at the root URL path. For example, public/favicon.svg is accessible at /favicon.svg.

​
Source Directory

The src/ directory contains all processed source code organized by function: 
src/
├── assets/                 # Build-time processed assets
├── components/             # Reusable UI components
├── data/                   # JSON data files
├── layouts/                # Page layout templates
├── pages/                  # Route pages
├── scripts/                # Client-side JavaScript
├── sections/               # Page sections
└── styles/                 # Global CSS

​
Assets Directory

Contains SVG files and other assets that are processed during the build: 
src/assets/
├── astro.svg              # Astro logo
└── background.svg         # Background graphics

​
Data Directory

Stores JSON data files used throughout the application: 
src/data/
├── herosliders.json       # Hero section slider configuration
└── nico-profile.json      # Profile information and metadata
Centralizing data in JSON files makes content updates easier and separates data from presentation logic.

​
Layouts Directory

Contains base layout templates that wrap page content: 
src/layouts/
└── Layout.astro           # Main layout with HTML structure
The Layout.astro file provides:
  • HTML document structure
  • Meta tags and SEO configuration
  • Global CSS imports
  • Font loading
  • Script initialization
  • Accessibility features (skip links)

​
Pages Directory

Contains route files that define the site’s pages: 
src/pages/
└── index.astro            # Homepage (/) route
Astro uses file-based routing. Each .astro file in pages/ becomes a route. The index.astro file maps to the root / route.

​
Styles Directory

Global CSS files for baseline styles: 
src/styles/
├── reset.css              # CSS reset for browser consistency
└── styles.css             # Global styles and utilities

​
Configuration Files

​
astro.config.mjs

Configures Astro build settings and integrations: 
import { defineConfig } from 'astro/config';

export default defineConfig({});

​
package.json

Defines project dependencies and scripts: 
{
  "name": "",
  "type": "module",
  "version": "0.0.1",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "@fontsource-variable/onest": "^5.2.8",
    "astro": "^5.7.13",
    "gsap": "^3.14.2",
    "swiper": "^11.2.6"
  }
}

​
tsconfig.json

TypeScript configuration for type checking: 
{
  "extends": "astro/tsconfigs/base"
}

​
Key Dependencies

Astro

Static site generator and web framework - v5.7.13

GSAP

Animation library for scroll-triggered effects - v3.14.2

Swiper

Touch slider for photo carousel - v11.2.6

Onest Font

Variable font for typography - v5.2.8

​
File Organization Best Practices

  • public/: Use for large static files, favicons, robots.txt, or files that need specific URLs
  • src/assets/: Use for images and assets that should be optimized during build
  • components/: Small, reusable UI elements (buttons, cards, badges)
  • sections/: Large, page-specific sections (hero, footer, contact)
  • Each major feature gets its own file in src/scripts/
  • Generic utilities go in app.js
  • Feature-specific scripts (animations, cursor, color transitions) are separate modules

​
Next Steps

Components Architecture

Learn about the reusable component system

Sections Architecture

Explore how page sections are structured

Scripts Architecture

Understand client-side JavaScript organization

Quick Start Guide

Set up your development environment

Build docs developers (and LLMs) love

Get started for freeTalk to us