diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md
new file mode 100644
index 0000000..dde4a71
--- /dev/null
+++ b/ARCHITECTURE.md
@@ -0,0 +1,511 @@
+# Architecture Diagram
+
+This document provides visual representations of the website architecture.
+
+## Site Structure Overview
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                    jdsanc.github.io                         │
+│                      Portfolio Site                          │
+└─────────────────────────────────────────────────────────────┘
+                            │
+                ┌───────────┴───────────┐
+                │                       │
+        ┌───────▼────────┐      ┌──────▼──────────┐
+        │  Modern Site   │      │  Legacy Jekyll  │
+        │  (index.html)  │      │      Site       │
+        │    [ACTIVE]    │      │   [ARCHIVED]    │
+        └───────┬────────┘      └──────┬──────────┘
+                │                       │
+                │                       │
+    ┌───────────┼───────────┐          │
+    │           │           │          │
+┌───▼──┐  ┌────▼────┐  ┌──▼───┐      │
+│ HTML │  │   CSS   │  │  JS  │      │
+│      │  │Tailwind │  │Canvas│      │
+└──────┘  └─────────┘  └──────┘      │
+                                       │
+                        ┌──────────────┼──────────────┐
+                        │              │              │
+                   ┌────▼───┐    ┌────▼────┐   ┌────▼────┐
+                   │Layouts │    │  Data   │   │Projects │
+                   │ .html  │    │  .yaml  │   │   .md   │
+                   └────────┘    └─────────┘   └─────────┘
+```
+
+## Modern Site Architecture
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                      index.html                              │
+│                   (Single Page App)                          │
+└─────────────────────────────────────────────────────────────┘
+                            │
+        ┌───────────────────┼───────────────────┐
+        │                   │                   │
+┌───────▼────────┐  ┌───────▼────────┐  ┌──────▼──────┐
+│   Structure    │  │     Styling    │  │ Interactivity│
+│  HTML5 Markup  │  │  Tailwind CSS  │  │  Vanilla JS  │
+└───────┬────────┘  └───────┬────────┘  └──────┬──────┘
+        │                   │                   │
+        │                   │                   │
+  ┌─────▼─────┐       ┌─────▼─────┐      ┌─────▼─────┐
+  │Navigation │       │Color Theme│      │ASCII Canvas│
+  │  Hero     │       │Typography │      │Animation   │
+  │  Projects │       │Responsive │      │Smooth Scroll│
+  │Publications│      │Grid Layout│      └────────────┘
+  │  Footer   │       │Hover FX   │
+  └───────────┘       └───────────┘
+```
+
+## Layer Stack (Visual Rendering)
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                    User View (Browser)                       │
+└─────────────────────────────────────────────────────────────┘
+                            ▲
+                            │
+            ┌───────────────┴───────────────┐
+            │                               │
+    ┌───────▼────────┐              ┌──────▼─────────┐
+    │  Foreground    │              │   Background   │
+    │   z-index: 10+ │              │   z-index: 0   │
+    └───────┬────────┘              └──────┬─────────┘
+            │                               │
+    ┌───────▼────────┐                     │
+    │  Navigation    │                     │
+    │  (Fixed Top)   │                     │
+    └────────────────┘                     │
+            │                               │
+    ┌───────▼────────┐                     │
+    │  Main Content  │              ┌──────▼─────────┐
+    │  - Hero        │              │ ASCII Canvas   │
+    │  - Projects    │              │  (Animated)    │
+    │  - Publications│              │  opacity: 40%  │
+    │  - Footer      │              └──────┬─────────┘
+    └────────────────┘                     │
+                                    ┌──────▼─────────┐
+                                    │  Grid Overlay  │
+                                    │  (CSS Gradient)│
+                                    │  with fade     │
+                                    └──────┬─────────┘
+                                           │
+                                    ┌──────▼─────────┐
+                                    │  Base Layer    │
+                                    │ #050505 Black  │
+                                    └────────────────┘
+```
+
+## Component Hierarchy
+
+```
+index.html
+│
+├── <head>
+│   ├── Meta tags
+│   ├── Fonts (Google Fonts)
+│   ├── Tailwind CSS (CDN)
+│   ├── Tailwind Config (inline)
+│   └── Custom Styles (inline)
+│
+└── <body>
+    │
+    ├── Background Elements
+    │   ├── <canvas id="ascii-canvas"> (Animated torus)
+    │   └── <div class="grid-bg"> (Static grid overlay)
+    │
+    ├── <nav> Navigation
+    │   ├── Logo/Name
+    │   └── Links (Works, Research, Contact)
+    │
+    └── <main> Content
+        │
+        ├── <section> Hero
+        │   ├── Department/Institution
+        │   ├── Main Title
+        │   ├── Description
+        │   └── Status Badges
+        │
+        ├── <section id="works"> Projects
+        │   ├── Section Header
+        │   └── Bento Grid
+        │       ├── Project Card (Large - 8 col)
+        │       ├── Project Card (Small - 4 col)
+        │       ├── Project Card (Medium - 6 col)
+        │       └── Project Card (Medium - 6 col)
+        │
+        ├── <section id="research"> Publications
+        │   ├── Section Header
+        │   └── Table Layout
+        │       ├── Publication Row 1
+        │       ├── Publication Row 2
+        │       └── Publication Row 3
+        │
+        ├── <footer>
+        │   ├── Contact Info
+        │   ├── Social Links
+        │   └── Copyright
+        │
+        └── <script> ASCII Animation
+            ├── Canvas Setup
+            ├── Torus Mathematics
+            ├── Render Loop
+            └── Event Listeners
+```
+
+## Data Flow (Legacy Jekyll)
+
+```
+┌─────────────┐
+│   GitHub    │
+│   Pages     │
+└──────┬──────┘
+       │ Detects Jekyll
+       │
+┌──────▼──────┐
+│   Jekyll    │
+│   Builder   │
+└──────┬──────┘
+       │
+       ├── Reads _config.yml
+       │
+       ├── Loads _data/*.yaml
+       │   ├── main_info.yaml
+       │   ├── publications.yaml
+       │   ├── experience.yaml
+       │   └── projects.yaml
+       │
+       ├── Processes _layouts/*.html
+       │   ├── default.html (Liquid templates)
+       │   └── project.html
+       │
+       ├── Converts _projects/*.md
+       │   └── Markdown → HTML
+       │
+       └── Generates _site/
+           └── Static HTML files
+               └── Served by GitHub Pages
+```
+
+## Animation Flow (ASCII Torus)
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                   Browser Event Loop                         │
+└─────────────────────────────────────────────────────────────┘
+                            │
+                    ┌───────▼────────┐
+                    │ Page Load      │
+                    │ DOMContentLoaded│
+                    └───────┬────────┘
+                            │
+                    ┌───────▼────────┐
+                    │  resize()      │
+                    │  Initialize    │
+                    │  canvas dims   │
+                    └───────┬────────┘
+                            │
+                    ┌───────▼────────┐
+                    │  render()      │
+                    │  Main loop     │
+                    └───────┬────────┘
+                            │
+        ┌───────────────────┼───────────────────┐
+        │                   │                   │
+┌───────▼────────┐  ┌───────▼────────┐  ┌──────▼──────┐
+│  Clear Canvas  │  │ Calculate 3D   │  │   Draw      │
+│  Fill with     │  │ Torus Points   │  │  Characters │
+│  background    │  │                │  │  to Canvas  │
+└────────────────┘  └───────┬────────┘  └──────▲──────┘
+                            │                   │
+                    ┌───────▼────────┐          │
+                    │  Apply 3D      │          │
+                    │  Rotation      │          │
+                    │  (A, B angles) │          │
+                    └───────┬────────┘          │
+                            │                   │
+                    ┌───────▼────────┐          │
+                    │  Project to 2D │          │
+                    │  Screen coords │          │
+                    └───────┬────────┘          │
+                            │                   │
+                    ┌───────▼────────┐          │
+                    │  Calculate     │          │
+                    │  Luminance (L) │          │
+                    └───────┬────────┘          │
+                            │                   │
+                    ┌───────▼────────┐          │
+                    │  Map L to      │          │
+                    │  ASCII char    │          │
+                    │  " .:-=+*#%@"  │          │
+                    └───────┬────────┘          │
+                            │                   │
+                    ┌───────▼────────┐          │
+                    │  Check Z-buffer│          │
+                    │  (depth test)  │          │
+                    └───────┬────────┘          │
+                            │                   │
+                            └───────────────────┘
+                            │
+                    ┌───────▼────────┐
+                    │  Increment     │
+                    │  A += 0.003    │
+                    │  B += 0.002    │
+                    └───────┬────────┘
+                            │
+                    ┌───────▼────────┐
+                    │requestAnimation│
+                    │   Frame        │
+                    │  (60 FPS)      │
+                    └───────┬────────┘
+                            │
+                            └─────── Loop back to render()
+```
+
+## Responsive Layout Breakpoints
+
+```
+┌────────────────────────────────────────────────────────────┐
+│                      Mobile (< 768px)                       │
+├────────────────────────────────────────────────────────────┤
+│  Navigation: Simplified                                     │
+│  Hero: Single column, smaller text                         │
+│  Projects: 1 column stack                                  │
+│  Publications: Stacked rows                                │
+└────────────────────────────────────────────────────────────┘
+                            │
+                            ▼
+┌────────────────────────────────────────────────────────────┐
+│                   Tablet (768px - 1024px)                   │
+├────────────────────────────────────────────────────────────┤
+│  Navigation: Full horizontal nav                           │
+│  Hero: Larger text, better spacing                         │
+│  Projects: 2 column grid (md:grid-cols-2)                  │
+│  Publications: Table layout begins                         │
+└────────────────────────────────────────────────────────────┘
+                            │
+                            ▼
+┌────────────────────────────────────────────────────────────┐
+│                    Desktop (> 1024px)                       │
+├────────────────────────────────────────────────────────────┤
+│  Navigation: Full nav with hover effects                   │
+│  Hero: Large typography, optimal spacing                   │
+│  Projects: 12 column bento grid (lg:grid-cols-12)         │
+│            - 8 col, 4 col, 6 col, 6 col spans             │
+│  Publications: Full table with all columns                 │
+│  Animation: Full resolution                                │
+└────────────────────────────────────────────────────────────┘
+```
+
+## Technology Stack Diagram
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                      Presentation                            │
+│  ┌─────────────────────────────────────────────────────┐   │
+│  │                    Browser                           │   │
+│  │  Chrome, Firefox, Safari, Edge                      │   │
+│  └─────────────────────────────────────────────────────┘   │
+└──────────────────────┬──────────────────────────────────────┘
+                       │
+┌──────────────────────▼──────────────────────────────────────┐
+│                   Frontend Layer                             │
+│  ┌────────────┐  ┌────────────┐  ┌──────────────────┐     │
+│  │   HTML5    │  │Tailwind CSS│  │   JavaScript     │     │
+│  │ Semantic   │  │  (v3.x)    │  │   (ES6+)        │     │
+│  │  Markup    │  │   CDN      │  │   Vanilla       │     │
+│  └────────────┘  └────────────┘  └──────────────────┘     │
+│                                                              │
+│  ┌──────────────────────────────────────────────────┐      │
+│  │           Canvas API (HTML5)                      │      │
+│  │         2D Context Rendering                      │      │
+│  └──────────────────────────────────────────────────┘      │
+└──────────────────────┬──────────────────────────────────────┘
+                       │
+┌──────────────────────▼──────────────────────────────────────┐
+│                   Content Layer                              │
+│  ┌────────────┐  ┌────────────┐  ┌──────────────────┐     │
+│  │   Images   │  │    PDFs    │  │   YAML Data      │     │
+│  │  /assets/  │  │  Papers    │  │   (Legacy)       │     │
+│  └────────────┘  └────────────┘  └──────────────────┘     │
+└──────────────────────┬──────────────────────────────────────┘
+                       │
+┌──────────────────────▼──────────────────────────────────────┐
+│                 Build/Deploy Layer                           │
+│  ┌────────────┐  ┌────────────┐  ┌──────────────────┐     │
+│  │    Git     │  │   Jekyll   │  │  GitHub Pages    │     │
+│  │  Version   │  │ (Optional) │  │    Hosting       │     │
+│  │  Control   │  │   Builder  │  │  Auto-deploy     │     │
+│  └────────────┘  └────────────┘  └──────────────────┘     │
+└─────────────────────────────────────────────────────────────┘
+```
+
+## User Interaction Flow
+
+```
+┌───────────┐
+│   User    │
+│  Visits   │
+│   Site    │
+└─────┬─────┘
+      │
+      ▼
+┌─────────────────┐
+│  index.html     │
+│  Loads          │
+└─────┬───────────┘
+      │
+      ├─► Fonts load (Google Fonts)
+      │
+      ├─► Tailwind CSS loads (CDN)
+      │
+      ├─► ASCII animation starts
+      │
+      └─► Page renders
+            │
+            ▼
+      ┌─────────────────┐
+      │  User Scrolls   │
+      │  or Clicks Nav  │
+      └─────┬───────────┘
+            │
+            ├─► Smooth scroll animation
+            │
+            └─► Section comes into view
+                  │
+                  ▼
+      ┌─────────────────┐
+      │  User Hovers    │
+      │  Over Card      │
+      └─────┬───────────┘
+            │
+            └─► Invert animation (0.3s)
+                  │
+                  ▼
+      ┌─────────────────┐
+      │  User Clicks    │
+      │  Link/Button    │
+      └─────┬───────────┘
+            │
+            ├─► Internal: Smooth scroll
+            │
+            └─► External: New page/PDF
+```
+
+## File Dependency Graph
+
+```
+index.html
+    │
+    ├─► Google Fonts API
+    │   ├─► Space Mono (monospace)
+    │   └─► Inter (sans-serif)
+    │
+    ├─► Tailwind CSS CDN
+    │   └─► cdn.tailwindcss.com
+    │
+    └─► Assets (relative paths)
+        └─► /assets/
+            ├─► profile-pics/
+            ├─► publications/
+            └─► projects/
+
+_layouts/default.html (Legacy)
+    │
+    ├─► _data/main_info.yaml
+    │
+    ├─► /libs/external/
+    │   ├─► jquery-3.1.1.min.js
+    │   ├─► skeleton/skeleton.css
+    │   ├─► font-awesome-4.7.0/
+    │   └─► academicons-1.8.6/
+    │
+    └─► /libs/custom/
+        ├─► my_css.css
+        └─► my_js.js
+```
+
+## Color System Architecture
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                    Color Palette                             │
+└─────────────────────────────────────────────────────────────┘
+                            │
+        ┌───────────────────┼───────────────────┐
+        │                   │                   │
+┌───────▼────────┐  ┌───────▼────────┐  ┌──────▼──────┐
+│   Background   │  │   Foreground   │  │   Accents   │
+└───────┬────────┘  └───────┬────────┘  └──────┬──────┘
+        │                   │                   │
+┌───────▼────────┐  ┌───────▼────────┐  ┌──────▼──────┐
+│ #050505        │  │ #E0E0E0        │  │ rgba(white) │
+│ matte-black    │  │ off-white      │  │ 10% - 20%   │
+│ Body bg        │  │ Primary text   │  │ borders     │
+└────────────────┘  └───────┬────────┘  └─────────────┘
+                            │
+                    ┌───────▼────────┐
+                    │ #888888        │
+                    │ mid-gray       │
+                    │ Secondary text │
+                    └────────────────┘
+```
+
+## Grid System (Bento Layout)
+
+```
+Desktop (12 columns)
+┌─────────────────────────────────────────────────────────────┐
+│                                                              │
+│  ┌──────────────────────────────┐  ┌──────────────┐        │
+│  │                              │  │              │        │
+│  │     Project 1 (8 col)        │  │  Project 2   │        │
+│  │                              │  │   (4 col)    │        │
+│  └──────────────────────────────┘  └──────────────┘        │
+│                                                              │
+│  ┌──────────────────┐  ┌───────────────────────┐          │
+│  │                  │  │                       │          │
+│  │   Project 3      │  │     Project 4         │          │
+│  │   (6 col)        │  │     (6 col)           │          │
+│  └──────────────────┘  └───────────────────────┘          │
+│                                                              │
+└─────────────────────────────────────────────────────────────┘
+
+Tablet (2 columns)
+┌─────────────────────────────────────────────────────────────┐
+│  ┌──────────────────┐  ┌───────────────────────┐          │
+│  │   Project 1      │  │     Project 2         │          │
+│  └──────────────────┘  └───────────────────────┘          │
+│  ┌──────────────────┐  ┌───────────────────────┐          │
+│  │   Project 3      │  │     Project 4         │          │
+│  └──────────────────┘  └───────────────────────┘          │
+└─────────────────────────────────────────────────────────────┘
+
+Mobile (1 column)
+┌────────────────┐
+│   Project 1    │
+├────────────────┤
+│   Project 2    │
+├────────────────┤
+│   Project 3    │
+├────────────────┤
+│   Project 4    │
+└────────────────┘
+```
+
+---
+
+## Key Takeaways
+
+1. **Dual Implementation**: Modern (index.html) + Legacy (Jekyll)
+2. **Layered Rendering**: Background → Animation → Grid → Content
+3. **Responsive Design**: Mobile-first with breakpoints at 768px, 1024px
+4. **No Build Required**: Modern site is pure HTML/CSS/JS
+5. **Animation Loop**: 60 FPS canvas rendering of 3D torus
+6. **Modular Structure**: Separable sections for easy customization
+
+For detailed implementation information, see:
+- [IMPLEMENTATION_GUIDE.md](IMPLEMENTATION_GUIDE.md) - Full technical guide
+- [QUICK_START.md](QUICK_START.md) - Quick reference for common tasks
diff --git a/DOCS_INDEX.md b/DOCS_INDEX.md
new file mode 100644
index 0000000..f583166
--- /dev/null
+++ b/DOCS_INDEX.md
@@ -0,0 +1,278 @@
+# 📖 Documentation Index
+
+Welcome! This is your complete guide to understanding the implementation of jdsanc.github.io.
+
+## 🎯 Start Here
+
+**New to this project?**  
+👉 Start with [QUICK_START.md](QUICK_START.md) for a 5-minute overview
+
+**Want to understand the architecture?**  
+👉 See [ARCHITECTURE.md](ARCHITECTURE.md) for visual diagrams
+
+**Need comprehensive technical details?**  
+👉 Read [IMPLEMENTATION_GUIDE.md](IMPLEMENTATION_GUIDE.md) for everything
+
+---
+
+## 📚 Documentation Overview
+
+### 1. [README.md](README.md)
+**What it is:** Project overview and getting started  
+**Best for:** First-time visitors, project summary  
+**Reading time:** 2 minutes
+
+### 2. [QUICK_START.md](QUICK_START.md)
+**What it is:** Quick reference guide with common tasks  
+**Best for:** Making quick changes, learning the basics  
+**Reading time:** 10 minutes  
+**Contents:**
+- 5-minute overview
+- File structure at a glance
+- How to make quick changes
+- Common customizations
+- Quick reference cards
+
+### 3. [IMPLEMENTATION_GUIDE.md](IMPLEMENTATION_GUIDE.md)
+**What it is:** Comprehensive technical documentation  
+**Best for:** Deep understanding, major modifications  
+**Reading time:** 30-45 minutes  
+**Contents:**
+- Complete architecture explanation
+- Technology stack details
+- Component documentation
+- ASCII animation mathematics
+- Customization guide
+- Deployment instructions
+- Troubleshooting
+- Future enhancements
+
+### 4. [ARCHITECTURE.md](ARCHITECTURE.md)
+**What it is:** Visual architecture diagrams and flow charts  
+**Best for:** Visual learners, system overview  
+**Reading time:** 15 minutes  
+**Contents:**
+- Site structure diagrams
+- Component hierarchy
+- Layer stack visualization
+- Data flow diagrams
+- Animation flow charts
+- Grid system layouts
+- Technology stack diagram
+
+---
+
+## 🎓 Learning Paths
+
+### Path 1: Quick Editor
+*"I just want to update content"*
+
+1. Read [QUICK_START.md](QUICK_START.md) → "How to Make Quick Changes" section
+2. Edit `index.html` following the examples
+3. Test locally and deploy
+
+**Time:** 15 minutes
+
+### Path 2: Designer
+*"I want to customize the design"*
+
+1. Read [QUICK_START.md](QUICK_START.md) → Full document
+2. Review [ARCHITECTURE.md](ARCHITECTURE.md) → Color & Grid sections
+3. Read [IMPLEMENTATION_GUIDE.md](IMPLEMENTATION_GUIDE.md) → Customization Guide
+4. Experiment with Tailwind classes
+
+**Time:** 45 minutes
+
+### Path 3: Developer
+*"I want to understand everything"*
+
+1. Read [README.md](README.md) → Get context
+2. Read [ARCHITECTURE.md](ARCHITECTURE.md) → Understand structure
+3. Read [IMPLEMENTATION_GUIDE.md](IMPLEMENTATION_GUIDE.md) → Deep dive
+4. Review `index.html` with new understanding
+5. Experiment with local development
+
+**Time:** 1-2 hours
+
+### Path 4: Maintainer
+*"I need to extend or debug the site"*
+
+1. Complete Path 3 (Developer)
+2. Study [IMPLEMENTATION_GUIDE.md](IMPLEMENTATION_GUIDE.md) → "How It Works" section
+3. Review ASCII animation code with mathematics explanation
+4. Read troubleshooting section
+5. Set up local development environment
+
+**Time:** 2-3 hours
+
+---
+
+## 📑 Quick Reference by Topic
+
+### Understanding the Code
+- **Modern Site:** [IMPLEMENTATION_GUIDE.md](IMPLEMENTATION_GUIDE.md) → "Main Components" → "Modern Site"
+- **Legacy Jekyll:** [IMPLEMENTATION_GUIDE.md](IMPLEMENTATION_GUIDE.md) → "Main Components" → "Legacy Jekyll Site"
+- **ASCII Animation:** [IMPLEMENTATION_GUIDE.md](IMPLEMENTATION_GUIDE.md) → "ASCII Torus Mathematics"
+
+### Making Changes
+- **Content Updates:** [QUICK_START.md](QUICK_START.md) → "How to Make Quick Changes"
+- **Style Changes:** [QUICK_START.md](QUICK_START.md) → "Common Customizations"
+- **Color Scheme:** [IMPLEMENTATION_GUIDE.md](IMPLEMENTATION_GUIDE.md) → "Customization Guide"
+
+### Visual Understanding
+- **Site Structure:** [ARCHITECTURE.md](ARCHITECTURE.md) → "Site Structure Overview"
+- **Layer Stack:** [ARCHITECTURE.md](ARCHITECTURE.md) → "Layer Stack"
+- **Component Tree:** [ARCHITECTURE.md](ARCHITECTURE.md) → "Component Hierarchy"
+- **Animation Flow:** [ARCHITECTURE.md](ARCHITECTURE.md) → "Animation Flow"
+
+### Technical Details
+- **Technologies:** [IMPLEMENTATION_GUIDE.md](IMPLEMENTATION_GUIDE.md) → "Key Technologies"
+- **File Structure:** [IMPLEMENTATION_GUIDE.md](IMPLEMENTATION_GUIDE.md) → "File Structure"
+- **How It Works:** [IMPLEMENTATION_GUIDE.md](IMPLEMENTATION_GUIDE.md) → "How It Works"
+
+### Deployment & Testing
+- **Local Testing:** [QUICK_START.md](QUICK_START.md) → "Running Locally"
+- **Deployment:** [IMPLEMENTATION_GUIDE.md](IMPLEMENTATION_GUIDE.md) → "Deployment"
+- **Troubleshooting:** [IMPLEMENTATION_GUIDE.md](IMPLEMENTATION_GUIDE.md) → "Troubleshooting"
+
+---
+
+## 🔍 Find Information By Question
+
+### "How do I...?"
+
+| Question | Document | Section |
+|----------|----------|---------|
+| ...change my name? | QUICK_START.md | "Change Your Name" |
+| ...add a project? | QUICK_START.md | "Add a Project" |
+| ...add a publication? | QUICK_START.md | "Add a Publication" |
+| ...change colors? | QUICK_START.md | "Change Colors" |
+| ...modify the animation? | QUICK_START.md | "Make Animation Faster/Slower" |
+| ...run it locally? | QUICK_START.md | "Running Locally" |
+| ...deploy changes? | IMPLEMENTATION_GUIDE.md | "Deployment" |
+| ...understand the structure? | ARCHITECTURE.md | Full document |
+
+### "What is...?"
+
+| Question | Document | Section |
+|----------|----------|---------|
+| ...the ASCII animation? | IMPLEMENTATION_GUIDE.md | "ASCII Torus Mathematics" |
+| ...the bento grid? | ARCHITECTURE.md | "Grid System" |
+| ...Tailwind CSS? | IMPLEMENTATION_GUIDE.md | "Key Technologies" |
+| ...the layer stack? | ARCHITECTURE.md | "Layer Stack" |
+| ...the modern vs legacy site? | IMPLEMENTATION_GUIDE.md | "Architecture" |
+| ...the file structure? | IMPLEMENTATION_GUIDE.md | "File Structure" |
+
+### "Why does...?"
+
+| Question | Document | Section |
+|----------|----------|---------|
+| ...the site have two versions? | IMPLEMENTATION_GUIDE.md | "Architecture" |
+| ...it use monospace fonts? | IMPLEMENTATION_GUIDE.md | "Key Design Patterns" |
+| ...the hover effect invert? | IMPLEMENTATION_GUIDE.md | "Key Design Patterns" |
+| ...the animation use ASCII? | IMPLEMENTATION_GUIDE.md | "ASCII Torus Mathematics" |
+
+---
+
+## 📊 Documentation Statistics
+
+- **Total documentation:** ~1,700 lines
+- **Total words:** ~25,000 words
+- **Reading time (all):** ~2 hours
+- **Diagrams:** 12+ visual diagrams
+- **Code examples:** 50+ code snippets
+
+---
+
+## 🎯 Common Tasks → Documentation Mapping
+
+### Immediate Tasks (< 5 min)
+- **Update email:** QUICK_START.md → "Change Contact Email"
+- **Change status badge:** QUICK_START.md → "Change Your Title/Description"
+- **Add social link:** index.html line 499-503
+
+### Quick Tasks (5-15 min)
+- **Add project card:** QUICK_START.md → "Add a Project"
+- **Add publication:** QUICK_START.md → "Add a Publication"
+- **Change animation speed:** QUICK_START.md → "Make Animation Faster/Slower"
+
+### Short Tasks (15-30 min)
+- **Change color scheme:** IMPLEMENTATION_GUIDE.md → "Customization Guide"
+- **Modify typography:** IMPLEMENTATION_GUIDE.md → "Customization Guide"
+- **Add new section:** IMPLEMENTATION_GUIDE.md → "Main Components"
+
+### Medium Tasks (30-60 min)
+- **Redesign project cards:** IMPLEMENTATION_GUIDE.md → Full customization
+- **Add new animation:** IMPLEMENTATION_GUIDE.md → "ASCII Torus Mathematics"
+- **Implement new feature:** Study full implementation guide
+
+---
+
+## 💡 Tips for Using This Documentation
+
+1. **Start with the right level:**
+   - Beginner → QUICK_START.md
+   - Intermediate → ARCHITECTURE.md
+   - Advanced → IMPLEMENTATION_GUIDE.md
+
+2. **Use search (Ctrl/Cmd + F):**
+   - Search across all docs for keywords
+   - Look for specific line numbers
+
+3. **Follow the visual diagrams:**
+   - ARCHITECTURE.md has ASCII diagrams
+   - Great for understanding flow and structure
+
+4. **Keep documentation open while coding:**
+   - Reference line numbers
+   - Follow examples
+   - Check troubleshooting section
+
+5. **Update documentation when you make changes:**
+   - Keep it current for future you
+   - Help future contributors
+
+---
+
+## 🆘 Getting Help
+
+### Documentation Not Helpful?
+
+1. **Check the troubleshooting section:**
+   - IMPLEMENTATION_GUIDE.md → "Troubleshooting"
+
+2. **Review common tasks:**
+   - QUICK_START.md → Full document
+
+3. **Study the code directly:**
+   - index.html is well-structured
+   - Only 755 lines, readable
+
+4. **Open an issue:**
+   - GitHub Issues for bug reports
+   - Include what you tried
+
+### Found an Error in Docs?
+
+- Open a GitHub Issue
+- Submit a Pull Request with fix
+- Email: diazsjes [AT] gmail.com
+
+---
+
+## 🎉 You're Ready!
+
+Choose your learning path above and dive in. The documentation is structured to support both quick edits and deep understanding.
+
+**Quick access:**
+- **→ [QUICK_START.md](QUICK_START.md)** for fast reference
+- **→ [ARCHITECTURE.md](ARCHITECTURE.md)** for visual overview
+- **→ [IMPLEMENTATION_GUIDE.md](IMPLEMENTATION_GUIDE.md)** for complete guide
+
+Happy coding! 🚀
+
+---
+
+*Documentation Version: 1.0*  
+*Last Updated: December 2024*  
+*Total Pages: 4 documents*
diff --git a/IMPLEMENTATION_GUIDE.md b/IMPLEMENTATION_GUIDE.md
new file mode 100644
index 0000000..909d989
--- /dev/null
+++ b/IMPLEMENTATION_GUIDE.md
@@ -0,0 +1,688 @@
+# Implementation Guide for jdsanc.github.io
+
+This guide will help you understand how this personal academic portfolio website is implemented and how to work with it.
+
+## Table of Contents
+
+1. [Overview](#overview)
+2. [Architecture](#architecture)
+3. [Key Technologies](#key-technologies)
+4. [File Structure](#file-structure)
+5. [Main Components](#main-components)
+6. [How It Works](#how-it-works)
+7. [Customization Guide](#customization-guide)
+8. [Deployment](#deployment)
+
+---
+
+## Overview
+
+This is a personal academic portfolio website built for Jesus Diaz Sanchez, a PhD candidate at MIT. The site features:
+
+- **Modern single-page design** with smooth scrolling navigation
+- **Animated ASCII art background** (rotating 3D torus)
+- **Responsive Tailwind CSS styling** with a dark, minimalist theme
+- **Jekyll-based content management** for older layouts (legacy support)
+- **Static hosting** via GitHub Pages
+
+The site has two main implementations:
+1. A **modern single-page site** (`index.html`) - the current active design
+2. A **legacy Jekyll site** with templates and data-driven content
+
+---
+
+## Architecture
+
+### Dual Implementation Structure
+
+The repository contains two website implementations:
+
+#### 1. Modern Site (Current - `index.html`)
+- **Pure HTML/CSS/JavaScript** - no build process required
+- **Tailwind CSS** via CDN for styling
+- **Vanilla JavaScript** for ASCII canvas animation
+- Self-contained single file with inline styles and scripts
+
+#### 2. Legacy Jekyll Site (Template-based)
+- **Jekyll static site generator** (commented out in `_config.yml`)
+- **YAML data files** for content (`_data/` directory)
+- **Liquid templates** (`_layouts/` directory)
+- **Markdown content** for projects (`_projects/` directory)
+
+---
+
+## Key Technologies
+
+### Frontend Technologies
+
+1. **HTML5** - Modern semantic markup
+2. **Tailwind CSS** - Utility-first CSS framework (loaded via CDN)
+3. **Vanilla JavaScript** - No frameworks, pure JS for animations
+4. **Canvas API** - For rendering the ASCII art animation
+
+### Build & Deployment
+
+1. **Jekyll** (optional) - Static site generator for template-based version
+2. **GitHub Pages** - Hosting platform
+3. **Git** - Version control
+
+### Key Libraries (Legacy Site)
+
+Located in `/libs/`:
+- **jQuery 3.1.1** - DOM manipulation
+- **Skeleton CSS** - Responsive CSS framework
+- **Font Awesome 4.7.0** - Icon fonts
+- **Academicons 1.8.6** - Academic icons
+
+---
+
+## File Structure
+
+```
+jdsanc.github.io/
+│
+├── index.html                 # Main modern single-page site (ACTIVE)
+├── index.html.backup          # Backup of previous version
+├── _config.yml                # Jekyll configuration (mostly commented)
+├── README.md                  # Project readme
+│
+├── _layouts/                  # Jekyll templates (legacy)
+│   ├── default.html          # Base template with navigation
+│   └── project.html          # Project detail template
+│
+├── _data/                     # YAML data files (legacy)
+│   ├── main_info.yaml        # Personal info, links
+│   ├── publications.yaml     # Research publications
+│   ├── experience.yaml       # Work experience
+│   └── projects.yaml         # Project descriptions
+│
+├── _projects/                 # Markdown project files (legacy)
+│   └── *.md                  # Individual project descriptions
+│
+├── assets/                    # Static assets
+│   ├── profile-pics/         # Profile images
+│   ├── publications/         # Publication PDFs
+│   ├── projects/             # Project images
+│   └── cv/                   # CV/Resume files
+│
+├── libs/                      # External libraries (legacy)
+│   ├── external/             # Third-party libraries
+│   │   ├── jquery-3.1.1.min.js
+│   │   ├── skeleton/         # Skeleton CSS framework
+│   │   ├── font-awesome-4.7.0/
+│   │   └── academicons-1.8.6/
+│   └── custom/               # Custom styles and scripts
+│       ├── my_css.css        # Custom CSS
+│       └── my_js.js          # Custom JavaScript
+│
+└── _website_2014/            # Archive of old website version
+```
+
+---
+
+## Main Components
+
+### 1. Modern Site (`index.html`)
+
+#### Color Scheme
+```javascript
+colors: {
+  'matte-black': '#050505',   // Background
+  'off-white': '#E0E0E0',     // Primary text
+  'mid-gray': '#888888',      // Secondary text
+  'border-dim': 'rgba(255, 255, 255, 0.1)',   // Subtle borders
+  'border-light': 'rgba(255, 255, 255, 0.2)', // Highlighted borders
+}
+```
+
+#### Typography
+- **Headings**: Space Mono (monospace) - gives technical/scientific feel
+- **Body**: Inter (sans-serif) - clean readability
+
+#### Main Sections
+
+1. **Navigation Bar**
+   - Fixed to top
+   - Translucent background with backdrop blur
+   - Links: Works, Research, Contact
+   - Pulsing status indicator
+
+2. **Hero Section**
+   - Full viewport height
+   - Large typographic title: "GENERATIVE MATTER"
+   - Subtitle describing research focus
+   - Status badges (Research status, Location)
+
+3. **Projects Section** ("Selected Deployments")
+   - Bento grid layout (responsive masonry)
+   - Interactive hover effects (invert colors)
+   - Technology tags
+   - Project cards with varying sizes
+
+4. **Publications Section**
+   - Table layout with year, title, venue, link
+   - Responsive: stacks on mobile
+   - Hover effects for each row
+
+5. **Footer**
+   - Contact email
+   - Social links (GitHub, Scholar, Twitter)
+   - Copyright information
+
+#### Background Elements
+
+1. **ASCII Canvas Animation**
+   - 3D rotating torus rendered in ASCII characters
+   - Uses canvas API with 2D context
+   - Mathematical projection (3D → 2D)
+   - Z-buffer for depth sorting
+   - Continuous rotation animation
+   - Responsive to window resize
+
+2. **Grid Overlay**
+   - Subtle grid pattern using CSS gradients
+   - 40px × 40px cells
+   - Fades out toward bottom with CSS mask
+
+### 2. Legacy Jekyll Site
+
+#### Layouts (`_layouts/`)
+
+**default.html**
+- Base template with header, navigation, footer
+- Uses Liquid templating: `{{ site.data.main_info.name }}`
+- Responsive Skeleton CSS framework
+- Social media icon links
+
+**project.html**
+- Extended from default layout
+- Project-specific content rendering
+
+#### Data Files (`_data/`)
+
+**main_info.yaml**
+```yaml
+name: "Jesus Diaz Sanchez"
+title: "Ph.D. candidate, Massachusetts Institute of Technology"
+email: "diazsjes [AT] gmail.com"
+profile_pic: "/assets/profile-pics/head-shot-jds.png"
+linkedin: "https://www.linkedin.com/in/..."
+github: "https://github.com/jdsanc"
+google_scholar: "https://scholar.google.com/..."
+```
+
+**publications.yaml**
+```yaml
+papers:
+  - title: "Paper Title"
+    authors: "Author1, Author2"
+    venue: "Conference/Journal Name"
+    paper_pdf: "path/to/pdf"
+    code: "github_url"
+    selected: y/n
+```
+
+#### Custom JavaScript (`libs/custom/my_js.js`)
+
+Key functions:
+- `smoothScroll()` - Smooth scrolling to anchor links
+- `onScroll()` - Sticky navigation detection
+- `openPopover()` / `closePopover()` - Dropdown menus
+- `buildSnippets()` - HTML escaping for code examples
+
+---
+
+## How It Works
+
+### Modern Site Rendering Flow
+
+1. **Page Load**
+   ```
+   HTML parsed → Fonts loaded → Tailwind CSS applied → JavaScript executed
+   ```
+
+2. **ASCII Animation Loop**
+   ```
+   resize() → Initialize canvas dimensions
+   ↓
+   render() called via requestAnimationFrame
+   ↓
+   Clear canvas
+   ↓
+   Calculate torus 3D coordinates
+   ↓
+   Apply rotation transformations (A, B angles)
+   ↓
+   Project to 2D screen coordinates
+   ↓
+   Calculate luminance for each point
+   ↓
+   Map luminance to ASCII character
+   ↓
+   Check Z-buffer (depth)
+   ↓
+   Draw characters to canvas
+   ↓
+   Increment rotation angles
+   ↓
+   requestAnimationFrame(render) → Loop
+   ```
+
+3. **Interaction**
+   - Smooth scroll on navigation click
+   - Hover effects trigger CSS transitions
+   - Viewport resize updates canvas dimensions
+
+### ASCII Torus Mathematics
+
+The animated background is a **3D torus (donut)** rendered using ASCII art:
+
+#### Parametric Torus Equations
+```javascript
+// Circle in cross-section (theta)
+circlex = R2 + R1 * cos(theta)
+circley = R1 * sin(theta)
+
+// 3D Rotation matrices
+x = circlex * (cosB * cosphi + sinA * sinB * sinphi) - circley * cosA * sinB
+y = circlex * (sinB * cosphi - sinA * cosB * sinphi) + circley * cosA * cosB
+z = K2 + cosA * circlex * sinphi + circley * sinA
+```
+
+#### Projection to Screen
+```javascript
+ooz = 1 / z  // Perspective division
+xp = cols/2 + K1 * ooz * x  // Screen X
+yp = rows/2 - K1 * ooz * y  // Screen Y
+```
+
+#### Luminance Calculation
+```javascript
+// Lighting calculation based on surface normal
+L = cosphi * costheta * sinB 
+  - cosA * costheta * sinphi 
+  - sinA * sintheta 
+  + cosB * (cosA * sintheta - costheta * sinA * sinphi)
+```
+
+Characters used: `" .:-=+*#%@"` (darker to lighter)
+
+### Jekyll Site Rendering (Legacy)
+
+When using Jekyll:
+
+1. **Build Process**
+   ```
+   Jekyll reads _config.yml
+   ↓
+   Loads data from _data/*.yaml
+   ↓
+   Processes Liquid templates in _layouts/
+   ↓
+   Renders Markdown content from _projects/
+   ↓
+   Generates static HTML in _site/
+   ```
+
+2. **Data Binding**
+   ```liquid
+   {{ site.data.main_info.name }}
+   {% for paper in site.data.publications.papers %}
+     {{ paper.title }}
+   {% endfor %}
+   ```
+
+---
+
+## Customization Guide
+
+### Updating Content in Modern Site
+
+#### Change Personal Information
+Edit `index.html` lines 166, 197-201:
+```html
+<span>Jesus Diaz Sanchez</span>
+<div class="font-mono text-mid-gray mb-4 text-sm">
+  > DEPARTMENT OF CHEMICAL ENGINEERING <br>
+  > MASSACHUSETTS INSTITUTE OF TECHNOLOGY
+</div>
+```
+
+#### Modify Colors
+Edit Tailwind config in `index.html` lines 37-56:
+```javascript
+tailwind.config = {
+  theme: {
+    extend: {
+      colors: {
+        'matte-black': '#YOUR_COLOR',
+        // ...
+      }
+    }
+  }
+}
+```
+
+#### Add/Edit Projects
+Edit the project cards in `index.html` around lines 260-360:
+```html
+<article class="lg:col-span-8 ...">
+  <div class="flex justify-between items-start mb-8">
+    <h3 class="font-mono text-xl font-bold">Project Name</h3>
+    <span class="...">[TECH]</span>
+  </div>
+  <p class="...">Project description</p>
+  <div class="...">View Repository -></div>
+</article>
+```
+
+#### Update Publications
+Edit publications table in `index.html` around lines 397-464:
+```html
+<div class="grid grid-cols-1 md:grid-cols-12 ...">
+  <div class="col-span-2">2023</div>
+  <div class="col-span-6">Paper Title</div>
+  <div class="col-span-3">Venue</div>
+  <div class="col-span-1">
+    <a href="#">[PDF]</a>
+  </div>
+</div>
+```
+
+#### Adjust ASCII Animation
+Modify parameters in `index.html` around lines 586-602:
+```javascript
+const R1 = 1;      // Tube radius
+const R2 = 2;      // Distance from center
+const K2 = 5;      // Distance from viewer
+A += 0.003;        // Rotation speed X
+B += 0.002;        // Rotation speed Z
+```
+
+### Updating Legacy Jekyll Site
+
+#### Personal Info
+Edit `_data/main_info.yaml`:
+```yaml
+name: "Your Name"
+title: "Your Title"
+email: "your@email.com"
+```
+
+#### Publications
+Edit `_data/publications.yaml`:
+```yaml
+papers:
+  - title: "New Paper Title"
+    authors: "Author List"
+    venue: "Conference 2024"
+    paper_pdf: "assets/publications/2024_paper/paper.pdf"
+    selected: y
+```
+
+#### Add New Project
+1. Create `_projects/YYYY_project-name.md`
+2. Add frontmatter and content:
+```yaml
+---
+layout: project
+title: "Project Name"
+---
+
+Project description here...
+```
+
+---
+
+## Deployment
+
+### Current Setup
+
+The site is hosted on **GitHub Pages** at `jdsanc.github.io`.
+
+#### Deployment Method 1: Direct Push (Current)
+```bash
+# Make changes to index.html
+git add index.html
+git commit -m "Update content"
+git push origin main
+# GitHub Pages automatically serves index.html
+```
+
+#### Deployment Method 2: Jekyll Build (Legacy)
+```bash
+# If using Jekyll
+jekyll build
+# Outputs to _site/
+# GitHub Pages can build Jekyll automatically
+```
+
+#### Deployment Method 3: Manual Upload
+```bash
+# Old deploy script (commented in __deploy.sh)
+scp -r _site/* username@server:public_html/
+```
+
+### GitHub Pages Settings
+
+- **Source**: Deploy from branch `main`
+- **Root directory**: `/` (root)
+- **Custom domain**: None (uses jdsanc.github.io)
+- **HTTPS**: Enforced
+
+### Testing Locally
+
+#### For Modern Site (No Build)
+```bash
+# Simple HTTP server
+python3 -m http.server 8000
+# Visit http://localhost:8000
+```
+
+#### For Jekyll Site
+```bash
+# Install Jekyll
+gem install jekyll bundler
+
+# Serve locally
+jekyll serve
+# Visit http://localhost:4000
+```
+
+---
+
+## Development Tips
+
+### Performance Optimization
+
+1. **Canvas Animation**
+   - Increase step size in loops (lines 633, 639) for better performance
+   - Current: `theta += 0.07`, `phi += 0.02`
+   - Higher values = faster but less detailed
+
+2. **Font Loading**
+   - Uses `preconnect` for Google Fonts (lines 17-19)
+   - Critical for preventing layout shift
+
+3. **CSS**
+   - Tailwind loaded via CDN (consider self-hosting for production)
+   - Inline styles reduce HTTP requests
+
+### Browser Compatibility
+
+- Modern CSS features: `backdrop-blur`, `mix-blend-mode`
+- Canvas API: Supported by all modern browsers
+- Fallbacks: Grid overlay fades gracefully if mask not supported
+
+### Responsive Design
+
+Breakpoints:
+- **Mobile**: < 768px (single column)
+- **Tablet**: 768px - 1024px (2 columns)
+- **Desktop**: > 1024px (12-column grid)
+
+---
+
+## Key Design Patterns
+
+### 1. Monospace Typography
+Creates a technical, research-focused aesthetic appropriate for an academic portfolio.
+
+### 2. Inverted Hover States
+```css
+.hover-invert:hover {
+  background-color: #E0E0E0;
+  color: #050505;
+}
+```
+Provides strong visual feedback without traditional button styling.
+
+### 3. Bento Grid Layout
+Varying card sizes create visual interest while maintaining structure:
+```html
+lg:col-span-8  <!-- Large card -->
+lg:col-span-4  <!-- Small card -->
+lg:col-span-6  <!-- Medium cards -->
+```
+
+### 4. Layered Backgrounds
+Three layers create depth:
+1. Solid black base
+2. Animated ASCII canvas (z-index: 0, opacity: 40%)
+3. Static grid overlay (z-index: 0)
+
+### 5. Data-Driven Content (Legacy)
+Separates content from presentation:
+- Data in YAML files
+- Templates in HTML
+- Rendered via Jekyll/Liquid
+
+---
+
+## Common Tasks
+
+### Add a New Publication
+**Modern Site:**
+1. Edit `index.html`
+2. Copy existing publication row
+3. Update year, title, venue, link
+
+**Legacy Site:**
+1. Edit `_data/publications.yaml`
+2. Add new entry under `papers:`
+
+### Change Profile Picture
+1. Upload image to `/assets/profile-pics/`
+2. Update reference:
+   - Modern: Line 78 in `index.html` (if added)
+   - Legacy: `_data/main_info.yaml` → `profile_pic`
+
+### Update Contact Email
+**Modern Site:** Lines 179, 484-486 in `index.html`
+**Legacy Site:** `_data/main_info.yaml` → `email`
+
+### Modify Navigation
+**Modern Site:** Lines 170-181 in `index.html`
+**Legacy Site:** Lines 110-118 in `_layouts/default.html`
+
+### Change Animation Speed
+Lines 745, 747 in `index.html`:
+```javascript
+A += 0.003;  // Increase for faster rotation
+B += 0.002;
+```
+
+---
+
+## Troubleshooting
+
+### ASCII Animation Not Showing
+- Check browser console for JavaScript errors
+- Verify canvas element exists: `<canvas id="ascii-canvas">`
+- Ensure `render()` function is being called
+
+### Fonts Not Loading
+- Check network tab for failed Google Fonts requests
+- Verify `preconnect` links are correct
+- Consider self-hosting fonts
+
+### Layout Broken on Mobile
+- Check Tailwind responsive classes (`md:`, `lg:`)
+- Verify viewport meta tag: `<meta name="viewport"...>`
+- Test grid column spans add up correctly
+
+### Jekyll Build Fails
+- Check YAML syntax in `_data/*.yaml`
+- Ensure Jekyll is installed: `gem install jekyll`
+- Check `_config.yml` for errors
+
+---
+
+## Future Enhancements
+
+Potential improvements:
+
+1. **Content Management**
+   - Convert to headless CMS (Contentful, Sanity)
+   - Keep modern design, pull content from API
+
+2. **Performance**
+   - Self-host Tailwind CSS (purged)
+   - Lazy load images
+   - Optimize ASCII animation with WebGL
+
+3. **Interactivity**
+   - Project filtering by technology
+   - Search functionality
+   - Dark/light mode toggle
+
+4. **Analytics**
+   - Google Analytics integration (commented out)
+   - Track project link clicks
+
+5. **Accessibility**
+   - Add ARIA labels
+   - Keyboard navigation improvements
+   - Screen reader optimization
+
+---
+
+## Resources
+
+### Documentation
+- [Tailwind CSS](https://tailwindcss.com/docs)
+- [Jekyll](https://jekyllrb.com/docs/)
+- [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)
+- [GitHub Pages](https://docs.github.com/en/pages)
+
+### Inspiration
+- ASCII Donut algorithm by Andy Sloane
+- Modern academic portfolio designs
+- Brutalist web design principles
+
+---
+
+## Credits
+
+**Site Owner:** Jesus Diaz Sanchez  
+**Institution:** MIT Chemical Engineering  
+**Original Design:** Generated with assistance from Gemini 3  
+**ASCII Animation:** Inspired by donut.c by Andy Sloane
+
+---
+
+## License
+
+See [LICENSE](LICENSE) file in repository.
+
+---
+
+## Contact
+
+For questions about this implementation:
+- **Email:** diazsjes [AT] gmail.com
+- **GitHub:** [@jdsanc](https://github.com/jdsanc)
+
+---
+
+*Last Updated: 2024*
diff --git a/QUICK_START.md b/QUICK_START.md
new file mode 100644
index 0000000..5e5b9b7
--- /dev/null
+++ b/QUICK_START.md
@@ -0,0 +1,457 @@
+# Quick Start Guide
+
+This guide will help you quickly understand and start working with this portfolio website.
+
+## Understanding the Implementation - 5 Minute Overview
+
+### What Is This Site?
+
+A personal academic portfolio website with:
+- **Modern single-page design** with animated ASCII art background
+- **Dark minimalist aesthetic** perfect for technical/research focus
+- **No build process required** - just HTML, CSS, and JavaScript
+- **Legacy Jekyll support** for template-based content management
+
+### Two Implementations
+
+#### 1. Active Site: `index.html` (Modern)
+- Single HTML file with everything inline
+- Tailwind CSS via CDN
+- Animated 3D torus background in ASCII art
+- Sections: Hero, Projects, Publications, Footer
+
+#### 2. Legacy Site: Jekyll Templates
+- Uses `_layouts/`, `_data/`, `_projects/` directories
+- YAML-driven content
+- Skeleton CSS framework
+- More traditional academic site structure
+
+---
+
+## File Structure at a Glance
+
+```
+jdsanc.github.io/
+├── index.html           ← MAIN SITE (edit this!)
+├── _data/               ← YAML content files (legacy)
+│   ├── main_info.yaml
+│   ├── publications.yaml
+│   └── experience.yaml
+├── _layouts/            ← Jekyll templates (legacy)
+├── assets/              ← Images, PDFs, CV
+└── libs/                ← CSS/JS libraries (legacy)
+```
+
+---
+
+## Key Technologies
+
+1. **Tailwind CSS** - Utility-first CSS framework (CDN)
+2. **Vanilla JavaScript** - No frameworks
+3. **Canvas API** - ASCII animation rendering
+4. **Jekyll** (optional) - Static site generator for legacy version
+5. **GitHub Pages** - Hosting
+
+---
+
+## How to Make Quick Changes
+
+### Change Your Name
+**File:** `index.html`  
+**Line:** 166
+```html
+<span>Your Name Here</span>
+```
+
+### Change Your Title/Description
+**Lines:** 197-217
+```html
+<div class="font-mono text-mid-gray mb-4 text-sm">
+  > YOUR DEPARTMENT <br>
+  > YOUR INSTITUTION
+</div>
+
+<h1 class="font-mono text-5xl md:text-8xl font-bold">
+  YOUR<br>TAGLINE
+</h1>
+
+<p class="font-sans text-lg md:text-2xl font-light text-mid-gray">
+  Your research description here.
+</p>
+```
+
+### Change Contact Email
+**Lines:** 178, 482-485
+```html
+<a href="mailto:your@email.com">Contact</a>
+<!-- and -->
+<a href="mailto:your@email.com">your@email.com</a>
+```
+
+### Add a Project
+**Lines:** 260-360 (copy existing article block)
+```html
+<article class="lg:col-span-8 border border-border-dim p-8 hover-invert group cursor-pointer">
+  <div class="flex justify-between items-start mb-8">
+    <h3 class="font-mono text-xl font-bold">Your Project Name</h3>
+    <span class="font-mono text-xs border border-border-dim px-2 py-1 rounded">[TECH]</span>
+  </div>
+  <p class="font-sans text-mid-gray text-lg leading-relaxed mb-8 group-hover:text-matte-black">
+    Your project description here.
+  </p>
+  <div class="font-mono text-xs uppercase underline">View Repository -></div>
+</article>
+```
+
+### Add a Publication
+**Lines:** 397-464 (copy existing row)
+```html
+<div class="grid grid-cols-1 md:grid-cols-12 gap-4 py-6 border-b border-border-dim hover:bg-white/5 transition-colors items-start">
+  <div class="col-span-1 md:col-span-2 text-mid-gray">2024</div>
+  <div class="col-span-1 md:col-span-6 font-sans font-medium text-lg md:text-sm text-off-white">
+    Your Paper Title
+  </div>
+  <div class="col-span-1 md:col-span-3 text-mid-gray text-xs md:text-sm mt-2 md:mt-0">Conference Name</div>
+  <div class="col-span-1 text-right">
+    <a href="path/to/paper.pdf" class="text-white underline">[PDF]</a>
+  </div>
+</div>
+```
+
+### Change Colors
+**Lines:** 37-56
+```javascript
+tailwind.config = {
+  theme: {
+    extend: {
+      colors: {
+        'matte-black': '#050505',   // Background
+        'off-white': '#E0E0E0',     // Primary text
+        'mid-gray': '#888888',      // Secondary text
+      }
+    }
+  }
+}
+```
+
+---
+
+## Understanding the ASCII Animation
+
+The animated background is a 3D torus (donut shape) rendered with ASCII characters.
+
+**Key parameters** (lines 586-602):
+```javascript
+const R1 = 1;      // Tube thickness
+const R2 = 2;      // Donut size
+const K2 = 5;      // Distance from viewer
+A += 0.003;        // Rotation speed (X-axis)
+B += 0.002;        // Rotation speed (Z-axis)
+```
+
+**How it works:**
+1. Generate 3D torus coordinates
+2. Rotate using trigonometry
+3. Project to 2D screen space
+4. Calculate lighting/luminance
+5. Map brightness to ASCII character: `" .:-=+*#%@"`
+6. Repeat 60 times per second
+
+---
+
+## Running Locally
+
+### Modern Site (No build needed)
+```bash
+# Navigate to directory
+cd jdsanc.github.io
+
+# Start simple HTTP server
+python3 -m http.server 8000
+
+# Open browser
+open http://localhost:8000
+```
+
+### Jekyll Site (Legacy)
+```bash
+# Install Jekyll (first time only)
+gem install jekyll bundler
+
+# Serve site
+jekyll serve
+
+# Open browser
+open http://localhost:4000
+```
+
+---
+
+## Design Principles
+
+### 1. Minimalist Dark Theme
+- Dark background (#050505)
+- Light text (#E0E0E0)
+- Minimal borders and accents
+
+### 2. Monospace Typography
+- Space Mono for headings and UI
+- Inter for body text
+- Creates technical/scientific aesthetic
+
+### 3. Inverted Hover States
+- Cards flip colors on hover
+- Background becomes light, text becomes dark
+- Strong visual feedback
+
+### 4. Bento Grid Layout
+- Varying card sizes (8-col, 6-col, 4-col)
+- Creates visual interest
+- Maintains structure
+
+### 5. Layered Backgrounds
+- Base: Solid black
+- Layer 1: Animated ASCII canvas (40% opacity)
+- Layer 2: Subtle grid overlay
+- Layer 3: Content
+
+---
+
+## Common Customizations
+
+### Make Animation Faster/Slower
+**Lines:** 745, 747
+```javascript
+A += 0.006;  // Double speed (was 0.003)
+B += 0.004;  // Double speed (was 0.002)
+```
+
+### Change Animation Density
+**Lines:** 633, 639
+```javascript
+for (let theta = 0; theta < 6.28; theta += 0.14) {  // Sparser (was 0.07)
+  for (let phi = 0; phi < 6.28; phi += 0.04) {      // Sparser (was 0.02)
+```
+
+### Adjust ASCII Characters
+**Line:** 535
+```javascript
+const charSet = " .:-=+*#%@";  // Light to dark
+// Try: const charSet = " ░▒▓█";  // Block characters
+// Try: const charSet = " .oO@";   // Simpler set
+```
+
+### Change Grid Size
+**Lines:** 96-102
+```css
+.grid-bg {
+  background-size: 80px 80px;  /* Larger grid (was 40px) */
+  background-image:
+    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+}
+```
+
+---
+
+## Deployment
+
+### GitHub Pages (Automatic)
+1. Push changes to `main` branch
+2. GitHub Pages automatically deploys
+3. Live at: `jdsanc.github.io`
+
+### Manual Deploy
+```bash
+git add index.html
+git commit -m "Update content"
+git push origin main
+```
+
+---
+
+## Project Structure Explained
+
+### Modern Site Components
+
+**Navigation** (Lines 157-185)
+- Fixed to top
+- Translucent with blur effect
+- Smooth scroll to sections
+
+**Hero** (Lines 193-238)
+- Full viewport height
+- Large typographic title
+- Status badges
+
+**Projects** (Lines 242-363)
+- Bento grid layout
+- Hover invert effect
+- Technology tags
+
+**Publications** (Lines 367-469)
+- Table layout
+- Responsive stacking
+- PDF links
+
+**Footer** (Lines 473-519)
+- Contact info
+- Social links
+- Copyright
+
+**ASCII Canvas** (Lines 525-755)
+- Canvas setup
+- Torus mathematics
+- Rendering loop
+
+### Legacy Jekyll Components
+
+**Layouts**
+- `default.html` - Base template
+- `project.html` - Project pages
+
+**Data Files**
+- `main_info.yaml` - Personal info
+- `publications.yaml` - Papers list
+- `experience.yaml` - Work history
+- `projects.yaml` - Project details
+
+**Content**
+- `_projects/*.md` - Project markdown files
+
+---
+
+## Testing Checklist
+
+Before deploying changes:
+
+- [ ] Test on Chrome, Firefox, Safari
+- [ ] Test on mobile (responsive design)
+- [ ] Verify all links work
+- [ ] Check animation performance
+- [ ] Validate HTML (W3C Validator)
+- [ ] Test smooth scrolling
+- [ ] Verify hover states
+- [ ] Check font loading
+
+---
+
+## Troubleshooting
+
+### Animation not showing?
+1. Check browser console for errors
+2. Verify `<canvas id="ascii-canvas">` exists
+3. Test in different browser
+
+### Layout broken on mobile?
+1. Check responsive classes (`md:`, `lg:`)
+2. Verify viewport meta tag
+3. Test with browser dev tools mobile view
+
+### Fonts not loading?
+1. Check network tab for font requests
+2. Verify Google Fonts links
+3. Check internet connection
+
+### Colors look wrong?
+1. Verify Tailwind config
+2. Check custom color definitions
+3. Clear browser cache
+
+---
+
+## Performance Tips
+
+1. **Optimize Animation**
+   - Increase loop step sizes for better FPS
+   - Reduce canvas resolution on mobile
+
+2. **Image Optimization**
+   - Compress images before uploading
+   - Use WebP format when possible
+   - Lazy load off-screen images
+
+3. **Font Loading**
+   - Fonts are preconnected (already optimized)
+   - Consider self-hosting for even faster load
+
+4. **CSS**
+   - Consider self-hosting Tailwind (purged)
+   - Remove unused CSS for production
+
+---
+
+## Next Steps
+
+1. **Read Full Guide**: See `IMPLEMENTATION_GUIDE.md` for comprehensive details
+2. **Customize Content**: Update personal info, projects, publications
+3. **Adjust Styling**: Modify colors, fonts, spacing to match your brand
+4. **Test Thoroughly**: Check across devices and browsers
+5. **Deploy**: Push to GitHub and go live!
+
+---
+
+## Getting Help
+
+**Documentation:**
+- Full implementation guide: `IMPLEMENTATION_GUIDE.md`
+- Tailwind CSS: https://tailwindcss.com/docs
+- Canvas API: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
+
+**Code Structure:**
+- Modern site: Single file (`index.html`)
+- Easy to understand and modify
+- No build process complexity
+
+**Common Issues:**
+- Most issues: Check browser console
+- Layout problems: Verify Tailwind classes
+- Animation issues: Check JavaScript console
+
+---
+
+## Key Files Reference
+
+| File | Purpose |
+|------|---------|
+| `index.html` | Main site (edit this for content changes) |
+| `_data/main_info.yaml` | Personal info (legacy) |
+| `_data/publications.yaml` | Publications list (legacy) |
+| `_layouts/default.html` | Base template (legacy) |
+| `assets/` | Images, PDFs, documents |
+| `libs/custom/my_css.css` | Custom CSS (legacy) |
+| `libs/custom/my_js.js` | Custom JavaScript (legacy) |
+
+---
+
+## Quick Reference: Color System
+
+```
+Background:        #050505 (matte-black)
+Primary Text:      #E0E0E0 (off-white)
+Secondary Text:    #888888 (mid-gray)
+Subtle Border:     rgba(255,255,255,0.1) (border-dim)
+Prominent Border:  rgba(255,255,255,0.2) (border-light)
+ASCII Canvas:      #444444 (40% opacity)
+```
+
+---
+
+## Quick Reference: Layout Grid
+
+```
+Mobile:   1 column
+Tablet:   2 columns (md: breakpoint)
+Desktop:  12 columns (lg: breakpoint)
+
+Project Cards:
+- Large:  8 columns (lg:col-span-8)
+- Medium: 6 columns (lg:col-span-6)
+- Small:  4 columns (lg:col-span-4)
+```
+
+---
+
+**Happy Coding! 🚀**
+
+For detailed information, see [IMPLEMENTATION_GUIDE.md](IMPLEMENTATION_GUIDE.md)
diff --git a/README.md b/README.md
index cbbe782..2e29e9c 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,69 @@
 # jdsanc.github.io
+
+Personal academic portfolio website for Jesus Diaz Sanchez, PhD candidate at MIT Chemical Engineering.
+
+## 🚀 Live Site
+
+Visit: [jdsanc.github.io](https://jdsanc.github.io)
+
+## 📚 Documentation
+
+**→ Start here: [DOCS_INDEX.md](DOCS_INDEX.md)** - Complete documentation index with learning paths
+
+To understand how this site is implemented:
+
+- **[QUICK_START.md](QUICK_START.md)** - 5-minute overview and quick reference
+- **[IMPLEMENTATION_GUIDE.md](IMPLEMENTATION_GUIDE.md)** - Comprehensive technical guide
+- **[ARCHITECTURE.md](ARCHITECTURE.md)** - Visual diagrams and architecture overview
+
+## ✨ Features
+
+- **Modern single-page design** with dark minimalist aesthetic
+- **Animated ASCII art background** (3D rotating torus)
+- **Responsive Tailwind CSS** styling
+- **No build process** - pure HTML/CSS/JavaScript
+- **Legacy Jekyll support** for template-based content
+
+## 🛠️ Quick Start
+
+```bash
+# Clone the repository
+git clone https://github.com/jdsanc/jdsanc.github.io.git
+
+# Navigate to directory
+cd jdsanc.github.io
+
+# Start local server
+python3 -m http.server 8000
+
+# Open in browser
+open http://localhost:8000
+```
+
+## 📝 Making Changes
+
+Edit `index.html` to customize:
+- Personal information
+- Projects and research
+- Publications
+- Contact details
+
+See [QUICK_START.md](QUICK_START.md) for line numbers and examples.
+
+## 🎨 Key Technologies
+
+- HTML5 with Canvas API
+- Tailwind CSS (via CDN)
+- Vanilla JavaScript
+- Jekyll (legacy/optional)
+- GitHub Pages
+
+## 📄 License
+
+See [LICENSE](LICENSE) file for details.
+
+## 📧 Contact
+
+Jesus Diaz Sanchez  
+Email: diazsjes [AT] gmail.com  
+GitHub: [@jdsanc](https://github.com/jdsanc)