Spaces:

Yash-js
/

undefined

Running

App Files Files Community

Yash-js commited on Oct 10, 2025

Commit

4040819

verified ·

1 Parent(s): 3fcc301

Create a full-stack developer portfolio website. like a hacker. use modern components or ui library for this

Browse files

Files changed (3) hide show

README.md +9 -5
index.html +823 -18
portfolio.html +590 -0

README.md CHANGED Viewed

@@ -1,10 +1,14 @@
 ---
-title: Undefined
-emoji: 😻
-colorFrom: gray
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: undefined
+colorFrom: pink
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,824 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>YearEndQuest Tracker</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            darkMode: ["class"],
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        },
+                        secondary: {
+                            50: '#faf7ff',
+                            100: '#f2e9ff',
+                            200: '#e4d4ff',
+                            300: '#d0b4ff',
+                            400: '#b990ff',
+                            500: '#a855f7',
+                            600: '#9333ea',
+                            700: '#7c3aed',
+                            800: '#6b21a8',
+                            900: '#581c87',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script src="https://unpkg.com/framer-motion@10.16.4/dist/framer-motion.js"></script>
+    <script src="https://unpkg.com/recharts/umd/Recharts.js"></script>
+    <script src="https://unpkg.com/lucide-react@0.263.1/dist/umd/lucide-react.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        * {
+            font-family: 'Inter', sans-serif;
+        }
+        .shadcn-button {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 0.375rem;
+            font-weight: 500;
+            transition: all 0.2s;
+            outline: none;
+        }
+        .shadcn-button:focus-visible {
+            outline: 2px solid rgb(14 165 233);
+            outline-offset: 2px;
+        }
+        .shadcn-button-primary {
+            background-color: rgb(14 165 233);
+            color: white;
+        }
+        .shadcn-button-primary:hover {
+            background-color: rgb(3 105 161);
+        }
+        .shadcn-button-secondary {
+            background-color: rgb(168 85 247);
+            color: white;
+        }
+        .shadcn-button-secondary:hover {
+            background-color: rgb(126 58 237);
+        }
+        .shadcn-input {
+            display: flex;
+            height: 2.5rem;
+            width: 100%;
+            border-radius: 0.375rem;
+            border: 1px solid rgb(229 231 235);
+            padding: 0.5rem 0.75rem;
+            font-size: 0.875rem;
+            transition: border-color 0.2s;
+        }
+        .shadcn-input:focus {
+            outline: none;
+            border-color: rgb(14 165 233);
+        }
+        .shadcn-card {
+            border-radius: 0.5rem;
+            border: 1px solid rgb(229 231 235);
+            background-color: white;
+            padding: 1.5rem;
+            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+        }
+        .dark .shadcn-card {
+            background-color: rgb(31 41 55);
+            border-color: rgb(55 65 81);
+        }
+        .dark .shadcn-input {
+            background-color: rgb(31 41 55);
+            border-color: rgb(55 65 81);
+            color: white;
+        }
+        .grid-square {
+            width: 1.25rem;
+            height: 1.25rem;
+            border-radius: 0.25rem;
+            margin: 0.125rem;
+        }
+        .fade-in {
+            animation: fadeIn 0.5s ease-in-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+        .scale-up {
+            animation: scaleUp 0.3s ease-out;
+        }
+        @keyframes scaleUp {
+            from { transform: scale(0.8); }
+            to { transform: scale(1); }
+        }
+        .progress-bar {
+            transition: width 0.5s ease-in-out;
+        }
+        .streak-badge {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.7); }
+            70% { box-shadow: 0 0 0 10px rgba(14, 165, 233, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); }
+        }
+        .completed-task {
+            text-decoration: line-through;
+            opacity: 0.7;
+            transition: all 0.3s ease;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-200">
+    <div id="root"></div>
+    <script type="text/babel">
+        const { useState, useEffect, useRef } = React;
+        const { motion, AnimatePresence } = FramerMotion;
+        const { LineChart, Line, BarChart, Bar, PieChart, Pie, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, Cell } = Recharts;
+        const { Check, Plus, X, Calendar, Target, BarChart3, Sun, Moon, Trophy, Flame } = LucideReact;
+        // Custom hook for localStorage
+        function useLocalStorage(key, initialValue) {
+            const [storedValue, setStoredValue] = useState(() => {
+                try {
+                    const item = window.localStorage.getItem(key);
+                    return item ? JSON.parse(item) : initialValue;
+                } catch (error) {
+                    console.error(error);
+                    return initialValue;
+                }
+            });
+            const setValue = (value) => {
+                try {
+                    const valueToStore = value instanceof Function ? value(storedValue) : value;
+                    setStoredValue(valueToStore);
+                    window.localStorage.setItem(key, JSON.stringify(valueToStore));
+                } catch (error) {
+                    console.error(error);
+                }
+            };
+            return [storedValue, setValue];
+        }
+        // Utility functions
+        const utils = {
+            getDaysRemaining: () => {
+                const now = new Date();
+                const endOfYear = new Date(now.getFullYear(), 11, 31, 23, 59, 59);
+                const diff = endOfYear - now;
+                const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+                const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+                const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+                const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+                return { days, hours, minutes, seconds, totalSeconds: diff / 1000 };
+            },
+            getYearProgress: () => {
+                const now = new Date();
+                const startOfYear = new Date(now.getFullYear(), 0, 1);
+                const endOfYear = new Date(now.getFullYear(), 11, 31, 23, 59, 59);
+                const total = endOfYear - startOfYear;
+                const elapsed = now - startOfYear;
+                return (elapsed / total) * 100;
+            },
+            getDaysInYear: () => {
+                const now = new Date();
+                const startOfYear = new Date(now.getFullYear(), 0, 1);
+                const endOfYear = new Date(now.getFullYear(), 11, 31, 23, 59, 59);
+                return Math.ceil((endOfYear - startOfYear) / (1000 * 60 * 60 * 24));
+            },
+            getDayOfYear: () => {
+                const now = new Date();
+                const start = new Date(now.getFullYear(), 0, 0);
+                const diff = now - start;
+                const oneDay = 1000 * 60 * 60 * 24;
+                return Math.floor(diff / oneDay);
+            },
+            formatDate: (date) => {
+                return date.toLocaleDateString('en-US', {
+                    weekday: 'short',
+                    year: 'numeric',
+                    month: 'short',
+                    day: 'numeric'
+                });
+            }
+        };
+        // Countdown component
+        function Countdown() {
+            const [timeLeft, setTimeLeft] = useState(utils.getDaysRemaining());
+            useEffect(() => {
+                const timer = setInterval(() => {
+                    setTimeLeft(utils.getDaysRemaining());
+                }, 1000);
+                return () => clearInterval(timer);
+            }, []);
+            return (
+                <div className="text-center mb-8">
+                    <h2 className="text-2xl font-bold mb-4">Time Until New Year</h2>
+                    <div className="flex justify-center space-x-4">
+                        <div className="bg-primary-100 dark:bg-primary-900 rounded-lg p-4 min-w-[80px]">
+                            <div className="text-3xl font-bold">{timeLeft.days}</div>
+                            <div className="text-sm">Days</div>
+                        </div>
+                        <div className="bg-primary-100 dark:bg-primary-900 rounded-lg p-4 min-w-[80px]">
+                            <div className="text-3xl font-bold">{timeLeft.hours}</div>
+                            <div className="text-sm">Hours</div>
+                        </div>
+                        <div className="bg-primary-100 dark:bg-primary-900 rounded-lg p-4 min-w-[80px]">
+                            <div className="text-3xl font-bold">{timeLeft.minutes}</div>
+                            <div className="text-sm">Minutes</div>
+                        </div>
+                        <div className="bg-primary-100 dark:bg-primary-900 rounded-lg p-4 min-w-[80px]">
+                            <div className="text-3xl font-bold">{timeLeft.seconds}</div>
+                            <div className="text-sm">Seconds</div>
+                        </div>
+                    </div>
+                </div>
+            );
+        }
+        // GitHub-style grid visualization
+        function YearGrid({ dailyTasks }) {
+            const daysInYear = utils.getDaysInYear();
+            const dayOfYear = utils.getDayOfYear();
+            const daysRemaining = daysInYear - dayOfYear;
+            const grid = [];
+            for (let i = 1; i <= daysInYear; i++) {
+                const isFuture = i > dayOfYear;
+                const isCompleted = dailyTasks.some(task =>
+                    task.completed && new Date(task.date).getDate() === new Date().getDate() &&
+                    new Date(task.date).getMonth() === new Date().getMonth() &&
+                    new Date(task.date).getFullYear() === new Date().getFullYear()
+                );
+                grid.push(
+                    <motion.div
+                        key={i}
+                        className={`grid-square ${isFuture ? 'bg-primary-300' : isCompleted ? 'bg-primary-600' : 'bg-gray-300 dark:bg-gray-600'}`}
+                        initial={{ opacity: 0, scale: 0.8 }}
+                        animate={{ opacity: 1, scale: 1 }}
+                        transition={{ delay: i * 0.002 }}
+                        title={`Day ${i}`}
+                    />
+                );
+            }
+            return (
+                <div className="mb-8">
+                    <h2 className="text-2xl font-bold mb-4">Year Progress</h2>
+                    <div className="flex flex-wrap justify-center max-w-3xl mx-auto">
+                        {grid}
+                    </div>
+                </div>
+            );
+        }
+        // Progress bar component
+        function ProgressBar() {
+            const [progress, setProgress] = useState(0);
+            useEffect(() => {
+                setProgress(utils.getYearProgress());
+            }, []);
+            return (
+                <div className="w-full bg-gray-200 rounded-full h-4 mb-8 dark:bg-gray-700">
+                    <motion.div
+                        className="progress-bar h-4 rounded-full bg-primary-500"
+                        initial={{ width: 0 }}
+                        animate={{ width: `${progress}%` }}
+                        transition={{ duration: 1, ease: "easeOut" }}
+                    />
+                    <div className="text-xs mt-1 text-right">{progress.toFixed(1)}% of year completed</div>
+                </div>
+            );
+        }
+        // Task management components
+        function TaskManager() {
+            const [dailyTasks, setDailyTasks] = useLocalStorage('dailyTasks', []);
+            const [yearlyGoals, setYearlyGoals] = useLocalStorage('yearlyGoals', []);
+            const [showAddDaily, setShowAddDaily] = useState(false);
+            const [showAddYearly, setShowAddYearly] = useState(false);
+            const [newDailyTask, setNewDailyTask] = useState('');
+            const [newYearlyGoal, setNewYearlyGoal] = useState('');
+            const addDailyTask = () => {
+                if (newDailyTask.trim()) {
+                    setDailyTasks([...dailyTasks, {
+                        id: Date.now(),
+                        text: newDailyTask,
+                        completed: false,
+                        date: new Date().toISOString(),
+                        streak: 0
+                    }]);
+                    setNewDailyTask('');
+                    setShowAddDaily(false);
+                }
+            };
+            const addYearlyGoal = () => {
+                if (newYearlyGoal.trim()) {
+                    setYearlyGoals([...yearlyGoals, {
+                        id: Date.now(),
+                        text: newYearlyGoal,
+                        completed: false
+                    }]);
+                    setNewYearlyGoal('');
+                    setShowAddYearly(false);
+                }
+            };
+            const toggleDailyTask = (id) => {
+                setDailyTasks(dailyTasks.map(task =>
+                    task.id === id ? { ...task, completed: !task.completed } : task
+                ));
+            };
+            const toggleYearlyGoal = (id) => {
+                setYearlyGoals(yearlyGoals.map(goal =>
+                    goal.id === id ? { ...goal, completed: !goal.completed } : goal
+                ));
+            };
+            const deleteDailyTask = (id) => {
+                setDailyTasks(dailyTasks.filter(task => task.id !== id));
+            };
+            const deleteYearlyGoal = (id) => {
+                setYearlyGoals(yearlyGoals.filter(goal => goal.id !== id));
+            };
+            // Calculate streak
+            const streak = dailyTasks.filter(task => {
+                const taskDate = new Date(task.date);
+                const today = new Date();
+                return task.completed && taskDate.toDateString() === today.toDateString();
+            }).length > 0 ? (parseInt(localStorage.getItem('streak') || 0)) : 0;
+            useEffect(() => {
+                // Check if we need to reset tasks for a new day
+                const lastReset = localStorage.getItem('lastReset');
+                const today = new Date().toDateString();
+                if (lastReset !== today) {
+                    // Reset daily tasks completion status
+                    setDailyTasks(prev => prev.map(task => ({ ...task, completed: false })));
+                    localStorage.setItem('lastReset', today);
+                    // Update streak
+                    const completedYesterday = dailyTasks.some(task => {
+                        const taskDate = new Date(task.date);
+                        const yesterday = new Date();
+                        yesterday.setDate(yesterday.getDate() - 1);
+                        return task.completed && taskDate.toDateString() === yesterday.toDateString();
+                    });
+                    if (completedYesterday) {
+                        const newStreak = streak + 1;
+                        localStorage.setItem('streak', newStreak);
+                    } else {
+                        localStorage.setItem('streak', 0);
+                    }
+                }
+            }, [dailyTasks, setDailyTasks, streak]);
+            return (
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
+                    {/* Daily Tasks */}
+                    <div className="shadcn-card">
+                        <div className="flex justify-between items-center mb-4">
+                            <h2 className="text-xl font-bold flex items-center">
+                                <Calendar className="mr-2" size={20} />
+                                Daily Goals
+                                {streak > 0 && (
+                                    <span className="streak-badge ml-2 bg-primary-100 text-primary-800 text-xs font-medium px-2.5 py-0.5 rounded-full dark:bg-primary-900 dark:text-primary-300 flex items-center">
+                                        <Flame size={12} className="mr-1" /> {streak} day streak
+                                    </span>
+                                )}
+                            </h2>
+                            <button
+                                className="shadcn-button shadcn-button-primary p-2"
+                                onClick={() => setShowAddDaily(true)}
+                            >
+                                <Plus size={16} />
+                            </button>
+                        </div>
+                        {showAddDaily && (
+                            <motion.div
+                                className="mb-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg"
+                                initial={{ opacity: 0, height: 0 }}
+                                animate={{ opacity: 1, height: 'auto' }}
+                                exit={{ opacity: 0, height: 0 }}
+                            >
+                                <input
+                                    type="text"
+                                    className="shadcn-input mb-2"
+                                    placeholder="Enter daily task"
+                                    value={newDailyTask}
+                                    onChange={(e) => setNewDailyTask(e.target.value)}
+                                    onKeyPress={(e) => e.key === 'Enter' && addDailyTask()}
+                                />
+                                <div className="flex space-x-2">
+                                    <button
+                                        className="shadcn-button shadcn-button-primary flex-1"
+                                        onClick={addDailyTask}
+                                    >
+                                        Add Task
+                                    </button>
+                                    <button
+                                        className="shadcn-button bg-gray-300 dark:bg-gray-600 flex-1"
+                                        onClick={() => setShowAddDaily(false)}
+                                    >
+                                        Cancel
+                                    </button>
+                                </div>
+                            </motion.div>
+                        )}
+                        <AnimatePresence>
+                            {dailyTasks.filter(task => !task.completed).map((task) => (
+                                <motion.div
+                                    key={task.id}
+                                    className="flex items-center justify-between p-3 mb-2 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700"
+                                    initial={{ opacity: 0, y: -10 }}
+                                    animate={{ opacity: 1, y: 0 }}
+                                    exit={{ opacity: 0, y: -10 }}
+                                    transition={{ duration: 0.2 }}
+                                >
+                                    <div className="flex items-center">
+                                        <button
+                                            className="w-5 h-5 rounded border border-gray-300 dark:border-gray-600 mr-3 flex items-center justify-center hover:bg-primary-50 dark:hover:bg-primary-900"
+                                            onClick={() => toggleDailyTask(task.id)}
+                                        >
+                                            {task.completed && <Check size={14} className="text-primary-600" />}
+                                        </button>
+                                        <span>{task.text}</span>
+                                    </div>
+                                    <button
+                                        className="text-gray-400 hover:text-red-500"
+                                        onClick={() => deleteDailyTask(task.id)}
+                                    >
+                                        <X size={16} />
+                                    </button>
+                                </motion.div>
+                            ))}
+                        </AnimatePresence>
+                        {dailyTasks.filter(task => task.completed).length > 0 && (
+                            <div className="mt-4">
+                                <h3 className="text-sm font-medium mb-2 text-gray-500 dark:text-gray-400">Completed Today</h3>
+                                <AnimatePresence>
+                                    {dailyTasks.filter(task => task.completed).map((task) => (
+                                        <motion.div
+                                            key={task.id}
+                                            className="flex items-center justify-between p-3 mb-2 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800"
+                                            initial={{ opacity: 0, height: 0 }}
+                                            animate={{ opacity: 1, height: 'auto' }}
+                                            exit={{ opacity: 0, height: 0 }}
+                                            transition={{ duration: 0.3 }}
+                                        >
+                                            <div className="flex items-center">
+                                                <Check size={16} className="text-green-600 mr-3" />
+                                                <span className="completed-task">{task.text}</span>
+                                            </div>
+                                            <button
+                                                className="text-gray-400 hover:text-red-500"
+                                                onClick={() => deleteDailyTask(task.id)}
+                                            >
+                                                <X size={16} />
+                                            </button>
+                                        </motion.div>
+                                    ))}
+                                </AnimatePresence>
+                            </div>
+                        )}
+                    </div>
+                    {/* Yearly Goals */}
+                    <div className="shadcn-card">
+                        <div className="flex justify-between items-center mb-4">
+                            <h2 className="text-xl font-bold flex items-center">
+                                <Target className="mr-2" size={20} />
+                                End-of-Year Goals
+                            </h2>
+                            <button
+                                className="shadcn-button shadcn-button-secondary p-2"
+                                onClick={() => setShowAddYearly(true)}
+                            >
+                                <Plus size={16} />
+                            </button>
+                        </div>
+                        {showAddYearly && (
+                            <motion.div
+                                className="mb-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg"
+                                initial={{ opacity: 0, height: 0 }}
+                                animate={{ opacity: 1, height: 'auto' }}
+                                exit={{ opacity: 0, height: 0 }}
+                            >
+                                <input
+                                    type="text"
+                                    className="shadcn-input mb-2"
+                                    placeholder="Enter yearly goal"
+                                    value={newYearlyGoal}
+                                    onChange={(e) => setNewYearlyGoal(e.target.value)}
+                                    onKeyPress={(e) => e.key === 'Enter' && addYearlyGoal()}
+                                />
+                                <div className="flex space-x-2">
+                                    <button
+                                        className="shadcn-button shadcn-button-secondary flex-1"
+                                        onClick={addYearlyGoal}
+                                    >
+                                        Add Goal
+                                    </button>
+                                    <button
+                                        className="shadcn-button bg-gray-300 dark:bg-gray-600 flex-1"
+                                        onClick={() => setShowAddYearly(false)}
+                                    >
+                                        Cancel
+                                    </button>
+                                </div>
+                            </motion.div>
+                        )}
+                        <AnimatePresence>
+                            {yearlyGoals.filter(goal => !goal.completed).map((goal) => (
+                                <motion.div
+                                    key={goal.id}
+                                    className="flex items-center justify-between p-3 mb-2 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700"
+                                    initial={{ opacity: 0, y: -10 }}
+                                    animate={{ opacity: 1, y: 0 }}
+                                    exit={{ opacity: 0, y: -10 }}
+                                    transition={{ duration: 0.2 }}
+                                >
+                                    <div className="flex items-center">
+                                        <button
+                                            className="w-5 h-5 rounded border border-gray-300 dark:border-gray-600 mr-3 flex items-center justify-center hover:bg-primary-50 dark:hover:bg-primary-900"
+                                            onClick={() => toggleYearlyGoal(goal.id)}
+                                        >
+                                            {goal.completed && <Check size={14} className="text-primary-600" />}
+                                        </button>
+                                        <span>{goal.text}</span>
+                                    </div>
+                                    <button
+                                        className="text-gray-400 hover:text-red-500"
+                                        onClick={() => deleteYearlyGoal(goal.id)}
+                                    >
+                                        <X size={16} />
+                                    </button>
+                                </motion.div>
+                            ))}
+                        </AnimatePresence>
+                        {yearlyGoals.filter(goal => goal.completed).length > 0 && (
+                            <div className="mt-4">
+                                <h3 className="text-sm font-medium mb-2 text-gray-500 dark:text-gray-400 flex items-center">
+                                    <Trophy className="mr-1" size={16} /> Completed Goals
+                                </h3>
+                                <AnimatePresence>
+                                    {yearlyGoals.filter(goal => goal.completed).map((goal) => (
+                                        <motion.div
+                                            key={goal.id}
+                                            className="flex items-center justify-between p-3 mb-2 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800"
+                                            initial={{ opacity: 0, height: 0 }}
+                                            animate={{ opacity: 1, height: 'auto' }}
+                                            exit={{ opacity: 0, height: 0 }}
+                                            transition={{ duration: 0.3 }}
+                                        >
+                                            <div className="flex items-center">
+                                                <Check size={16} className="text-yellow-600 mr-3" />
+                                                <span className="completed-task">{goal.text}</span>
+                                            </div>
+                                            <button
+                                                className="text-gray-400 hover:text-red-500"
+                                                onClick={() => deleteYearlyGoal(goal.id)}
+                                            >
+                                                <X size={16} />
+                                            </button>
+                                        </motion.div>
+                                    ))}
+                                </AnimatePresence>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            );
+        }
+        // Analytics component
+        function Analytics({ dailyTasks, yearlyGoals }) {
+            const completedYearly = yearlyGoals.filter(g => g.completed).length;
+            const totalYearly = yearlyGoals.length;
+            const yearlyPercentage = totalYearly > 0 ? (completedYearly / totalYearly) * 100 : 0;
+            // Last 7 days completion rate
+            const last7Days = Array.from({ length: 7 }, (_, i) => {
+                const date = new Date();
+                date.setDate(date.getDate() - i);
+                return date.toDateString();
+            });
+            const weeklyData = last7Days.map(date => {
+                const completed = dailyTasks.filter(task =>
+                    new Date(task.date).toDateString() === date && task.completed
+                ).length;
+                const total = dailyTasks.filter(task =>
+                    new Date(task.date).toDateString() === date
+                ).length;
+                return {
+                    date: date.slice(0, 3),
+                    completionRate: total > 0 ? (completed / total) * 100 : 0,
+                    completed,
+                    total
+                };
+            }).reverse();
+            const motivationalMessages = [
+                "You're on a roll! Keep it up!",
+                "Consistency is key - great job!",
+                "Every task completed brings you closer to your goals!",
+                "You're making amazing progress!",
+                "Just a few more tasks to complete your day!",
+                "Your dedication is inspiring!",
+                "Small steps lead to big achievements!"
+            ];
+            const randomMessage = motivationalMessages[Math.floor(Math.random() * motivationalMessages.length)];
+            return (
+                <div className="shadcn-card mb-8">
+                    <h2 className="text-xl font-bold mb-4 flex items-center">
+                        <BarChart3 className="mr-2" size={20} />
+                        Progress Analytics
+                    </h2>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+                        {/* Yearly Goals Progress */}
+                        <div>
+                            <h3 className="text-lg font-semibold mb-2">Yearly Goals</h3>
+                            <div className="w-full bg-gray-200 rounded-full h-4 dark:bg-gray-700 mb-2">
+                                <div
+                                    className="h-4 rounded-full bg-primary-500 transition-all duration-500"
+                                    style={{ width: `${yearlyPercentage}%` }}
+                                />
+                            </div>
+                            <p className="text-sm text-gray-600 dark:text-gray-400">
+                                {completedYearly} of {totalYearly} goals completed ({yearlyPercentage.toFixed(1)}%)
+                            </p>
+                        </div>
+                        {/* Weekly Completion */}
+                        <div>
+                            <h3 className="text-lg font-semibold mb-2">Weekly Performance</h3>
+                            <ResponsiveContainer width="100%" height={100}>
+                                <BarChart data={weeklyData}>
+                                    <Bar dataKey="completionRate" fill="#0ea5e9" radius={[4, 4, 0, 0]} />
+                                    <XAxis dataKey="date" />
+                                    <YAxis domain={[0, 100]} />
+                                </BarChart>
+                            </ResponsiveContainer>
+                        </div>
+                    </div>
+                    {/* Motivational Message */}
+                    <div className="bg-primary-50 dark:bg-primary-900/30 p-4 rounded-lg border border-primary-200 dark:border-primary-800">
+                        <p className="text-primary-800 dark:text-primary-200 text-center italic">
+                            {randomMessage}
+                        </p>
+                    </div>
+                </div>
+            );
+        }
+        // Theme Toggle
+        function ThemeToggle() {
+            const [isDark, setIsDark] = useState(() => {
+                return localStorage.getItem('theme') === 'dark' ||
+                       (window.matchMedia('(prefers-color-scheme: dark)').matches && !localStorage.getItem('theme'));
+            });
+            useEffect(() => {
+                if (isDark) {
+                    document.documentElement.classList.add('dark');
+                    localStorage.setItem('theme', 'dark');
+                } else {
+                    document.documentElement.classList.remove('dark');
+                    localStorage.setItem('theme', 'light');
+                }
+            }, [isDark]);
+            return (
+                <button
+                    className="fixed top-4 right-4 p-2 rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-lg"
+                    onClick={() => setIsDark(!isDark)}
+                >
+                    {isDark ? <Sun size={20} /> : <Moon size={20} />}
+                </button>
+            );
+        }
+        // Main App Component
+        function App() {
+            const [dailyTasks] = useLocalStorage('dailyTasks', []);
+            const [yearlyGoals] = useLocalStorage('yearlyGoals', []);
+            return (
+                <div className="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors duration-200">
+                    <div className="container mx-auto px-4 py-8 max-w-6xl">
+                        <motion.header
+                            className="text-center mb-8"
+                            initial={{ opacity: 0, y: -20 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ duration: 0.5 }}
+                        >
+                        <h1 className="text-4xl font-bold mb-2 bg-gradient-to-r from-primary-600 to-secondary-600 bg-clip-text text-transparent">
+                            YearEndQuest Tracker
+                        </h1>
+                        <p className="text-gray-600 dark:text-gray-400 mb-4">
+                            Make the most of the remaining days this year
+                        </p>
+                        <div className="flex justify-center space-x-4">
+                            <a href="portfolio.html" className="shadcn-button shadcn-button-primary px-6 py-3">
+                            View Portfolio
+                        </a>
+</motion.header>
+                        <Countdown />
+                        <ProgressBar />
+                        <YearGrid dailyTasks={dailyTasks} />
+                        <TaskManager />
+                        <Analytics dailyTasks={dailyTasks} yearlyGoals={yearlyGoals} />
+                        <ThemeToggle />
+                    </div>
+                </div>
+            );
+        }
+        // Render the app
+        const root = ReactDOM.createRoot(document.getElementById('root'));
+        root.render(<App />);
+        // Initialize feather icons
+        feather.replace();
+    </script>
+</body>
 </html>
+</body>
+</html>

portfolio.html ADDED Viewed

	@@ -0,0 +1,590 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ByteWizard - Full Stack Developer</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script src="https://unpkg.com/framer-motion@10.16.4/dist/framer-motion.js"></script>
+    <script src="https://unpkg.com/lucide-react@0.263.1/dist/umd/lucide-react.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
+        * {
+            font-family: 'JetBrains Mono', monospace;
+        }
+        body {
+            background: #0a0a0a;
+            color: #00ff41;
+            overflow-x: hidden;
+        }
+        .matrix-bg {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: -1;
+        }
+        .glitch-text {
+            position: relative;
+            display: inline-block;
+        }
+        .glitch-text::before,
+        .glitch-text::after {
+            content: attr(data-text);
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+        .glitch-text::before {
+            left: 2px;
+            text-shadow: -1px 0 #ff0080;
+            clip: rect(44px, 450px, 56px, 0);
+            animation: glitch-anim 5s infinite linear alternate-reverse;
+        }
+        .glitch-text::after {
+            left: -2px;
+            text-shadow: -1px 0 #00ffff;
+            clip: rect(44px, 450px, 56px, 0);
+            animation: glitch-anim2 5s infinite linear alternate-reverse;
+        }
+        @keyframes glitch-anim {
+            0% { clip: rect(42px, 9999px, 44px, 0); }
+            5% { clip: rect(12px, 9999px, 59px, 0); }
+            10% { clip: rect(48px, 9999px, 29px, 0); }
+            15% { clip: rect(42px, 9999px, 38px, 0); }
+            20% { clip: rect(15px, 9999px, 36px, 0); }
+            25% { clip: rect(14px, 9999px, 40px, 0); }
+            30% { clip: rect(50px, 9999px, 5px, 0); }
+            35% { clip: rect(53px, 9999px, 27px, 0); }
+            40% { clip: rect(31px, 9999px, 28px, 0); }
+            45% { clip: rect(14px, 9999px, 53px, 0); }
+            50% { clip: rect(35px, 9999px, 9px, 0); }
+            55% { clip: rect(55px, 9999px, 40px, 0); }
+            60% { clip: rect(46px, 9999px, 16px, 0); }
+            65% { clip: rect(10px, 9999px, 2px, 0); }
+            70% { clip: rect(5px, 9999px, 46px, 0); }
+            75% { clip: rect(14px, 9999px, 39px, 0); }
+            80% { clip: rect(14px, 9999px, 33px, 0); }
+            85% { clip: rect(27px, 9999px, 29px, 0); }
+            90% { clip: rect(48px, 9999px, 2px, 0); }
+            95% { clip: rect(33px, 9999px, 17px, 0); }
+            100% { clip: rect(36px, 9999px, 54px, 0); }
+        }
+        @keyframes glitch-anim2 {
+            0% { clip: rect(65px, 9999px, 34px, 0); }
+            5% { clip: rect(26px, 9999px, 50px, 0); }
+            10% { clip: rect(85px, 9999px, 15px, 0); }
+            15% { clip: rect(91px, 9999px, 58px, 0); }
+            20% { clip: rect(85px, 9999px, 53px, 0); }
+            25% { clip: rect(6px, 9999px, 85px, 0); }
+            30% { clip: rect(16px, 9999px, 14px, 0); }
+            35% { clip: rect(87px, 9999px, 94px, 0); }
+            40% { clip: rect(23px, 9999px, 49px, 0); }
+            45% { clip: rect(50px, 9999px, 6px, 0); }
+            50% { clip: rect(64px, 9999px, 1px, 0); }
+            55% { clip: rect(48px, 9999px, 77px, 0); }
+            60% { clip: rect(14px, 9999px, 79px, 0); }
+            65% { clip: rect(63px, 9999px, 81px, 0); }
+            70% { clip: rect(23px, 9999px, 91px, 0); }
+            75% { clip: rect(32px, 9999px, 48px, 0); }
+            80% { clip: rect(66px, 9999px, 68px, 0); }
+            85% { clip: rect(66px, 9999px, 88px, 0); }
+            90% { clip: rect(83px, 9999px, 13px, 0); }
+            95% { clip: rect(85px, 9999px, 97px, 0); }
+            100% { clip: rect(72px, 9999px, 42px, 0); }
+        }
+        .terminal {
+            background: rgba(0, 0, 0, 0.9);
+            border: 1px solid #00ff41;
+            border-radius: 8px;
+            padding: 20px;
+            font-family: 'Share Tech Mono', monospace;
+            position: relative;
+            overflow: hidden;
+        }
+        .terminal::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(transparent 50%, rgba(0, 255, 65, 0.1) 50%);
+            background-size: 100% 4px;
+            z-index: 1;
+            pointer-events: none;
+        }
+        .command-line {
+            color: #00ff41;
+        }
+        .cursor {
+            display: inline-block;
+            width: 8px;
+            height: 16px;
+            background: #00ff41;
+            animation: blink 1s infinite;
+        }
+        @keyframes blink {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0; }
+        }
+        .hacker-card {
+            background: rgba(0, 20, 0, 0.8);
+            border: 1px solid #00ff41;
+            border-radius: 8px;
+            padding: 20px;
+            position: relative;
+            overflow: hidden;
+        }
+        .hacker-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(45deg, transparent 30%, rgba(0, 255, 65, 0.1));
+            z-index: 0;
+        }
+        .skill-bar {
+            height: 8px;
+            background: #003300;
+            border-radius: 4px;
+            overflow: hidden;
+        }
+        .skill-progress {
+            height: 100%;
+            background: linear-gradient(90deg, #00ff41, #00cc33);
+            transition: width 2s ease-in-out;
+        }
+        .matrix-char {
+            position: absolute;
+            color: #00ff41;
+            font-family: 'Share Tech Mono', monospace;
+            opacity: 0.8;
+            animation: matrix-fall linear infinite;
+        }
+        @keyframes matrix-fall {
+            0% { transform: translateY(-100px); opacity: 0; }
+            10% { opacity: 1; }
+            90% { opacity: 1; }
+            100% { transform: translateY(100vh); opacity: 0; }
+        }
+        .typewriter {
+            overflow: hidden;
+            border-right: 2px solid #00ff41;
+            white-space: nowrap;
+            animation: typing 3.5s steps(40, end);
+        }
+        @keyframes typing {
+            from { width: 0 }
+            to { width: 100% }
+        }
+        .hacker-nav {
+            background: rgba(0, 20, 0, 0.9);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid #00ff41;
+        }
+        .project-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 20px;
+        }
+        .project-card {
+            background: rgba(0, 30, 0, 0.6);
+            border: 1px solid #00ff41;
+            border-radius: 8px;
+            padding: 20px;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        .project-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 0 20px rgba(0, 255, 65, 0.3);
+        }
+        .project-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.2), transparent);
+            animation: scan 3s linear infinite;
+        }
+        @keyframes scan {
+            0% { left: -100%; }
+            100% { left: 100%; }
+        }
+    </style>
+</head>
+<body class="bg-black text-green-400">
+    <!-- Matrix Background -->
+    <div id="matrix-bg" class="matrix-bg"></div>
+    <!-- Navigation -->
+    <nav class="hacker-nav fixed w-full z-50">
+        <div class="container mx-auto px-4 py-4">
+            <div class="flex justify-between items-center">
+                <div class="glitch-text text-xl font-bold" data-text="BYTEWIZARD">BYTEWIZARD</div>
+                <div class="flex space-x-6">
+                    <a href="#about" class="hover:text-green-200 transition-colors">[ABOUT]</a>
+                    <a href="#skills" class="hover:text-green-200 transition-colors">[SKILLS]</a>
+                    <a href="#projects" class="hover:text-green-200 transition-colors">[PROJECTS]</a>
+                    <a href="#contact" class="hover:text-green-200 transition-colors">[CONTACT]</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section class="min-h-screen flex items-center justify-center relative pt-16">
+        <div class="container mx-auto px-4 text-center">
+            <motion.div
+                initial={{ opacity: 0, y: 50 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 1 }}
+                class="terminal max-w-4xl mx-auto"
+            >
+                <div class="text-left">
+                    <div class="command-line mb-4">
+                        <span class="text-green-300">root@bytewizard:~$</span> whoami
+                    </div>
+                    <div class="text-4xl md:text-6xl font-bold mb-4 typewriter">
+                        <span class="glitch-text" data-text="BYTEWIZARD">BYTEWIZARD</div>
+                    <div class="command-line mb-4">
+                        <span class="text-green-300">root@bytewizard:~$</span> cat bio.txt
+                    </div>
+                    <div class="text-lg md:text-xl mb-6">
+                        <span class="text-green-200">&gt;</span> FULL STACK DEVELOPER & CYBER SECURITY ENTHUSIAST
+                    </div>
+                    <div class="command-line">
+                        <span class="text-green-300">root@bytewizard:~$</span> _
+                        <span class="cursor"></span>
+                    </div>
+                </div>
+            </motion.div>
+        </div>
+    </section>
+    <!-- About Section -->
+    <section id="about" class="py-20">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold mb-8 text-center">[ABOUT_ME]</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div class="hacker-card">
+                    <h3 class="text-xl font-bold mb-4 text-green-300">SYSTEM_INFO</h3>
+                    <div class="space-y-2">
+                <div><span class="text-green-200">NAME:</span> ByteWizard</div>
+                <div><span class="text-green-200">ROLE:</span> Full Stack Developer</div>
+                <div><span class="text-green-200">LOCATION:</span> Digital Realm</div>
+                <div><span class="text-green-200">SPECIALTY:</span> Breaking & Building Systems</div>
+                <div><span class="text-green-200">STATUS:</span> <span class="text-green-400">ACTIVE</span></div>
+            </div>
+        </div>
+        <div class="hacker-card">
+            <h3 class="text-xl font-bold mb-4 text-green-300">MISSION</h3>
+            <p class="text-green-200 leading-relaxed">
+                I specialize in creating robust, scalable applications while maintaining
+                security-first principles. My code doesn't just work—it withstands.
+            </p>
+        </div>
+    </div>
+</section>
+<!-- Skills Section -->
+<section id="skills" class="py-20 bg-gray-900">
+    <div class="container mx-auto px-4">
+        <h2 class="text-3xl font-bold mb-8 text-center">[TECH_STACK]</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <div class="hacker-card">
+            <h3 class="text-xl font-bold mb-4 text-green-300">FRONTEND_WEAPONS</h3>
+        <div class="space-y-4">
+            <div>
+                <div class="flex justify-between mb-1">
+                    <span>React.js</span>
+                    <span>95%</span>
+                </div>
+                <div class="skill-bar">
+                    <div class="skill-progress" style="width: 95%"></div>
+            </div>
+            <div>
+                <div class="flex justify-between mb-1">
+                    <span>TypeScript</span>
+                    <span>90%</span>
+                </div>
+                <div class="skill-bar">
+                    <div class="skill-progress" style="width: 90%"></div>
+            </div>
+            <div>
+                <div class="flex justify-between mb-1">
+                    <span>Next.js</span>
+                    <span>88%</span>
+                </div>
+            </div>
+        </div>
+        <div class="hacker-card">
+            <h3 class="text-xl font-bold mb-4 text-green-300">BACKEND_ARTILLERY</h3>
+                <div class="space-y-4">
+                    <div>
+                        <div class="flex justify-between mb-1">
+                            <span>Node.js</span>
+                            <span>92%</span>
+                        </div>
+                        <div class="skill-bar">
+                            <div class="skill-progress" style="width: 92%"></div>
+                    </div>
+                    <div>
+                        <div class="flex justify-between mb-1">
+                            <span>Python</span>
+                            <span>85%</span>
+                        </div>
+                        <div class="skill-bar">
+                            <div class="skill-progress" style="width: 85%"></div>
+                    </div>
+                    <div>
+                        <div class="flex justify-between mb-1">
+                                <span>PostgreSQL</span>
+                                <span>88%</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Projects Section -->
+        <section id="projects" class="py-20">
+            <div class="container mx-auto px-4">
+                <h2 class="text-3xl font-bold mb-8 text-center">[OPERATIONS]</h2>
+                <div class="project-grid">
+                    <div class="project-card">
+                        <h3 class="text-xl font-bold mb-2 text-green-300">CRYPTO_VAULT</h3>
+                <p class="text-green-200 mb-4">
+                    Secure cryptocurrency wallet with multi-signature authentication
+                    and zero-knowledge proofs for enhanced privacy.
+                </p>
+                <div class="flex flex-wrap gap-2 mb-4">
+                            <span class="px-2 py-1 bg-green-900/30 border border-green-700 rounded text-sm">
+                                React
+                            </span>
+                            <span class="px-2 py-1 bg-green-900/30 border border-green-700 rounded text-sm">
+                                Node.js
+                            </span>
+                            <span class="px-2 py-1 bg-green-900/30 border border-green-700 rounded text-sm">
+                                Blockchain
+                            </span>
+                        </div>
+                        <button class="px-4 py-2 bg-green-900 border border-green-700 rounded hover:bg-green-800 transition-colors">
+                                ACCESS_PROJECT
+                            </button>
+                        </div>
+                        <div class="project-card">
+                            <h3 class="text-xl font-bold mb-2 text-green-300">CYBER_DASH</h3>
+                        <p class="text-green-200 mb-4">
+                            Real-time cybersecurity dashboard monitoring network traffic,
+                            threat detection, and system vulnerabilities.
+                        </p>
+                        <div class="flex flex-wrap gap-2 mb-4">
+                                <span class="px-2 py-1 bg-green-900/30 border border-green-700 rounded text-sm">
+                                Next.js
+                            </span>
+                            <span class="px-2 py-1 bg-green-900/30 border border-green-700 rounded text-sm">
+                                TypeScript
+                            </span>
+                            <span class="px-2 py-1 bg-green-900/30 border border-green-700 rounded text-sm">
+                                WebSocket
+                            </span>
+                        </div>
+                        <button class="px-4 py-2 bg-green-900 border border-green-700 rounded hover:bg-green-800 transition-colors">
+                                ACCESS_PROJECT
+                            </button>
+                        </div>
+                        <div class="project-card">
+                            <h3 class="text-xl font-bold mb-2 text-green-300">AI_CODER</h3>
+                        <p class="text-green-200 mb-4">
+                            Intelligent code assistant leveraging machine learning
+                            to suggest optimizations and detect security vulnerabilities.
+                        </p>
+                        <div class="flex flex-wrap gap-2 mb-4">
+                                <span class="px-2 py-1 bg-green-900/30 border border-green-700 rounded text-sm">
+                                Python
+                            </span>
+                            <span class="px-2 py-1 bg-green-900/30 border border-green-700 rounded text-sm">
+                                TensorFlow
+                            </span>
+                            <span class="px-2 py-1 bg-green-900/30 border border-green-700 rounded text-sm">
+                                FastAPI
+                            </span>
+                        </div>
+                        <button class="px-4 py-2 bg-green-900 border border-green-700 rounded hover:bg-green-800 transition-colors">
+                                ACCESS_PROJECT
+                            </button>
+                        </div>
+                    </div>
+                </section>
+                <!-- Contact Section -->
+                <section id="contact" class="py-20 bg-gray-900">
+                    <div class="container mx-auto px-4">
+                        <h2 class="text-3xl font-bold mb-8 text-center">[ESTABLISH_CONNECTION]</h2>
+                    <div class="max-w-2xl mx-auto">
+                        <div class="hacker-card">
+                            <h3 class="text-xl font-bold mb-4 text-green-300">CONTACT_PROTOCOL</h3>
+                        <form class="space-y-4">
+                            <div>
+                                <label class="block text-green-200 mb-2">EMAIL:</label>
+                                <input type="email" class="w-full px-3 py-2 bg-black border border-green-700 rounded focus:outline-none focus:ring-2 focus:ring-green-500" placeholder="user@domain.com">
+                            </div>
+                            <div>
+                                <label class="block text-green-200 mb-2">MESSAGE:</label>
+                                <textarea rows="4" class="w-full px-3 py-2 bg-black border border-green-700 rounded focus:outline-none focus:ring-2 focus:ring-green-500" placeholder="BEGIN_TRANSMISSION..."></textarea>
+                            </div>
+                            <button type="submit" class="px-6 py-3 bg-green-900 border border-green-700 rounded hover:bg-green-800 transition-colors">
+                                    SEND_PACKET
+                                </button>
+                            </form>
+                        </div>
+                    </div>
+                </section>
+                <!-- Footer -->
+                <footer class="py-8 border-t border-green-800">
+                    <div class="container mx-auto px-4 text-center">
+                        <div class="flex justify-center space-x-6 mb-4">
+                                <a href="#" class="hover:text-green-200 transition-colors">GITHUB</a>
+                                <a href="#" class="hover:text-green-200 transition-colors">LINKEDIN</a>
+                                <a href="#" class="hover:text-green-200 transition-colors">TWITTER</a>
+                            </div>
+                            <p class="text-green-600 text-sm">
+                                &copy; 2024 BYTEWIZARD. ALL SYSTEMS OPERATIONAL.
+                            </p>
+                        </div>
+                    </footer>
+                    <script type="text/babel">
+                        const { useState, useEffect, useRef } = React;
+                        const { motion, AnimatePresence } = FramerMotion;
+                        const { Code, Cpu, Shield, Zap, Terminal, Mail, Github, Linkedin, Twitter } = LucideReact;
+                        // Matrix Background Effect
+                        function MatrixBackground() {
+                            const canvasRef = useRef(null);
+                            useEffect(() => {
+                                const canvas = canvasRef.current;
+                                const ctx = canvas.getContext('2d');
+                                // Set canvas size
+                                canvas.width = window.innerWidth;
+                                canvas.height = window.innerHeight;
+                                const chars = "01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン";
+                                const charArray = chars.split('');
+                                const fontSize = 14;
+                                const columns = canvas.width / fontSize;
+                                const drops = Array(Math.floor(columns)).fill(1);
+                                function draw() {
+                                    ctx.fillStyle = 'rgba(0, 0, 0, 0.05)";
+                                ctx.fillRect(0, 0, canvas.width, canvas.height);
+                                ctx.fillStyle = '#00ff41';
+                                ctx.font = `${fontSize}px 'Share Tech Mono'`;
+                                drops.forEach((drop, i) => {
+                                        const char = charArray[Math.floor(Math.random() * charArray.length)];
+                                        ctx.fillText(char, i * fontSize, drops[i] * fontSize);
+                                        if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
+                                            drops[i] = 0;
+                                        }
+                                        drops[i]++;
+                                    });
+                                }
+                                const interval = setInterval(draw, 33);
+                                return () => clearInterval(interval);
+                            }, []);
+                            return <canvas ref={canvasRef} className="matrix-bg" />;
+                        }
+                        // Typewriter Effect Component
+                        function Typewriter({ text, speed = 50 }) {
+                            const [displayText, setDisplayText] = useState('');
+                            useEffect(() => {
+                                let i = 0;
+                                const timer = setInterval(() => {
+                                    if (i < text.length) {
+                                        setDisplayText(text.slice(0, i + 1));
+                                i++;
+                                }, speed);
+                                return () => clearInterval(timer);
+                            }, [text, speed]);
+                            return <span>{displayText}</span>;
+                        }
+                        // Main App
+                        function App() {
+                            return (
+                                <div className="relative">
+                                    <MatrixBackground />
+                                    {/* Content is already in the HTML above */}
+                                </div>
+                            );
+                        }
+                        // Render the app
+                        const root = ReactDOM.createRoot(document.getElementById('root'));
+                        root.render(<App />);
+                    </script>
+                </body>
+                </html>