cybercamp.dev

Code by Day, Fire by Night

A personal website combining coding projects and outdoor adventures. Built with vanilla HTML, CSS, and JavaScript featuring markdown-based content management.

🏕️ Project Overview

This site showcases:

• Projects: AI experiments, web apps, and development tools
• Adventures: Overlanding trips and camping experiences
• Recipes: Some of my favorite meals and drinks
• Brand Identity: Fusion of cyberpunk aesthetics and camping culture

🚀 Local Development

Prerequisites

• Python 3 (for local web server)
• Modern web browser
• Text editor for creating markdown content

Running Locally

The site requires a local web server to avoid CORS issues when loading markdown files.

Option 1: Python HTTP Server (Recommended)

python3 -m http.server 8080

Then open: http://localhost:8080

Option 2: Any other HTTP server

# Using Node.js http-server
npx http-server -p 8080

# Using PHP
php -S localhost:8080

Why a Server is Needed

The site uses fetch() to load markdown files client-side. Browsers block this when opening files directly (file://) due to CORS security. A local server resolves this.

✍️ Adding Content

Creating a New Project

1. Create a new .md file in content/projects/
2. Add frontmatter at the top:

---
title: "Your Project Title"
date: "2025-10-03"
tags: ["JavaScript", "React", "API"]
thumbnail: "🚀"
description: "Brief description of your project"
---

# Your Project Title

Your content here...

3. Register the file in content-loader.js by adding it to the projects array

Creating a New Adventure

1. Create a new .md file in content/adventures/
2. Add frontmatter:

---
title: "Your Adventure Title"
date: "2025-10-03"
location: "Location Name"
tags: ["Overlanding", "Camping", "Solo Travel"]
thumbnail: "🏔️"
description: "Brief description of your adventure"
---

# Your Adventure Title

Your story here...

3. Register the file in content-loader.js by adding it to the adventures array

Creating a New Recipe

1. Create a new .md file in content/recipes/
2. Add frontmatter:

---
title: "Your Recipe Title"
date: "2025-10-03"
tags: ["Campfire", "Easy", "Breakfast"]
thumbnail: "🍳"
description: "Brief description of your recipe"
prepTime: "10 mins"
cookTime: "20 mins"
servings: "4"
---

# Your Recipe Title

Your recipe here...

3. Register the file in content-loader.js by adding it to the recipes array

🎨 Design & Branding

Color Palette

• Primary Dark: #0f0f0f (near black)
• Secondary Dark: #1a1a1a (dark gray)
• Accent Cyber: #ff4500 (orange-red)
• Accent Fire: #ff5722 (coral orange)
• Accent Warm: #ff6b35 (warm orange)

Logo

• Active: logo-binary.svg - Fire with binary digits (1s and 0s) rising as embers

The logo features:

• Animated campfire with flickering flames
• Binary digits that "pop" like embers and drift upward
• Slower animation (6-8.5 seconds per ember)
• Orange and fire color scheme

🔧 Technical Details

Dependencies

• marked.js (CDN): Markdown parser
• No build tools required
• No npm packages needed
• Pure vanilla JavaScript

Key Features

• Client-side markdown rendering: Files loaded and parsed in the browser
• Modal article viewer: Click any project/adventure to read full article
• Download functionality: Users can download markdown files
• Responsive design: Mobile-friendly navigation and layouts
• Smooth animations: Fade-in effects, glitch text, parallax scrolling

Browser Support

• Modern browsers (Chrome, Firefox, Safari, Edge)
• ES6+ JavaScript features used
• CSS Grid and Flexbox for layouts

🌐 Deploying to GitHub Pages

Setup

1. Create a GitHub repository
2. Push your code:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/yourusername/cybercamp.dev.git
git push -u origin main

3. Enable GitHub Pages:

   • Go to repository Settings → Pages
   • Source: Deploy from branch main
   • Folder: / (root)

4. Your site will be live at: https://yourusername.github.io/cybercamp.dev/

Custom Domain (Optional)

1. Add a CNAME file with your domain:

echo "cybercamp.dev" > CNAME
git add CNAME
git commit -m "Add custom domain"
git push

2. Configure DNS:
   • Add A records pointing to GitHub's IPs
   • Or CNAME record pointing to yourusername.github.io

📝 Content Tips

Writing Projects

• Include code snippets to show implementation details
• Explain what you learned, not just what you built
• Add "What's Next" section for future improvements
• Use tags to categorize by tech stack

Writing Adventures

• Tell a story - include mistakes and lessons learned
• Add practical gear recommendations
• Include location details for others to explore
• Be honest about what didn't work

Writing Recipes

• Include prep time, cook time, and servings in frontmatter
• List ingredients clearly at the start
• Provide step-by-step instructions
• Add tips for cooking in the outdoors (campfire, camp stove, etc.)
• Note any special equipment needed

Markdown Features Supported

• Headings (H1-H6)
• Bold and italic text
• Code blocks with syntax highlighting
• Lists (ordered and unordered)
• Links and images
• Blockquotes
• Horizontal rules

📄 License

This is a personal project. Feel free to fork and adapt for your own use.

🤝 Contributing

This is a personal website, but if you spot bugs or have suggestions, feel free to open an issue.

---

Built with:

• ☕ Coffee by the campfire
• 💻 Code under the stars
• 🏕️ Adventures off the grid

cybercamp.dev - Where AI development meets the great outdoors