🔗 adhir.me - Personal Blog

A modern, performant blog built with Eleventy, featuring articles about AI, Code, and Climate Change.

🔗 Features

• ⚡ Static site generation with Eleventy
• 🎨 Beautiful animations and interactive elements
• 🌙 Dark mode support
• 📱 Fully responsive design
• 🚀 Optimized performance
• 🔍 SEO friendly
• 📊 Live NASA API integration
• ✨ Particle network background
• ⌨️ Syntax highlighting for code blocks

🔗 Quick Start

🔗 Prerequisites

• Node.js 14+ and npm

🔗 Installation

1. Clone or download this repository
2. Navigate to the project directory
3. Install dependencies:

   npm install

🔗 Development

Start the development server:

npm start

The site will be available at http://localhost:8080 with hot-reload enabled.

🔗 Building for Production

Generate the static site:

npm run build

The built site will be in the _site directory.

🔗 Project Structure

adhir-blog/
├── _data/              # Global data files
│   └── metadata.json   # Site metadata
├── _includes/          # Templates and layouts
│   └── layouts/
│       ├── base.njk    # Base layout
│       ├── home.njk    # Homepage layout
│       └── post.njk    # Blog post layout
├── _site/              # Built site (generated)
├── css/                # Stylesheets
│   ├── main.css
│   └── prism-tomorrow.css
├── js/                 # JavaScript files
│   └── main.js
├── posts/              # Blog posts (Markdown)
│   ├── gpt-optimization.md
│   ├── rust-wasm.md
│   └── carbon-api.md
├── .eleventy.js        # Eleventy configuration
├── .gitignore
├── index.njk           # Homepage
├── about.md            # About page
├── 404.md              # 404 page
├── package.json
└── README.md

🔗 Writing Posts

Create new posts in the posts/ directory as Markdown files with frontmatter:

---
title: Your Post Title
description: A brief description
date: 2024-01-20
tags:
  - AI
  - Climate
category: ai
readingTime: 5
layout: layouts/post.njk
---

Your content here...

🔗 Customization

🔗 Metadata

Edit _data/metadata.json to update site information, author details, and social links.

🔗 Styling

Modify css/main.css for design changes. The CSS uses CSS custom properties for easy theming.

🔗 Features

• Particles: Adjust particle count and behavior in js/main.js
• Typewriter: Edit phrases array in js/main.js
• NASA API: Replace DEMO_KEY with your own NASA API key

🔗 Deployment

🔗 Netlify

1. Push to GitHub
2. Connect repository to Netlify
3. Build command: npm run build
4. Publish directory: _site

🔗 Vercel

1. Install Vercel CLI: npm i -g vercel
2. Run: vercel
3. Follow prompts

🔗 GitHub Pages

1. Build the site: npm run build
2. Push _site contents to gh-pages branch

🔗 API Keys

The blog uses NASA’s DEMO_KEY by default. For production:

1. Get your free API key at https://api.nasa.gov
2. Replace DEMO_KEY in js/main.js

🔗 Browser Support

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+
• Mobile browsers

🔗 License

MIT License - feel free to use this for your own blog!

🔗 Credits

Created by Adhir Inspired by Medium’s design with added interactivity

---

## 📦 Complete File Structure for Download

adhir-blog/ ├── _data/ │ └── metadata.json ├── _includes/ │ └── layouts/ │ ├── base.njk │ ├── home.njk │ └── post.njk ├── css/ │ ├── main.css (full CSS from the HTML artifact) │ └── prism-tomorrow.css ├── js/ │ └── main.js ├── posts/ │ ├── gpt-optimization.md │ ├── rust-wasm.md │ └── carbon-api.md ├── .eleventy.js ├── .gitignore ├── index.njk ├── about.md ├── 404.md ├── package.json └── README.md