Skip to content

Latest commit

 

History

History
124 lines (95 loc) · 4.14 KB

README.md

File metadata and controls

124 lines (95 loc) · 4.14 KB

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