[V0_FILE]typescriptreact:file="app/page.tsx" import Navbar from "@/components/navbar" import Hero from "@/components/hero" import About from "@/components/about" import Education from "@/components/education" import Skills from "@/components/skills" import Contact from "@/components/contact" import Footer from "@/components/footer" import ScrollingText from "@/components/scrolling-text" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/navbar.tsx" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { Menu, X } from "lucide-react" const Navbar = () => { const [isOpen, setIsOpen] = useState(false) const [scrolled, setScrolled] = useState(false) useEffect(() => { const handleScroll = () => { if (window.scrollY > 50) { setScrolled(true) } else { setScrolled(false) } } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const toggleMenu = () => { setIsOpen(!isOpen) } const navLinks = [ { name: "Home", href: "#home" }, { name: "About", href: "#about" }, { name: "Education", href: "#education" }, { name: "Skills", href: "#skills" }, { name: "Contact", href: "#contact" }, ] return (

Hazel Trinita

{/* Desktop menu */}

{navLinks.map((link) => ( {link.name} ))}

{/* Mobile menu button */}

{/* Mobile menu */} {isOpen && (

{navLinks.map((link) => ( setIsOpen(false)} className="block px-3 py-2 rounded-md text-base font-medium text-purple-100 hover:text-white hover:bg-purple-800 transition-all" > {link.name} ))}

)}

) } export default Navbar [V0_FILE]typescriptreact:file="components/hero.tsx" "use client" import { useEffect, useState } from "react" import { Button } from "@/components/ui/button" import { Github, Linkedin, FileText } from "lucide-react" import { motion } from "framer-motion" export default function Hero() { const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }) useEffect(() => { const handleMouseMove = (e: MouseEvent) => { setMousePosition({ x: e.clientX, y: e.clientY }) } window.addEventListener("mousemove", handleMouseMove) return () => { window.removeEventListener("mousemove", handleMouseMove) } }, []) return (

{/* Gradient orbs that follow mouse */}

Hazel Trinita

Web Developer

) } [V0_FILE]typescriptreact:file="components/scrolling-text.tsx" "use client" import { useEffect, useRef } from "react" import { motion, useAnimation, useInView } from "framer-motion" interface ScrollingTextProps { text: string } export default function ScrollingText({ text }: ScrollingTextProps) { const ref = useRef(null) const isInView = useInView(ref, { once: false, amount: 0.5 }) const controls = useAnimation() useEffect(() => { if (isInView) { controls.start("visible") } else { controls.start("hidden") } }, [controls, isInView]) return (

{text} • {text} • {text} • {text} • {text} • {text} •

) } [V0_FILE]typescriptreact:file="components/about.tsx" "use client" import { motion } from "framer-motion" import { useRef } from "react" import { useInView } from "framer-motion" export default function About() { const ref = useRef(null) const isInView = useInView(ref, { once: true, amount: 0.3 }) return (

About Me

Hey there! 👋 I'm Hazel, a passionate B.Tech CSE student with a love for web development and creative problem-solving. I enjoy building dynamic, user-friendly websites that not only look great but also provide a seamless experience.

I'm constantly exploring new technologies and frameworks to improve my skills and bring innovative ideas to life. Whether it's designing intuitive interfaces, optimizing performance, or experimenting with the latest trends in web development, I'm always eager to learn and grow.

When I'm not coding, you'll find me reading books, painting or singing.

) } [V0_FILE]typescriptreact:file="components/education.tsx" "use client" import { motion } from "framer-motion" import { useRef } from "react" import { useInView } from "framer-motion" import { GraduationCap, School } from "lucide-react" export default function Education() { const ref = useRef(null) const isInView = useInView(ref, { once: true, amount: 0.3 }) const educationItems = [ { icon: , institution: "Alwin International Public School", period: "Jun 2015 — May 2023, Chennai", details: [ "Completed Higher Secondary Education (12th Grade) in Computer Science with 76%.", "Achieved 88% in 10th Grade.", ], }, { icon: , institution: "Karunya Institute of Technology, BTech", period: "Aug 2023 — Present, Coimbatore", details: [ "Currently pursuing a B.Tech in Computer Science and Engineering, gaining expertise in software development, data structures, algorithms, networking, and database management.", ], }, ] return (

Education

{/* Vertical timeline line */}

{educationItems.map((item, index) => (

{item.icon}

{item.institution}

{item.period}

{detail}

))}

) } [V0_FILE]typescriptreact:file="components/skills.tsx" "use client" import { motion } from "framer-motion" import { useRef } from "react" import { useInView } from "framer-motion" import { Database, Code, Network, Server, Terminal } from "lucide-react" export default function Skills() { const ref = useRef(null) const isInView = useInView(ref, { once: true, amount: 0.3 }) const skills = [ { name: "SQL", icon: , color: "from-purple-400 to-pink-300", }, { name: "Python", icon:

,
      color: "from-blue-400 to-purple-400",
    },
    {
      name: "Java",
      icon: ,
      color: "from-red-400 to-purple-400",
    },
    {
      name: "C",
      icon: ,
      color: "from-indigo-400 to-purple-400",
    },
    {
      name: "Networking",
      icon: ,
      color: "from-green-400 to-purple-400",
    },
  ]

  return (
    
      
        Skills
      

      
        {skills.map((skill, index) => (
          
            
            
              {skill.icon}
              {skill.name}
            
          
        ))}
      
    
  )
}

[V0_FILE]typescriptreact:file="components/contact.tsx"
"use client"

import { motion } from "framer-motion"
import { useRef } from "react"
import { useInView } from "framer-motion"
import { Phone, Mail } from "lucide-react"

export default function Contact() {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true, amount: 0.3 })

  return (
    
      
        Contact Me
      

      
        
          {/* Decorative elements */}
          
          

          
            
              
                
                  
                
                
                  Phone
                  9840826461
                
              

              
                
                  
                
                
                  Email
                  andralyntrinita@gmail.com
                
              
            

            
              
                Feel free to reach out for collaborations or just a friendly chat!
              
            
          
        
      
    
  )
}

[V0_FILE]typescriptreact:file="components/footer.tsx"
import { Github, Linkedin, FileText } from "lucide-react"

export default function Footer() {
  return (
    
      
        
          
            © {new Date().getFullYear()} Hazel Trinita. All rights reserved.
          
          
            
              
            
            
              
            
            
              
            
          
        
      
    
  )
}

[V0_FILE]typescriptreact:file="app/layout.tsx"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Hazel Trinita | Web Developer",
  description: "Portfolio website of Hazel Trinita, Web Developer",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    
      {children}
    
  )
}

[V0_FILE]css:file="app/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 271 91% 65%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 271 91% 65%;
  --radius: 0.5rem;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --primary: 271 91% 65%;
  --primary-foreground: 222.2 47.4% 11.2%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 271 91% 65%;
}

html {
  scroll-behavior: smooth;
}

body {
  background: linear-gradient(to bottom, #2d1b69, #000000);
  color: white;
  min-height: 100vh;
}

/* Glowing effect */
.glow {
  position: relative;
}

.glow::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: radial-gradient(circle, rgba(186, 104, 200, 0.3) 0%, rgba(0, 0, 0, 0) 70%);
  border-radius: 50%;
  z-index: -1;
  animation: pulse 3s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
  100% {
    transform: scale(0.95);
    opacity: 0.7;
  }
}

[V0_FILE]typescriptreact:file="tailwind.config.ts"
import type { Config } from "tailwindcss"

const config: Config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    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))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

export default config