literallysofia.github.io

Personal portfolio website built with Astro, showcasing my work as a software engineer and designer. ✨

🔗 Live:literallysofia.github.io

🛠️ Tech Stack

Layer	Technology
Framework	Astro 5.x
Styling	Vanilla CSS + Custom Properties
Images	Astro Image + Sharp
Deployment	GitHub Actions → GitHub Pages

⚡ Features

• 🌗 Dark/light mode with localStorage persistence
• 📱 Responsive design across all breakpoints
• 🖼️ Optimized images with automatic WebP conversion and lazy loading
• 🎨 CSS-only animations (no heavy libraries)
• 🔒 Type-safe content collections with Zod schemas
• 🔀 View transitions for smooth page navigation
• 🔐 Optional password-protected access gate
• 📄 Encrypted CV download (AES-256-GCM + PBKDF2)
• 📜 Scroll-triggered timeline animations

📁 Project Structure

/
├── .github/workflows/
│ └── deploy.yml # GitHub Actions deployment
├── public/ # Static assets (favicon, encrypted CV)
├── scripts/
│ └── encrypt-cv.mjs # CV encryption utility
├── src/
│ ├── assets/ # Images (processed by Astro)
│ ├── components/
│ │ ├── *.astro # Astro components
│ │ └── icons/ # SVG icon components
│ ├── content/ # Content collections
│ │ ├── hero/ # Homepage hero
│ │ ├── about/ # Education, languages
│ │ ├── experience/ # Work timeline
│ │ ├── extra-curricular/ # Volunteering, speaking
│ │ ├── portfolio/ # Side projects
│ │ └── *.md # Collection markdown files
│ ├── layouts/
│ │ └── Layout.astro # Base layout
│ ├── pages/
│ │ ├── index.astro # Home
│ │ ├── about.astro # About
│ │ ├── work.astro # Work experience
│ │ ├── misc.astro # Extra-curricular & projects
│ │ └── 404.astro # Not found
│ ├── styles/ # CSS modules
│ │ ├── theme.css # Design tokens & dark/light mode
│ │ ├── global.css # Global styles
│ │ ├── animations.css # Animation definitions
│ │ └── ... # Component styles
│ ├── content.config.ts # Collection schemas (glob loaders)
│ └── config.ts # Site metadata
├── astro.config.mjs
├── tsconfig.json
└── package.json

🚀 Development

Prerequisites

• Node.js 18+
• npm 9+

Setup

# Install dependencies
npm install
# Copy environment variables
cp .env.example .env
# Start dev server
npm run dev

📋 Available Scripts

Script	Description
npm run dev	Start development server
npm run build	Type-check and build for production
npm run preview	Preview production build locally
npm run encrypt-cv	Encrypt CV PDF (requires CV_PASSWORD env var)

🔑 Environment Variables

See .env.example for available options:

• PUBLIC_SITE_PASSWORD — password for the access gate
• PUBLIC_ENABLE_PASSWORD_GATE — force-enable gate in dev mode
• CV_PASSWORD — password for CV encryption/decryption

✏️ Content Management

Content lives in src/content/ as Markdown files with typed frontmatter. Schemas are defined in src/content.config.ts.

To update content, edit the Markdown files under the relevant collection directory and changes will reflect immediately in dev mode.

🌐 Deployment

Pushes to the source branch trigger a GitHub Actions workflow that builds and deploys to GitHub Pages.

To set up:

1. Go to repository Settings → Pages
2. Set Source to GitHub Actions
3. Add PUBLIC_SITE_PASSWORD as a repository secret (if using the password gate)

📝 License

MIT