From d08c630ffea34213c5fa0d108db5eebcfd3ba66e Mon Sep 17 00:00:00 2001
From: rahul-aot <rahul.ap@aot-technologies.com>
Date: Thu, 2 Jul 2026 02:42:02 -0700
Subject: [PATCH 1/8] feat: implement interactive terminal component with
 command handling

- Added Terminal component for user interaction, featuring command input and output display.
- Integrated command handling logic with predefined commands including help, about, skills, projects, and more.
- Implemented command suggestions and history navigation (up/down arrows).
- Introduced theme cycling functionality within the terminal.
- Removed ThemeSwitcher and Timeline components along with their styles as they are no longer needed.
- Cleaned up unused styles and pages related to contact, home, journey, projects, and skills.
- Updated global styles to include new terminal-related styles and animations.
- Refactored variables for better theme management and terminal aesthetics.
---
 index.html                                    |   2 +-
 src/App.tsx                                   |  30 +-
 src/components/ContactForm/ContactForm.scss   | 135 --------
 src/components/ContactForm/ContactForm.tsx    | 116 -------
 src/components/FloatingChat/FloatingChat.scss | 157 ---------
 src/components/FloatingChat/FloatingChat.tsx  | 271 ----------------
 src/components/GlassCard/GlassCard.scss       |  12 -
 src/components/GlassCard/GlassCard.tsx        |  31 --
 src/components/Hero/Hero.scss                 | 301 ------------------
 src/components/Hero/Hero.tsx                  | 123 -------
 .../LoadingScreen/LoadingScreen.scss          |  99 ++++++
 .../LoadingScreen/LoadingScreen.tsx           | 114 +++++++
 src/components/Navbar/Navbar.scss             | 125 --------
 src/components/Navbar/Navbar.tsx              |  59 ----
 src/components/ProjectCard/ProjectCard.scss   | 107 -------
 src/components/ProjectCard/ProjectCard.tsx    |  85 -----
 src/components/SkillGrid/SkillGrid.scss       |  49 ---
 src/components/SkillGrid/SkillGrid.tsx        |  55 ----
 src/components/Terminal/Terminal.scss         | 156 +++++++++
 src/components/Terminal/Terminal.tsx          | 162 ++++++++++
 src/components/Terminal/commands.ts           | 199 ++++++++++++
 .../ThemeSwitcher/ThemeSwitcher.scss          |  62 ----
 .../ThemeSwitcher/ThemeSwitcher.tsx           |  56 ----
 src/components/Timeline/Timeline.scss         | 120 -------
 src/components/Timeline/Timeline.tsx          | 100 ------
 src/pages/Contact/Contact.scss                |  13 -
 src/pages/Contact/Contact.tsx                 |  22 --
 src/pages/Home/Home.scss                      |  37 ---
 src/pages/Home/Home.tsx                       |  20 --
 src/pages/Journey/Journey.scss                |  21 --
 src/pages/Journey/Journey.tsx                 |  24 --
 src/pages/Projects/Projects.scss              |  29 --
 src/pages/Projects/Projects.tsx               |  30 --
 src/pages/Skills/Skills.scss                  |  21 --
 src/pages/Skills/Skills.tsx                   |  24 --
 src/router.tsx                                |  26 --
 src/services/email.ts                         |  10 -
 src/services/rag.ts                           |  81 -----
 src/styles/global.scss                        |  49 ++-
 src/styles/variables.scss                     |  57 +++-
 40 files changed, 830 insertions(+), 2360 deletions(-)
 delete mode 100644 src/components/ContactForm/ContactForm.scss
 delete mode 100644 src/components/ContactForm/ContactForm.tsx
 delete mode 100644 src/components/FloatingChat/FloatingChat.scss
 delete mode 100644 src/components/FloatingChat/FloatingChat.tsx
 delete mode 100644 src/components/GlassCard/GlassCard.scss
 delete mode 100644 src/components/GlassCard/GlassCard.tsx
 delete mode 100644 src/components/Hero/Hero.scss
 delete mode 100644 src/components/Hero/Hero.tsx
 create mode 100644 src/components/LoadingScreen/LoadingScreen.scss
 create mode 100644 src/components/LoadingScreen/LoadingScreen.tsx
 delete mode 100644 src/components/Navbar/Navbar.scss
 delete mode 100644 src/components/Navbar/Navbar.tsx
 delete mode 100644 src/components/ProjectCard/ProjectCard.scss
 delete mode 100644 src/components/ProjectCard/ProjectCard.tsx
 delete mode 100644 src/components/SkillGrid/SkillGrid.scss
 delete mode 100644 src/components/SkillGrid/SkillGrid.tsx
 create mode 100644 src/components/Terminal/Terminal.scss
 create mode 100644 src/components/Terminal/Terminal.tsx
 create mode 100644 src/components/Terminal/commands.ts
 delete mode 100644 src/components/ThemeSwitcher/ThemeSwitcher.scss
 delete mode 100644 src/components/ThemeSwitcher/ThemeSwitcher.tsx
 delete mode 100644 src/components/Timeline/Timeline.scss
 delete mode 100644 src/components/Timeline/Timeline.tsx
 delete mode 100644 src/pages/Contact/Contact.scss
 delete mode 100644 src/pages/Contact/Contact.tsx
 delete mode 100644 src/pages/Home/Home.scss
 delete mode 100644 src/pages/Home/Home.tsx
 delete mode 100644 src/pages/Journey/Journey.scss
 delete mode 100644 src/pages/Journey/Journey.tsx
 delete mode 100644 src/pages/Projects/Projects.scss
 delete mode 100644 src/pages/Projects/Projects.tsx
 delete mode 100644 src/pages/Skills/Skills.scss
 delete mode 100644 src/pages/Skills/Skills.tsx
 delete mode 100644 src/router.tsx
 delete mode 100644 src/services/email.ts
 delete mode 100644 src/services/rag.ts

diff --git a/index.html b/index.html
index b1db749..9548cd5 100644
--- a/index.html
+++ b/index.html
@@ -49,7 +49,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link
-    href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
+    href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@300;400;500;600;700&display=swap"
     rel="stylesheet" />
     
 
diff --git a/src/App.tsx b/src/App.tsx
index d1d71f1..84e881b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,23 +1,25 @@
-import React from 'react';
-import { BrowserRouter } from 'react-router-dom';
+import React, { useState, useCallback } from 'react';
+import { AnimatePresence } from 'framer-motion';
 import { ThemeProvider } from './context/ThemeContext';
-import Navbar from './components/Navbar/Navbar';
-import ThemeSwitcher from './components/ThemeSwitcher/ThemeSwitcher';
-import FloatingChat from './components/FloatingChat/FloatingChat';
-import AppRouter from './router';
+import LoadingScreen from './components/LoadingScreen/LoadingScreen';
+import Terminal from './components/Terminal/Terminal';
 import './styles/global.scss';
 
 const App: React.FC = () => {
+    const [loading, setLoading] = useState(true);
+    const handleComplete = useCallback(() => setLoading(false), []);
+
     return (
         <ThemeProvider>
-            <BrowserRouter>
-                <div className="page-container">
-                    <Navbar />
-                    <ThemeSwitcher />
-                    <AppRouter />
-                    <FloatingChat />
-                </div>
-            </BrowserRouter>
+            <div className="scanline" aria-hidden="true" />
+
+            <AnimatePresence>
+                {loading && (
+                    <LoadingScreen key="loader" onComplete={handleComplete} />
+                )}
+            </AnimatePresence>
+
+            {!loading && <Terminal />}
         </ThemeProvider>
     );
 };
diff --git a/src/components/ContactForm/ContactForm.scss b/src/components/ContactForm/ContactForm.scss
deleted file mode 100644
index 79a766c..0000000
--- a/src/components/ContactForm/ContactForm.scss
+++ /dev/null
@@ -1,135 +0,0 @@
-@import '../../styles/mixins/glass';
-
-.contact-container {
-  display: flex;
-  gap: 50px;
-  max-width: 1000px;
-  margin: 0 auto;
-  padding: 20px;
-  align-items: flex-start;
-  
-  .contact-info {
-    flex: 1;
-    
-    h2 {
-      font-size: 2.5rem;
-      margin-bottom: 15px;
-      color: var(--fg);
-    }
-    
-    p {
-      color: var(--muted);
-      margin-bottom: 30px;
-      font-size: 1.1rem;
-    }
-    
-    .info-items {
-      display: flex;
-      flex-direction: column;
-      gap: 15px;
-      
-      .info-card {
-        display: flex;
-        align-items: center;
-        gap: 15px;
-        padding: 20px;
-        transition: transform 0.2s;
-        
-        .icon {
-          color: var(--primary);
-        }
-        
-        span {
-          color: var(--fg);
-        }
-        
-        &:hover {
-          transform: translateX(5px);
-          border-color: var(--primary);
-        }
-      }
-    }
-  }
-  
-  .form-wrapper {
-    flex: 1.2;
-    
-    .contact-form-card {
-      padding: 30px;
-      
-      form {
-        display: flex;
-        flex-direction: column;
-        gap: 20px;
-        
-        .form-group {
-          display: flex;
-          flex-direction: column;
-          gap: 8px;
-          
-          label {
-            font-size: 0.9rem;
-            color: var(--muted);
-            font-weight: 500;
-          }
-          
-          input, textarea {
-            background: rgba(255, 255, 255, 0.05);
-            border: 1px solid var(--glass-border);
-            padding: 12px 15px;
-            border-radius: 12px;
-            color: var(--fg);
-            font-family: inherit;
-            outline: none;
-            transition: all 0.3s ease;
-            
-            &:focus {
-              border-color: var(--primary);
-              box-shadow: 0 0 10px rgba(0, 123, 255, 0.1);
-              background: rgba(255, 255, 255, 0.1);
-            }
-            
-            &::placeholder {
-              color: rgba(150, 150, 150, 0.5);
-            }
-          }
-          
-          textarea {
-            resize: vertical;
-          }
-        }
-        
-        .submit-btn {
-          margin-top: 10px;
-          background: var(--primary);
-          color: white;
-          padding: 12px;
-          border-radius: 12px;
-          font-weight: 600;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          gap: 10px;
-          transition: all 0.3s ease;
-          
-          &:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
-          }
-        }
-      }
-    }
-  }
-  
-  @media (max-width: 768px) {
-    flex-direction: column;
-    
-    .contact-info {
-      width: 100%;
-    }
-    
-    .form-wrapper {
-      width: 100%;
-    }
-  }
-}
diff --git a/src/components/ContactForm/ContactForm.tsx b/src/components/ContactForm/ContactForm.tsx
deleted file mode 100644
index c5a308d..0000000
--- a/src/components/ContactForm/ContactForm.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import React, { useState } from 'react';
-import { motion } from 'framer-motion';
-import { Send, Mail, Phone, MapPin } from 'lucide-react';
-import GlassCard from '../GlassCard/GlassCard';
-import { resumeData } from '../../data/resume';
-import './ContactForm.scss';
-import { sendEmail } from '../../services/email'
-
-const ContactForm: React.FC = () => {
-    const [formData, setFormData] = useState({
-        name: '',
-        email: '',
-        message: ''
-    });
-
-    const handleSubmit = (e: React.FormEvent) => {
-        e.preventDefault();
-        const templateParams = {
-            name: formData.name,
-            email: formData.email,
-            subject: "Hey, hello",
-            message: formData.message,
-        };
-        try {
-            sendEmail(templateParams);
-            setFormData({ name: '', email: '', message: '' });
-        } catch (error) {
-            console.error('Failed to send email:', error);
-        }
-    };
-
-    return (
-        <div className="contact-container">
-            <div className="contact-info">
-                <motion.div
-                    initial={{ x: -20, opacity: 0 }}
-                    animate={{ x: 0, opacity: 1 }}
-                    transition={{ duration: 0.5 }}
-                >
-                    <h2>Get in Touch</h2>
-                    <p>Have a project in mind or just want to say hi? Feel free to reach out!</p>
-
-                    <div className="info-items">
-                        <GlassCard className="info-card">
-                            <Mail className="icon" />
-                            <span>{resumeData.contact.email}</span>
-                        </GlassCard>
-
-                        <GlassCard className="info-card">
-                            <Phone className="icon" />
-                            <span>{resumeData.contact.phone}</span>
-                        </GlassCard>
-
-                        <GlassCard className="info-card">
-                            <MapPin className="icon" />
-                            <span>{resumeData.location}</span>
-                        </GlassCard>
-                    </div>
-                </motion.div>
-            </div>
-
-            <motion.div
-                className="form-wrapper"
-                initial={{ x: 20, opacity: 0 }}
-                animate={{ x: 0, opacity: 1 }}
-                transition={{ duration: 0.5, delay: 0.2 }}
-            >
-                <GlassCard className="contact-form-card">
-                    <form onSubmit={handleSubmit}>
-                        <div className="form-group">
-                            <label htmlFor="name">Name</label>
-                            <input
-                                id="name"
-                                type="text"
-                                value={formData.name}
-                                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                                placeholder="Your Name"
-                                required
-                            />
-                        </div>
-
-                        <div className="form-group">
-                            <label htmlFor="email">Email</label>
-                            <input
-                                id="email"
-                                type="email"
-                                value={formData.email}
-                                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
-                                placeholder="your@email.com"
-                                required
-                            />
-                        </div>
-
-                        <div className="form-group">
-                            <label htmlFor="message">Message</label>
-                            <textarea
-                                id="message"
-                                value={formData.message}
-                                onChange={(e) => setFormData({ ...formData, message: e.target.value })}
-                                placeholder="Your message..."
-                                rows={5}
-                                required
-                            />
-                        </div>
-
-                        <button type="submit" className="submit-btn">
-                            Send Message <Send size={18} />
-                        </button>
-                    </form>
-                </GlassCard>
-            </motion.div>
-        </div>
-    );
-};
-
-export default ContactForm;
diff --git a/src/components/FloatingChat/FloatingChat.scss b/src/components/FloatingChat/FloatingChat.scss
deleted file mode 100644
index e1ae482..0000000
--- a/src/components/FloatingChat/FloatingChat.scss
+++ /dev/null
@@ -1,157 +0,0 @@
-@import '../../styles/mixins/glass';
-
-.floating-chat-container {
-  position: fixed;
-  bottom: 30px;
-  right: 30px;
-  z-index: 2000;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  
-  .chat-toggle-btn {
-    @include glass-card;
-    width: 60px;
-    height: 60px;
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: var(--primary);
-    background: var(--glass-bg);
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-    
-    &:hover {
-      box-shadow: 0 0 20px var(--primary);
-    }
-  }
-  
-  .chat-window {
-    @include glass-card;
-    width: 350px;
-    height: 500px;
-    margin-bottom: 20px;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    border-radius: 20px;
-    
-    .chat-header {
-      padding: 15px;
-      border-bottom: 1px solid var(--glass-border);
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      background: rgba(255, 255, 255, 0.05);
-      
-      .ai-info {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        font-weight: 600;
-        color: var(--primary);
-      }
-      
-      button {
-        color: var(--muted);
-        &:hover { color: var(--fg); }
-      }
-    }
-    
-    .chat-messages {
-      flex: 1;
-      padding: 15px;
-      overflow-y: auto;
-      display: flex;
-      flex-direction: column;
-      gap: 15px;
-      @include custom-scrollbar;
-      
-      .message {
-        display: flex;
-        flex-direction: column;
-        max-width: 80%;
-        
-        &.user {
-          align-self: flex-end;
-          align-items: flex-end;
-          
-          .bubble {
-            background: var(--primary);
-            color: white;
-            border-radius: 15px 15px 0 15px;
-          }
-        }
-        
-        &.ai {
-          align-self: flex-start;
-          
-          .bubble {
-            background: rgba(255, 255, 255, 0.1);
-            border: 1px solid var(--glass-border);
-            border-radius: 15px 15px 15px 0;
-            overflow-wrap: anywhere;
-          }
-        }
-        
-        .bubble {
-          padding: 10px 15px;
-          font-size: 0.9rem;
-          line-height: 1.4;
-          
-          &.typing {
-            display: flex;
-            gap: 5px;
-            span {
-              animation: bounce 1s infinite;
-              &:nth-child(2) { animation-delay: 0.2s; }
-              &:nth-child(3) { animation-delay: 0.4s; }
-            }
-          }
-        }
-        
-        .time {
-          font-size: 0.7rem;
-          color: var(--muted);
-          margin-top: 5px;
-        }
-      }
-    }
-    
-    .chat-input {
-      padding: 15px;
-      border-top: 1px solid var(--glass-border);
-      display: flex;
-      gap: 10px;
-      align-items: center;
-      
-      input {
-        flex: 1;
-        background: rgba(255, 255, 255, 0.05);
-        border: 1px solid var(--glass-border);
-        padding: 10px;
-        border-radius: 20px;
-        color: var(--fg);
-        outline: none;
-        
-        &:focus {
-          border-color: var(--primary);
-        }
-      }
-      
-      button {
-        color: var(--muted);
-        &:hover { color: var(--primary); }
-        
-        &.send-btn {
-          color: var(--primary);
-        }
-      }
-    }
-  }
-}
-
-@keyframes bounce {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-5px); }
-}
diff --git a/src/components/FloatingChat/FloatingChat.tsx b/src/components/FloatingChat/FloatingChat.tsx
deleted file mode 100644
index 49b4243..0000000
--- a/src/components/FloatingChat/FloatingChat.tsx
+++ /dev/null
@@ -1,271 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { MessageSquare, Send, X, Bot } from 'lucide-react';
-import './FloatingChat.scss';
-
-// Assuming these imports are correct based on the original code
-import { runRAG } from '../../services/rag';
-// NOTE: GoogleGenAI is no longer needed in the component as runRAG handles the call.
-// import { GoogleGenAI } from '@google/genai'; 
-
-interface Message {
-    id: string;
-    text: string;
-    sender: 'user' | 'ai';
-    timestamp: Date;
-}
-
-// NOTE: The separate verifyApiKey function is no longer needed 
-// as validation is done by attempting to run the RAG query.
-
-const FloatingChat: React.FC = () => {
-    const [isOpen, setIsOpen] = useState(false);
-    const [input, setInput] = useState('');
-    const [apiKey, setApiKey] = useState<string>(() => sessionStorage.getItem("geminiKey") || "");
-    const [awaitingApiKey, setAwaitingApiKey] = useState(false);
-    const [pendingQuestion, setPendingQuestion] = useState<string | null>(null);
-
-    const [messages, setMessages] = useState<Message[]>([
-        {
-            id: '1',
-            text: "Hi! I'm Rahul's folio.ai. Ask me anything about his skills, projects, or experience.",
-            sender: 'ai',
-            timestamp: new Date()
-        }
-    ]);
-
-    const [isTyping, setIsTyping] = useState(false);
-    const messagesEndRef = useRef<HTMLDivElement>(null);
-
-    const scrollToBottom = () => {
-        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-    };
-
-    useEffect(() => {
-        scrollToBottom();
-    }, [messages]);
-
-    const runRagQuery = async (key: string, question: string) => {
-        setIsTyping(true);
-
-        try {
-            const response = await runRAG(key, question);
-
-            setMessages(prev => [
-                ...prev,
-                {
-                    id: Date.now().toString(),
-                    text: response.text,
-                    sender: 'ai',
-                    timestamp: new Date()
-                }
-            ]);
-        } catch (e) {
-            console.error(e)
-        } finally {
-            setIsTyping(false);
-        }
-    }
-
-
-    const handleSend = async () => {
-        if (!input.trim()) return;
-
-        const userQuestionOrKey = input;
-        setInput('');
-
-        const userMsg: Message = {
-            id: Date.now().toString(),
-            text: userQuestionOrKey,
-            sender: 'user',
-            timestamp: new Date()
-        };
-        setMessages(prev => [...prev, userMsg]);
-        scrollToBottom();
-        setApiKey(sessionStorage.getItem("geminiKey") || "")
-
-        if (awaitingApiKey) {
-            const keyAttempt = userQuestionOrKey.trim();
-            setAwaitingApiKey(false);
-
-            const questionToRun = pendingQuestion;
-            setPendingQuestion(null);
-
-            setMessages(prev => [
-                ...prev,
-                {
-                    id: "checking_key",
-                    text: `⏳ Verifying key and attempting to answer the saved question...`,
-                    sender: "ai",
-                    timestamp: new Date(),
-                }
-            ]);
-
-            scrollToBottom();
-
-            let valid = false;
-            if (questionToRun) {
-                try {
-                    const response = await runRAG(keyAttempt, questionToRun);
-
-                    if (response?.text?.includes("Please check your API key")) {
-                        return
-                    }
-                    valid = true;
-
-                    sessionStorage.setItem("geminiKey", keyAttempt);
-                    setApiKey(keyAttempt);
-
-                    const verifiedMessage: Message = {
-                        id: "verified",
-                        text: "🎉 API Key verified! Here is the answer to your question:",
-                        sender: "ai",
-                        timestamp: new Date(),
-                    };
-
-                    const answerMessage: Message = {
-                        id: Date.now().toString(),
-                        text: response.text,
-                        sender: 'ai',
-                        timestamp: new Date()
-                    }
-
-                    setMessages(prev => [...prev.filter(m => m.id !== "checking_key"), verifiedMessage, answerMessage]);
-
-                } catch (err) {
-                    valid = false;
-                    console.error("API Key verification via RAG failed:", err);
-                }
-            }
-
-            if (!valid) {
-                setAwaitingApiKey(true);
-
-                if (questionToRun) setPendingQuestion(questionToRun);
-
-                setMessages(prev => [
-                    ...prev.filter(m => m.id !== "checking_key"),
-                    {
-                        id: "invalid_key",
-                        text: "❌ Invalid API key. The attempt to run your question failed. Please try a different key.",
-                        sender: "ai",
-                        timestamp: new Date(),
-                    }
-                ]);
-                return;
-            }
-
-            return;
-        }
-
-        if (!apiKey) {
-            setAwaitingApiKey(true);
-            setPendingQuestion(userQuestionOrKey);
-
-            setMessages(prev => [
-                ...prev,
-                {
-                    id: `request_api-${Date.now()}`,
-                    text: "🔑 Please enter your Gemini API key to continue. Your question has been saved and will run automatically after verification.",
-                    sender: "ai",
-                    timestamp: new Date(),
-                },
-                {
-                    id: "api_link",
-                    text: "You can create one for free at:\nhttps://aistudio.google.com/app/apikey",
-                    sender: "ai",
-                    timestamp: new Date(),
-                },
-                {
-                    id: "api_notice",
-                    text: "🔒 Your key is never stored on servers — only your browser.\n🧹 We recommend deleting it after use. Your question has been saved and will run automatically after verification.",
-                    sender: "ai",
-                    timestamp: new Date(),
-                }
-            ]);
-            return;
-        }
-
-        if (apiKey) {
-            await runRagQuery(apiKey, userQuestionOrKey);
-        }
-    };
-
-    return (
-        <div className="floating-chat-container">
-            <AnimatePresence>
-                {isOpen && (
-                    <motion.div
-                        className="chat-window"
-                        initial={{ opacity: 0, scale: 0.8, y: 20 }}
-                        animate={{ opacity: 1, scale: 1, y: 0 }}
-                        exit={{ opacity: 0, scale: 0.8, y: 20 }}
-                    >
-                        <div className="chat-header">
-                            <div className="ai-info">
-                                <Bot size={20} />
-                                <span>Folio.ai</span>
-                            </div>
-                            <button onClick={() => setIsOpen(false)} aria-label="Close chat">
-                                <X size={18} />
-                            </button>
-                        </div>
-
-                        {/* Chat Messages */}
-                        <div className="chat-messages">
-                            {messages.map((msg) => (
-                                <div key={msg.id} className={`message ${msg.sender}`}>
-                                    <div className="bubble">{msg.text}</div>
-                                    <span className="time">
-                                        {msg.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
-                                    </span>
-                                </div>
-                            ))}
-
-                            {isTyping && (
-                                <div className="message ai">
-                                    <div className="bubble typing">
-                                        <span>.</span><span>.</span><span>.</span>
-                                    </div>
-                                </div>
-                            )}
-
-                            <div ref={messagesEndRef} />
-                        </div>
-
-                        {/* Chat Input */}
-                        <div className="chat-input">
-                            <input
-                                type="text"
-                                placeholder={awaitingApiKey ? "Enter API Key..." : "Ask something..."}
-                                value={input}
-                                onChange={(e) => setInput(e.target.value)}
-                                onKeyPress={(e) => e.key === 'Enter' && handleSend()}
-                                aria-label="Chat message input"
-                            // Use the input type for API key entry to obscure the key (though security is minimal on client-side localStorage)
-                            // We keep it as 'text' for ease of copy/paste unless you explicitly want 'password'.
-                            // type={awaitingApiKey ? "password" : "text"} 
-                            />
-                            <button className="send-btn" onClick={handleSend} aria-label="Send message">
-                                <Send size={18} />
-                            </button>
-                        </div>
-                    </motion.div>
-                )}
-            </AnimatePresence>
-
-            {/* Floating Toggle Button */}
-            <motion.button
-                className="chat-toggle-btn"
-                onClick={() => setIsOpen(!isOpen)}
-                whileHover={{ scale: 1.1 }}
-                whileTap={{ scale: 0.9 }}
-                aria-label={isOpen ? "Close chat" : "Open chat"}
-            >
-                {isOpen ? <X size={24} /> : <MessageSquare size={24} />}
-            </motion.button>
-        </div>
-    );
-};
-
-export default FloatingChat;
\ No newline at end of file
diff --git a/src/components/GlassCard/GlassCard.scss b/src/components/GlassCard/GlassCard.scss
deleted file mode 100644
index 7f7ed5b..0000000
--- a/src/components/GlassCard/GlassCard.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@import '../../styles/mixins/glass';
-
-.glass-card {
-  @include glass-card;
-  padding: var(--spacing-md);
-  transition: box-shadow 0.3s ease, border-color 0.3s ease;
-  
-  &:hover {
-    border-color: var(--edge-glow);
-    box-shadow: var(--glass-shadow), 0 0 20px var(--edge-glow);
-  }
-}
diff --git a/src/components/GlassCard/GlassCard.tsx b/src/components/GlassCard/GlassCard.tsx
deleted file mode 100644
index cf56a7e..0000000
--- a/src/components/GlassCard/GlassCard.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import './GlassCard.scss';
-
-interface GlassCardProps {
-    children: React.ReactNode;
-    className?: string;
-    hoverEffect?: boolean;
-    delay?: number;
-}
-
-const GlassCard: React.FC<GlassCardProps> = ({
-    children,
-    className = '',
-    hoverEffect = true,
-    delay = 0
-}) => {
-    return (
-        <motion.div
-            className={`glass-card ${className}`}
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.5, delay }}
-            whileHover={hoverEffect ? { scale: 1.02, translateY: -5 } : {}}
-        >
-            {children}
-        </motion.div>
-    );
-};
-
-export default GlassCard;
diff --git a/src/components/Hero/Hero.scss b/src/components/Hero/Hero.scss
deleted file mode 100644
index 8badb97..0000000
--- a/src/components/Hero/Hero.scss
+++ /dev/null
@@ -1,301 +0,0 @@
-@import '../../styles/mixins/glass';
-
-.hero-section {
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 10%;
-  gap: 50px;
-  position: relative;
-  overflow: hidden;
-
-  /* Background Elements */
-  &::before {
-    content: '';
-    position: absolute;
-    top: -10%;
-    right: -5%;
-    width: 500px;
-    height: 500px;
-    background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
-    opacity: 0.1;
-    filter: blur(80px);
-    z-index: -1;
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: -10%;
-    left: -10%;
-    width: 600px;
-    height: 600px;
-    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
-    opacity: 0.1;
-    filter: blur(100px);
-    z-index: -1;
-  }
-
-  .hero-content {
-    flex: 1;
-    max-width: 600px;
-    z-index: 10;
-
-    .greeting {
-      margin-bottom: 10px;
-
-      .hello {
-        font-size: 1.2rem;
-        color: var(--primary);
-        font-weight: 600;
-        letter-spacing: 2px;
-        text-transform: uppercase;
-        display: block;
-        margin-bottom: 10px;
-      }
-
-      .name {
-        font-size: 4.5rem;
-        font-weight: 800;
-        line-height: 1.1;
-        color: var(--fg);
-
-        .dot {
-          color: var(--primary);
-        }
-      }
-    }
-
-    .role {
-      font-size: 2rem;
-      font-weight: 500;
-      color: var(--muted);
-      margin-bottom: 20px;
-
-      .separator {
-        color: var(--primary);
-      }
-    }
-
-    .bio {
-      font-size: 1.1rem;
-      line-height: 1.6;
-      color: var(--muted);
-      margin-bottom: 40px;
-      max-width: 90%;
-    }
-
-    .cta-group {
-      display: flex;
-      gap: 20px;
-      margin-bottom: 40px;
-
-      .primary-btn,
-      .secondary-btn {
-        padding: 15px 30px;
-        border-radius: 30px;
-        font-weight: 600;
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        transition: all 0.3s ease;
-      }
-
-      .primary-btn {
-        background: var(--primary);
-        color: white;
-        box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
-
-        &:hover {
-          transform: translateY(-2px);
-          box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);
-        }
-      }
-
-      .secondary-btn {
-        @include glass-card;
-        color: var(--fg);
-        border: 1px solid var(--glass-border);
-
-        &:hover {
-          background: rgba(255, 255, 255, 0.1);
-          border-color: var(--primary);
-          color: var(--primary);
-        }
-      }
-    }
-
-    .social-links {
-      display: flex;
-      gap: 20px;
-
-      a {
-        width: 50px;
-        height: 50px;
-        border-radius: 50%;
-        @include glass-card;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: var(--muted);
-        transition: all 0.3s ease;
-
-        &:hover {
-          color: var(--primary);
-          border-color: var(--primary);
-          transform: translateY(-3px);
-          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-        }
-      }
-    }
-  }
-
-  .hero-visual {
-    flex: 1;
-    position: relative;
-    height: 500px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    .visual-card {
-      position: absolute;
-
-      &.main-card {
-        width: 350px;
-        height: 220px;
-        z-index: 2;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: rgba(20, 20, 20, 0.8);
-        /* Darker for code contrast */
-        border: 1px solid rgba(255, 255, 255, 0.1);
-
-        .code-snippet {
-          font-family: 'Fira Code', monospace;
-          font-size: 0.9rem;
-          color: #e0e0e0;
-
-          .keyword {
-            color: #ff79c6;
-          }
-
-          .variable {
-            color: #8be9fd;
-          }
-
-          .property {
-            color: #f1fa8c;
-          }
-
-          .string {
-            color: #50fa7b;
-          }
-        }
-      }
-
-      &.float-card-1 {
-        top: 50px;
-        right: 20px;
-        padding: 20px;
-        z-index: 3;
-        animation: float 6s ease-in-out infinite;
-      }
-
-      &.float-card-2 {
-        bottom: 50px;
-        left: 20px;
-        padding: 20px;
-        z-index: 1;
-        animation: float 8s ease-in-out infinite reverse;
-      }
-
-      .stat {
-        text-align: center;
-
-        .number {
-          display: block;
-          font-size: 2rem;
-          font-weight: 700;
-          color: var(--primary);
-        }
-
-        .label {
-          font-size: 0.8rem;
-          color: var(--muted);
-          text-transform: uppercase;
-          letter-spacing: 1px;
-        }
-      }
-    }
-  }
-
-  @keyframes float {
-
-    0%,
-    100% {
-      transform: translateY(0);
-    }
-
-    50% {
-      transform: translateY(-20px);
-    }
-  }
-
-  @media (max-width: 1024px) {
-    flex-direction: column-reverse;
-    justify-content: center;
-    padding: 100px 20px;
-    text-align: center;
-    gap: 40px;
-
-    .hero-content {
-      align-items: center;
-      display: flex;
-      flex-direction: column;
-
-      .cta-group {
-        justify-content: center;
-      }
-
-      .social-links {
-        justify-content: center;
-      }
-    }
-
-    .hero-visual {
-      width: 100%;
-      height: 400px;
-      margin-top: 20px;
-      margin-bottom: 80px;
-
-      .visual-card {
-        &.float-card-2 {
-          z-index: 3;
-        }
-
-      }
-    }
-  }
-
-  @media (max-width: 768px) {
-    .hero-content {
-      .greeting .name {
-        font-size: 3rem;
-      }
-
-      .role {
-        font-size: 1.5rem;
-      }
-    }
-
-    .hero-visual {
-      .main-card {
-        width: 280px;
-        font-size: 0.8rem;
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/components/Hero/Hero.tsx b/src/components/Hero/Hero.tsx
deleted file mode 100644
index bf77bff..0000000
--- a/src/components/Hero/Hero.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { ArrowRight, Github, Linkedin, Mail, FileText } from 'lucide-react';
-import GlassCard from '../GlassCard/GlassCard';
-import { resumeData } from '../../data/resume';
-import './Hero.scss';
-import { Link } from 'react-router-dom';
-
-const Hero: React.FC = () => {
-    const containerVariants = {
-        hidden: { opacity: 0 },
-        visible: {
-            opacity: 1,
-            transition: {
-                staggerChildren: 0.2,
-            },
-        },
-    };
-
-    const itemVariants = {
-        hidden: { y: 20, opacity: 0 },
-        visible: {
-            y: 0,
-            opacity: 1,
-            transition: {
-                duration: 0.5,
-                ease: "easeOut",
-            },
-        },
-    };
-
-    return (
-        <section className="hero-section">
-            <motion.div
-                className="hero-content"
-                variants={containerVariants}
-                initial="hidden"
-                animate="visible"
-            >
-                <motion.div variants={itemVariants} className="greeting">
-                    <span className="hello">Hello, I'm</span>
-                    <h1 className="name">
-                        {resumeData.name.split(' ')[0]}
-                        <span className="dot">.</span>
-                    </h1>
-                </motion.div>
-
-                <motion.h2 variants={itemVariants} className="role">
-                    {resumeData.hero.role1} <span className="separator">&</span> {resumeData.hero.role2}
-                </motion.h2>
-
-                <motion.p variants={itemVariants} className="bio">
-                    {resumeData.hero.bio}
-                </motion.p>
-
-                <motion.div variants={itemVariants} className="cta-group">
-                    <Link to="/projects"className="primary-btn">
-                        View Work <ArrowRight size={18} />
-                    </Link>
-                    <Link to="/contact" className="secondary-btn">
-                        Contact Me
-                    </Link>
-                </motion.div>
-
-                <motion.div variants={itemVariants} className="social-links">
-                    <a href={resumeData.contact.github} target="_blank" rel="noopener noreferrer" aria-label="GitHub">
-                        <Github size={24} />
-                        <span className="sr-only">GitHub Profile</span>
-                    </a>
-                    <a href={resumeData.contact.linkedin} target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
-                        <Linkedin size={24} />
-                        <span className="sr-only">LinkedIn Profile</span>
-                    </a>
-                    <a href={`mailto:${resumeData.contact.email}`} aria-label="Email">
-                        <Mail size={24} />
-                        <span className="sr-only">Send Email</span>
-                    </a>
-                    <a href={resumeData.contact.cv} target="_blank" rel="noopener noreferrer" aria-label="Resume">
-                        <FileText size={24} />
-                        <span className="sr-only">Download Resume</span>
-                    </a>
-                </motion.div>
-            </motion.div>
-
-            <motion.div
-                className="hero-visual"
-                initial={{ opacity: 0, scale: 0.8 }}
-                animate={{ opacity: 1, scale: 1 }}
-                transition={{ duration: 0.8, delay: 0.4 }}
-            >
-                <GlassCard className="visual-card main-card">
-                    <div className="code-snippet">
-                        <pre>
-                            <code>
-                                <span className="keyword">const</span> <span className="variable">developer</span> = {'{'}
-                                {'\n'}  <span className="property">name</span>: <span className="string">"{resumeData.hero.name}"</span>,
-                                {'\n'}  <span className="property">skills</span>: [<span className="string">{resumeData.hero.skills1}</span>, <span className="string">{resumeData.hero.skills2}</span>, <span className="string">{resumeData.hero.skills3}</span>],
-                                {'\n'}  <span className="property">passion</span>: <span className="string">{resumeData.hero.passion}</span>
-                                {'\n'}{'}'};
-                            </code>
-                        </pre>
-                    </div>
-                </GlassCard>
-
-                <GlassCard className="visual-card float-card-1" delay={0.6}>
-                    <div className="stat">
-                        <span className="number">{resumeData.hero.exp}+</span>
-                        <span className="label">Years Exp</span>
-                    </div>
-                </GlassCard>
-
-                <GlassCard className="visual-card float-card-2" delay={0.8}>
-                    <div className="stat">
-                        <span className="number">{resumeData.projects.length}+ </span>
-                        <span className="label">Projects</span>
-                    </div>
-                </GlassCard>
-            </motion.div>
-        </section>
-    );
-};
-
-export default Hero;
diff --git a/src/components/LoadingScreen/LoadingScreen.scss b/src/components/LoadingScreen/LoadingScreen.scss
new file mode 100644
index 0000000..8f2fc54
--- /dev/null
+++ b/src/components/LoadingScreen/LoadingScreen.scss
@@ -0,0 +1,99 @@
+.loading-screen {
+  position: fixed;
+  inset: 0;
+  z-index: 9998;
+  background-color: var(--bg);
+  background-image: var(--bg-gradient);
+  background-size: var(--bg-size, auto);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-mono);
+
+  .ls-content {
+    width: min(480px, 90vw);
+    display: flex;
+    flex-direction: column;
+    gap: 28px;
+  }
+
+  /* Brand */
+  .ls-brand {
+    font-size: 1.3rem;
+    font-weight: 700;
+    color: var(--primary);
+    letter-spacing: 1px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    text-shadow: 0 0 12px rgba(0, 240, 255, 0.45);
+
+    .ls-cursor {
+      color: var(--primary);
+      animation: blink 1s step-end infinite;
+      font-weight: 400;
+    }
+  }
+
+  /* Boot lines */
+  .ls-lines {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-height: 92px; /* reserve space so layout doesn't jump */
+
+    .ls-line {
+      font-size: 0.78rem;
+      line-height: 1.5;
+
+      .ls-ts  { color: var(--muted); opacity: 0.7; }
+      .ls-msg { color: var(--outline); }
+    }
+  }
+
+  /* Progress bar */
+  .ls-progress-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    .ls-bar {
+      font-size: 0.85rem;
+      color: var(--primary);
+      letter-spacing: -1px;
+      line-height: 1;
+
+      .ls-empty {
+        color: var(--border-color);
+        opacity: 0.45;
+      }
+    }
+
+    .ls-pct {
+      font-size: 0.72rem;
+      color: var(--primary);
+      min-width: 38px;
+      opacity: 0.85;
+    }
+  }
+
+  /* Status label */
+  .ls-status {
+    font-size: 0.68rem;
+    letter-spacing: 3px;
+    color: var(--muted);
+    opacity: 0.6;
+  }
+
+  .ls-skip {
+    font-size: 0.65rem;
+    color: var(--muted);
+    opacity: 0.4;
+    margin-top: -12px;
+  }
+
+  @keyframes blink {
+    0%, 100% { opacity: 1; }
+    50%       { opacity: 0; }
+  }
+}
diff --git a/src/components/LoadingScreen/LoadingScreen.tsx b/src/components/LoadingScreen/LoadingScreen.tsx
new file mode 100644
index 0000000..fa78005
--- /dev/null
+++ b/src/components/LoadingScreen/LoadingScreen.tsx
@@ -0,0 +1,114 @@
+import React, { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import './LoadingScreen.scss';
+
+interface Props {
+    onComplete: () => void;
+}
+
+const BOOT_LINES = [
+    { ts: '0.0001', msg: 'Initializing RahulOS...' },
+    { ts: '0.0042', msg: 'Loading kernel...' },
+    { ts: '0.0125', msg: 'Loading React...' },
+    { ts: '0.0210', msg: 'Loading portfolio...' },
+    { ts: '0.0340', msg: 'Connecting to GitHub...' },
+    { ts: '0.0480', msg: 'Loading projects...' },
+    { ts: '0.0610', msg: 'Loading experience...' },
+    { ts: '0.0700', msg: 'System Ready.' },
+];
+
+const BAR_BLOCKS = 20;
+const BOOT_DURATION = 6000;
+
+const LoadingScreen: React.FC<Props> = ({ onComplete }) => {
+    const [progress, setProgress] = useState(0);
+    const [lineCount, setLineCount] = useState(0);
+    const [skipped, setSkipped] = useState(false);
+
+    const skip = React.useCallback(() => {
+        if (skipped) return;
+        setSkipped(true);
+        setProgress(100);
+        setLineCount(BOOT_LINES.length);
+        onComplete();
+    }, [skipped, onComplete]);
+
+    useEffect(() => {
+        const tickMs = 60;
+        const step = 100 / (BOOT_DURATION / tickMs);
+        const progressTimer = setInterval(() => {
+            setProgress(p => {
+                const next = p + step;
+                if (next >= 100) {
+                    clearInterval(progressTimer);
+                    setTimeout(onComplete, 350);
+                    return 100;
+                }
+                return next;
+            });
+        }, tickMs);
+
+        const lineTimers = BOOT_LINES.map((_, i) =>
+            setTimeout(() => setLineCount(i + 1), (BOOT_DURATION / BOOT_LINES.length) * i)
+        );
+
+        window.addEventListener('keydown', skip);
+        window.addEventListener('click', skip);
+
+        return () => {
+            clearInterval(progressTimer);
+            lineTimers.forEach(clearTimeout);
+            window.removeEventListener('keydown', skip);
+            window.removeEventListener('click', skip);
+        };
+    }, [onComplete, skip]);
+
+    const filled = Math.round((progress / 100) * BAR_BLOCKS);
+    const empty  = BAR_BLOCKS - filled;
+
+    return (
+        <motion.div
+            className="loading-screen"
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.35, ease: 'easeInOut' }}
+        >
+            <div className="ls-content">
+                <div className="ls-brand">
+                    RAHUL_OS_V2.0
+                    <span className="ls-cursor">▋</span>
+                </div>
+
+                <div className="ls-lines">
+                    {BOOT_LINES.slice(0, lineCount).map((line, i) => (
+                        <motion.p
+                            key={i}
+                            className="ls-line"
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            transition={{ duration: 0.25 }}
+                        >
+                            <span className="ls-ts">[{line.ts}]</span>
+                            <span className="ls-msg"> {line.msg}</span>
+                        </motion.p>
+                    ))}
+                </div>
+
+                <div className="ls-progress-row">
+                    <span className="ls-bar">
+                        {'█'.repeat(filled)}
+                        <span className="ls-empty">{'░'.repeat(empty)}</span>
+                    </span>
+                    <span className="ls-pct">{Math.round(progress)}%</span>
+                </div>
+
+                <p className="ls-status">
+                    {progress < 100 ? 'BOOTING...' : 'READY'}
+                </p>
+
+                <p className="ls-skip">press any key to skip</p>
+            </div>
+        </motion.div>
+    );
+};
+
+export default LoadingScreen;
diff --git a/src/components/Navbar/Navbar.scss b/src/components/Navbar/Navbar.scss
deleted file mode 100644
index 7d5011d..0000000
--- a/src/components/Navbar/Navbar.scss
+++ /dev/null
@@ -1,125 +0,0 @@
-@import '../../styles/mixins/glass';
-
-.navbar {
-  @include glass-card;
-  position: fixed;
-  top: 20px;
-  left: 40%;
-  width: min(60vw, 1200px);
-  height: 70px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 20px;
-  z-index: 1000;
-  border-radius: 50px 0 0 50px;
-  gap: 20px;
-  
-  .logo {
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: var(--fg);
-    
-    span {
-      color: var(--primary);
-    }
-  }
-  
-  .nav-links {
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-    list-style: none;
-    gap: 10px;
-    
-    li {
-      position: relative;
-      
-      a {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        padding: 10px 20px;
-        border-radius: 30px;
-        color: var(--muted);
-        transition: color 0.3s ease;
-        position: relative;
-        z-index: 1;
-        @media (max-width: 1327px) {
-          padding: 10px;
-        }
-        
-        .icon {
-          display: flex;
-          align-items: center;
-        }
-        
-        .label {
-          font-weight: 500;
-        }
-        
-        &:hover {
-          color: var(--fg);
-        }
-        
-        &.active {
-          color: var(--fg);
-        }
-        
-        .active-indicator {
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          background: rgba(255, 255, 255, 0.1);
-          border-radius: 30px;
-          z-index: -1;
-          border: 1px solid var(--glass-border);
-        }
-      }
-    }
-  }
-
-  @media (max-width: 1022px) {
-    gap: 30px;
-
-    .label {
-      display: none;
-    }
-  }
-  
-  @media (max-width: 768px) {
-    padding: 0 10px;
-    
-    .logo, .label {
-      display: none;
-    }
-    
-    .nav-links {
-      width: 100%;
-      justify-content: space-between;
-      gap: 0;
-      
-      li a {
-        padding: 10px;
-        justify-content: center;
-        
-        .icon {
-          width: 24px;
-          height: 24px;
-          justify-content: center;
-        }
-      }
-    }
-  }
-}
-
- @media (max-width: 425px) {
-  .navbar {
-    gap: 0px;
-    width: min(80vw, 1200px);
-    left: 20%;
-  }
- }
-
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
deleted file mode 100644
index 45aa5d2..0000000
--- a/src/components/Navbar/Navbar.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react';
-import { NavLink, Link } from 'react-router-dom';
-import { motion } from 'framer-motion';
-import { Home, Compass, Code, Layers, Mail } from 'lucide-react';
-import './Navbar.scss';
-import { resumeData } from '../../data/resume';
-
-
-const navItems = [
-    { path: '/', label: 'Home', icon: <Home size={20} /> },
-    { path: '/journey', label: 'Journey', icon: <Compass size={20} /> },
-    { path: '/skills', label: 'Skills', icon: <Code size={20} /> },
-    { path: '/projects', label: 'Projects', icon: <Layers size={20} /> },
-    { path: '/contact', label: 'Contact', icon: <Mail size={20} /> },
-];
-
-const Navbar: React.FC = () => {
-    return (
-        <motion.nav
-            className="navbar"
-            initial={{ y: -100 }}
-            animate={{ y: 0 }}
-            transition={{ duration: 0.5 }}
-        >
-            <h1>
-                <Link to="/" className="logo">
-                    {resumeData.hero.navName1}<span>{resumeData.hero.navName2}</span>
-                </Link>
-            </h1>
-
-            <ul className="nav-links">
-                {navItems.map((item) => (
-                    <li key={item.path}>
-                        <NavLink
-                            to={item.path}
-                            className={({ isActive }) => isActive ? 'active' : ''}
-                            aria-label={item.label}
-                        >
-                            {({ isActive }) => (
-                                <>
-                                    <span className="icon">{item.icon}</span>
-                                    <span className="label">{item.label}</span>
-                                    {isActive && (
-                                        <motion.div
-                                            className="active-indicator"
-                                            layoutId="activeNav"
-                                        />
-                                    )}
-                                </>
-                            )}
-                        </NavLink>
-                    </li>
-                ))}
-            </ul>
-        </motion.nav>
-    );
-};
-
-export default Navbar;
diff --git a/src/components/ProjectCard/ProjectCard.scss b/src/components/ProjectCard/ProjectCard.scss
deleted file mode 100644
index e5a7fba..0000000
--- a/src/components/ProjectCard/ProjectCard.scss
+++ /dev/null
@@ -1,107 +0,0 @@
-@import '../../styles/mixins/glass';
-
-.project-card {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  padding: 25px;
-  
-  .card-header {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-    margin-bottom: 20px;
-    
-    .icon-wrapper {
-      width: 50px;
-      height: 50px;
-      border-radius: 12px;
-      background: rgba(255, 255, 255, 0.05);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: var(--primary);
-      border: 1px solid var(--glass-border);
-    }
-    
-    .title-group {
-      h3 {
-        font-size: 1.2rem;
-        color: var(--fg);
-        margin-bottom: 4px;
-      }
-      
-      .subtitle {
-        font-size: 0.9rem;
-        color: var(--muted);
-      }
-    }
-  }
-  
-  .card-body {
-    flex: 1;
-    margin-bottom: 20px;
-    
-    .description-list {
-      list-style: none;
-      
-      li {
-        font-size: 0.95rem;
-        color: var(--fg);
-        margin-bottom: 8px;
-        line-height: 1.5;
-        opacity: 0.9;
-        
-        &::before {
-          content: '•';
-          color: var(--primary);
-          margin-right: 8px;
-        }
-      }
-    }
-  }
-  
-  .card-footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-    gap: 10px;
-    
-    .tech-stack {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-      
-      .tech-tag {
-        font-size: 0.75rem;
-        padding: 4px 10px;
-        border-radius: 20px;
-        background: rgba(255, 255, 255, 0.05);
-        border: 1px solid var(--glass-border);
-        color: var(--muted);
-      }
-    }
-    
-    .links {
-      display: flex;
-      gap: 10px;
-      
-      a {
-        color: var(--muted);
-        transition: color 0.2s;
-        
-        &:hover {
-          color: var(--primary);
-        }
-      }
-    }
-  }
-  
-  &:hover {
-    .card-header .icon-wrapper {
-      background: var(--primary);
-      color: white;
-      box-shadow: 0 0 15px var(--primary);
-    }
-  }
-}
diff --git a/src/components/ProjectCard/ProjectCard.tsx b/src/components/ProjectCard/ProjectCard.tsx
deleted file mode 100644
index e89eadb..0000000
--- a/src/components/ProjectCard/ProjectCard.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { Github, ExternalLink, Code } from 'lucide-react';
-import GlassCard from '../GlassCard/GlassCard';
-import './ProjectCard.scss';
-
-interface ProjectProps {
-    project: {
-        title: string;
-        subtitle: string;
-        tech: string[];
-        description: string[];
-        link?: string;
-        github?: string;
-    };
-    index: number;
-}
-
-const ProjectCard: React.FC<ProjectProps> = ({ project, index }) => {
-    return (
-        <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.5, delay: index * 0.1 }}
-            viewport={{ once: true }}
-        >
-            <GlassCard className="project-card">
-                <div className="card-header">
-                    <div className="icon-wrapper">
-                        <Code size={24} />
-                    </div>
-                    <div className="title-group">
-                        <h3>{project.title}</h3>
-                        <span className="subtitle">{project.subtitle}</span>
-                    </div>
-                </div>
-
-                <div className="card-body">
-                    <ul className="description-list">
-                        {project.description.map((desc, i) => (
-                            <li key={i}>{desc}</li>
-                        ))}
-                    </ul>
-                </div>
-
-                <div className="card-footer">
-                    <div className="tech-stack">
-                        {project.tech.map((t) => (
-                            <span key={t} className="tech-tag">{t}</span>
-                        ))}
-                    </div>
-
-                    <div className="links">
-                        {project.github && (
-                            <a
-                                href={project.github}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                title="View Code"
-                                aria-label="View Code on GitHub"
-                            >
-                                <Github size={20} />
-                                <span className="sr-only">View Code on GitHub</span>
-                            </a>
-                        )}
-                        {project.link && (
-                            <a
-                                href={project.link}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                title="Live Demo"
-                                aria-label="View Live Demo"
-                            >
-                                <ExternalLink size={20} />
-                                <span className="sr-only">View Live Demo</span>
-                            </a>
-                        )}
-                    </div>
-                </div>
-            </GlassCard>
-        </motion.div>
-    );
-};
-
-export default ProjectCard;
diff --git a/src/components/SkillGrid/SkillGrid.scss b/src/components/SkillGrid/SkillGrid.scss
deleted file mode 100644
index 37ba694..0000000
--- a/src/components/SkillGrid/SkillGrid.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-@import '../../styles/mixins/glass';
-
-.skill-grid-container {
-  max-width: 1000px;
-  margin: 0 auto;
-  padding: 20px;
-  
-  .skill-category {
-    margin-bottom: 40px;
-    
-    .category-title {
-      font-size: 1.5rem;
-      color: var(--accent);
-      margin-bottom: 20px;
-      padding-bottom: 10px;
-      border-bottom: 1px solid var(--glass-border);
-      display: inline-block;
-    }
-    
-    .skills-wrapper {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-      gap: 15px;
-      
-      .skill-card {
-        padding: 15px;
-        text-align: center;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        min-height: 80px;
-        cursor: default;
-        
-        .skill-name {
-          font-weight: 500;
-          color: var(--fg);
-        }
-        
-        &:hover {
-          border-color: var(--primary);
-          
-          .skill-name {
-            color: var(--primary);
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/src/components/SkillGrid/SkillGrid.tsx b/src/components/SkillGrid/SkillGrid.tsx
deleted file mode 100644
index 8e8719d..0000000
--- a/src/components/SkillGrid/SkillGrid.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import GlassCard from '../GlassCard/GlassCard';
-import { resumeData } from '../../data/resume';
-import './SkillGrid.scss';
-
-const SkillGrid: React.FC = () => {
-    const categories = Object.keys(resumeData.skills) as Array<keyof typeof resumeData.skills>;
-
-    const containerVariants = {
-        hidden: { opacity: 0 },
-        visible: {
-            opacity: 1,
-            transition: {
-                staggerChildren: 0.1,
-            },
-        },
-    };
-
-    const itemVariants = {
-        hidden: { scale: 0.8, opacity: 0 },
-        visible: {
-            scale: 1,
-            opacity: 1,
-            transition: { duration: 0.4 },
-        },
-    };
-
-    return (
-        <div className="skill-grid-container">
-            {categories.map((category) => (
-                <div key={category} className="skill-category">
-                    <h3 className="category-title">{category.charAt(0).toUpperCase() + category.slice(1)}</h3>
-                    <motion.div
-                        className="skills-wrapper"
-                        variants={containerVariants}
-                        initial="hidden"
-                        whileInView="visible"
-                        viewport={{ once: true }}
-                    >
-                        {resumeData.skills[category].map((skill) => (
-                            <motion.div key={skill} variants={itemVariants}>
-                                <GlassCard className="skill-card" hoverEffect={true}>
-                                    <span className="skill-name">{skill}</span>
-                                </GlassCard>
-                            </motion.div>
-                        ))}
-                    </motion.div>
-                </div>
-            ))}
-        </div>
-    );
-};
-
-export default SkillGrid;
diff --git a/src/components/Terminal/Terminal.scss b/src/components/Terminal/Terminal.scss
new file mode 100644
index 0000000..852fae9
--- /dev/null
+++ b/src/components/Terminal/Terminal.scss
@@ -0,0 +1,156 @@
+.terminal {
+    position: relative;
+    height: 100dvh;
+    width: 100%;
+    background-color: var(--bg);
+    background-image: var(--bg-gradient);
+    background-size: var(--bg-size, auto);
+    color: var(--fg);
+    font-family: var(--font-mono);
+    cursor: text;
+    overflow: hidden;
+}
+
+.terminal-scroll {
+    height: 100%;
+    overflow-y: auto;
+    padding: clamp(16px, 4vw, 40px);
+    max-width: 900px;
+    margin: 0 auto;
+    font-size: clamp(0.78rem, 1.6vw, 0.95rem);
+    line-height: 1.6;
+}
+
+.terminal-welcome {
+    margin-bottom: 16px;
+    color: var(--primary);
+
+    p:first-child {
+        font-weight: 700;
+    }
+}
+
+.terminal-block {
+    margin-bottom: 10px;
+}
+
+.terminal-line {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.terminal-prompt {
+    color: var(--accent);
+    white-space: nowrap;
+}
+
+.terminal-command {
+    color: var(--fg);
+    word-break: break-all;
+}
+
+.terminal-input {
+    flex: 1;
+    min-width: 40px;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: var(--fg);
+    font-family: inherit;
+    font-size: inherit;
+    caret-color: var(--primary);
+    caret-shape: block;
+}
+
+.terminal-output {
+    margin-top: 4px;
+    color: var(--fg);
+}
+
+.out-title {
+    color: var(--primary);
+    font-weight: 700;
+    margin-bottom: 2px;
+}
+
+.out-muted {
+    color: var(--muted);
+}
+
+.out-hint {
+    color: var(--muted);
+    margin-top: 6px;
+}
+
+.out-error {
+    color: var(--terminal-red);
+}
+
+.out-block > * + * {
+    margin-top: 4px;
+}
+
+.out-help .out-row {
+    display: flex;
+    gap: 16px;
+
+    .out-cmd {
+        color: var(--terminal-green);
+        min-width: 110px;
+    }
+
+    .out-desc {
+        color: var(--muted);
+    }
+}
+
+.out-skill-group,
+.out-project,
+.out-exp {
+    margin-bottom: 12px;
+}
+
+.out-check {
+    color: var(--terminal-green);
+}
+
+.out-desc-line {
+    color: var(--muted);
+    padding-left: 8px;
+}
+
+.terminal-suggestions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 4px;
+    opacity: 0.5;
+
+    .terminal-suggestion {
+        color: var(--muted);
+    }
+}
+
+.terminal-matrix {
+    position: fixed;
+    inset: 0;
+    z-index: 20;
+    pointer-events: none;
+    background:
+        repeating-linear-gradient(
+            0deg,
+            rgba(0, 255, 100, 0.08) 0px,
+            rgba(0, 255, 100, 0.08) 1px,
+            transparent 1px,
+            transparent 3px
+        );
+    animation: matrix-scroll 0.6s linear infinite;
+    mix-blend-mode: screen;
+}
+
+@keyframes matrix-scroll {
+    0%   { background-position-y: 0; }
+    100% { background-position-y: 40px; }
+}
diff --git a/src/components/Terminal/Terminal.tsx b/src/components/Terminal/Terminal.tsx
new file mode 100644
index 0000000..25bcbd5
--- /dev/null
+++ b/src/components/Terminal/Terminal.tsx
@@ -0,0 +1,162 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useTheme, Theme } from '../../context/ThemeContext';
+import { runCommand, COMMAND_NAMES, CommandOutput } from './commands';
+import './Terminal.scss';
+
+interface LineEntry {
+    id: number;
+    command: string;
+    output: CommandOutput;
+}
+
+const THEME_ORDER: Theme[] = ['dark', 'neon', 'pastel', 'light'];
+const WELCOME = 'Type "help" to begin.';
+
+let idCounter = 0;
+
+const Terminal: React.FC = () => {
+    const { theme, setTheme } = useTheme();
+    const [lines, setLines] = useState<LineEntry[]>([]);
+    const [input, setInput] = useState('');
+    const [history, setHistory] = useState<string[]>([]);
+    const [historyIndex, setHistoryIndex] = useState<number | null>(null);
+    const [matrixActive, setMatrixActive] = useState(false);
+
+    const inputRef = useRef<HTMLInputElement>(null);
+    const bottomRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        bottomRef.current?.scrollIntoView({ block: 'end' });
+    }, [lines]);
+
+    useEffect(() => {
+        inputRef.current?.focus();
+    }, []);
+
+    const cycleTheme = useCallback(() => {
+        const next = THEME_ORDER[(THEME_ORDER.indexOf(theme) + 1) % THEME_ORDER.length];
+        setTheme(next);
+    }, [theme, setTheme]);
+
+    const triggerMatrix = useCallback(() => {
+        setMatrixActive(true);
+        setTimeout(() => setMatrixActive(false), 3000);
+    }, []);
+
+    const focusInput = () => inputRef.current?.focus();
+
+    const submit = (raw: string) => {
+        const command = raw.trim();
+        if (!command) return;
+
+        if (command.toLowerCase() === 'clear') {
+            setLines([]);
+        } else {
+            const output = runCommand(command, {
+                theme,
+                cycleTheme,
+                clear: () => setLines([]),
+                triggerMatrix,
+            });
+            setLines(ls => [...ls, { id: idCounter++, command, output }]);
+        }
+
+        setHistory(h => [...h, command]);
+        setHistoryIndex(null);
+        setInput('');
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter') {
+            submit(input);
+            return;
+        }
+
+        if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            if (history.length === 0) return;
+            const nextIndex = historyIndex === null ? history.length - 1 : Math.max(0, historyIndex - 1);
+            setHistoryIndex(nextIndex);
+            setInput(history[nextIndex]);
+            return;
+        }
+
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            if (historyIndex === null) return;
+            const nextIndex = historyIndex + 1;
+            if (nextIndex >= history.length) {
+                setHistoryIndex(null);
+                setInput('');
+            } else {
+                setHistoryIndex(nextIndex);
+                setInput(history[nextIndex]);
+            }
+            return;
+        }
+
+        if (e.key === 'Tab') {
+            e.preventDefault();
+            const [prefix] = input.split(/\s+/);
+            if (!prefix) return;
+            const matches = COMMAND_NAMES.filter(c => c.startsWith(prefix.toLowerCase()));
+            if (matches.length === 1) {
+                setInput(matches[0] + ' ');
+            }
+        }
+    };
+
+    const suggestions = input.trim()
+        ? COMMAND_NAMES.filter(c => c.startsWith(input.trim().toLowerCase()) && c !== input.trim().toLowerCase())
+        : [];
+
+    return (
+        <div className="terminal" onClick={focusInput}>
+            {matrixActive && <div className="terminal-matrix" aria-hidden="true" />}
+
+            <div className="terminal-scroll">
+                <div className="terminal-welcome">
+                    <p>RahulOS v2.0 — interactive portfolio</p>
+                    <p className="out-muted">{WELCOME}</p>
+                </div>
+
+                {lines.map(line => (
+                    <div className="terminal-block" key={line.id}>
+                        <div className="terminal-line">
+                            <span className="terminal-prompt">visitor@rahul:~$</span>
+                            <span className="terminal-command">{line.command}</span>
+                        </div>
+                        {line.output && <div className="terminal-output">{line.output}</div>}
+                    </div>
+                ))}
+
+                <div className="terminal-line terminal-line--active">
+                    <span className="terminal-prompt">visitor@rahul:~$</span>
+                    <input
+                        ref={inputRef}
+                        className="terminal-input"
+                        value={input}
+                        onChange={e => setInput(e.target.value)}
+                        onKeyDown={handleKeyDown}
+                        spellCheck={false}
+                        autoComplete="off"
+                        autoCapitalize="off"
+                        aria-label="Terminal input"
+                    />
+                </div>
+
+                {suggestions.length > 0 && (
+                    <div className="terminal-suggestions">
+                        {suggestions.map(s => (
+                            <span className="terminal-suggestion" key={s}>{s}</span>
+                        ))}
+                    </div>
+                )}
+
+                <div ref={bottomRef} />
+            </div>
+        </div>
+    );
+};
+
+export default Terminal;
diff --git a/src/components/Terminal/commands.ts b/src/components/Terminal/commands.ts
new file mode 100644
index 0000000..564670a
--- /dev/null
+++ b/src/components/Terminal/commands.ts
@@ -0,0 +1,199 @@
+import React from 'react';
+import { resumeData } from '../../data/resume';
+import type { Theme } from '../../context/ThemeContext';
+
+export interface CommandContext {
+    theme: Theme;
+    cycleTheme: () => void;
+    clear: () => void;
+    triggerMatrix: () => void;
+}
+
+export type CommandOutput = React.ReactNode;
+export type CommandHandler = (args: string[], ctx: CommandContext) => CommandOutput;
+
+interface CommandDef {
+    name: string;
+    description: string;
+    handler: CommandHandler;
+}
+
+const slug = (title: string) => title.toLowerCase().replace(/\s+/g, '_');
+
+const openUrl = (url?: string) => {
+    if (url) window.open(url, '_blank', 'noopener,noreferrer');
+};
+
+const resolveProjectUrl = (arg: string): { url?: string; title?: string } => {
+    const byIndex = resumeData.projects[Number(arg) - 1];
+    if (byIndex) return { url: byIndex.link ?? byIndex.github, title: byIndex.title };
+    const bySlug = resumeData.projects.find(p => slug(p.title) === arg.toLowerCase());
+    if (bySlug) return { url: bySlug.link ?? bySlug.github, title: bySlug.title };
+    return {};
+};
+
+export const COMMANDS: CommandDef[] = [
+    {
+        name: 'help',
+        description: 'Show commands',
+        handler: () =>
+            React.createElement('div', { className: 'out-help' },
+                React.createElement('p', { className: 'out-title' }, 'Available Commands'),
+                COMMANDS.map(c =>
+                    React.createElement('div', { className: 'out-row', key: c.name },
+                        React.createElement('span', { className: 'out-cmd' }, c.name),
+                        React.createElement('span', { className: 'out-desc' }, c.description)
+                    )
+                )
+            ),
+    },
+    {
+        name: 'about',
+        description: 'About me',
+        handler: () =>
+            React.createElement('div', { className: 'out-block' },
+                React.createElement('p', null, `Hi! I'm ${resumeData.name}.`),
+                React.createElement('p', null, resumeData.hero.bio),
+                React.createElement('p', { className: 'out-muted' }, `Location: ${resumeData.location}`)
+            ),
+    },
+    {
+        name: 'skills',
+        description: 'Technologies',
+        handler: () =>
+            React.createElement('div', { className: 'out-block' },
+                Object.entries(resumeData.skills).map(([category, items]) =>
+                    React.createElement('div', { className: 'out-skill-group', key: category },
+                        React.createElement('p', { className: 'out-title' }, category.replace(/_/g, ' ')),
+                        (items as string[]).map(item =>
+                            React.createElement('p', { className: 'out-check', key: item }, `✔ ${item}`)
+                        )
+                    )
+                )
+            ),
+    },
+    {
+        name: 'projects',
+        description: 'Featured projects',
+        handler: () =>
+            React.createElement('div', { className: 'out-block' },
+                resumeData.projects.map((p, i) =>
+                    React.createElement('div', { className: 'out-project', key: p.title },
+                        React.createElement('p', { className: 'out-title' }, `[${i + 1}] ${p.title}`),
+                        React.createElement('p', { className: 'out-muted' }, p.subtitle),
+                        React.createElement('p', { className: 'out-muted' }, p.tech.join(' • '))
+                    )
+                ),
+                React.createElement('p', { className: 'out-hint' }, 'Type: open <n>  e.g. open 1')
+            ),
+    },
+    {
+        name: 'open',
+        description: 'Open a project, github or linkedin',
+        handler: (args) => {
+            const target = args[0];
+            if (!target) return React.createElement('p', { className: 'out-error' }, 'Usage: open <n|github|linkedin>');
+            if (target === 'github') { openUrl(resumeData.contact.github); return React.createElement('p', null, 'Opening GitHub...'); }
+            if (target === 'linkedin') { openUrl(resumeData.contact.linkedin); return React.createElement('p', null, 'Opening LinkedIn...'); }
+            const { url, title } = resolveProjectUrl(target);
+            if (!url) return React.createElement('p', { className: 'out-error' }, `No project found for "${target}"`);
+            openUrl(url);
+            return React.createElement('p', null, `Opening ${title}...`);
+        },
+    },
+    {
+        name: 'experience',
+        description: 'Work experience',
+        handler: () =>
+            React.createElement('div', { className: 'out-block' },
+                resumeData.experience.map((exp, i) =>
+                    React.createElement('div', { className: 'out-exp', key: i },
+                        React.createElement('p', { className: 'out-title' }, `${exp.role} @ ${exp.company}`),
+                        React.createElement('p', { className: 'out-muted' }, exp.year),
+                        exp.description.map((d, j) =>
+                            React.createElement('p', { className: 'out-desc-line', key: j }, `- ${d}`)
+                        )
+                    )
+                )
+            ),
+    },
+    {
+        name: 'resume',
+        description: 'Download resume',
+        handler: () => {
+            openUrl(resumeData.contact.cv);
+            return React.createElement('p', null, 'Opening resume...');
+        },
+    },
+    {
+        name: 'contact',
+        description: 'Contact information',
+        handler: () =>
+            React.createElement('div', { className: 'out-block' },
+                React.createElement('p', null, `Email: ${resumeData.contact.email}`),
+                React.createElement('p', null, `Phone: ${resumeData.contact.phone}`),
+                React.createElement('p', null, `LinkedIn: ${resumeData.contact.linkedin}`),
+                React.createElement('p', null, `GitHub: ${resumeData.contact.github}`),
+                React.createElement('p', { className: 'out-hint' }, 'Type: open github  |  open linkedin')
+            ),
+    },
+    {
+        name: 'github',
+        description: 'Open GitHub',
+        handler: () => { openUrl(resumeData.contact.github); return React.createElement('p', null, 'Opening GitHub...'); },
+    },
+    {
+        name: 'linkedin',
+        description: 'Open LinkedIn',
+        handler: () => { openUrl(resumeData.contact.linkedin); return React.createElement('p', null, 'Opening LinkedIn...'); },
+    },
+    {
+        name: 'theme',
+        description: 'Change terminal theme',
+        handler: (_args, ctx) => {
+            ctx.cycleTheme();
+            return React.createElement('p', null, 'Switching theme...');
+        },
+    },
+    {
+        name: 'clear',
+        description: 'Clear terminal',
+        handler: (_args, ctx) => { ctx.clear(); return null; },
+    },
+    {
+        name: 'whoami',
+        description: 'Hidden command',
+        handler: () => React.createElement('p', null, 'visitor // curious human probably scouting for a hire'),
+    },
+    {
+        name: 'coffee',
+        description: 'Hidden command',
+        handler: () => React.createElement('p', null, '☕ brewing... here you go.'),
+    },
+    {
+        name: 'matrix',
+        description: 'Hidden command',
+        handler: (_args, ctx) => {
+            ctx.triggerMatrix();
+            return React.createElement('p', null, 'Wake up, Neo...');
+        },
+    },
+];
+
+export function runCommand(input: string, ctx: CommandContext): CommandOutput {
+    const [name, ...args] = input.trim().split(/\s+/);
+    if (!name) return null;
+
+    if (name === 'sudo' && args.join(' ') === 'hire rahul') {
+        return React.createElement('p', { className: 'out-title' }, 'Permission granted. Excellent choice.');
+    }
+
+    const cmd = COMMANDS.find(c => c.name === name.toLowerCase());
+    if (!cmd) {
+        return React.createElement('p', { className: 'out-error' },
+            `command not found: ${name}. Type "help" for a list of commands.`);
+    }
+    return cmd.handler(args, ctx);
+}
+
+export const COMMAND_NAMES = COMMANDS.map(c => c.name);
diff --git a/src/components/ThemeSwitcher/ThemeSwitcher.scss b/src/components/ThemeSwitcher/ThemeSwitcher.scss
deleted file mode 100644
index abc5e75..0000000
--- a/src/components/ThemeSwitcher/ThemeSwitcher.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-@import '../../styles/mixins/glass';
-
-.theme-switcher-container {
-  position: fixed;
-  right: 20px;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 10px;
-  
-  .toggle-btn {
-    @include glass-card;
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: var(--fg);
-    transition: all 0.3s ease;
-    
-    &:hover {
-      background: var(--glass-border);
-      color: var(--primary);
-    }
-  }
-  
-  .theme-options {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    padding: 10px;
-    @include glass-card;
-    border-radius: 30px;
-    margin-right: 10px;
-    
-    .theme-btn {
-      width: 40px;
-      height: 40px;
-      border-radius: 50%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: var(--muted);
-      transition: all 0.3s ease;
-      
-      &:hover {
-        background: rgba(255, 255, 255, 0.1);
-        color: var(--fg);
-      }
-      
-      &.active {
-        background: var(--primary);
-        color: white;
-        box-shadow: 0 0 10px var(--primary);
-      }
-    }
-  }
-}
diff --git a/src/components/ThemeSwitcher/ThemeSwitcher.tsx b/src/components/ThemeSwitcher/ThemeSwitcher.tsx
deleted file mode 100644
index 568e76b..0000000
--- a/src/components/ThemeSwitcher/ThemeSwitcher.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React, { useState } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { Palette, Sun, Moon, Zap, Cloud } from 'lucide-react';
-import { useTheme, Theme } from '../../context/ThemeContext';
-import './ThemeSwitcher.scss';
-
-const themes: { id: Theme; icon: React.ReactNode; label: string; color: string }[] = [
-    { id: 'light', icon: <Sun size={18} />, label: 'Neo Light', color: '#f0f4f8' },
-    { id: 'dark', icon: <Moon size={18} />, label: 'Dark Carbon', color: '#101010' },
-    { id: 'neon', icon: <Zap size={18} />, label: 'Cyber Neon', color: '#050505' },
-    { id: 'pastel', icon: <Cloud size={18} />, label: 'Pastel Ice', color: '#fdfbf7' },
-];
-
-const ThemeSwitcher: React.FC = () => {
-    const { theme, setTheme } = useTheme();
-    const [isOpen, setIsOpen] = useState(false);
-
-    return (
-        <div className="theme-switcher-container">
-            <AnimatePresence>
-                {isOpen && (
-                    <motion.div
-                        className="theme-options"
-                        initial={{ opacity: 0, x: 20 }}
-                        animate={{ opacity: 1, x: 0 }}
-                        exit={{ opacity: 0, x: 20 }}
-                    >
-                        {themes.map((t) => (
-                            <button
-                                key={t.id}
-                                className={`theme-btn ${theme === t.id ? 'active' : ''}`}
-                                onClick={() => setTheme(t.id)}
-                                title={t.label}
-                                aria-label={`Switch to ${t.label} theme`}
-                            >
-                                {t.icon}
-                            </button>
-                        ))}
-                    </motion.div>
-                )}
-            </AnimatePresence>
-
-            <motion.button
-                className="toggle-btn"
-                onClick={() => setIsOpen(!isOpen)}
-                whileHover={{ scale: 1.1 }}
-                whileTap={{ scale: 0.9 }}
-                aria-label="Toggle theme menu"
-            >
-                <Palette size={24} />
-            </motion.button>
-        </div>
-    );
-};
-
-export default ThemeSwitcher;
diff --git a/src/components/Timeline/Timeline.scss b/src/components/Timeline/Timeline.scss
deleted file mode 100644
index 2505b5b..0000000
--- a/src/components/Timeline/Timeline.scss
+++ /dev/null
@@ -1,120 +0,0 @@
-@import '../../styles/mixins/glass';
-
-.timeline-container {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 20px;
-  
-  .section-title {
-    font-size: 2rem;
-    color: var(--primary);
-    margin-bottom: 30px;
-    padding-left: 20px;
-    border-left: 4px solid var(--primary);
-  }
-  
-  .timeline {
-    position: relative;
-    padding-left: 30px;
-    margin-bottom: 60px;
-    
-    &::before {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 0;
-      height: 100%;
-      width: 2px;
-      background: var(--glass-border);
-    }
-    
-    .timeline-item {
-      position: relative;
-      margin-bottom: 40px;
-      
-      &:last-child {
-        margin-bottom: 0;
-      }
-      
-      .timeline-marker {
-        position: absolute;
-        left: -39px;
-        top: 0;
-        width: 20px;
-        height: 20px;
-        background: var(--bg);
-        border: 2px solid var(--primary);
-        border-radius: 50%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: var(--primary);
-        z-index: 1;
-        padding: 8px;
-        box-shadow: 0 0 10px var(--primary);
-        
-        &.edu {
-          border-color: var(--accent);
-          color: var(--accent);
-          box-shadow: 0 0 10px var(--accent);
-        }
-      }
-      
-      .timeline-content {
-        .timeline-card {
-          padding: 25px;
-          
-          .header {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
-            margin-bottom: 10px;
-            flex-wrap: wrap;
-            gap: 10px;
-            
-            h3 {
-              font-size: 1.2rem;
-              color: var(--fg);
-              font-weight: 600;
-            }
-            
-            .company {
-              font-size: 1rem;
-              color: var(--primary);
-              font-weight: 500;
-            }
-          }
-          
-          .meta {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            color: var(--muted);
-            font-size: 0.9rem;
-            margin-bottom: 15px;
-          }
-          
-          .description {
-            list-style-type: none;
-            
-            li {
-              position: relative;
-              padding-left: 20px;
-              margin-bottom: 8px;
-              color: var(--fg);
-              font-size: 0.95rem;
-              line-height: 1.5;
-              
-              &::before {
-                content: '▹';
-                position: absolute;
-                left: 0;
-                color: var(--primary);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/src/components/Timeline/Timeline.tsx b/src/components/Timeline/Timeline.tsx
deleted file mode 100644
index 2362650..0000000
--- a/src/components/Timeline/Timeline.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { Briefcase, GraduationCap, Calendar } from 'lucide-react';
-import GlassCard from '../GlassCard/GlassCard';
-import { resumeData } from '../../data/resume';
-import './Timeline.scss';
-
-const Timeline: React.FC = () => {
-    const containerVariants = {
-        hidden: { opacity: 0 },
-        visible: {
-            opacity: 1,
-            transition: {
-                staggerChildren: 0.3,
-            },
-        },
-    };
-
-    const itemVariants = {
-        hidden: { x: -20, opacity: 0 },
-        visible: {
-            x: 0,
-            opacity: 1,
-            transition: { duration: 0.5 },
-        },
-    };
-
-    return (
-        <div className="timeline-container">
-            <motion.div
-                className="timeline-section"
-                variants={containerVariants}
-                initial="hidden"
-                whileInView="visible"
-                viewport={{ once: true, margin: "-100px" }}
-            >
-                <h2 className="section-title">Experience</h2>
-                <div className="timeline">
-                    {resumeData.experience.map((exp, index) => (
-                        <motion.div key={index} variants={itemVariants} className="timeline-item">
-                            <div className="timeline-marker">
-                                <Briefcase size={18} />
-                            </div>
-                            <div className="timeline-content">
-                                <GlassCard className="timeline-card">
-                                    <div className="header">
-                                        <h3>{exp.role}</h3>
-                                        <span className="company">{exp.company}</span>
-                                    </div>
-                                    <div className="meta">
-                                        <Calendar size={14} />
-                                        <span>{exp.year}</span>
-                                    </div>
-                                    <ul className="description">
-                                        {exp.description.map((desc, i) => (
-                                            <li key={i}>{desc}</li>
-                                        ))}
-                                    </ul>
-                                </GlassCard>
-                            </div>
-                        </motion.div>
-                    ))}
-                </div>
-            </motion.div>
-
-            <motion.div
-                className="timeline-section"
-                variants={containerVariants}
-                initial="hidden"
-                whileInView="visible"
-                viewport={{ once: true, margin: "-100px" }}
-            >
-                <h2 className="section-title">Education</h2>
-                <div className="timeline">
-                    {resumeData.education.map((edu, index) => (
-                        <motion.div key={index} variants={itemVariants} className="timeline-item">
-                            <div className="timeline-marker edu">
-                                <GraduationCap size={18} />
-                            </div>
-                            <div className="timeline-content">
-                                <GlassCard className="timeline-card">
-                                    <div className="header">
-                                        <h3>{edu.degree}</h3>
-                                        <span className="company">{edu.institution}</span>
-                                    </div>
-                                    <div className="meta">
-                                        <Calendar size={14} />
-                                        <span>{edu.year}</span>
-                                    </div>
-                                </GlassCard>
-                            </div>
-                        </motion.div>
-                    ))}
-                </div>
-            </motion.div>
-        </div>
-    );
-};
-
-export default Timeline;
diff --git a/src/pages/Contact/Contact.scss b/src/pages/Contact/Contact.scss
deleted file mode 100644
index 9b250bb..0000000
--- a/src/pages/Contact/Contact.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.contact-page {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
-  overflow-y: auto;
-  
-  .page-content {
-    width: 100%;
-    max-width: 1200px;
-  }
-}
diff --git a/src/pages/Contact/Contact.tsx b/src/pages/Contact/Contact.tsx
deleted file mode 100644
index d15974f..0000000
--- a/src/pages/Contact/Contact.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import ContactForm from '../../components/ContactForm/ContactForm';
-import './Contact.scss';
-
-const Contact: React.FC = () => {
-    return (
-        <motion.div
-            className="contact-page"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.5 }}
-        >
-            <div className="page-content">
-                <ContactForm />
-            </div>
-        </motion.div>
-    );
-};
-
-export default Contact;
diff --git a/src/pages/Home/Home.scss b/src/pages/Home/Home.scss
deleted file mode 100644
index f32ebd8..0000000
--- a/src/pages/Home/Home.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-@import '../../styles/mixins/glass';
-
-.home-page {
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 20px;
-  
-  .hero-content {
-    text-align: center;
-    max-width: 800px;
-    
-    h1 {
-      font-size: 4rem;
-      font-weight: 800;
-      margin-bottom: 1rem;
-      
-      .highlight {
-        color: var(--primary);
-        text-shadow: 0 0 20px rgba(0, 123, 255, 0.3);
-      }
-    }
-    
-    p {
-      font-size: 1.5rem;
-      color: var(--muted);
-      margin-bottom: 2rem;
-    }
-    
-    .intro-card {
-      padding: 30px;
-      font-size: 1.2rem;
-      line-height: 1.6;
-    }
-  }
-}
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
deleted file mode 100644
index e714874..0000000
--- a/src/pages/Home/Home.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import Hero from '../../components/Hero/Hero';
-import './Home.scss';
-
-const Home: React.FC = () => {
-    return (
-        <motion.div
-            className="home-page"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.5 }}
-        >
-            <Hero />
-        </motion.div>
-    );
-};
-
-export default Home;
diff --git a/src/pages/Journey/Journey.scss b/src/pages/Journey/Journey.scss
deleted file mode 100644
index b8058bf..0000000
--- a/src/pages/Journey/Journey.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.journey-page {
-  padding: 40px 20px;
-  height: 100%;
-  overflow-y: auto;
-  
-  .page-header {
-    text-align: center;
-    margin-bottom: 50px;
-    
-    h1 {
-      font-size: 3rem;
-      margin-bottom: 10px;
-      color: var(--fg);
-    }
-    
-    p {
-      color: var(--muted);
-      font-size: 1.2rem;
-    }
-  }
-}
diff --git a/src/pages/Journey/Journey.tsx b/src/pages/Journey/Journey.tsx
deleted file mode 100644
index 0bca5cf..0000000
--- a/src/pages/Journey/Journey.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import Timeline from '../../components/Timeline/Timeline';
-import './Journey.scss';
-
-const Journey: React.FC = () => {
-    return (
-        <motion.div
-            className="journey-page"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.5 }}
-        >
-            <div className="page-header">
-                <h1>My Journey</h1>
-                <p>A timeline of my professional experience and education.</p>
-            </div>
-            <Timeline />
-        </motion.div>
-    );
-};
-
-export default Journey;
diff --git a/src/pages/Projects/Projects.scss b/src/pages/Projects/Projects.scss
deleted file mode 100644
index 4cb0a54..0000000
--- a/src/pages/Projects/Projects.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.projects-page {
-  padding: 40px 20px;
-  height: 100%;
-  overflow-y: auto;
-  
-  .page-header {
-    text-align: center;
-    margin-bottom: 50px;
-    
-    h1 {
-      font-size: 3rem;
-      margin-bottom: 10px;
-      color: var(--fg);
-    }
-    
-    p {
-      color: var(--muted);
-      font-size: 1.2rem;
-    }
-  }
-  
-  .projects-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    gap: 30px;
-    max-width: 1200px;
-    margin: 0 auto 50px;
-  }
-}
diff --git a/src/pages/Projects/Projects.tsx b/src/pages/Projects/Projects.tsx
deleted file mode 100644
index dd34299..0000000
--- a/src/pages/Projects/Projects.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import ProjectCard from '../../components/ProjectCard/ProjectCard';
-import { resumeData } from '../../data/resume';
-import './Projects.scss';
-
-const Projects: React.FC = () => {
-    return (
-        <motion.div
-            className="projects-page"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.5 }}
-        >
-            <div className="page-header">
-                <h1>Featured Projects</h1>
-                <p>A selection of my recent work.</p>
-            </div>
-
-            <div className="projects-grid">
-                {resumeData.projects.map((project, index) => (
-                    <ProjectCard key={index} project={project} index={index} />
-                ))}
-            </div>
-        </motion.div>
-    );
-};
-
-export default Projects;
diff --git a/src/pages/Skills/Skills.scss b/src/pages/Skills/Skills.scss
deleted file mode 100644
index c4d1b67..0000000
--- a/src/pages/Skills/Skills.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.skills-page {
-  padding: 40px 20px;
-  height: 100%;
-  overflow-y: auto;
-  
-  .page-header {
-    text-align: center;
-    margin-bottom: 50px;
-    
-    h1 {
-      font-size: 3rem;
-      margin-bottom: 10px;
-      color: var(--fg);
-    }
-    
-    p {
-      color: var(--muted);
-      font-size: 1.2rem;
-    }
-  }
-}
diff --git a/src/pages/Skills/Skills.tsx b/src/pages/Skills/Skills.tsx
deleted file mode 100644
index ab2a777..0000000
--- a/src/pages/Skills/Skills.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import SkillGrid from '../../components/SkillGrid/SkillGrid';
-import './Skills.scss';
-
-const Skills: React.FC = () => {
-    return (
-        <motion.div
-            className="skills-page"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.5 }}
-        >
-            <div className="page-header">
-                <h1>Technical Skills</h1>
-                <p>Technologies and tools I work with.</p>
-            </div>
-            <SkillGrid />
-        </motion.div>
-    );
-};
-
-export default Skills;
diff --git a/src/router.tsx b/src/router.tsx
deleted file mode 100644
index 75f74b6..0000000
--- a/src/router.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { Routes, Route, useLocation } from 'react-router-dom';
-import { AnimatePresence } from 'framer-motion';
-import Home from './pages/Home/Home';
-import Journey from './pages/Journey/Journey';
-import Skills from './pages/Skills/Skills';
-import Projects from './pages/Projects/Projects';
-import Contact from './pages/Contact/Contact';
-
-const AppRouter: React.FC = () => {
-    const location = useLocation();
-
-    return (
-        <AnimatePresence mode="wait">
-            <Routes location={location} key={location.pathname}>
-                <Route path="/" element={<Home />} />
-                <Route path="/journey" element={<Journey />} />
-                <Route path="/skills" element={<Skills />} />
-                <Route path="/projects" element={<Projects />} />
-                <Route path="/contact" element={<Contact />} />
-            </Routes>
-        </AnimatePresence>
-    );
-};
-
-export default AppRouter;
diff --git a/src/services/email.ts b/src/services/email.ts
deleted file mode 100644
index 85090a0..0000000
--- a/src/services/email.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import emailjs from '@emailjs/browser';
-
-export const sendEmail = (templateParams: Record<string, unknown>) => {
-  return emailjs.send(
-    import.meta.env?.VITE_EMAILJS_SERVICE_ID,
-    import.meta.env.VITE_EMAILJS_TEMPLATE_ID,
-    templateParams,
-    import.meta.env.VITE_EMAILJS_PUBLIC_KEY
-  );
-};
diff --git a/src/services/rag.ts b/src/services/rag.ts
deleted file mode 100644
index b19981e..0000000
--- a/src/services/rag.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-// src/services/rag.ts
-import { GoogleGenAI } from "@google/genai";
-import { resumeData } from "../data/resume";
-
-export interface RAGResponse {
-    text: string;
-}
-
-export async function runRAG(apiKey: string, query: string): Promise<RAGResponse> {
-    const ai = new GoogleGenAI({ apiKey });
-
-    const prompt = `
-You are Rahul's portfolio AI assistant, speaking to a visitor  and your name is folio.ai. 
-Always talk about Rahul in **third person**.
-Never speak as Rahul.
-
-Here is Rahul's COMPLETE DATA (use only this data, never invent new info):
-
-${JSON.stringify(resumeData, null, 2)}
-
-=======================  
-INSTRUCTIONS  
-=======================  
-Your behavior rules:
-
-1. GREETINGS  
-   - If user says “hi”, “hello”, “hey”, greet warmly.  
-   - Example: “Hello! How can I help you learn more about Rahul?”  
-
-2. CATEGORY LOGIC  
-   - If the question is about **projects**, answer ONLY using resumeData.projects.  
-   - If the question is about **experience**, answer ONLY using resumeData.experience.  
-   - If about **skills**, answer ONLY using resumeData.skills.  
-   - If asking about **current job / where he works / now working**, return the item where year includes “Present”.  
-   - If question matches multiple areas, choose the MOST relevant one.  
-   - If unrelated or general, give a simple helpful answer describing Rahul.  
-   - NEVER mix job experience with project lists.
-
-3. ANSWER STYLE  
-   - Always respond in third person (“Rahul is…”, “His experience includes…”).  
-   - Keep answers clear, concise, friendly.  
-   - Use bullet points when listing items.  
-   - Never fabricate information.  
-
-FORMAT RULES:
-- Always answer in clean, natural paragraphs.
-- Do NOT use bullet points, lists, tables, markdown sections, or nested formatting.
-- Combine related skills into a concise paragraph (max 3 sentences).
-- Keep the response readable and conversational, not technical documentation.
-
-=======================  
-USER QUESTION:  
-${query}  
-=======================  
-
-Give the best possible answer using ONLY the provided resumeData.
-`;
-
-    try {
-        const response = await ai.models.generateContent({
-            model: "gemini-2.5-flash",
-            contents: prompt,
-            config: {
-                temperature: 0.2,
-            }
-        });
-
-        const text =
-            response?.text ??
-            response?.candidates?.[0]?.content?.parts?.[0]?.text ??
-            "Sorry, I couldn't generate a response.";
-
-        return { text };
-    } catch (err) {
-        console.error("Gemini API error:", err);
-        sessionStorage.removeItem("geminiKey")
-        return {
-            text: "There was an error processing the request. Please check your API key.",
-        };
-    }
-}
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 907f6c5..4e5b436 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -15,14 +15,38 @@
    ========================= */
 body {
   font-family: var(--font-main);
-  background: var(--bg);
+  background-color: var(--bg);
   background-image: var(--bg-gradient);
+  background-size: var(--bg-size, auto);
   color: var(--fg);
   min-height: 100dvh;
-  transition: background 0.3s ease, color 0.3s ease;
+  transition: background-color 0.3s ease, color 0.3s ease;
   overflow-x: hidden;
 }
 
+/* Scanline animation */
+.scanline {
+  width: 100%;
+  height: 2px;
+  background: rgba(0, 240, 255, 0.08);
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  pointer-events: none;
+  animation: scanline-sweep 8s linear infinite;
+}
+
+@keyframes scanline-sweep {
+  0%   { top: 0; }
+  100% { top: 100%; }
+}
+
+/* Glow utility */
+.glow-cyan {
+  text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
+}
+
 /* =========================
    Theme-Aware Scrollbar
    ========================= */
@@ -90,18 +114,25 @@ button {
    Layout Container
    ========================= */
 .page-container {
-  min-height: 100dvh;
+  height: 100dvh;
   width: 100%;
-  padding-top: 80px; /* Space for Navbar */
   display: flex;
   flex-direction: column;
+  overflow: hidden;          /* header + footer fixed via flex */
   position: relative;
-  overflow: hidden;
+}
 
-  @media (min-width: 768px) {
-    height: 100dvh;
-    overflow: hidden; /* Prevent scrolling on desktop */
-  }
+/* navbar-wrapper sits in flex flow — no sticky/fixed needed */
+.navbar-wrapper {
+  flex-shrink: 0;
+}
+
+/* scrollable content between header and footer */
+.app-content {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
 }
 
 /* =========================
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 3b15020..f2c3f41 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -19,6 +19,7 @@
 
   /* Typography */
   --font-main: 'Inter', sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
 
   /* Spacing */
   --spacing-xs: 0.5rem;
@@ -27,10 +28,18 @@
   --spacing-lg: 2rem;
   --spacing-xl: 3rem;
 
+  /* Terminal colors (shared across themes) */
+  --panel-bg: var(--glass-bg);
+  --border-color: var(--glass-border);
+  --terminal-green: #00aa55;
+  --terminal-amber: #e08800;
+  --terminal-red: #cc3344;
+  --outer-glow: none;
+
   /* =========================
      Scrollbar (Theme-Aware)
      ========================= */
-  --scrollbar-size: 10px;
+  --scrollbar-size: 6px;
   --scrollbar-radius: 999px;
 
   --scrollbar-track: transparent;
@@ -39,21 +48,41 @@
 }
 
 /* =========================
-   Dark Theme
+   Dark Theme (Terminal)
    ========================= */
 [data-theme='dark'] {
-  --bg: #101010;
-  --bg-gradient: linear-gradient(135deg, #101010 0%, #202020 100%);
-  --glass-bg: rgba(20, 20, 20, 0.6);
-  --glass-border: rgba(255, 255, 255, 0.1);
-  --glass-blur: 16px;
-  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
-  --edge-glow: rgba(255, 255, 255, 0.1);
-
-  --fg: #f0f4f8;
-  --muted: #9fb3c8;
-  --accent: #82cfff;
-  --primary: #4dabf7;
+  /* Exact colors from reference HTML */
+  --bg: #131313;
+  --bg-gradient: radial-gradient(#1a1a1a 1px, transparent 1px);
+  --bg-size: 24px 24px;
+
+  --panel-bg:     #0e0e0e;  /* surface-container-lowest */
+  --panel-low:    #1c1b1b;  /* surface-container-low    */
+  --panel-mid:    #201f1f;  /* surface-container        */
+  --panel-high:   #2a2a2a;  /* surface-container-high   */
+
+  --glass-bg: #1c1b1b;
+  --glass-border: #3b494b;
+  --glass-blur: 0px;
+  --glass-shadow: none;
+  --edge-glow: rgba(0, 240, 255, 0.15);
+
+  --fg:      #e5e2e1;   /* on-surface           */
+  --muted:   #b9cacb;   /* on-surface-variant   */
+  --outline: #849495;   /* outline              */
+  --primary: #00f0ff;   /* primary-container    */
+  --on-primary: #00363a; /* on-primary          */
+  --accent:  #00dbe9;   /* primary-fixed-dim    */
+
+  --border-color: #3b494b;  /* outline-variant */
+  --terminal-green: #00f0ff;
+  --terminal-amber: #fed639;  /* tertiary-container */
+  --terminal-red: #ffb4ab;
+
+  --outer-glow: none;
+
+  --scrollbar-thumb: rgba(0, 240, 255, 0.15);
+  --scrollbar-thumb-hover: rgba(0, 240, 255, 0.3);
 }
 
 /* =========================

From e37fc190bb718066ac63adc21c720d3f768c2b81 Mon Sep 17 00:00:00 2001
From: rahul-aot <rahul.ap@aot-technologies.com>
Date: Thu, 2 Jul 2026 02:48:27 -0700
Subject: [PATCH 2/8] fix: reduce boot duration for loading screen from 6000ms
 to 2200ms

---
 src/components/LoadingScreen/LoadingScreen.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/LoadingScreen/LoadingScreen.tsx b/src/components/LoadingScreen/LoadingScreen.tsx
index fa78005..ae23f62 100644
--- a/src/components/LoadingScreen/LoadingScreen.tsx
+++ b/src/components/LoadingScreen/LoadingScreen.tsx
@@ -18,7 +18,7 @@ const BOOT_LINES = [
 ];
 
 const BAR_BLOCKS = 20;
-const BOOT_DURATION = 6000;
+const BOOT_DURATION = 2200;
 
 const LoadingScreen: React.FC<Props> = ({ onComplete }) => {
     const [progress, setProgress] = useState(0);

From 9f2f53edd9828af1aca108816abf9b86d31d5493 Mon Sep 17 00:00:00 2001
From: rahul-aot <rahul.ap@aot-technologies.com>
Date: Thu, 2 Jul 2026 03:14:49 -0700
Subject: [PATCH 3/8] refactor: update loading screen branding and enhance
 terminal command handling

---
 .../LoadingScreen/LoadingScreen.tsx           |   4 +-
 src/components/Terminal/Terminal.scss         |  31 ++++-
 src/components/Terminal/Terminal.tsx          |  55 ++++++--
 src/components/Terminal/commands.ts           | 127 ++++++++++++------
 4 files changed, 158 insertions(+), 59 deletions(-)

diff --git a/src/components/LoadingScreen/LoadingScreen.tsx b/src/components/LoadingScreen/LoadingScreen.tsx
index ae23f62..be07ad6 100644
--- a/src/components/LoadingScreen/LoadingScreen.tsx
+++ b/src/components/LoadingScreen/LoadingScreen.tsx
@@ -7,7 +7,7 @@ interface Props {
 }
 
 const BOOT_LINES = [
-    { ts: '0.0001', msg: 'Initializing RahulOS...' },
+    { ts: '0.0001', msg: 'Initializing Rahul AP...' },
     { ts: '0.0042', msg: 'Loading kernel...' },
     { ts: '0.0125', msg: 'Loading React...' },
     { ts: '0.0210', msg: 'Loading portfolio...' },
@@ -74,7 +74,7 @@ const LoadingScreen: React.FC<Props> = ({ onComplete }) => {
         >
             <div className="ls-content">
                 <div className="ls-brand">
-                    RAHUL_OS_V2.0
+                    RAHUL_AP_V2.0
                     <span className="ls-cursor">▋</span>
                 </div>
 
diff --git a/src/components/Terminal/Terminal.scss b/src/components/Terminal/Terminal.scss
index 852fae9..26ca995 100644
--- a/src/components/Terminal/Terminal.scss
+++ b/src/components/Terminal/Terminal.scss
@@ -8,12 +8,12 @@
     color: var(--fg);
     font-family: var(--font-mono);
     cursor: text;
-    overflow: hidden;
+    overflow-y: auto;
+    overflow-x: hidden;
 }
 
 .terminal-scroll {
-    height: 100%;
-    overflow-y: auto;
+    min-height: 100%;
     padding: clamp(16px, 4vw, 40px);
     max-width: 900px;
     margin: 0 auto;
@@ -23,10 +23,15 @@
 
 .terminal-welcome {
     margin-bottom: 16px;
-    color: var(--primary);
 
-    p:first-child {
-        font-weight: 700;
+    > * + * {
+        margin-top: 8px;
+    }
+
+    .welcome-login {
+        p + p {
+            margin-top: 0;
+        }
     }
 }
 
@@ -92,6 +97,20 @@
     margin-top: 4px;
 }
 
+.out-help-section {
+    margin-bottom: 14px;
+}
+
+.out-section-title {
+    color: var(--accent);
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    font-size: 0.72rem;
+    padding-bottom: 4px;
+    margin-bottom: 6px;
+    border-bottom: 1px dashed var(--border-color);
+}
+
 .out-help .out-row {
     display: flex;
     gap: 16px;
diff --git a/src/components/Terminal/Terminal.tsx b/src/components/Terminal/Terminal.tsx
index 25bcbd5..bbeba17 100644
--- a/src/components/Terminal/Terminal.tsx
+++ b/src/components/Terminal/Terminal.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTheme, Theme } from '../../context/ThemeContext';
-import { runCommand, COMMAND_NAMES, CommandOutput } from './commands';
+import { runCommand, COMMAND_NAMES, OPEN_TARGETS, CommandOutput } from './commands';
 import './Terminal.scss';
 
 interface LineEntry {
@@ -10,10 +10,35 @@ interface LineEntry {
 }
 
 const THEME_ORDER: Theme[] = ['dark', 'neon', 'pastel', 'light'];
-const WELCOME = 'Type "help" to begin.';
+const PROMPT = 'guest@rahulap:~$';
 
 let idCounter = 0;
 
+type CompletionContext = { kind: 'command' | 'open-arg'; prefix: string; options: string[] };
+
+const getCompletionContext = (value: string): CompletionContext | null => {
+    const trailingSpace = /\s$/.test(value);
+    const parts = value.split(/\s+/).filter(Boolean);
+    if (parts.length === 0) return null;
+
+    const first = parts[0].toLowerCase();
+    if (first === 'open' && (parts.length > 1 || trailingSpace)) {
+        return { kind: 'open-arg', prefix: parts.length > 1 ? parts[1].toLowerCase() : '', options: OPEN_TARGETS };
+    }
+    if (parts.length > 1) return null;
+    return { kind: 'command', prefix: first, options: COMMAND_NAMES };
+};
+
+const formatLastLogin = () => {
+    const parts = new Intl.DateTimeFormat('en-US', {
+        month: 'short', day: '2-digit', year: 'numeric',
+        hour: '2-digit', minute: '2-digit', hour12: false,
+        timeZone: 'Asia/Kolkata',
+    }).formatToParts(new Date());
+    const get = (type: string) => parts.find(p => p.type === type)?.value;
+    return `${get('month')} ${get('day')} ${get('year')} ${get('hour')}:${get('minute')} IST`;
+};
+
 const Terminal: React.FC = () => {
     const { theme, setTheme } = useTheme();
     const [lines, setLines] = useState<LineEntry[]>([]);
@@ -22,6 +47,7 @@ const Terminal: React.FC = () => {
     const [historyIndex, setHistoryIndex] = useState<number | null>(null);
     const [matrixActive, setMatrixActive] = useState(false);
 
+    const [lastLogin] = useState(formatLastLogin);
     const inputRef = useRef<HTMLInputElement>(null);
     const bottomRef = useRef<HTMLDivElement>(null);
 
@@ -97,17 +123,18 @@ const Terminal: React.FC = () => {
 
         if (e.key === 'Tab') {
             e.preventDefault();
-            const [prefix] = input.split(/\s+/);
-            if (!prefix) return;
-            const matches = COMMAND_NAMES.filter(c => c.startsWith(prefix.toLowerCase()));
+            const ctx = getCompletionContext(input);
+            if (!ctx) return;
+            const matches = ctx.options.filter(o => o.startsWith(ctx.prefix));
             if (matches.length === 1) {
-                setInput(matches[0] + ' ');
+                setInput(ctx.kind === 'open-arg' ? `open ${matches[0]} ` : `${matches[0]} `);
             }
         }
     };
 
-    const suggestions = input.trim()
-        ? COMMAND_NAMES.filter(c => c.startsWith(input.trim().toLowerCase()) && c !== input.trim().toLowerCase())
+    const completionCtx = getCompletionContext(input);
+    const suggestions = completionCtx
+        ? completionCtx.options.filter(o => o.startsWith(completionCtx.prefix) && o !== completionCtx.prefix)
         : [];
 
     return (
@@ -116,14 +143,18 @@ const Terminal: React.FC = () => {
 
             <div className="terminal-scroll">
                 <div className="terminal-welcome">
-                    <p>RahulOS v2.0 — interactive portfolio</p>
-                    <p className="out-muted">{WELCOME}</p>
+                    <p className="out-title">Rahul AP v2.1</p>
+                    <div className="welcome-login">
+                        <p className="out-muted">Last login:</p>
+                        <p className="out-muted">{lastLogin}</p>
+                    </div>
+                    <p className="out-muted">Type &quot;help&quot; to begin.</p>
                 </div>
 
                 {lines.map(line => (
                     <div className="terminal-block" key={line.id}>
                         <div className="terminal-line">
-                            <span className="terminal-prompt">visitor@rahul:~$</span>
+                            <span className="terminal-prompt">{PROMPT}</span>
                             <span className="terminal-command">{line.command}</span>
                         </div>
                         {line.output && <div className="terminal-output">{line.output}</div>}
@@ -131,7 +162,7 @@ const Terminal: React.FC = () => {
                 ))}
 
                 <div className="terminal-line terminal-line--active">
-                    <span className="terminal-prompt">visitor@rahul:~$</span>
+                    <span className="terminal-prompt">{PROMPT}</span>
                     <input
                         ref={inputRef}
                         className="terminal-input"
diff --git a/src/components/Terminal/commands.ts b/src/components/Terminal/commands.ts
index 564670a..4659715 100644
--- a/src/components/Terminal/commands.ts
+++ b/src/components/Terminal/commands.ts
@@ -12,18 +12,30 @@ export interface CommandContext {
 export type CommandOutput = React.ReactNode;
 export type CommandHandler = (args: string[], ctx: CommandContext) => CommandOutput;
 
+type Category = 'Navigation' | 'Resources' | 'Terminal';
+
 interface CommandDef {
     name: string;
     description: string;
+    category?: Category;
+    hidden?: boolean;
     handler: CommandHandler;
 }
 
+const CATEGORY_ORDER: Category[] = ['Navigation', 'Resources', 'Terminal'];
+
 const slug = (title: string) => title.toLowerCase().replace(/\s+/g, '_');
 
 const openUrl = (url?: string) => {
     if (url) window.open(url, '_blank', 'noopener,noreferrer');
 };
 
+export const OPEN_TARGETS: string[] = [
+    ...resumeData.projects.map(p => slug(p.title)),
+    'github',
+    'linkedin',
+];
+
 const resolveProjectUrl = (arg: string): { url?: string; title?: string } => {
     const byIndex = resumeData.projects[Number(arg) - 1];
     if (byIndex) return { url: byIndex.link ?? byIndex.github, title: byIndex.title };
@@ -32,24 +44,30 @@ const resolveProjectUrl = (arg: string): { url?: string; title?: string } => {
     return {};
 };
 
+const OpeningLink: React.FC<{ label: string; url?: string }> = ({ label, url }) => {
+    const [redirecting, setRedirecting] = React.useState(false);
+
+    React.useEffect(() => {
+        const timer = setTimeout(() => {
+            setRedirecting(true);
+            openUrl(url);
+        }, 260);
+        return () => clearTimeout(timer);
+    }, [url]);
+
+    return React.createElement('div', { className: 'out-block' },
+        React.createElement('p', null, `Opening ${label}...`),
+        redirecting && React.createElement('p', { className: 'out-muted' }, 'Redirecting...')
+    );
+};
+
+const opening = (label: string, url?: string) => React.createElement(OpeningLink, { label, url });
+
 export const COMMANDS: CommandDef[] = [
-    {
-        name: 'help',
-        description: 'Show commands',
-        handler: () =>
-            React.createElement('div', { className: 'out-help' },
-                React.createElement('p', { className: 'out-title' }, 'Available Commands'),
-                COMMANDS.map(c =>
-                    React.createElement('div', { className: 'out-row', key: c.name },
-                        React.createElement('span', { className: 'out-cmd' }, c.name),
-                        React.createElement('span', { className: 'out-desc' }, c.description)
-                    )
-                )
-            ),
-    },
     {
         name: 'about',
         description: 'About me',
+        category: 'Navigation',
         handler: () =>
             React.createElement('div', { className: 'out-block' },
                 React.createElement('p', null, `Hi! I'm ${resumeData.name}.`),
@@ -60,6 +78,7 @@ export const COMMANDS: CommandDef[] = [
     {
         name: 'skills',
         description: 'Technologies',
+        category: 'Navigation',
         handler: () =>
             React.createElement('div', { className: 'out-block' },
                 Object.entries(resumeData.skills).map(([category, items]) =>
@@ -75,6 +94,7 @@ export const COMMANDS: CommandDef[] = [
     {
         name: 'projects',
         description: 'Featured projects',
+        category: 'Navigation',
         handler: () =>
             React.createElement('div', { className: 'out-block' },
                 resumeData.projects.map((p, i) =>
@@ -87,23 +107,10 @@ export const COMMANDS: CommandDef[] = [
                 React.createElement('p', { className: 'out-hint' }, 'Type: open <n>  e.g. open 1')
             ),
     },
-    {
-        name: 'open',
-        description: 'Open a project, github or linkedin',
-        handler: (args) => {
-            const target = args[0];
-            if (!target) return React.createElement('p', { className: 'out-error' }, 'Usage: open <n|github|linkedin>');
-            if (target === 'github') { openUrl(resumeData.contact.github); return React.createElement('p', null, 'Opening GitHub...'); }
-            if (target === 'linkedin') { openUrl(resumeData.contact.linkedin); return React.createElement('p', null, 'Opening LinkedIn...'); }
-            const { url, title } = resolveProjectUrl(target);
-            if (!url) return React.createElement('p', { className: 'out-error' }, `No project found for "${target}"`);
-            openUrl(url);
-            return React.createElement('p', null, `Opening ${title}...`);
-        },
-    },
     {
         name: 'experience',
         description: 'Work experience',
+        category: 'Navigation',
         handler: () =>
             React.createElement('div', { className: 'out-block' },
                 resumeData.experience.map((exp, i) =>
@@ -120,14 +127,25 @@ export const COMMANDS: CommandDef[] = [
     {
         name: 'resume',
         description: 'Download resume',
-        handler: () => {
-            openUrl(resumeData.contact.cv);
-            return React.createElement('p', null, 'Opening resume...');
-        },
+        category: 'Resources',
+        handler: () => opening('resume', resumeData.contact.cv),
+    },
+    {
+        name: 'github',
+        description: 'Open GitHub',
+        category: 'Resources',
+        handler: () => opening('GitHub', resumeData.contact.github),
+    },
+    {
+        name: 'linkedin',
+        description: 'Open LinkedIn',
+        category: 'Resources',
+        handler: () => opening('LinkedIn', resumeData.contact.linkedin),
     },
     {
         name: 'contact',
         description: 'Contact information',
+        category: 'Resources',
         handler: () =>
             React.createElement('div', { className: 'out-block' },
                 React.createElement('p', null, `Email: ${resumeData.contact.email}`),
@@ -138,18 +156,45 @@ export const COMMANDS: CommandDef[] = [
             ),
     },
     {
-        name: 'github',
-        description: 'Open GitHub',
-        handler: () => { openUrl(resumeData.contact.github); return React.createElement('p', null, 'Opening GitHub...'); },
+        name: 'open',
+        description: 'Open a project, github or linkedin',
+        category: 'Resources',
+        handler: (args) => {
+            const target = args[0];
+            if (!target) return React.createElement('p', { className: 'out-error' }, 'Usage: open <n|github|linkedin>');
+            if (target === 'github') return opening('GitHub', resumeData.contact.github);
+            if (target === 'linkedin') return opening('LinkedIn', resumeData.contact.linkedin);
+            const { url, title } = resolveProjectUrl(target);
+            if (!url) return React.createElement('p', { className: 'out-error' }, `No project found for "${target}"`);
+            return opening(title ?? target, url);
+        },
     },
     {
-        name: 'linkedin',
-        description: 'Open LinkedIn',
-        handler: () => { openUrl(resumeData.contact.linkedin); return React.createElement('p', null, 'Opening LinkedIn...'); },
+        name: 'help',
+        description: 'Show commands',
+        category: 'Terminal',
+        handler: () =>
+            React.createElement('div', { className: 'out-help' },
+                React.createElement('p', { className: 'out-title' }, 'Available Commands'),
+                CATEGORY_ORDER.map(category => {
+                    const cmds = COMMANDS.filter(c => !c.hidden && c.category === category);
+                    if (!cmds.length) return null;
+                    return React.createElement('div', { className: 'out-help-section', key: category },
+                        React.createElement('p', { className: 'out-section-title' }, category),
+                        cmds.map(c =>
+                            React.createElement('div', { className: 'out-row', key: c.name },
+                                React.createElement('span', { className: 'out-cmd' }, c.name),
+                                React.createElement('span', { className: 'out-desc' }, c.description)
+                            )
+                        )
+                    );
+                })
+            ),
     },
     {
         name: 'theme',
         description: 'Change terminal theme',
+        category: 'Terminal',
         handler: (_args, ctx) => {
             ctx.cycleTheme();
             return React.createElement('p', null, 'Switching theme...');
@@ -158,21 +203,25 @@ export const COMMANDS: CommandDef[] = [
     {
         name: 'clear',
         description: 'Clear terminal',
+        category: 'Terminal',
         handler: (_args, ctx) => { ctx.clear(); return null; },
     },
     {
         name: 'whoami',
         description: 'Hidden command',
-        handler: () => React.createElement('p', null, 'visitor // curious human probably scouting for a hire'),
+        hidden: true,
+        handler: () => React.createElement('p', null, 'guest // curious human probably scouting for a hire'),
     },
     {
         name: 'coffee',
         description: 'Hidden command',
+        hidden: true,
         handler: () => React.createElement('p', null, '☕ brewing... here you go.'),
     },
     {
         name: 'matrix',
         description: 'Hidden command',
+        hidden: true,
         handler: (_args, ctx) => {
             ctx.triggerMatrix();
             return React.createElement('p', null, 'Wake up, Neo...');

From 84e8d084e01ceb4812ee6301a3e7634457d7559d Mon Sep 17 00:00:00 2001
From: rahul-aot <rahul.ap@aot-technologies.com>
Date: Thu, 2 Jul 2026 03:23:55 -0700
Subject: [PATCH 4/8] feat: add 'neofetch' command and enhance output
 formatting for 'about' and 'contact' commands

---
 src/components/Terminal/Terminal.scss |  13 +++
 src/components/Terminal/commands.ts   | 142 +++++++++++++++++++++++---
 2 files changed, 140 insertions(+), 15 deletions(-)

diff --git a/src/components/Terminal/Terminal.scss b/src/components/Terminal/Terminal.scss
index 26ca995..2b8464d 100644
--- a/src/components/Terminal/Terminal.scss
+++ b/src/components/Terminal/Terminal.scss
@@ -140,6 +140,19 @@
     padding-left: 8px;
 }
 
+.out-neofetch {
+    display: flex;
+    gap: 24px;
+    flex-wrap: wrap;
+
+    .out-ascii {
+        color: var(--terminal-green);
+        font-family: inherit;
+        line-height: 1.3;
+        white-space: pre;
+    }
+}
+
 .terminal-suggestions {
     display: flex;
     flex-wrap: wrap;
diff --git a/src/components/Terminal/commands.ts b/src/components/Terminal/commands.ts
index 4659715..8696d55 100644
--- a/src/components/Terminal/commands.ts
+++ b/src/components/Terminal/commands.ts
@@ -63,17 +63,67 @@ const OpeningLink: React.FC<{ label: string; url?: string }> = ({ label, url })
 
 const opening = (label: string, url?: string) => React.createElement(OpeningLink, { label, url });
 
+const aboutOutput = () =>
+    React.createElement('div', { className: 'out-block' },
+        React.createElement('p', null, `Hi! I'm ${resumeData.name}.`),
+        React.createElement('p', null, resumeData.hero.bio),
+        React.createElement('p', { className: 'out-muted' }, `Location: ${resumeData.location}`)
+    );
+
+const contactOutput = () =>
+    React.createElement('div', { className: 'out-block' },
+        React.createElement('p', null, `Email: ${resumeData.contact.email}`),
+        React.createElement('p', null, `Phone: ${resumeData.contact.phone}`),
+        React.createElement('p', null, `LinkedIn: ${resumeData.contact.linkedin}`),
+        React.createElement('p', null, `GitHub: ${resumeData.contact.github}`),
+        React.createElement('p', { className: 'out-hint' }, 'Type: open github  |  open linkedin')
+    );
+
+const FORTUNES = [
+    { quote: 'Programs must be written for people to read.', author: 'Harold Abelson' },
+    { quote: 'Simplicity is prerequisite for reliability.', author: 'Edsger W. Dijkstra' },
+    { quote: 'First, solve the problem. Then, write the code.', author: 'John Johnson' },
+    { quote: 'Talk is cheap. Show me the code.', author: 'Linus Torvalds' },
+    { quote: 'Make it work, make it right, make it fast.', author: 'Kent Beck' },
+];
+
+const VIRTUAL_FILES: Record<string, () => CommandOutput> = {
+    'about.md': aboutOutput,
+    'contact.md': contactOutput,
+    'resume.pdf': () => opening('resume', resumeData.contact.cv),
+};
+
+const LS_ENTRIES = ['about.md', 'projects/', 'experience/', 'resume.pdf', 'contact.md', 'blog/'];
+
+const SudoHire: React.FC = () => {
+    const [stage, setStage] = React.useState(0);
+
+    React.useEffect(() => {
+        const timers = [
+            setTimeout(() => setStage(1), 400),
+            setTimeout(() => setStage(2), 900),
+            setTimeout(() => setStage(3), 1300),
+        ];
+        return () => timers.forEach(clearTimeout);
+    }, []);
+
+    return React.createElement('div', { className: 'out-block' },
+        React.createElement('p', null, '[sudo] password for recruiter:'),
+        stage >= 1 && React.createElement('p', null, '********'),
+        stage >= 2 && React.createElement('p', { className: 'out-title' }, 'Access Granted.'),
+        stage >= 3 && React.createElement('div', { className: 'out-block' },
+            React.createElement('p', null, 'Opening contact information...'),
+            contactOutput()
+        )
+    );
+};
+
 export const COMMANDS: CommandDef[] = [
     {
         name: 'about',
         description: 'About me',
         category: 'Navigation',
-        handler: () =>
-            React.createElement('div', { className: 'out-block' },
-                React.createElement('p', null, `Hi! I'm ${resumeData.name}.`),
-                React.createElement('p', null, resumeData.hero.bio),
-                React.createElement('p', { className: 'out-muted' }, `Location: ${resumeData.location}`)
-            ),
+        handler: aboutOutput,
     },
     {
         name: 'skills',
@@ -146,14 +196,7 @@ export const COMMANDS: CommandDef[] = [
         name: 'contact',
         description: 'Contact information',
         category: 'Resources',
-        handler: () =>
-            React.createElement('div', { className: 'out-block' },
-                React.createElement('p', null, `Email: ${resumeData.contact.email}`),
-                React.createElement('p', null, `Phone: ${resumeData.contact.phone}`),
-                React.createElement('p', null, `LinkedIn: ${resumeData.contact.linkedin}`),
-                React.createElement('p', null, `GitHub: ${resumeData.contact.github}`),
-                React.createElement('p', { className: 'out-hint' }, 'Type: open github  |  open linkedin')
-            ),
+        handler: contactOutput,
     },
     {
         name: 'open',
@@ -227,6 +270,75 @@ export const COMMANDS: CommandDef[] = [
             return React.createElement('p', null, 'Wake up, Neo...');
         },
     },
+    {
+        name: 'exit',
+        description: 'Hidden command',
+        hidden: true,
+        handler: () =>
+            React.createElement('div', { className: 'out-block' },
+                React.createElement('p', null, 'Nice try.'),
+                React.createElement('p', null, "This portfolio isn't going anywhere 😄")
+            ),
+    },
+    {
+        name: 'fortune',
+        description: 'Hidden command',
+        hidden: true,
+        handler: () => {
+            const pick = FORTUNES[Math.floor(Math.random() * FORTUNES.length)];
+            return React.createElement('div', { className: 'out-block' },
+                React.createElement('p', null, 'Random developer quote:'),
+                React.createElement('p', { className: 'out-title' }, `"${pick.quote}"`),
+                React.createElement('p', { className: 'out-muted' }, `— ${pick.author}`)
+            );
+        },
+    },
+    {
+        name: 'ls',
+        description: 'Hidden command',
+        hidden: true,
+        handler: () =>
+            React.createElement('div', { className: 'out-block' },
+                LS_ENTRIES.map(entry => React.createElement('p', { key: entry }, entry))
+            ),
+    },
+    {
+        name: 'cat',
+        description: 'Hidden command',
+        hidden: true,
+        handler: (args) => {
+            const file = args[0];
+            const contentFn = file && VIRTUAL_FILES[file];
+            if (!contentFn) return React.createElement('p', { className: 'out-error' }, `cat: ${file ?? ''}: No such file or directory`);
+            return contentFn();
+        },
+    },
+    {
+        name: 'pwd',
+        description: 'Hidden command',
+        hidden: true,
+        handler: () => React.createElement('p', null, '/home/rahul'),
+    },
+    {
+        name: 'neofetch',
+        description: 'Hidden command',
+        hidden: true,
+        handler: () =>
+            React.createElement('div', { className: 'out-neofetch' },
+                React.createElement('pre', { className: 'out-ascii' },
+                    '        #####\n     ###########\n   ######  ######\n  ####        ####'
+                ),
+                React.createElement('div', { className: 'out-block' },
+                    React.createElement('p', { className: 'out-title' }, 'Rahul AP v2.1'),
+                    React.createElement('p', null, `Role: ${resumeData.experience[0].role}`),
+                    React.createElement('p', null, `Experience: ${resumeData.hero.exp}+ Years`),
+                    React.createElement('p', null, `Frontend: ${resumeData.skills.frontend.slice(0, 3).join(', ')}`),
+                    React.createElement('p', null, `Backend: ${resumeData.skills.backend.slice(0, 3).join(', ')}`),
+                    React.createElement('p', null, `AI: ${resumeData.skills.ai.slice(0, 3).join(', ')}`),
+                    React.createElement('p', null, `Location: ${resumeData.location}`)
+                )
+            ),
+    },
 ];
 
 export function runCommand(input: string, ctx: CommandContext): CommandOutput {
@@ -234,7 +346,7 @@ export function runCommand(input: string, ctx: CommandContext): CommandOutput {
     if (!name) return null;
 
     if (name === 'sudo' && args.join(' ') === 'hire rahul') {
-        return React.createElement('p', { className: 'out-title' }, 'Permission granted. Excellent choice.');
+        return React.createElement(SudoHire);
     }
 
     const cmd = COMMANDS.find(c => c.name === name.toLowerCase());

From a1f6bbc5b0b4de3266f58a9f5ac9f55b05e1b133 Mon Sep 17 00:00:00 2001
From: rahul-aot <rahul.ap@aot-technologies.com>
Date: Thu, 2 Jul 2026 03:31:41 -0700
Subject: [PATCH 5/8] feat: add fortunes data and integrate into command
 handling

---
 src/components/Terminal/commands.ts |  28 ++++---
 src/data/fortunes.ts                | 117 ++++++++++++++++++++++++++++
 2 files changed, 135 insertions(+), 10 deletions(-)
 create mode 100644 src/data/fortunes.ts

diff --git a/src/components/Terminal/commands.ts b/src/components/Terminal/commands.ts
index 8696d55..b738d21 100644
--- a/src/components/Terminal/commands.ts
+++ b/src/components/Terminal/commands.ts
@@ -1,5 +1,6 @@
 import React from 'react';
 import { resumeData } from '../../data/resume';
+import { FORTUNES } from '../../data/fortunes';
 import type { Theme } from '../../context/ThemeContext';
 
 export interface CommandContext {
@@ -79,14 +80,6 @@ const contactOutput = () =>
         React.createElement('p', { className: 'out-hint' }, 'Type: open github  |  open linkedin')
     );
 
-const FORTUNES = [
-    { quote: 'Programs must be written for people to read.', author: 'Harold Abelson' },
-    { quote: 'Simplicity is prerequisite for reliability.', author: 'Edsger W. Dijkstra' },
-    { quote: 'First, solve the problem. Then, write the code.', author: 'John Johnson' },
-    { quote: 'Talk is cheap. Show me the code.', author: 'Linus Torvalds' },
-    { quote: 'Make it work, make it right, make it fast.', author: 'Kent Beck' },
-];
-
 const VIRTUAL_FILES: Record<string, () => CommandOutput> = {
     'about.md': aboutOutput,
     'contact.md': contactOutput,
@@ -95,6 +88,12 @@ const VIRTUAL_FILES: Record<string, () => CommandOutput> = {
 
 const LS_ENTRIES = ['about.md', 'projects/', 'experience/', 'resume.pdf', 'contact.md', 'blog/'];
 
+const resolveVirtualFile = (name: string): (() => CommandOutput) | undefined => {
+    if (VIRTUAL_FILES[name]) return VIRTUAL_FILES[name];
+    const basenameMatch = Object.keys(VIRTUAL_FILES).find(k => k.replace(/\.[^.]+$/, '') === name);
+    return basenameMatch ? VIRTUAL_FILES[basenameMatch] : undefined;
+};
+
 const SudoHire: React.FC = () => {
     const [stage, setStage] = React.useState(0);
 
@@ -308,8 +307,9 @@ export const COMMANDS: CommandDef[] = [
         hidden: true,
         handler: (args) => {
             const file = args[0];
-            const contentFn = file && VIRTUAL_FILES[file];
-            if (!contentFn) return React.createElement('p', { className: 'out-error' }, `cat: ${file ?? ''}: No such file or directory`);
+            if (!file) return React.createElement('p', { className: 'out-error' }, 'Usage: cat <file>');
+            const contentFn = resolveVirtualFile(file);
+            if (!contentFn) return React.createElement('p', { className: 'out-error' }, `cat: ${file}: No such file or directory`);
             return contentFn();
         },
     },
@@ -339,6 +339,12 @@ export const COMMANDS: CommandDef[] = [
                 )
             ),
     },
+    {
+        name: 'blog',
+        description: 'Hidden command',
+        hidden: true,
+        handler: () => React.createElement('p', { className: 'out-muted' }, 'blog: under construction — check back soon.'),
+    },
 ];
 
 export function runCommand(input: string, ctx: CommandContext): CommandOutput {
@@ -351,6 +357,8 @@ export function runCommand(input: string, ctx: CommandContext): CommandOutput {
 
     const cmd = COMMANDS.find(c => c.name === name.toLowerCase());
     if (!cmd) {
+        const fileFn = resolveVirtualFile(name.toLowerCase());
+        if (fileFn) return fileFn();
         return React.createElement('p', { className: 'out-error' },
             `command not found: ${name}. Type "help" for a list of commands.`);
     }
diff --git a/src/data/fortunes.ts b/src/data/fortunes.ts
new file mode 100644
index 0000000..6625a3d
--- /dev/null
+++ b/src/data/fortunes.ts
@@ -0,0 +1,117 @@
+export interface Fortune {
+    quote: string;
+    author: string;
+}
+
+export const FORTUNES: Fortune[] = [
+    { quote: 'Programs must be written for people to read.', author: 'Harold Abelson' },
+    { quote: 'Simplicity is prerequisite for reliability.', author: 'Edsger W. Dijkstra' },
+    { quote: 'First, solve the problem. Then, write the code.', author: 'John Johnson' },
+    { quote: 'Talk is cheap. Show me the code.', author: 'Linus Torvalds' },
+    { quote: 'Make it work, make it right, make it fast.', author: 'Kent Beck' },
+    { quote: 'Any fool can write code that a computer can understand. Good programmers write code that humans can understand.', author: 'Martin Fowler' },
+    { quote: 'The best error message is the one that never shows up.', author: 'Thomas Fuchs' },
+    { quote: 'Code is like humor. When you have to explain it, it’s bad.', author: 'Cory House' },
+    { quote: 'Simplicity is the soul of efficiency.', author: 'Austin Freeman' },
+    { quote: 'Before software can be reusable it first has to be usable.', author: 'Ralph Johnson' },
+    { quote: 'Make it work, make it right, make it fast.', author: 'Kent Beck' },
+    { quote: 'The most disastrous thing that you can ever learn is your first programming language.', author: 'Alan Kay' },
+    { quote: 'Sometimes it pays to stay in bed on Monday, rather than spending the rest of the week debugging Monday’s code.', author: 'Dan Salomon' },
+    { quote: 'Deleted code is debugged code.', author: 'Jeff Sickel' },
+    { quote: 'It’s not a bug – it’s an undocumented feature.', author: 'Anonymous' },
+    { quote: 'Walking on water and developing software from a specification are easy if both are frozen.', author: 'Edward V. Berard' },
+    { quote: 'The trouble with programmers is that you can never tell what a programmer is doing until it’s too late.', author: 'Seymour Cray' },
+    { quote: 'Optimism is an occupational hazard of programming; feedback is the treatment.', author: 'Kent Beck' },
+    { quote: 'A good programmer is someone who always looks both ways before crossing a one-way street.', author: 'Doug Linder' },
+    { quote: 'There are only two hard things in Computer Science: cache invalidation and naming things.', author: 'Phil Karlton' },
+    { quote: 'Programming isn’t about what you know; it’s about what you can figure out.', author: 'Chris Pine' },
+    { quote: 'The computer was born to solve problems that did not exist before.', author: 'Bill Gates' },
+    { quote: 'Software is a great combination between artistry and engineering.', author: 'Bill Gates' },
+    { quote: 'Testing leads to failure, and failure leads to understanding.', author: 'Burt Rutan' },
+    { quote: 'Debugging is twice as hard as writing the code in the first place.', author: 'Brian Kernighan' },
+    { quote: 'If debugging is the process of removing bugs, then programming must be the process of putting them in.', author: 'Edsger W. Dijkstra' },
+    { quote: 'Premature optimization is the root of all evil.', author: 'Donald Knuth' },
+    { quote: 'A language that doesn’t affect the way you think about programming is not worth knowing.', author: 'Alan Perlis' },
+    { quote: 'Controlling complexity is the essence of computer programming.', author: 'Brian Kernighan' },
+    { quote: 'The function of good software is to make the complex appear simple.', author: 'Grady Booch' },
+    { quote: 'Good code is its own best documentation.', author: 'Steve McConnell' },
+    { quote: 'Truth can only be found in one place: the code.', author: 'Robert C. Martin' },
+    { quote: 'Clean code always looks like it was written by someone who cares.', author: 'Robert C. Martin' },
+    { quote: 'First, solve the problem. Then, write the code.', author: 'John Johnson' },
+    { quote: 'Experience is the name everyone gives to their mistakes.', author: 'Oscar Wilde' },
+    { quote: 'In order to be irreplaceable, one must always be different.', author: 'Coco Chanel' },
+    { quote: 'Java is to JavaScript what car is to Carpet.', author: 'Chris Heilmann' },
+    { quote: 'Knowledge is power.', author: 'Francis Bacon' },
+    { quote: 'Sometimes the elegant implementation is just a function. Not a method. Not a class. Not a framework. Just a function.', author: 'John Carmack' },
+    { quote: 'Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.', author: 'Antoine de Saint-Exupéry' },
+    { quote: 'Ninety percent of everything is crap.', author: 'Theodore Sturgeon' },
+    { quote: 'Programs must be written for people to read, and only incidentally for machines to execute.', author: 'Harold Abelson' },
+    { quote: 'Any application that can be written in JavaScript, will eventually be written in JavaScript.', author: 'Jeff Atwood' },
+    { quote: 'One of the best programming skills you can have is knowing when to walk away for a while.', author: 'Oscar Godson' },
+    { quote: 'Good code is short, simple, and symmetrical — the challenge is figuring out how to get there.', author: 'Sandi Metz' },
+    { quote: 'Programming is the art of telling another human being what one wants the computer to do.', author: 'Donald Knuth' },
+    { quote: 'The only way to learn a new programming language is by writing programs in it.', author: 'Dennis Ritchie' },
+    { quote: 'The most important property of a program is whether it accomplishes the intention of its user.', author: 'C.A.R. Hoare' },
+    { quote: 'Programming can be fun, so can cryptography; however they should not be combined.', author: 'Kreitzberg and Shneiderman' },
+    { quote: 'Not all those who wander are lost, but they should probably check the console.', author: 'Anonymous' },
+    { quote: 'It works on my machine.', author: 'Every developer, ever' },
+    { quote: 'There is nothing more permanent than a temporary hack.', author: 'Kyle Simpson' },
+    { quote: 'Move fast and fix things.', author: 'Anonymous' },
+    { quote: 'A ship in port is safe, but that is not what ships are built for.', author: 'Grace Hopper' },
+    { quote: 'The most efficient debugging tool is still careful thought, coupled with judiciously placed print statements.', author: 'Brian Kernighan' },
+    { quote: 'Weeks of coding can save you hours of planning.', author: 'Anonymous' },
+    { quote: 'It’s hard enough to find an error in your code when you’re looking for it; it’s even harder when you’ve assumed your code is error-free.', author: 'Steve McConnell' },
+    { quote: 'Measuring programming progress by lines of code is like measuring aircraft building progress by weight.', author: 'Bill Gates' },
+    { quote: 'The best code is no code at all.', author: 'Jeff Atwood' },
+    { quote: 'Simplicity is prerequisite for reliability.', author: 'Edsger W. Dijkstra' },
+    { quote: 'The cheapest, fastest, and most reliable components are those that aren’t there.', author: 'Gordon Bell' },
+    { quote: 'Programs are meant to be read by humans and only incidentally for computers to execute.', author: 'Donald Knuth' },
+    { quote: 'There are two ways of constructing a software design: make it so simple that there are obviously no deficiencies, or make it so complicated that there are no obvious deficiencies.', author: 'C.A.R. Hoare' },
+    { quote: 'Talk is cheap. Show me the code.', author: 'Linus Torvalds' },
+    { quote: 'The computer is incredibly fast, accurate, and stupid. Man is unbelievably slow, inaccurate, and brilliant. Together they are powerful beyond imagination.', author: 'Albert Einstein' },
+    { quote: 'Beware of bugs in the above code; I have only proved it correct, not tried it.', author: 'Donald Knuth' },
+    { quote: 'Every great developer you know got there by solving problems they were unqualified to solve until they actually did it.', author: 'Patrick McKenzie' },
+    { quote: 'Good design adds value faster than it adds cost.', author: 'Thomas C. Gale' },
+    { quote: 'The best way to predict the future is to implement it.', author: 'David Heinemeier Hansson' },
+    { quote: 'A computer once beat me at chess, but it was no match for me at kick boxing.', author: 'Emo Philips' },
+    { quote: 'The function of good software is to make the complex appear simple.', author: 'Grady Booch' },
+    { quote: 'Simplicity and elegance are unpopular because they require hard work and discipline to achieve.', author: 'Edsger W. Dijkstra' },
+    { quote: 'Learning to write programs stretches your mind, and helps you think better.', author: 'Bill Gates' },
+    { quote: 'If you don’t like testing your product, most likely your customers won’t like to test it either.', author: 'Anonymous' },
+    { quote: 'One man’s crappy software is another man’s full time job.', author: 'Jessica Gaston' },
+    { quote: 'Software undergoes beta testing shortly before it’s released. Beta is Latin for “still doesn’t work.”', author: 'Anonymous' },
+    { quote: 'The trouble with programmers is that you can never tell what a programmer is doing until it’s too late.', author: 'Seymour Cray' },
+    { quote: 'When debugging, novices insert corrective code; experts remove defective code.', author: 'Richard Pattis' },
+    { quote: 'Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the universe trying to produce bigger and better idiots. So far, the universe is winning.', author: 'Rick Cook' },
+    { quote: 'The only way to go fast is to go well.', author: 'Robert C. Martin' },
+    { quote: 'Code never lies, comments sometimes do.', author: 'Ron Jeffries' },
+    { quote: 'A user interface is like a joke. If you have to explain it, it’s not that good.', author: 'Anonymous' },
+    { quote: 'To iterate is human, to recurse divine.', author: 'L. Peter Deutsch' },
+    { quote: 'There’s no place like 127.0.0.1.', author: 'Anonymous' },
+    { quote: 'Real programmers count from 0.', author: 'Anonymous' },
+    { quote: 'It’s not a bug, it’s a feature.', author: 'Anonymous' },
+    { quote: 'The best thing about a boolean is even if you are wrong, you are only off by a bit.', author: 'Anonymous' },
+    { quote: 'A SQL query walks into a bar, walks up to two tables and asks, “Can I join you?”', author: 'Anonymous' },
+    { quote: 'Why do programmers prefer dark mode? Because light attracts bugs.', author: 'Anonymous' },
+    { quote: 'There are only 10 types of people in the world: those who understand binary, and those who don’t.', author: 'Anonymous' },
+    { quote: 'I would love to change the world, but they won’t give me the source code.', author: 'Anonymous' },
+    { quote: 'To err is human, but to really foul things up you need a computer.', author: 'Paul Ehrlich' },
+    { quote: 'A computer will do what you tell it to do, but that may be much different from what you had in mind.', author: 'Joseph Weizenbaum' },
+    { quote: 'The question of whether a computer can think is no more interesting than the question of whether a submarine can swim.', author: 'Edsger W. Dijkstra' },
+    { quote: 'Computer science is no more about computers than astronomy is about telescopes.', author: 'Edsger W. Dijkstra' },
+    { quote: 'The competent programmer is fully aware of the strictly limited size of his own skull.', author: 'Edsger W. Dijkstra' },
+    { quote: 'If you can’t explain it simply, you don’t understand it well enough.', author: 'Albert Einstein' },
+    { quote: 'The advance of technology is based on making it fit in so that you don’t really even notice it, so it’s part of everyday life.', author: 'Bill Gates' },
+    { quote: 'Never trust a computer you can’t throw out a window.', author: 'Steve Wozniak' },
+    { quote: 'That’s the thing about people who think they hate computers. What they really hate is lousy programmers.', author: 'Larry Niven' },
+    { quote: 'It is practically impossible to teach good programming to students that have had prior exposure to BASIC.', author: 'Edsger W. Dijkstra' },
+    { quote: 'The trouble with the world is that the stupid are cocksure and the intelligent are full of doubt.', author: 'Bertrand Russell' },
+    { quote: 'What one programmer can do in one month, two programmers can do in two months.', author: 'Frederick P. Brooks Jr.' },
+    { quote: 'Adding manpower to a late software project makes it later.', author: 'Frederick P. Brooks Jr.' },
+    { quote: 'Documentation is a love letter that you write to your future self.', author: 'Damian Conway' },
+    { quote: 'Design and programming are human activities; forget that and all is lost.', author: 'Bjarne Stroustrup' },
+    { quote: 'C makes it easy to shoot yourself in the foot; C++ makes it harder, but when you do it blows your whole leg off.', author: 'Bjarne Stroustrup' },
+    { quote: 'There are two ways to write error-free programs; only the third one works.', author: 'Alan J. Perlis' },
+    { quote: 'Fools ignore complexity. Pragmatists suffer it. Some can avoid it. Geniuses remove it.', author: 'Alan J. Perlis' },
+    { quote: 'A program that produces incorrect results twice as fast is infinitely slower.', author: 'John Osterhout' },
+];

From baef41bb9801a05a24cc0410f9ab598185abe209 Mon Sep 17 00:00:00 2001
From: rahul-aot <rahul.ap@aot-technologies.com>
Date: Thu, 2 Jul 2026 03:44:04 -0700
Subject: [PATCH 6/8] fix: make command arguments case-insensitive for improved
 usability

---
 src/components/Terminal/commands.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Terminal/commands.ts b/src/components/Terminal/commands.ts
index b738d21..998f057 100644
--- a/src/components/Terminal/commands.ts
+++ b/src/components/Terminal/commands.ts
@@ -204,8 +204,8 @@ export const COMMANDS: CommandDef[] = [
         handler: (args) => {
             const target = args[0];
             if (!target) return React.createElement('p', { className: 'out-error' }, 'Usage: open <n|github|linkedin>');
-            if (target === 'github') return opening('GitHub', resumeData.contact.github);
-            if (target === 'linkedin') return opening('LinkedIn', resumeData.contact.linkedin);
+            if (target.toLowerCase() === 'github') return opening('GitHub', resumeData.contact.github);
+            if (target.toLowerCase() === 'linkedin') return opening('LinkedIn', resumeData.contact.linkedin);
             const { url, title } = resolveProjectUrl(target);
             if (!url) return React.createElement('p', { className: 'out-error' }, `No project found for "${target}"`);
             return opening(title ?? target, url);
@@ -308,7 +308,7 @@ export const COMMANDS: CommandDef[] = [
         handler: (args) => {
             const file = args[0];
             if (!file) return React.createElement('p', { className: 'out-error' }, 'Usage: cat <file>');
-            const contentFn = resolveVirtualFile(file);
+            const contentFn = resolveVirtualFile(file.toLowerCase());
             if (!contentFn) return React.createElement('p', { className: 'out-error' }, `cat: ${file}: No such file or directory`);
             return contentFn();
         },
@@ -351,7 +351,7 @@ export function runCommand(input: string, ctx: CommandContext): CommandOutput {
     const [name, ...args] = input.trim().split(/\s+/);
     if (!name) return null;
 
-    if (name === 'sudo' && args.join(' ') === 'hire rahul') {
+    if (name.toLowerCase() === 'sudo' && args.join(' ').toLowerCase() === 'hire rahul') {
         return React.createElement(SudoHire);
     }
 

From a73a69ff945311520d9278ef4beda0e5b2a28fc2 Mon Sep 17 00:00:00 2001
From: rahul-aot <rahul.ap@aot-technologies.com>
Date: Thu, 2 Jul 2026 04:51:57 -0700
Subject: [PATCH 7/8] feat: implement portfolio view and mode switch
 functionality in the app

---
 src/App.tsx                                   |  15 +-
 src/components/ModeSwitch/ModeSwitch.scss     |  59 ++++
 src/components/ModeSwitch/ModeSwitch.tsx      |  37 +++
 .../PortfolioView/PortfolioView.scss          | 271 ++++++++++++++++++
 .../PortfolioView/PortfolioView.tsx           | 132 +++++++++
 src/components/Terminal/Terminal.tsx          |  10 +-
 src/components/Terminal/commands.ts           |  10 +
 src/context/ThemeContext.tsx                  |   2 +
 src/data/resume.ts                            |  12 +
 9 files changed, 544 insertions(+), 4 deletions(-)
 create mode 100644 src/components/ModeSwitch/ModeSwitch.scss
 create mode 100644 src/components/ModeSwitch/ModeSwitch.tsx
 create mode 100644 src/components/PortfolioView/PortfolioView.scss
 create mode 100644 src/components/PortfolioView/PortfolioView.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 84e881b..dae1f34 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,10 +3,13 @@ import { AnimatePresence } from 'framer-motion';
 import { ThemeProvider } from './context/ThemeContext';
 import LoadingScreen from './components/LoadingScreen/LoadingScreen';
 import Terminal from './components/Terminal/Terminal';
+import PortfolioView from './components/PortfolioView/PortfolioView';
+import ModeSwitch, { ViewMode } from './components/ModeSwitch/ModeSwitch';
 import './styles/global.scss';
 
 const App: React.FC = () => {
     const [loading, setLoading] = useState(true);
+    const [view, setView] = useState<ViewMode>('terminal');
     const handleComplete = useCallback(() => setLoading(false), []);
 
     return (
@@ -19,7 +22,17 @@ const App: React.FC = () => {
                 )}
             </AnimatePresence>
 
-            {!loading && <Terminal />}
+            {!loading && (
+                <>
+                    <ModeSwitch mode={view} onChange={setView} />
+                    <div style={{ display: view === 'terminal' ? 'contents' : 'none' }}>
+                        <Terminal onSwitchToGui={() => setView('gui')} />
+                    </div>
+                    <div style={{ display: view === 'gui' ? 'contents' : 'none' }}>
+                        <PortfolioView />
+                    </div>
+                </>
+            )}
         </ThemeProvider>
     );
 };
diff --git a/src/components/ModeSwitch/ModeSwitch.scss b/src/components/ModeSwitch/ModeSwitch.scss
new file mode 100644
index 0000000..6ed86cd
--- /dev/null
+++ b/src/components/ModeSwitch/ModeSwitch.scss
@@ -0,0 +1,59 @@
+.mode-switch {
+    position: fixed;
+    top: 14px;
+    right: 14px;
+    z-index: 30;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: stretch;
+    padding: 3px;
+    background: var(--glass-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 999px;
+    backdrop-filter: blur(var(--glass-blur, 0px));
+    font-family: var(--font-mono);
+}
+
+.mode-switch-option {
+    position: relative;
+    z-index: 1;
+    padding: 6px 14px;
+    border: none;
+    background: transparent;
+    border-radius: 999px;
+    color: var(--muted);
+    font-family: inherit;
+    font-size: 0.72rem;
+    letter-spacing: 0.02em;
+    cursor: pointer;
+    transition: color 0.2s ease;
+    white-space: nowrap;
+
+    &.is-active {
+        color: var(--on-primary, var(--bg));
+    }
+
+    &:hover:not(.is-active) {
+        color: var(--fg);
+    }
+}
+
+.mode-switch-thumb {
+    position: absolute;
+    top: 3px;
+    bottom: 3px;
+    left: 3px;
+    width: calc(50% - 3px);
+    background: var(--primary);
+    border-radius: 999px;
+    box-shadow: 0 0 12px 0 color-mix(in srgb, var(--primary) 50%, transparent);
+    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &.is-left {
+        transform: translateX(0);
+    }
+
+    &.is-right {
+        transform: translateX(100%);
+    }
+}
diff --git a/src/components/ModeSwitch/ModeSwitch.tsx b/src/components/ModeSwitch/ModeSwitch.tsx
new file mode 100644
index 0000000..14c40f7
--- /dev/null
+++ b/src/components/ModeSwitch/ModeSwitch.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import './ModeSwitch.scss';
+
+export type ViewMode = 'terminal' | 'gui';
+
+interface ModeSwitchProps {
+    mode: ViewMode;
+    onChange: (mode: ViewMode) => void;
+}
+
+const ModeSwitch: React.FC<ModeSwitchProps> = ({ mode, onChange }) => {
+    return (
+        <div className="mode-switch" role="tablist" aria-label="View mode">
+            <button
+                type="button"
+                role="tab"
+                aria-selected={mode === 'gui'}
+                className={`mode-switch-option ${mode === 'gui' ? 'is-active' : ''}`}
+                onClick={() => onChange('gui')}
+            >
+                Website
+            </button>
+            <button
+                type="button"
+                role="tab"
+                aria-selected={mode === 'terminal'}
+                className={`mode-switch-option ${mode === 'terminal' ? 'is-active' : ''}`}
+                onClick={() => onChange('terminal')}
+            >
+                Terminal
+            </button>
+            <div className={`mode-switch-thumb ${mode === 'terminal' ? 'is-right' : 'is-left'}`} aria-hidden="true" />
+        </div>
+    );
+};
+
+export default ModeSwitch;
diff --git a/src/components/PortfolioView/PortfolioView.scss b/src/components/PortfolioView/PortfolioView.scss
new file mode 100644
index 0000000..8e1a1f8
--- /dev/null
+++ b/src/components/PortfolioView/PortfolioView.scss
@@ -0,0 +1,271 @@
+.portfolio {
+    position: relative;
+    height: 100dvh;
+    width: 100%;
+    background-color: var(--bg);
+    background-image: var(--bg-gradient);
+    background-size: var(--bg-size, auto);
+    color: var(--fg);
+    font-family: var(--font-main);
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.portfolio-theme-toggle {
+    position: fixed;
+    top: 14px;
+    left: 14px;
+    z-index: 30;
+    padding: 6px 14px;
+    background: var(--glass-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 999px;
+    color: var(--muted);
+    font-family: var(--font-mono);
+    font-size: 0.72rem;
+    text-transform: capitalize;
+    letter-spacing: 0.02em;
+    cursor: pointer;
+    transition: color 0.15s ease, border-color 0.15s ease;
+
+    &:hover {
+        color: var(--primary);
+        border-color: var(--primary);
+    }
+}
+
+.portfolio-scroll {
+    max-width: 860px;
+    margin: 0 auto;
+    padding: clamp(56px, 8vw, 88px) clamp(16px, 4vw, 40px) 90px;
+}
+
+.portfolio-hero {
+    margin-bottom: 52px;
+
+    h1 {
+        font-size: clamp(2rem, 4.5vw, 2.9rem);
+        font-weight: 700;
+        color: var(--primary);
+        letter-spacing: -0.01em;
+        margin-bottom: 8px;
+    }
+}
+
+.portfolio-role {
+    color: var(--accent);
+    font-weight: 600;
+    font-size: 1rem;
+    margin-bottom: 14px;
+}
+
+.portfolio-bio {
+    max-width: 60ch;
+    line-height: 1.65;
+    margin-bottom: 8px;
+}
+
+.portfolio-muted {
+    color: var(--muted);
+}
+
+.portfolio-section {
+    margin-bottom: 48px;
+
+    h2 {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        font-size: 0.72rem;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 2.5px;
+        color: var(--accent);
+        margin-bottom: 20px;
+
+        &::after {
+            content: '';
+            flex: 1;
+            height: 1px;
+            background: linear-gradient(90deg, var(--border-color), transparent);
+        }
+    }
+}
+
+.portfolio-skills {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 24px 28px;
+}
+
+.portfolio-skill-group {
+    h3 {
+        font-size: 0.82rem;
+        font-weight: 600;
+        margin-bottom: 10px;
+        color: var(--fg);
+    }
+}
+
+.portfolio-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+.portfolio-tag {
+    padding: 4px 12px;
+    background: var(--glass-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 999px;
+    font-size: 0.75rem;
+    color: var(--muted);
+    transition: color 0.15s ease, border-color 0.15s ease;
+
+    &:hover {
+        color: var(--fg);
+        border-color: var(--accent);
+    }
+}
+
+.portfolio-card {
+    padding: 18px 20px;
+    margin-bottom: 14px;
+    background: var(--glass-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    transition: border-color 0.2s ease, transform 0.2s ease;
+
+    > * + * {
+        margin-top: 10px;
+    }
+
+    &:hover {
+        border-color: var(--accent);
+        transform: translateY(-2px);
+    }
+}
+
+.portfolio-card-header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+    flex-wrap: wrap;
+
+    h3 {
+        font-size: 0.95rem;
+        font-weight: 600;
+    }
+
+    a {
+        color: var(--primary);
+        text-decoration: none;
+        font-size: 0.8rem;
+        white-space: nowrap;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+}
+
+.portfolio-subtitle {
+    color: var(--muted);
+    font-size: 0.9rem;
+}
+
+.portfolio-card-summary {
+    color: var(--muted);
+    line-height: 1.55;
+    font-size: 0.88rem;
+}
+
+.portfolio-card ul {
+    margin: 0;
+    padding-left: 18px;
+
+    li {
+        margin-bottom: 5px;
+        color: var(--muted);
+        line-height: 1.55;
+        font-size: 0.9rem;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+}
+
+.portfolio-projects {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    gap: 14px;
+
+    .portfolio-card {
+        margin-bottom: 0;
+    }
+}
+
+.portfolio-contact-section {
+    margin-bottom: 0;
+    padding-top: 8px;
+}
+
+.portfolio-contact-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 24px;
+    padding: 28px;
+    background: var(--glass-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 14px;
+}
+
+.portfolio-contact-item {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    a, span:not(.portfolio-contact-label) {
+        color: var(--fg);
+        text-decoration: none;
+        font-size: 0.92rem;
+    }
+
+    a {
+        color: var(--primary);
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+}
+
+.portfolio-contact-label {
+    font-size: 0.68rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    color: var(--muted);
+}
+
+.portfolio-social-links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+
+    a {
+        padding: 4px 12px;
+        background: transparent;
+        border: 1px solid var(--border-color);
+        border-radius: 999px;
+        font-size: 0.8rem;
+        transition: border-color 0.15s ease, color 0.15s ease;
+
+        &:hover {
+            border-color: var(--primary);
+            text-decoration: none;
+        }
+    }
+}
diff --git a/src/components/PortfolioView/PortfolioView.tsx b/src/components/PortfolioView/PortfolioView.tsx
new file mode 100644
index 0000000..440f084
--- /dev/null
+++ b/src/components/PortfolioView/PortfolioView.tsx
@@ -0,0 +1,132 @@
+import React, { useCallback } from 'react';
+import { resumeData } from '../../data/resume';
+import { useTheme, THEME_ORDER } from '../../context/ThemeContext';
+import './PortfolioView.scss';
+
+const SKILL_LABELS: Record<string, string> = {
+    frontend: 'Frontend',
+    backend: 'Backend',
+    state: 'State Management',
+    ai_tools: 'AI Tools',
+    ai: 'AI',
+    tools: 'Tools',
+    realtime: 'Realtime',
+    design: 'Design',
+};
+
+const PortfolioView: React.FC = () => {
+    const { theme, setTheme } = useTheme();
+
+    const cycleTheme = useCallback(() => {
+        const next = THEME_ORDER[(THEME_ORDER.indexOf(theme) + 1) % THEME_ORDER.length];
+        setTheme(next);
+    }, [theme, setTheme]);
+
+    return (
+        <div className="portfolio">
+            <button type="button" className="portfolio-theme-toggle" onClick={cycleTheme}>
+                {theme}
+            </button>
+
+            <div className="portfolio-scroll">
+                <header className="portfolio-hero">
+                    <h1>{resumeData.name}</h1>
+                    <p className="portfolio-role">{resumeData.hero.role1} · {resumeData.hero.role2}</p>
+                    <p className="portfolio-bio">{resumeData.hero.bio}</p>
+                    <p className="portfolio-muted">{resumeData.location}</p>
+                </header>
+
+                <section className="portfolio-section">
+                    <h2>Skills</h2>
+                    <div className="portfolio-skills">
+                        {Object.entries(resumeData.skills).map(([category, items]) => (
+                            <div className="portfolio-skill-group" key={category}>
+                                <h3>{SKILL_LABELS[category] ?? category.replace(/_/g, ' ')}</h3>
+                                <div className="portfolio-tags">
+                                    {(items as string[]).map(item => (
+                                        <span className="portfolio-tag" key={item}>{item}</span>
+                                    ))}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </section>
+
+                <section className="portfolio-section">
+                    <h2>Experience</h2>
+                    {resumeData.experience.map(exp => (
+                        <div className="portfolio-card" key={exp.company}>
+                            <div className="portfolio-card-header">
+                                <h3>{exp.role} · {exp.company}</h3>
+                                <span className="portfolio-muted">{exp.year}</span>
+                            </div>
+                            <ul>
+                                {exp.description.map(line => (
+                                    <li key={line}>{line}</li>
+                                ))}
+                            </ul>
+                        </div>
+                    ))}
+                </section>
+
+                <section className="portfolio-section">
+                    <h2>Projects</h2>
+                    <div className="portfolio-projects">
+                        {resumeData.projects.map(p => (
+                            <div className="portfolio-card" key={p.title}>
+                                <div className="portfolio-card-header">
+                                    <h3>{p.title}</h3>
+                                    <a href={p.link ?? p.github} target="_blank" rel="noopener noreferrer">View →</a>
+                                </div>
+                                <p className="portfolio-subtitle">{p.subtitle}</p>
+                                <p className="portfolio-card-summary">{p.summary}</p>
+                                <div className="portfolio-tags">
+                                    {p.tech.map(t => (
+                                        <span className="portfolio-tag" key={t}>{t}</span>
+                                    ))}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </section>
+
+                <section className="portfolio-section">
+                    <h2>Education</h2>
+                    {resumeData.education.map(edu => (
+                        <div className="portfolio-card" key={edu.institution}>
+                            <div className="portfolio-card-header">
+                                <h3>{edu.degree}</h3>
+                                <span className="portfolio-muted">{edu.year}</span>
+                            </div>
+                            <p className="portfolio-muted">{edu.institution}</p>
+                        </div>
+                    ))}
+                </section>
+
+                <section className="portfolio-section portfolio-contact-section">
+                    <h2>Contact</h2>
+                    <div className="portfolio-contact-grid">
+                        <div className="portfolio-contact-item">
+                            <span className="portfolio-contact-label">Email</span>
+                            <a href={`mailto:${resumeData.contact.email}`}>{resumeData.contact.email}</a>
+                        </div>
+                        <div className="portfolio-contact-item">
+                            <span className="portfolio-contact-label">Phone</span>
+                            <span>{resumeData.contact.phone}</span>
+                        </div>
+                        <div className="portfolio-contact-item">
+                            <span className="portfolio-contact-label">Social</span>
+                            <div className="portfolio-social-links">
+                                <a href={resumeData.contact.github} target="_blank" rel="noopener noreferrer">GitHub</a>
+                                <a href={resumeData.contact.linkedin} target="_blank" rel="noopener noreferrer">LinkedIn</a>
+                                <a href={resumeData.contact.cv} target="_blank" rel="noopener noreferrer">Resume</a>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </div>
+        </div>
+    );
+};
+
+export default PortfolioView;
diff --git a/src/components/Terminal/Terminal.tsx b/src/components/Terminal/Terminal.tsx
index bbeba17..fac3e7f 100644
--- a/src/components/Terminal/Terminal.tsx
+++ b/src/components/Terminal/Terminal.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useTheme, Theme } from '../../context/ThemeContext';
+import { useTheme, THEME_ORDER } from '../../context/ThemeContext';
 import { runCommand, COMMAND_NAMES, OPEN_TARGETS, CommandOutput } from './commands';
 import './Terminal.scss';
 
@@ -9,7 +9,6 @@ interface LineEntry {
     output: CommandOutput;
 }
 
-const THEME_ORDER: Theme[] = ['dark', 'neon', 'pastel', 'light'];
 const PROMPT = 'guest@rahulap:~$';
 
 let idCounter = 0;
@@ -39,7 +38,11 @@ const formatLastLogin = () => {
     return `${get('month')} ${get('day')} ${get('year')} ${get('hour')}:${get('minute')} IST`;
 };
 
-const Terminal: React.FC = () => {
+interface TerminalProps {
+    onSwitchToGui: () => void;
+}
+
+const Terminal: React.FC<TerminalProps> = ({ onSwitchToGui }) => {
     const { theme, setTheme } = useTheme();
     const [lines, setLines] = useState<LineEntry[]>([]);
     const [input, setInput] = useState('');
@@ -83,6 +86,7 @@ const Terminal: React.FC = () => {
                 cycleTheme,
                 clear: () => setLines([]),
                 triggerMatrix,
+                switchToGui: onSwitchToGui,
             });
             setLines(ls => [...ls, { id: idCounter++, command, output }]);
         }
diff --git a/src/components/Terminal/commands.ts b/src/components/Terminal/commands.ts
index 998f057..ed9ce50 100644
--- a/src/components/Terminal/commands.ts
+++ b/src/components/Terminal/commands.ts
@@ -8,6 +8,7 @@ export interface CommandContext {
     cycleTheme: () => void;
     clear: () => void;
     triggerMatrix: () => void;
+    switchToGui: () => void;
 }
 
 export type CommandOutput = React.ReactNode;
@@ -248,6 +249,15 @@ export const COMMANDS: CommandDef[] = [
         category: 'Terminal',
         handler: (_args, ctx) => { ctx.clear(); return null; },
     },
+    {
+        name: 'gui',
+        description: 'Switch to minimal UI view',
+        category: 'Terminal',
+        handler: (_args, ctx) => {
+            ctx.switchToGui();
+            return null;
+        },
+    },
     {
         name: 'whoami',
         description: 'Hidden command',
diff --git a/src/context/ThemeContext.tsx b/src/context/ThemeContext.tsx
index 3ac742b..6bf3809 100644
--- a/src/context/ThemeContext.tsx
+++ b/src/context/ThemeContext.tsx
@@ -2,6 +2,8 @@ import { createContext, useContext, useEffect, useState, ReactNode, FC } from 'r
 
 export type Theme = 'light' | 'dark' | 'neon' | 'pastel';
 
+export const THEME_ORDER: Theme[] = ['dark', 'neon', 'pastel', 'light'];
+
 interface ThemeContextType {
     theme: Theme;
     setTheme: (theme: Theme) => void;
diff --git a/src/data/resume.ts b/src/data/resume.ts
index 61d9bcf..41dca02 100644
--- a/src/data/resume.ts
+++ b/src/data/resume.ts
@@ -58,6 +58,7 @@ export const resumeData = {
     {
       title: "EnvScope",
       subtitle: "Context-Aware Frontend Security & Secret Detection Engine",
+      summary: "A Chrome extension that scans live JavaScript bundles for exposed secrets, combining regex and AST analysis to catch high-risk leaks with low false positives.",
       tech: [
         "JavaScript",
         "TypeScript",
@@ -80,6 +81,7 @@ export const resumeData = {
     {
       title: "TestPilot",
       subtitle: "Intelligent Bug Detection & Telemetry Chrome Extension",
+      summary: "A silent telemetry layer for web apps that captures console errors, failed requests, and performance metrics in real time, with no backend required.",
       tech: [
         "JavaScript",
         "Chrome Extensions API",
@@ -98,6 +100,7 @@ export const resumeData = {
     {
       title: "AskSQLAI",
       subtitle: "Schema-Aware Natural Language to SQL Generation Engine",
+      summary: "Converts plain-English questions into safe, executable SQL by introspecting the live database schema, with layered guardrails against hallucinated tables or columns.",
       tech: [
         "React (Vite)",
         "TypeScript",
@@ -120,6 +123,7 @@ export const resumeData = {
     {
       title: "MeetlyAI",
       subtitle: "AI-Powered Meeting Notes, Decisions & Action Items Generator",
+      summary: "Turns raw meeting transcripts into structured summaries, decisions, and owned action items using strict JSON-schema-enforced prompting.",
       tech: [
         "React (Vite)",
         "TypeScript",
@@ -139,6 +143,7 @@ export const resumeData = {
     {
       title: "SearchlyAI",
       subtitle: "Session-Based AI Search Engine using RAG over Documents & Web",
+      summary: "A full RAG pipeline for semantic Q&A over uploaded documents and web pages, using FAISS vector search and Gemini responses grounded strictly in retrieved context.",
       tech: [
         "React (Vite)",
         "TypeScript",
@@ -161,6 +166,7 @@ export const resumeData = {
     {
       title: "SemanticFeed",
       subtitle: "AI-Powered Tech News Aggregation & Deduplication Platform",
+      summary: "Aggregates tech news from multiple sources, deduplicates related articles into unified stories, and generates concise AI summaries via scheduled background jobs.",
       tech: [
         "React (Vite)",
         "TypeScript",
@@ -184,6 +190,7 @@ export const resumeData = {
     {
       title: "QueryDoc",
       subtitle: "Retrieval-Augmented Document Q&A System",
+      summary: "A secure RAG chat system for a single uploaded PDF, supporting multi-question conversations with session-isolated vector storage and no stored credentials.",
       tech: [
         "React (Vite)",
         "TypeScript",
@@ -205,6 +212,7 @@ export const resumeData = {
     {
       title: "AI-Powered SOAP Note Generator",
       subtitle: "Multi-Agent Medical Assistant",
+      summary: "A multi-agent pipeline that extracts structured clinical data from patient conversations and generates guideline-backed, safety-checked SOAP notes.",
       tech: ["Python", "Google ADK", "Gemini 2.5 Flash Lite", "Google Search Tool", "InMemoryRunner"],
       description: [
         "Multi-agent pipeline for medical intake and SOAP note creation",
@@ -218,6 +226,7 @@ export const resumeData = {
     {
       title: "Readme Creator",
       subtitle: "AI-Powered README Generator",
+      summary: "A web app for building structured, professional READMEs from templates, with live markdown preview and Gemini-powered content optimization.",
       tech: ["React", "Redux", "Gemini", "Material-UI"],
       description: [
         "Web app for creating structured, professional README files",
@@ -230,6 +239,7 @@ export const resumeData = {
     {
       title: "Gemini PDF Analyzer",
       subtitle: "Streamlit + GenAI Resume Parsing Tool",
+      summary: "Extracts and parses resume PDFs into structured JSON, then generates a polished first-person summary using a selectable Gemini model.",
       tech: ["Streamlit", "Python", "Gemini 1.5 Flash/Pro"],
       description: [
         "Extracts resume text using PyPDF2",
@@ -243,6 +253,7 @@ export const resumeData = {
     {
       title: "EasyDiagno",
       subtitle: "AI-Powered Symptom Checker",
+      summary: "A cross-platform symptom-checking app with a chatbot interface, ML-based diagnosis, and a hospital locator with specialization filters.",
       tech: ["Flutter", "Firebase", "Python", "ML"],
       description: [
         "AI-powered symptom checker with chatbot interface",
@@ -256,6 +267,7 @@ export const resumeData = {
     {
       title: "Streamify",
       subtitle: "Full Stack Chat App",
+      summary: "A full-stack real-time messaging and video chat app supporting 100+ concurrent users, with screen sharing and image sharing built in.",
       tech: ["React", "Express", "WebRTC"],
       description: [
         "Real-time messaging + video chat",

From f82fa212694d7a3f36304cc35318a5a044d57f98 Mon Sep 17 00:00:00 2001
From: rahul-aot <rahul.ap@aot-technologies.com>
Date: Thu, 2 Jul 2026 04:55:37 -0700
Subject: [PATCH 8/8] feat: update portfolio data and enhance resume structure
 with new projects and experience details

---
 public/.well-known/ai-plugin.json |  6 +--
 public/data/projects.json         | 86 +++++++++++++++++++++++++++++++
 public/data/resume.json           | 62 ++++++++++++++++++++++
 public/openapi.yaml               | 53 +++++++++++++++++++
 public/sitemap.xml                | 26 +---------
 vercel.json                       | 11 ----
 6 files changed, 205 insertions(+), 39 deletions(-)
 create mode 100644 public/data/projects.json
 create mode 100644 public/data/resume.json

diff --git a/public/.well-known/ai-plugin.json b/public/.well-known/ai-plugin.json
index a109886..6712c0b 100644
--- a/public/.well-known/ai-plugin.json
+++ b/public/.well-known/ai-plugin.json
@@ -12,7 +12,7 @@
     "url": "https://rahulap.vercel.app/openapi.yaml",
     "is_user_authenticated": false
   },
-  "logo_url": "https://rahulap.vercel.app/favicon-192x192.png",
-  "contact_email": "rahulap.js@example.com",
-  "legal_info_url": "https://rahulap.vercel.app/contact"
+  "logo_url": "https://rahulap.vercel.app/favicon192.png",
+  "contact_email": "itsrahulap@gmail.com",
+  "legal_info_url": "https://rahulap.vercel.app/"
 }
\ No newline at end of file
diff --git a/public/data/projects.json b/public/data/projects.json
new file mode 100644
index 0000000..c8d8e60
--- /dev/null
+++ b/public/data/projects.json
@@ -0,0 +1,86 @@
+[
+  {
+    "name": "EnvScope",
+    "subtitle": "Context-Aware Frontend Security & Secret Detection Engine",
+    "description": "A Chrome extension that scans live JavaScript bundles for exposed secrets, combining regex and AST analysis to catch high-risk leaks with low false positives.",
+    "tech": ["JavaScript", "TypeScript", "Chrome Extensions API", "AST (Acorn)", "Regex Engine", "Web APIs"],
+    "url": "https://github.com/itsrahulap/EnvScope"
+  },
+  {
+    "name": "TestPilot",
+    "subtitle": "Intelligent Bug Detection & Telemetry Chrome Extension",
+    "description": "A silent telemetry layer for web apps that captures console errors, failed requests, and performance metrics in real time, with no backend required.",
+    "tech": ["JavaScript", "Chrome Extensions API", "Web APIs", "Performance API"],
+    "url": "https://github.com/itsrahulap/TestPilot"
+  },
+  {
+    "name": "AskSQLAI",
+    "subtitle": "Schema-Aware Natural Language to SQL Generation Engine",
+    "description": "Converts plain-English questions into safe, executable SQL by introspecting the live database schema, with layered guardrails against hallucinated tables or columns.",
+    "tech": ["React (Vite)", "TypeScript", "FastAPI", "PostgreSQL", "Gemini 2.5 Flash", "Gemini (Google ADK)", "Python"],
+    "url": "https://github.com/itsrahulap/AskSQLAI"
+  },
+  {
+    "name": "MeetlyAI",
+    "subtitle": "AI-Powered Meeting Notes, Decisions & Action Items Generator",
+    "description": "Turns raw meeting transcripts into structured summaries, decisions, and owned action items using strict JSON-schema-enforced prompting.",
+    "tech": ["React (Vite)", "TypeScript", "FastAPI", "Gemini 2.5 Flash", "Gemini (Google ADK)", "Python"],
+    "url": "https://github.com/itsrahulap/MeetlyAI"
+  },
+  {
+    "name": "SearchlyAI",
+    "subtitle": "Session-Based AI Search Engine using RAG over Documents & Web",
+    "description": "A full RAG pipeline for semantic Q&A over uploaded documents and web pages, using FAISS vector search and Gemini responses grounded strictly in retrieved context.",
+    "tech": ["React (Vite)", "TypeScript", "FastAPI", "FAISS", "Gemini 2.5 Flash", "Gemini (Google ADK)", "Python"],
+    "url": "https://github.com/itsrahulap/SearchlyAI"
+  },
+  {
+    "name": "SemanticFeed",
+    "subtitle": "AI-Powered Tech News Aggregation & Deduplication Platform",
+    "description": "Aggregates tech news from multiple sources, deduplicates related articles into unified stories, and generates concise AI summaries via scheduled background jobs.",
+    "tech": ["React (Vite)", "TypeScript", "Redux", "FastAPI", "PostgreSQL", "Gemini (Google ADK)", "Gemini 2.5 Flash", "Python"],
+    "url": "https://github.com/itsrahulap/SemanticFeed"
+  },
+  {
+    "name": "QueryDoc",
+    "subtitle": "Retrieval-Augmented Document Q&A System",
+    "description": "A secure RAG chat system for a single uploaded PDF, supporting multi-question conversations with session-isolated vector storage and no stored credentials.",
+    "tech": ["React (Vite)", "TypeScript", "FastAPI", "FAISS", "Gemini (Google ADK)", "Python"],
+    "url": "https://github.com/itsrahulap/QueryDoc"
+  },
+  {
+    "name": "AI-Powered SOAP Note Generator",
+    "subtitle": "Multi-Agent Medical Assistant",
+    "description": "A multi-agent pipeline that extracts structured clinical data from patient conversations and generates guideline-backed, safety-checked SOAP notes.",
+    "tech": ["Python", "Google ADK", "Gemini 2.5 Flash Lite", "Google Search Tool", "InMemoryRunner"],
+    "url": "https://www.kaggle.com/code/itsrahulap/multi-agent-medical-intake-soap-note-generator"
+  },
+  {
+    "name": "Readme Creator",
+    "subtitle": "AI-Powered README Generator",
+    "description": "A web app for building structured, professional READMEs from templates, with live markdown preview and Gemini-powered content optimization.",
+    "tech": ["React", "Redux", "Gemini", "Material-UI"],
+    "url": "https://github.com/itsrahulap/readmeGenerator"
+  },
+  {
+    "name": "Gemini PDF Analyzer",
+    "subtitle": "Streamlit + GenAI Resume Parsing Tool",
+    "description": "Extracts and parses resume PDFs into structured JSON, then generates a polished first-person summary using a selectable Gemini model.",
+    "tech": ["Streamlit", "Python", "Gemini 1.5 Flash/Pro"],
+    "url": "https://github.com/itsrahulap/ResumeParserAI"
+  },
+  {
+    "name": "EasyDiagno",
+    "subtitle": "AI-Powered Symptom Checker",
+    "description": "A cross-platform symptom-checking app with a chatbot interface, ML-based diagnosis, and a hospital locator with specialization filters.",
+    "tech": ["Flutter", "Firebase", "Python", "ML"],
+    "url": "https://github.com/itsrahulap/EasyDiagno"
+  },
+  {
+    "name": "Streamify",
+    "subtitle": "Full Stack Chat App",
+    "description": "A full-stack real-time messaging and video chat app supporting 100+ concurrent users, with screen sharing and image sharing built in.",
+    "tech": ["React", "Express", "WebRTC"],
+    "url": "https://github.com/itsrahulap/streamify"
+  }
+]
diff --git a/public/data/resume.json b/public/data/resume.json
new file mode 100644
index 0000000..8508b43
--- /dev/null
+++ b/public/data/resume.json
@@ -0,0 +1,62 @@
+{
+  "basics": {
+    "name": "Rahul AP",
+    "label": "Software Engineer | Full-Stack & Generative AI Developer",
+    "location": "Kerala, India"
+  },
+  "contact": {
+    "email": "itsrahulap@gmail.com",
+    "linkedin": "https://linkedin.com/in/itsrahulap",
+    "github": "https://github.com/zccott",
+    "cv": "https://drive.google.com/file/d/1D4oUwmDywLL6vAoz3bP4P1gr9Emsp3ms/view?usp=sharing"
+  },
+  "education": [
+    {
+      "institution": "Kerala Government Polytechnic College",
+      "degree": "Diploma in Computer Engineering",
+      "year": "2021–2024"
+    }
+  ],
+  "experience": [
+    {
+      "company": "AOT Technologies",
+      "role": "Software Engineer",
+      "year": "2024–Present",
+      "description": [
+        "Worked across frontend + backend for Canadian healthcare platforms.",
+        "Angular + MUI + reusable UI components.",
+        "Integrated REST APIs for user onboarding & appointment systems.",
+        "Implemented NgRx/RxJS application-wide state.",
+        "AI fax automation using Python + OpenAI/Gemini + Temporal.",
+        "Real-time SOAP note tool using FastAPI + WebSockets + Twilio + Whisper."
+      ]
+    },
+    {
+      "company": "Nexus Technologies",
+      "role": "Intern",
+      "year": "2023–2024",
+      "description": [
+        "Healthcare mobile app (Find doctors by symptoms).",
+        "Designed UX/UI screens.",
+        "AI symptom analysis feature.",
+        "Flutter cross-platform development."
+      ]
+    }
+  ],
+  "skills": {
+    "frontend": ["React", "Angular", "TypeScript", "JavaScript (ES6+)", "SCSS", "HTML5", "CSS3"],
+    "backend": ["Node.js", "Express", "FastAPI", "Python", "PostgreSQL", "MongoDB", "REST APIs"],
+    "state": ["NgRx", "NGXS", "RxJS", "Redux Toolkit"],
+    "ai_tools": [
+      "GitHub Copilot",
+      "ChatGPT",
+      "Gemini CLI / AI Studio",
+      "Cloud Code (AI-assisted development)",
+      "Antigravity (AI dev tool)"
+    ],
+    "ai": ["OpenAI", "Gemini", "Google ADK", "LangChain", "Whisper", "LLM Prompt Engineering"],
+    "tools": ["Docker", "Temporal", "Git", "Cypress", "Postman", "PyPDF2", "BeautifulSoup"],
+    "realtime": ["WebSockets", "WebRTC", "Twilio"],
+    "design": ["Figma", "UI/UX"]
+  }
+}
diff --git a/public/openapi.yaml b/public/openapi.yaml
index b10e153..3b1abe9 100644
--- a/public/openapi.yaml
+++ b/public/openapi.yaml
@@ -40,6 +40,51 @@ components:
               type: string
             label:
               type: string
+            location:
+              type: string
+        contact:
+          type: object
+          properties:
+            email:
+              type: string
+            linkedin:
+              type: string
+            github:
+              type: string
+            cv:
+              type: string
+        education:
+          type: array
+          items:
+            type: object
+            properties:
+              institution:
+                type: string
+              degree:
+                type: string
+              year:
+                type: string
+        experience:
+          type: array
+          items:
+            type: object
+            properties:
+              company:
+                type: string
+              role:
+                type: string
+              year:
+                type: string
+              description:
+                type: array
+                items:
+                  type: string
+        skills:
+          type: object
+          additionalProperties:
+            type: array
+            items:
+              type: string
     getProjectsResponse:
       type: array
       items:
@@ -47,5 +92,13 @@ components:
         properties:
           name:
             type: string
+          subtitle:
+            type: string
           description:
+            type: string
+          tech:
+            type: array
+            items:
+              type: string
+          url:
             type: string
\ No newline at end of file
diff --git a/public/sitemap.xml b/public/sitemap.xml
index bede782..5478723 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -2,32 +2,8 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
     <loc>https://rahulap.vercel.app/</loc>
-    <lastmod>2025-11-28</lastmod>
+    <lastmod>2026-07-02</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
   </url>
-  <url>
-    <loc>https://rahulap.vercel.app/journey</loc>
-    <lastmod>2025-11-28</lastmod>
-    <changefreq>monthly</changefreq>
-    <priority>0.8</priority>
-  </url>
-  <url>
-    <loc>https://rahulap.vercel.app/skills</loc>
-    <lastmod>2025-11-28</lastmod>
-    <changefreq>monthly</changefreq>
-    <priority>0.8</priority>
-  </url>
-  <url>
-    <loc>https://rahulap.vercel.app/projects</loc>
-    <lastmod>2025-11-28</lastmod>
-    <changefreq>monthly</changefreq>
-    <priority>0.9</priority>
-  </url>
-  <url>
-    <loc>https://rahulap.vercel.app/contact</loc>
-    <lastmod>2025-11-28</lastmod>
-    <changefreq>yearly</changefreq>
-    <priority>0.5</priority>
-  </url>
 </urlset>
diff --git a/vercel.json b/vercel.json
index 76cadd1..29c0269 100644
--- a/vercel.json
+++ b/vercel.json
@@ -1,15 +1,4 @@
 {
-  "headers": [
-    {
-      "source": "/(.*)",
-      "headers": [
-        {
-          "key": "Last-Modified",
-          "value": "Sun, 23 Jun 2025 12:00:00 GMT"
-        }
-      ]
-    }
-  ],
   "rewrites": [
     {
       "source": "/(.*)",