Basic UI updates

package.json

@@ -9,11 +9,17 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@radix-ui/react-slot": "^1.1.0",
+    "@shadcn/ui": "^0.0.4",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "framer-motion": "^10.16.4",
+    "lucide-react": "^0.460.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0",
-    "framer-motion": "^10.16.4",
-    "react-intersection-observer": "^9.5.2"
+    "react-intersection-observer": "^9.5.2",
+    "tailwind-merge": "^2.5.4"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

src/App.jsx

@@ -8,15 +8,28 @@ import Projects from './components/Projects';
 
 function App() {
   return (
-    <div className="bg-gray-50">
+    <div className="min-h-screen bg-background">
+      <div className="fixed inset-0 bg-grid -z-10" aria-hidden="true" />
       <Navbar />
-      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
-        <About />
-        <Experience />
-        <Education />
-        <Skills />
-        <Projects />
-      </div>
+      <main className="container mx-auto px-4 sm:px-6 lg:px-8 pb-16">
+        <div className="space-y-16">
+          <section id="about" className="fade-in pt-20">
+            <About />
+          </section>
+          <section id="experience" className="fade-in">
+            <Experience />
+          </section>
+          <section id="projects" className="fade-in">
+            <Projects />
+          </section>
+          <section id="education" className="fade-in">
+            <Education />
+          </section>
+          <section id="skills" className="fade-in">
+            <Skills />
+          </section>
+        </div>
+      </main>
     </div>
   );
 }

src/components/About.jsx

@@ -1,102 +1,69 @@
 import React from 'react';
-import { motion } from 'framer-motion';
-import { FaLinkedin, FaGithub } from 'react-icons/fa';
 
-const About = () => {
+function About() {
   return (
-    <motion.section
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.5 }}
-      id="about"
-      className="min-h-screen pt-20 flex items-center bg-gradient-to-b from-white to-gray-50"
-    >
-      <div className="max-w-4xl mx-auto text-center px-4">
-        <div className="mb-8">
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ duration: 0.5 }}
-            className="relative w-48 h-48 mx-auto mb-6"
-          >
-            <div className="absolute inset-0 bg-blue-600 rounded-full opacity-10 blur-lg transform scale-110"></div>
-            <img
-              src="/img/profile.jpg"
-              alt="Harivansh Rathi"
-              className="w-full h-full rounded-full object-cover shadow-xl ring-4 ring-blue-600 ring-opacity-50"
-            />
-          </motion.div>
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.2 }}
-          >
-            <h1 className="text-5xl font-bold mb-4">
-              Harivansh <span className="text-blue-600">Rathi</span>
-            </h1>
-            <p className="text-xl text-gray-600 font-medium">Software Developer & AI Enthusiast</p>
-          </motion.div>
-        </div>
-
-        <motion.p
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ delay: 0.3 }}
-          className="text-lg text-gray-700 mb-8 leading-relaxed max-w-2xl mx-auto"
-        >
-          I'm a software developer with expertise in full-stack web development
-          and a strong interest in AI and LLMs. I enjoy working with both front-end and back-end technologies to build complete solutions. With the recent advancements in Artificial Intelligence, I enjoy exploring its intersection and integration with software development.
-        </motion.p>
-
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ delay: 0.4 }}
-          className="mb-8 bg-white p-6 rounded-xl shadow-lg"
-        >
-          <h2 className="text-xl font-semibold mb-4 text-gray-800">Contact me</h2>
-          <div className="space-y-2">
+    <div className="relative overflow-hidden">
+      <div className="relative z-10 flex flex-col lg:flex-row items-center gap-12">
+        <div className="flex-1 text-center lg:text-left">
+          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-gray-900 mb-6">
+            Hi, I'm <span className="text-blue-600">Harivansh Rathi</span>
+          </h1>
+          <p className="text-xl sm:text-2xl text-gray-600 mb-8">
+            Full Stack Developer & Software Engineer
+          </p>
+          <p className="text-gray-600 max-w-2xl mb-8">
+            I'm passionate about building exceptional digital experiences that make a difference.
+            With expertise in both frontend and backend development, I create scalable and efficient solutions
+            that solve real-world problems.
+          </p>
+          <div className="flex flex-wrap gap-4 justify-center lg:justify-start">
             <a
-              href="mailto:rathiharivansh@gmail.com"
-              className="block text-blue-600 hover:text-blue-700 transition-colors"
+              href="https://github.com/harivansh-afk"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 px-6 py-3 bg-gray-900 text-white rounded-full hover:bg-gray-800 transition-colors"
             >
-              rathiharivansh@gmail.com
+              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
+              </svg>
+              GitHub
             </a>
             <a
-              href="mailto:zng2gc@virginia.edu"
-              className="block text-blue-600 hover:text-blue-700 transition-colors"
+              href="https://linkedin.com/in/harivansh-rathi"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 px-6 py-3 bg-blue-600 text-white rounded-full hover:bg-blue-700 transition-colors"
             >
-              zng2gc@virginia.edu
+              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+              </svg>
+              LinkedIn
+            </a>
+            <a
+              href="https://docs.google.com/document/d/1TKbtqYinjRNFZiZNbxEwRTz5QDiZ5mOk/edit?usp=sharing&ouid=104313709347999918268&rtpof=true&sd=true"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 px-6 py-3 border-2 border-gray-900 text-gray-900 rounded-full hover:bg-gray-900 hover:text-white transition-colors"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+              </svg>
+              Resume
             </a>
           </div>
-        </motion.div>
-
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ delay: 0.5 }}
-          className="flex justify-center space-x-6"
-        >
-          <a
-            href="https://www.linkedin.com/in/harivansh-rathi"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-4xl text-gray-600 hover:text-blue-600 transition-colors transform hover:scale-110"
-          >
-            <FaLinkedin />
-          </a>
-          <a
-            href="https://github.com/harivansh-afk"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-4xl text-gray-600 hover:text-gray-800 transition-colors transform hover:scale-110"
-          >
-            <FaGithub />
-          </a>
-        </motion.div>
+        </div>
+        <div className="relative w-64 h-64 lg:w-96 lg:h-96">
+          <div className="absolute inset-0 -inset-x-4 -inset-y-4 bg-gradient-to-r from-blue-100 via-purple-50 to-blue-50 rounded-full opacity-75 blur-2xl" />
+          <div className="absolute inset-0 bg-white/50 rounded-full backdrop-blur-sm" />
+          <img
+            src="/img/profile.jpg"
+            alt="Harivansh Rathi"
+            className="relative z-10 w-full h-full object-cover rounded-full ring-2 ring-gray-100 shadow-lg"
+          />
+        </div>
       </div>
-    </motion.section>
+    </div>
   );
-};
+}
 
 export default About;

src/components/Navbar.jsx

@@ -1,73 +1,43 @@
-import React, { useState } from 'react';
-import { motion } from 'framer-motion';
+import React, { useState, useEffect } from 'react';
 
-const Navbar = () => {
-  const [isOpen, setIsOpen] = useState(false);
+function Navbar() {
+  const [isScrolled, setIsScrolled] = useState(false);
 
-  const navItems = ['About', 'Experience', 'Education', 'Skills', 'Projects'];
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 20);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
 
   return (
-    <nav className="bg-blue-600 fixed w-full z-50">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <header className={`fixed top-0 w-full z-50 transition-all duration-300 ${
+      isScrolled ? 'bg-white/80 backdrop-blur-md shadow-sm' : 'bg-transparent'
+    }`}>
+      <nav className="container mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between h-16">
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 0.5 }}
-            className="flex-shrink-0 text-white font-bold text-xl"
-          >
-            HR
-          </motion.div>
+          <a href="#" className="text-xl font-semibold tracking-tight hover:text-gray-600 transition-colors">
+            Harivansh
+          </a>
 
-          <div className="hidden md:block">
-            <div className="ml-10 flex items-baseline space-x-4">
-              {navItems.map((item) => (
-                <a
-                  key={item}
-                  href={`#${item.toLowerCase()}`}
-                  className="text-white hover:bg-blue-500 px-3 py-2 rounded-md text-sm font-medium"
-                >
-                  {item}
-                </a>
-              ))}
-            </div>
+          <div className="hidden sm:flex items-center space-x-8">
+            <a href="#about" className="nav-link">About</a>
+            <a href="#experience" className="nav-link">Experience</a>
+            <a href="#education" className="nav-link">Education</a>
+            <a href="#skills" className="nav-link">Skills</a>
+            <a href="#projects" className="nav-link">Projects</a>
           </div>
 
-          <div className="md:hidden">
-            <button
-              onClick={() => setIsOpen(!isOpen)}
-              className="text-white hover:bg-blue-500 p-2 rounded-md"
-            >
-              <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                {isOpen ? (
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                ) : (
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
-                )}
-              </svg>
-            </button>
-          </div>
+          <button className="sm:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors">
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          </button>
         </div>
-      </div>
-
-      {isOpen && (
-        <div className="md:hidden">
-          <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
-            {navItems.map((item) => (
-              <a
-                key={item}
-                href={`#${item.toLowerCase()}`}
-                className="text-white hover:bg-blue-500 block px-3 py-2 rounded-md text-base font-medium"
-                onClick={() => setIsOpen(false)}
-              >
-                {item}
-              </a>
-            ))}
-          </div>
-        </div>
-      )}
-    </nav>
+      </nav>
+    </header>
   );
-};
+}
 
 export default Navbar;

src/components/Skills.jsx

@@ -1,69 +1,71 @@
 import React from 'react';
-import { motion } from 'framer-motion';
-import { useInView } from 'react-intersection-observer';
 
-const SkillCategory = ({ title, skills }) => {
-  const [ref, inView] = useInView({
-    triggerOnce: true,
-    threshold: 0.1,
-  });
+const skillCategories = [
+  {
+    title: "Frontend Development",
+    skills: [
+      { name: "React", level: 90 },
+      { name: "JavaScript", level: 85 },
+      { name: "TypeScript", level: 80 },
+      { name: "HTML/CSS", level: 90 },
+      { name: "Tailwind CSS", level: 85 },
+    ]
+  },
+  {
+    title: "Backend Development",
+    skills: [
+      { name: "Node.js", level: 85 },
+      { name: "Python", level: 80 },
+      { name: "Java", level: 75 },
+      { name: "SQL", level: 80 },
+      { name: "MongoDB", level: 75 },
+    ]
+  },
+  {
+    title: "Tools & Technologies",
+    skills: [
+      { name: "Git", level: 85 },
+      { name: "Docker", level: 75 },
+      { name: "AWS", level: 70 },
+      { name: "Linux", level: 80 },
+      { name: "REST APIs", level: 85 },
+    ]
+  }
+];
 
+function Skills() {
   return (
-    <motion.div
-      ref={ref}
-      initial={{ opacity: 0, y: 20 }}
-      animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
-      transition={{ duration: 0.5 }}
-      className="mb-6"
-    >
-      <h3 className="text-xl font-bold mb-3 text-blue-600">{title}</h3>
-      <div className="flex flex-wrap gap-2">
-        {skills.map((skill, index) => (
-          <span
-            key={index}
-            className="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm"
-          >
-            {skill}
-          </span>
-        ))}
-      </div>
-    </motion.div>
-  );
-};
+    <div className="py-16">
+      <h2 className="heading text-center">Skills & Expertise</h2>
 
-const Skills = () => {
-  const skillCategories = [
-    {
-      title: "Programming Languages",
-      skills: ["Python", "Java", "JavaScript", "TypeScript","C/C++", "HTML", "CSS/Tailwind"]
-    },
-    {
-      title: "Frameworks",
-      skills: ["React.js", "Node.js","Express.js", "Vite", "Next.js"]
-    },
-    {
-      title: "Tools & Databases",
-      skills: ["Git/Github", "SQL", "MongoDB"]
-    }
-  ];
-
-  return (
-    <section id="skills" className="py-20">
-      <motion.h2
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        className="text-3xl font-bold mb-10 text-center"
-      >
-        Technical Skills
-      </motion.h2>
-      
-      <div className="max-w-3xl mx-auto bg-white rounded-lg shadow-lg p-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
         {skillCategories.map((category, index) => (
-          <SkillCategory key={index} {...category} />
+          <div
+            key={index}
+            className="card hover:transform hover:-translate-y-1"
+          >
+            <h3 className="text-xl font-semibold mb-6">{category.title}</h3>
+            <div className="space-y-4">
+              {category.skills.map((skill, skillIndex) => (
+                <div key={skillIndex}>
+                  <div className="flex justify-between mb-1">
+                    <span className="text-sm font-medium text-gray-700">{skill.name}</span>
+                    <span className="text-sm text-gray-500">{skill.level}%</span>
+                  </div>
+                  <div className="w-full bg-gray-200 rounded-full h-2">
+                    <div
+                      className="bg-blue-600 h-2 rounded-full transition-all duration-500 ease-out"
+                      style={{ width: `${skill.level}%` }}
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
         ))}
       </div>
-    </section>
+    </div>
   );
-};
+}
 
 export default Skills;

src/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

src/components/ui/card.tsx

@@ -0,0 +1,40 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+export { Card, CardHeader, CardContent }

src/index.css

@@ -2,10 +2,94 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  :root {
+    --background: 240 25% 98%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.75rem;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}
+
+.section-container {
+  @apply py-16 sm:py-20;
+}
+
+.heading {
+  @apply text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 mb-8;
+}
+
+.card {
+  @apply bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 p-6;
+}
+
+.nav-link {
+  @apply relative text-gray-700 hover:text-black transition-colors duration-300 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-black after:transition-all after:duration-300 hover:after:w-full;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-in {
+  animation: fadeIn 0.6s ease-out forwards;
+}
+
+.bg-grid {
+  background-size: 40px 40px;
+  background-image: linear-gradient(
+      to right,
+      rgba(0, 0, 0, 0.05) 1px,
+      transparent 1px
+    ),
+    linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
+}
+
 html {
   scroll-behavior: smooth;
 }
 
-body {
-  @apply bg-gray-50;
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  @apply bg-gray-100;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply bg-gray-400 rounded-full hover:bg-gray-500 transition-colors;
 }

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

tailwind.config.js

@@ -1,11 +1,44 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: ["class"],
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+    },
   },
   plugins: [],
 }

tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.js

@@ -1,6 +1,12 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import path from 'path'
 
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
 })