My AI Evolution Timeline

An interactive timeline documenting my journey through the AI revolution, from ChatGPT's launch to full AI-powered development with Claude Code.

🎯 About

This website showcases how AI has transformed my workflow as a Platform Engineer & DevOps Lead at Helmcode, from simple Q&A with ChatGPT to supervising AI agents that handle code generation, infrastructure operations, and business processes.

🛠️ Tech Stack

• Astro - Static site framework
• Tailwind CSS - Styling with custom Helmcode color scheme
• React - Interactive components
• Framer Motion - Smooth animations
• Markdown - Content management for timeline posts

🎨 Features

• Interactive timeline with scroll-triggered animations
• Modal-based post reading experience
• Responsive design (mobile & desktop)
• Custom animations and hover effects
• Markdown-based content with easy editing
• Helmcode brand colors throughout

📁 Project Structure

/
├── public/
│   └── images/          # Post images (optional)
├── src/
│   ├── components/
│   │   ├── Header.astro         # Hero section with intro
│   │   ├── Timeline.astro       # Main timeline component
│   │   ├── TimelineItem.tsx     # Individual timeline cards
│   │   └── PostModal.tsx        # Modal for reading posts
│   ├── content/
│   │   ├── config.ts            # Content collections schema
│   │   └── posts/               # Timeline posts in Markdown
│   ├── layouts/
│   │   └── Layout.astro         # Base layout
│   ├── pages/
│   │   └── index.astro          # Home page
│   └── styles/
│       └── global.css           # Global styles & theme
└── package.json

🚀 Commands

All commands are run from the root of the project:

Command	Action
bun install	Install dependencies
bun dev	Start dev server at localhost:4321
bun build	Build production site to ./dist/
bun preview	Preview build locally before deploying

✍️ Adding New Timeline Posts

1. Create a new Markdown file in src/content/posts/
2. Use this frontmatter format:

---
title: "Your Post Title"
date: 2025-01-24
preview: "Short preview text that appears on the timeline card"
hasCode: false
image: "/images/your-image.jpg" # optional
---

Your full post content here in Markdown...

3. The timeline will automatically update!

🎨 Helmcode Brand Colors

• Main Purple: #6C62FF
• Light Background: #F8FAFF
• Dark Text: #1A1A1A
• Light Gray: #F5F5F5
• Border Gray: #E0E0E0

🚢 Deployment

This site is designed to be deployed on Cloudflare Pages:

1. Build the project: bun build
2. Deploy the ./dist/ folder to Cloudflare Pages

📝 License

Personal project - All rights reserved.