Technology Stack

  • Languages

    • HTML / CSS / JavaScript (vanilla)
    • TypeScript
    • Markdown

  • Framework / Runtime

    • Astro 7
    • Node.js (22.12+)
    • Zod (via Astro)

  • Libraries / Packages

    • @astrojs/rss
    • AOS (CDN)
    • Inter (Google Fonts)

  • External services

    • Cloudflare Turnstile
    • Cloudflare Worker + D1
    • PWA

Project Structure

    src/
    ├── content.config.ts
    │
    ├── components/
    │   ├── blog/
    │   ├── portfolio/
    │   └── shared/
    │
    ├── content/
    │   ├── blog/
    │   └── projects/
    │
    ├── layouts/
    │   ├── BaseLayout.astro
    │   ├── admin/
    │   ├── blog/
    │   └── portfolio/
    │
    ├── pages/
    │   ├── about.astro
    │   ├── contact.astro
    │   ├── index.astro
    │   ├── rss.xml.js
    │   ├── admin/
    │   ├── blog/
    │   └── projects/
    │
    ├── lib/
    │   ├── blog.ts
    │   └── site.ts
    │
    ├── scripts/
    │   ├── admin.js
    │   ├── portfolio.js
    │   └── theme.js
    │
    └── styles/
        ├── admin.css
        ├── blog.css
        ├── global.css
        ├── normalize.css
        ├── styles.css
        └── theme.css
Category Purpose Think of it as
content.config.ts Defines content collections + schemas Content rules
components/ Reusable UI pieces Building blocks
content/ Blog posts and project data Actual content
layouts/ Page templates / structure Page shells
pages/ Actual URLs/routes Website pages
lib/ + scripts/ Helper logic and browser JS Functionality
styles/ CSS Appearance

Sections

The website is divided into three main sections, each serving a distinct purpose:

  • Portfolio Section: The main public-facing section of the website, showcasing professional experience, projects, technical skills, education, and contact information.

  • Admin Section: A private administrative area that allows the administrator to securely log in and access the contact database, including messages submitted through the website’s contact form.

  • Blog Section: A dedicated publishing area for sharing blogs, technical articles, personal notes, and other written content, organized into relevant categories and tags.