Chester Alejandro — Portfolio

🌐 Live Demo: https://chesteralejandro.github.io

A Personal portfolio website showcasing my projects and skills as a front-end developer.

Built with Astro and styled with vanilla CSS using a custom design system.

🚀 Getting Started

📋 Requirements

Tool	Version	Type	Purpose
Node.js	≥ 18	Required	Run npm scripts
NPM	Included	Required	Dependency management
VS Code	Latest	Optional	Code editor
Astro (VS Code ext.)	Latest	Optional	Astro syntax + IntelliSense
Prettier (VS Code ext.)	Latest	Optional	Code formatting

💿 Installation

• Clone the repository:

  git clone https://github.com/chesteralejandro/ca-portfolio.git

• Navigate into the project directory:

  cd ca-portfolio

• Install dependencies:

  npm install

💻 Development

• Start the development server:

  npm run dev

• Open your browser and visit: http://localhost:4321

⚙️ Technologies Used

• Framework — Astro
• Styling — Vanilla CSS with CSS custom properties
• Fonts — Poppins (display), Nunito Sans (body) via Google Fonts
• Deployment — Github Pages

📁 Folder Structure

📁 ca-portfolio/
├── .gitignore
├── astro.config.mjs
├── package-lock.json
├── package.json
├── README.md
├── tsconfig.json
├── 📁 .astro/
├── 📁 .vscode/
├── 📁 public/
│   ├── favicon.svg
│   └── 📁 images/
│       └── 📁 icons/
└── 📁 src/
    ├── 📁 components/
    ├── 📁 css/
    ├── 📁 layouts/
    └── 📁 pages/

🎨 Design System

The portfolio uses a custom CSS design system with the following tokens:

• Primary color — #1c2541 (Deep Navy)
• Accent color — #f39c12 (Amber)
• Display font — Poppins
• Body font — Nunito Sans

📬 Contacts

• LinkedIn — Chester Alejandro
• GitHub — chesteralejandro