# josie.lol Project Overview

## Project Description
A personal website and blog for Josephine Pfeiffer featuring:
- Interactive terminal-style homepage with a unique command-line interface
- Technical blog focused on cloud-native technology, infrastructure, security, and developer experience
- Conference talks portfolio
- Professional certifications and achievements
- Open source contributions

## Technology Stack
- **Frontend**: Vanilla HTML/CSS/JavaScript with Tailwind CSS
- **Blog Engine**: Custom static site generator using Pandoc for Markdown to HTML conversion
- **Containerization**: Multi-stage Docker builds with Fedora and Apache HTTPD
- **Build System**: Bash scripts for content processing
- **Version Control**: Git
- **Hosting**: Static files served via Apache HTTPD in containers

## Project Structure
```
.
├── blog/                   # Blog content and templates
│   ├── *.md               # Blog posts in Markdown format
│   ├── images/            # Blog post images
│   ├── index.html         # Blog listing page
│   └── template.html      # HTML template for posts
├── talks/                 # Conference talks
│   ├── *.md              # Talk descriptions
│   ├── slides/           # PDF presentations
│   └── index.html        # Talks listing page
├── scripts/
│   └── blog-build.sh     # Build script for converting Markdown to HTML
├── Containerfile         # Docker multi-stage build
├── index.html           # Homepage with terminal interface
├── styles.css           # Global styles
├── sw.js               # Service worker for offline functionality
├── rss.xml             # RSS feed
└── sitemap.xml         # Sitemap for SEO
```

## Key Features

### 1. Interactive Terminal Homepage
- Custom command-line interface simulating a terminal experience
- Commands include:
  - `help` - Show available commands
  - `ls -la /crt/` - Display certifications
  - `grep "volunteer" ~/.profile` - Show volunteer experience
  - `gh repo list` - Show open source projects
  - `tree /talks` - Display conference talks
  - `rssfetch rss.xml` - Show publications
  - `clear` - Clear terminal output
  - `blog` - Navigate to blog
- Features autocomplete, command history, and keyboard navigation

### 2. Static Blog System
- Markdown-based content with YAML frontmatter
- Automatic HTML generation via Pandoc
- Features:
  - Syntax highlighting for code blocks
  - Automatic figure numbering for images
  - RSS feed generation
  - Tag support
  - Responsive design
  - SEO optimization

### 3. Build Process
The `blog-build.sh` script:
1. Processes all Markdown files in the blog directory
2. Extracts metadata (title, date, author, tags, description)
3. Converts Markdown to HTML using Pandoc
4. Applies custom styling and formatting
5. Updates the blog index page
6. Generates RSS feed
7. Updates sitemap
8. Processes talks for the talks index page

### 4. Containerization
Multi-stage Docker build:
- **Stage 1 (Builder)**: Installs Pandoc and runs build script
- **Stage 2 (Runtime)**: Minimal Apache HTTPD image serving static files

## Content Types

### Blog Posts
Markdown files with frontmatter:
```markdown
---
title: Post Title
date: YYYY-MM-DD
author: Josephine Pfeiffer
tags: [tag1, tag2, tag3]
description: Brief description
---

Post content in Markdown...
```

### Talks
Markdown files with conference metadata:
```markdown
---
title: Talk Title
date: YYYY-MM-DD
abstract: Brief abstract
slides: /talks/slides/filename.pdf
recording: https://youtube.com/...
conferences:
  - name: Conference Name
    location: City
    date: YYYY-MM-DD
---

Talk description...
```

## Development Workflow

### Adding a New Blog Post
1. Create a new `.md` file in the `blog/` directory
2. Add frontmatter with required metadata
3. Write content in Markdown
4. Run `./scripts/blog-build.sh` to generate HTML
5. Commit changes

### Building the Site
```bash
# Local development
./scripts/blog-build.sh

# Container build
podman build -t josiedotlol .

# Run container
podman run -d -p 8080:8080 josiedotlol
```

### Testing
The site includes:
- Service worker for offline functionality
- Responsive design for mobile devices
- SEO optimization with meta tags and structured data
- Accessibility features

## Important Commands

### Build Commands
- `./scripts/blog-build.sh` - Build all blog posts and update indexes
- `podman build -t josiedotlol .` - Build container image
- `podman run -d -p 8080:8080 josiedotlol` - Run the containerized site

### Development Tips
- Blog posts support full Markdown syntax including code blocks, images, and tables
- Images should be placed in `blog/images/`
- Code blocks can specify language for syntax highlighting
- The terminal interface supports tab completion and command history

## Future Enhancements
- Pre-commit hooks for content validation
- Automated image optimization
- Search functionality
- Comments system (static, privacy-respecting)
- Dark/light theme toggle
- Analytics (privacy-respecting, self-hosted)

## Notes
- The site is fully static with no server-side processing
- All content is version-controlled
- The design emphasizes readability and performance
- The terminal interface provides a unique, engaging user experience
- Content focuses on technical topics with an emphasis on clarity and practical value