[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { useState } from "react" import Header from "@/components/header" import Hero from "@/components/hero" import About from "@/components/about" import Experience from "@/components/experience" import Projects from "@/components/projects" import Education from "@/components/education" import Skills from "@/components/skills" import Contact from "@/components/contact" import Footer from "@/components/footer" import ProjectModal from "@/components/project-modal" import type { ProjectType } from "@/lib/types" export default function Home() { const [selectedProject, setSelectedProject] = useState(null) const [isModalOpen, setIsModalOpen] = useState(false) const openModal = (project: ProjectType) => { setSelectedProject(project) setIsModalOpen(true) } const closeModal = () => { setIsModalOpen(false) } return (

) } [V0_FILE]typescriptreact:file="lib/types.ts" isMerged="true" export type ProjectType = { id: number title: string description: string longDescription: string image: string technologies: string[] date: string link?: string github?: string } export type ExperienceType = { title: string company: string location: string date: string description: string[] } export type EducationType = { degree: string institution: string date: string description?: string } export type SkillType = { name: string level: number } [V0_FILE]typescriptreact:file="lib/data.ts" isMerged="true" import type { ProjectType, ExperienceType, EducationType, SkillType } from "./types" export const projects: ProjectType[] = [ { id: 1, title: "LAVEiZ Perfume Store Clone", description: "A perfume store website clone using HTML, CSS, and Bootstrap.", longDescription: "Created a perfume store website clone using HTML, CSS, and Bootstrap. Implemented responsive design to ensure a seamless browsing experience on various devices, including desktops, tablets, and smartphones. Used Bootstrap components and custom CSS to design a visually appealing and user-friendly interface.", image: "https://images.unsplash.com/photo-1615220368123-9bb8faf4221b?q=80&w=1974&auto=format&fit=crop", technologies: ["HTML", "CSS", "Bootstrap", "Responsive Design"], date: "April 2024 - May 2024", link: "https://laveiz-clone.example.com", github: "https://github.com/sumairadaniyal/laveiz-clone", }, { id: 2, title: "Zara Clinic Therapy Clone", description: "A therapy clinic website clone using HTML, CSS, and JavaScript.", longDescription: "Developed a therapy clinic website clone using HTML, CSS, and JavaScript. Created a user-friendly browsing experience across desktops, tablets, and smartphones with responsive design implementation. Utilized HTML5 and CSS3 to build the user interface and style elements, resulting in an engaging and visually appealing website.", image: "https://images.unsplash.com/photo-1576091160550-2173dba999ef?q=80&w=2070&auto=format&fit=crop", technologies: ["HTML", "CSS", "JavaScript", "Responsive Design"], date: "May 2024 - June 2024", link: "https://zara-clinic-clone.example.com", github: "https://github.com/sumairadaniyal/zara-clinic-clone", }, { id: 3, title: "Majestic Inn Hotel Booking", description: "A hotel booking service providing a seamless, user-friendly platform for potential guests.", longDescription: "Majestic Inn's hotel booking service is designed to provide a seamless, user-friendly platform for potential guests to easily find, compare, and book accommodations. The website features a clean, intuitive interface with advanced filtering options, real-time availability updates, and secure payment processing. The responsive design ensures a consistent experience across all devices.", image: "https://images.unsplash.com/photo-1566073771259-6a8506099945?q=80&w=2070&auto=format&fit=crop", technologies: ["HTML", "CSS", "JavaScript", "Bootstrap", "Responsive Design"], date: "June 2024 - July 2024", link: "https://majestic-inn.example.com", github: "https://github.com/sumairadaniyal/majestic-inn", }, { id: 4, title: "Personal Portfolio Website", description: "A personal portfolio website showcasing my skills and projects.", longDescription: "Designed and developed a personal portfolio website to showcase my skills, projects, and experience. The website features a modern, responsive design with smooth animations and interactive elements. Built with React.js, Framer Motion, and styled-components, the website provides visitors with an engaging experience while highlighting my technical abilities and creative approach.", image: "https://images.unsplash.com/photo-1517180102446-f3ece451e9d8?q=80&w=2070&auto=format&fit=crop", technologies: ["React.js", "Framer Motion", "Styled Components", "Tailwind CSS", "Responsive Design"], date: "July 2024 - August 2024", link: "https://sumairadaniyal.example.com", github: "https://github.com/sumairadaniyal/portfolio", }, ] export const experience: ExperienceType[] = [ { title: "Assistant (Contractual basis)", company: "Malir Development Authority", location: "Karachi, Pakistan", date: "May 2016 - March 2019", description: [ "Led e-commerce website development and maintenance.", "Managed calendars, scheduled appointments, and coordinated meetings.", "Drafted and proofread correspondence, reports and presentations.", ], }, ] export const education: EducationType[] = [ { degree: "Diploma (Software Engineering)", institution: "Aptech Learning Institute", date: "2024 - Present", description: "Currently pursuing a diploma in Software Engineering, focusing on web development technologies and programming fundamentals.", }, { degree: "Bachelor of Arts", institution: "University of Karachi", date: "2017 - 2019", description: "Completed Bachelor of Arts degree with a focus on humanities and social sciences.", }, ] export const skills: SkillType[] = [ { name: "HTML", level: 90 }, { name: "CSS", level: 85 }, { name: "JavaScript", level: 75 }, { name: "Bootstrap", level: 80 }, { name: "Figma", level: 70 }, { name: "MS Office", level: 85 }, { name: "Tally", level: 75 }, ] [V0_FILE]typescriptreact:file="components/header.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import Link from "next/link" import { Menu, X } from "lucide-react" const Header = () => { const [isScrolled, setIsScrolled] = useState(false) const [isMenuOpen, setIsMenuOpen] = useState(false) useEffect(() => { const handleScroll = () => { if (window.scrollY > 50) { setIsScrolled(true) } else { setIsScrolled(false) } } window.addEventListener("scroll", handleScroll) return () => { window.removeEventListener("scroll", handleScroll) } }, []) const toggleMenu = () => { setIsMenuOpen(!isMenuOpen) } const navLinks = [ { name: "Home", href: "/" }, { name: "About", href: "/#about" }, { name: "Experience", href: "/#experience" }, { name: "Projects", href: "/#projects" }, { name: "Education", href: "/#education" }, { name: "Skills", href: "/#skills" }, { name: "Contact", href: "/#contact" }, ] return (

SumairaDaniyal {/* Desktop Navigation */} {navLinks.map((link, index) => ( {link.name} ))} {/* Mobile Menu Button */}

{/* Mobile Navigation */} {isMenuOpen && (

)}

) } export default Header [V0_FILE]typescriptreact:file="components/animations/blob-animation.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" import { motion } from "framer-motion" import styled from "styled-components" const BlobContainer = styled.div` position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; ` const Blob = styled(motion.div)<{ $size: number; $color: string }>` position: absolute; border-radius: 50%; filter: blur(40px); opacity: 0.5; width: ${(props) => props.$size}px; height: ${(props) => props.$size}px; background-color: ${(props) => props.$color}; ` interface BlobAnimationProps { count?: number colors?: string[] } const BlobAnimation = ({ count = 5, colors = ["#4285F4", "#EA4335", "#FBBC05", "#34A853"] }: BlobAnimationProps) => { const containerRef = useRef(null) useEffect(() => { if (!containerRef.current) return const container = containerRef.current const containerWidth = container.offsetWidth const containerHeight = container.offsetHeight // Clear existing blobs container.innerHTML = "" // Create blobs for (let i = 0; i < count; i++) { const blob = document.createElement("div") const size = Math.random() * 300 + 100 const color = colors[Math.floor(Math.random() * colors.length)] blob.style.position = "absolute" blob.style.borderRadius = "50%" blob.style.filter = "blur(40px)" blob.style.opacity = "0.3" blob.style.width = `${size}px` blob.style.height = `${size}px` blob.style.backgroundColor = color blob.style.left = `${Math.random() * 100}%` blob.style.top = `${Math.random() * 100}%` blob.style.transform = "translate(-50%, -50%)" // Animation blob.style.animation = `blobFloat ${Math.random() * 10 + 15}s ease-in-out infinite alternate` blob.style.animationDelay = `${Math.random() * 5}s` container.appendChild(blob) } }, [count, colors]) return } export default BlobAnimation [V0_FILE]typescriptreact:file="components/animations/rotating-circles.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" import styled from "styled-components" const CirclesContainer = styled.div` position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; ` interface RotatingCirclesProps { count?: number colors?: string[] } const RotatingCircles = ({ count = 15, colors = ["#4285F4", "#EA4335", "#FBBC05", "#34A853"], }: RotatingCirclesProps) => { const containerRef = useRef(null) useEffect(() => { if (!containerRef.current) return const container = containerRef.current const containerWidth = container.offsetWidth const containerHeight = container.offsetHeight // Clear existing circles container.innerHTML = "" // Create a central point const centerX = containerWidth / 2 const centerY = containerHeight / 2 // Create circles for (let i = 0; i < count; i++) { const circle = document.createElement("div") const size = Math.random() * 30 + 10 const color = colors[Math.floor(Math.random() * colors.length)] const radius = Math.random() * 200 + 50 const angle = Math.random() * 360 const duration = Math.random() * 20 + 10 const delay = Math.random() * 5 const direction = Math.random() > 0.5 ? "normal" : "reverse" circle.style.position = "absolute" circle.style.borderRadius = "50%" circle.style.width = `${size}px` circle.style.height = `${size}px` circle.style.backgroundColor = color circle.style.opacity = "0.6" // Set initial position const initialX = centerX + radius * Math.cos((angle * Math.PI) / 180) const initialY = centerY + radius * Math.sin((angle * Math.PI) / 180) circle.style.left = `${initialX}px` circle.style.top = `${initialY}px` circle.style.transform = "translate(-50%, -50%)" // Animation circle.style.animation = `rotate ${duration}s linear infinite ${direction}, pulse ${Math.random() * 5 + 3}s ease-in-out infinite alternate` circle.style.animationDelay = `${delay}s` container.appendChild(circle) } }, [count, colors]) return } export default RotatingCircles [V0_FILE]typescriptreact:file="components/animations/bouncing-squares.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" import styled from "styled-components" const SquaresContainer = styled.div` position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; ` interface BouncingSquaresProps { count?: number colors?: string[] } const BouncingSquares = ({ count = 20, colors = ["#4285F4", "#EA4335", "#FBBC05", "#34A853"], }: BouncingSquaresProps) => { const containerRef = useRef(null) useEffect(() => { if (!containerRef.current) return const container = containerRef.current const containerWidth = container.offsetWidth const containerHeight = container.offsetHeight // Clear existing squares container.innerHTML = "" // Create squares for (let i = 0; i < count; i++) { const square = document.createElement("div") const size = Math.random() * 30 + 10 const color = colors[Math.floor(Math.random() * colors.length)] square.style.position = "absolute" square.style.width = `${size}px` square.style.height = `${size}px` square.style.backgroundColor = color square.style.opacity = "0.6" square.style.borderRadius = "4px" square.style.left = `${Math.random() * 100}%` square.style.top = `${Math.random() * 100}%` square.style.transform = "translate(-50%, -50%) rotate(0deg)" // Animation const duration = Math.random() * 10 + 5 const delay = Math.random() * 5 square.style.animation = ` bounce ${duration}s ease-in-out infinite alternate, rotate ${duration * 1.5}s linear infinite, colorChange ${duration * 2}s ease-in-out infinite alternate ` square.style.animationDelay = `${delay}s` container.appendChild(square) } }, [count, colors]) return } export default BouncingSquares [V0_FILE]typescriptreact:file="components/animations/growing-triangles.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" import styled from "styled-components" const TrianglesContainer = styled.div` position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; ` interface GrowingTrianglesProps { count?: number colors?: string[] } const GrowingTriangles = ({ count = 15, colors = ["#4285F4", "#EA4335", "#FBBC05", "#34A853"], }: GrowingTrianglesProps) => { const containerRef = useRef(null) useEffect(() => { if (!containerRef.current) return const container = containerRef.current // Clear existing triangles container.innerHTML = "" // Create triangles for (let i = 0; i < count; i++) { const triangle = document.createElement("div") const size = Math.random() * 40 + 20 const color = colors[Math.floor(Math.random() * colors.length)] triangle.style.position = "absolute" triangle.style.width = "0" triangle.style.height = "0" triangle.style.borderLeft = `${size / 2}px solid transparent` triangle.style.borderRight = `${size / 2}px solid transparent` triangle.style.borderBottom = `${size}px solid ${color}` triangle.style.opacity = "0.6" triangle.style.left = `${Math.random() * 100}%` triangle.style.top = `${Math.random() * 100}%` triangle.style.transform = "translate(-50%, -50%)" // Animation const duration = Math.random() * 10 + 5 const delay = Math.random() * 5 triangle.style.animation = ` grow ${duration}s ease-in-out infinite alternate, float ${duration * 1.5}s ease-in-out infinite alternate, fade ${duration * 2}s ease-in-out infinite ` triangle.style.animationDelay = `${delay}s` container.appendChild(triangle) } }, [count, colors]) return } export default GrowingTriangles [V0_FILE]typescriptreact:file="components/animations/wavy-lines.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" import styled from "styled-components" const LinesContainer = styled.div` position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; ` interface WavyLinesProps { count?: number colors?: string[] } const WavyLines = ({ count = 10, colors = ["#4285F4", "#EA4335", "#FBBC05", "#34A853"] }: WavyLinesProps) => { const containerRef = useRef(null) useEffect(() => { if (!containerRef.current) return const container = containerRef.current const containerHeight = container.offsetHeight // Clear existing lines container.innerHTML = "" // Create lines for (let i = 0; i < count; i++) { const line = document.createElement("div") const height = Math.random() * 2 + 1 const color = colors[Math.floor(Math.random() * colors.length)] const yPos = (containerHeight / count) * i line.style.position = "absolute" line.style.width = "200%" line.style.height = `${height}px` line.style.backgroundColor = color line.style.opacity = "0.3" line.style.left = "-50%" line.style.top = `${yPos}px` // Animation const duration = Math.random() * 20 + 10 const delay = Math.random() * 5 line.style.animation = `wave ${duration}s ease-in-out infinite` line.style.animationDelay = `${delay}s` container.appendChild(line) } }, [count, colors]) return } export default WavyLines [V0_FILE]typescriptreact:file="components/animations/geometric-grid.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" import styled from "styled-components" const GridContainer = styled.div` position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; ` interface GeometricGridProps { count?: number colors?: string[] } const GeometricGrid = ({ count = 30, colors = ["#4285F4", "#EA4335", "#FBBC05", "#34A853"] }: GeometricGridProps) => { const containerRef = useRef(null) useEffect(() => { if (!containerRef.current) return const container = containerRef.current const containerWidth = container.offsetWidth const containerHeight = container.offsetHeight // Clear existing hexagons container.innerHTML = "" // Calculate grid dimensions const cols = Math.ceil(Math.sqrt(count)) const rows = Math.ceil(count / cols) const cellWidth = containerWidth / cols const cellHeight = containerHeight / rows // Create hexagons for (let i = 0; i < rows; i++) { for (let j = 0; j < cols; j++) { if (i * cols + j >= count) break const hexagon = document.createElement("div") const size = Math.min(cellWidth, cellHeight) * 0.6 const color = colors[Math.floor(Math.random() * colors.length)] hexagon.style.position = "absolute" hexagon.style.width = `${size}px` hexagon.style.height = `${size * 0.866}px` hexagon.style.backgroundColor = "transparent" hexagon.style.left = `${j * cellWidth + cellWidth / 2}px` hexagon.style.top = `${i * cellHeight + cellHeight / 2}px` hexagon.style.transform = "translate(-50%, -50%)" hexagon.style.clipPath = "polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%)" hexagon.style.border = `2px solid ${color}` hexagon.style.opacity = "0.4" // Animation const duration = Math.random() * 10 + 5 const delay = Math.random() * 5 hexagon.style.animation = ` pulse ${duration}s ease-in-out infinite alternate, rotate3D ${duration * 2}s ease-in-out infinite ` hexagon.style.animationDelay = `${delay}s` container.appendChild(hexagon) } } }, [count, colors]) return } export default GeometricGrid [V0_FILE]typescriptreact:file="components/animations/expanding-pulses.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" import styled from "styled-components" const PulsesContainer = styled.div` position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; ` interface ExpandingPulsesProps { count?: number colors?: string[] } const ExpandingPulses = ({ count = 10, colors = ["#4285F4", "#EA4335", "#FBBC05", "#34A853"], }: ExpandingPulsesProps) => { const containerRef = useRef(null) useEffect(() => { if (!containerRef.current) return const container = containerRef.current const containerWidth = container.offsetWidth const containerHeight = container.offsetHeight // Clear existing pulses container.innerHTML = "" // Create pulses for (let i = 0; i < count; i++) { const pulse = document.createElement("div") const size = Math.random() * 20 + 10 const color = colors[Math.floor(Math.random() * colors.length)] pulse.style.position = "absolute" pulse.style.borderRadius = "50%" pulse.style.width = `${size}px` pulse.style.height = `${size}px` pulse.style.backgroundColor = color pulse.style.opacity = "0.6" pulse.style.left = `${Math.random() * 100}%` pulse.style.top = `${Math.random() * 100}%` pulse.style.transform = "translate(-50%, -50%)" // Animation const duration = Math.random() * 5 + 3 const delay = Math.random() * 5 pulse.style.animation = `expandPulse ${duration}s ease-in-out infinite` pulse.style.animationDelay = `${delay}s` container.appendChild(pulse) } }, [count, colors]) return } export default ExpandingPulses [V0_FILE]typescriptreact:file="components/animations/diagonal-stripes.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" import styled from "styled-components" const StripesContainer = styled.div` position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; ` interface DiagonalStripesProps { count?: number colors?: string[] } const DiagonalStripes = ({ count = 15, colors = ["#4285F4", "#EA4335", "#FBBC05", "#34A853"], }: DiagonalStripesProps) => { const containerRef = useRef(null) useEffect(() => { if (!containerRef.current) return const container = containerRef.current const containerWidth = container.offsetWidth const containerHeight = container.offsetHeight // Clear existing stripes container.innerHTML = "" // Calculate diagonal length using Pythagorean theorem const diagonalLength = Math.sqrt(Math.pow(containerWidth, 2) + Math.pow(containerHeight, 2)) const stripeWidth = diagonalLength / count // Create stripes for (let i = 0; i < count * 2; i++) { const stripe = document.createElement("div") const thickness = Math.random() * 3 + 1 const color = colors[Math.floor(Math.random() * colors.length)] const offset = (i - count) * stripeWidth stripe.style.position = "absolute" stripe.style.width = `${diagonalLength}px` stripe.style.height = `${thickness}px` stripe.style.backgroundColor = color stripe.style.opacity = "0.3" stripe.style.top = "50%" stripe.style.left = "50%" stripe.style.transform = `translate(-50%, -50%) rotate(45deg) translateX(${offset}px)` // Animation const duration = Math.random() * 15 + 10 const delay = Math.random() * 5 stripe.style.animation = `stripeMove ${duration}s linear infinite` stripe.style.animationDelay = `${delay}s` container.appendChild(stripe) } }, [count, colors]) return } export default DiagonalStripes [V0_FILE]typescriptreact:file="components/animations/typing-effect.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import styled, { keyframes } from "styled-components" const blink = keyframes` 0%, 100% { opacity: 1; } 50% { opacity: 0; } ` const Cursor = styled.span` display: inline-block; width: 2px; height: 1em; background-color: currentColor; margin-left: 2px; animation: ${blink} 1s step-end infinite; ` interface TypingEffectProps { text: string typingSpeed?: number delay?: number className?: string onComplete?: () => void } const TypingEffect = ({ text, typingSpeed = 100, delay = 0, className = "", onComplete }: TypingEffectProps) => { const [displayText, setDisplayText] = useState("") const [isTyping, setIsTyping] = useState(false) const [currentIndex, setCurrentIndex] = useState(0) useEffect(() => { let timeout: NodeJS.Timeout // Initial delay timeout = setTimeout(() => { setIsTyping(true) }, delay) return () => clearTimeout(timeout) }, [delay]) useEffect(() => { let timeout: NodeJS.Timeout if (isTyping && currentIndex < text.length) { timeout = setTimeout(() => { setDisplayText((prev) => prev + text[currentIndex]) setCurrentIndex((prev) => prev + 1) }, typingSpeed) } else if (isTyping && currentIndex >= text.length) { setIsTyping(false) if (onComplete) onComplete() } return () => clearTimeout(timeout) }, [isTyping, currentIndex, text, typingSpeed, onComplete]) return ( {displayText} {isTyping && } ) } export default TypingEffect [V0_FILE]typescriptreact:file="components/animations/cube-animation.tsx" "use client" import { useEffect, useRef } from "react" import styled from "styled-components" const CubeContainer = styled.div` position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; ` interface CubeAnimationProps { count?: number colors?: string[] } const CubeAnimation = ({ count = 15, colors = ["#6366f1", "#8b5cf6", "#d946ef", "#ec4899"] }: CubeAnimationProps) => { const containerRef = useRef(null) useEffect(() => { if (!containerRef.current) return const container = containerRef.current // Clear existing cubes container.innerHTML = "" // Create cubes for (let i = 0; i < count; i++) { const cube = document.createElement("div") const size = Math.random() * 40 + 20 const color = colors[Math.floor(Math.random() * colors.length)] cube.style.position = "absolute" cube.style.width = `${size}px` cube.style.height = `${size}px` cube.style.backgroundColor = "transparent" cube.style.border = `1px solid ${color}` cube.style.opacity = "0.3" cube.style.left = `${Math.random() * 100}%` cube.style.top = `${Math.random() * 100}%` cube.style.transform = "translate(-50%, -50%) rotateX(0deg) rotateY(0deg)" cube.style.transformStyle = "preserve-3d" // Animation const duration = Math.random() * 20 + 10 const delay = Math.random() * 5 cube.style.animation = `cubeRotate ${duration}s linear infinite` cube.style.animationDelay = `${delay}s` container.appendChild(cube) } }, [count, colors]) return } export default CubeAnimation [V0_FILE]typescriptreact:file="components/animations/blurry-blob.tsx" "use client" import { useEffect, useRef } from "react" import styled from "styled-components" const BlobContainer = styled.div` position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; ` interface BlurryBlobProps { count?: number colors?: string[] } const BlurryBlob = ({ count = 5, colors = ["#6366f1", "#8b5cf6", "#d946ef", "#ec4899"] }: BlurryBlobProps) => { const containerRef = useRef(null) useEffect(() => { if (!containerRef.current) return const container = containerRef.current // Clear existing blobs container.innerHTML = "" // Create blobs for (let i = 0; i < count; i++) { const blob = document.createElement("div") const size = Math.random() * 300 + 100 const color = colors[Math.floor(Math.random() * colors.length)] blob.style.position = "absolute" blob.style.borderRadius = "50%" blob.style.filter = "blur(60px)" blob.style.opacity = "0.15" blob.style.width = `${size}px` blob.style.height = `${size}px` blob.style.backgroundColor = color blob.style.left = `${Math.random() * 100}%` blob.style.top = `${Math.random() * 100}%` blob.style.transform = "translate(-50%, -50%)" // Animation const duration = Math.random() * 20 + 15 const delay = Math.random() * 5 blob.style.animation = `blobFloat ${duration}s ease-in-out infinite alternate` blob.style.animationDelay = `${delay}s` container.appendChild(blob) } }, [count, colors]) return } export default BlurryBlob [V0_FILE]typescriptreact:file="components/animations/star-field.tsx" isEdit="true" "use client" import { useEffect, useRef } from "react" import styled from "styled-components" const StarContainer = styled.div` position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; ` interface StarFieldProps { count?: number colors?: string[] } const StarField = ({ count = 100, colors = ["#ffffff", "#f8f8f8", "#f0f0f0", "#e8e8e8"] }: StarFieldProps) => { const containerRef = useRef(null) useEffect(() => { if (!containerRef.current) return const container = containerRef.current // Clear existing stars container.innerHTML = "" // Create stars for (let i = 0; i < count; i++) { const star = document.createElement("div") const size = Math.random() * 2 + 1 const color = colors[Math.floor(Math.random() * colors.length)] star.style.position = "absolute" star.style.width = `${size}px` star.style.height = `${size}px` star.style.backgroundColor = color star.style.borderRadius = "50%" star.style.left = `${Math.random() * 100}%` star.style.top = `${Math.random() * 100}%` star.style.boxShadow = `0 0 ${size * 2}px ${size / 2}px ${color}` // Animation const duration = Math.random() * 3 + 1 const delay = Math.random() * 3 star.style.animation = `twinkle ${duration}s ease-in-out infinite alternate` star.style.animationDelay = `${delay}s` container.appendChild(star) } }, [count, colors]) return } export default StarField [V0_FILE]css:file="app/animations.css" isFixed="true" isEdit="true" isQuickEdit="true" @keyframes blobFloat { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.2) translateY(-20px); } 100% { transform: translate(-50%, -50%) scale(1) translateY(0); } } @keyframes cubeRotate { 0% { transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg); } 25% { transform: translate(-50%, -50%) rotateX(90deg) rotateY(45deg); } 50% { transform: translate(-50%, -50%) rotateX(180deg) rotateY(90deg); } 75% { transform: translate(-50%, -50%) rotateX(270deg) rotateY(135deg); } 100% { transform: translate(-50%, -50%) rotateX(360deg) rotateY(180deg); } } @keyframes pulse { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.5); } 100% { transform: translate(-50%, -50%) scale(1); } } @keyframes bounce { 0% { transform: translate(-50%, -50%) translateY(0); } 50% { transform: translate(-50%, -50%) translateY(-100px); } 100% { transform: translate(-50%, -50%) translateY(0); } } @keyframes rotate { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes colorChange { 0% { background-color: #4285f4; } 33% { background-color: #ea4335; } 66% { background-color: #fbbc05; } 100% { background-color: #34a853; } } @keyframes grow { 0% { transform: translate(-50%, -50%) scale(0.5); } 100% { transform: translate(-50%, -50%) scale(1.5); } } @keyframes float { 0% { transform: translate(-50%, -50%) translateY(0); } 50% { transform: translate(-50%, -50%) translateY(-30px); } 100% { transform: translate(-50%, -50%) translateY(0); } } @keyframes fade { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.8; } } @keyframes wave { 0% { transform: translateY(0) scaleX(1); } 50% { transform: translateY(20px) scaleX(0.8); } 100% { transform: translateY(0) scaleX(1); } } @keyframes rotate3D { 0% { transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg); } 50% { transform: translate(-50%, -50%) rotateX(180deg) rotateY(90deg); } 100% { transform: translate(-50%, -50%) rotateX(360deg) rotateY(0deg); } } @keyframes expandPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; } 50% { transform: translate(-50%, -50%) scale(3); opacity: 0; } } @keyframes stripeMove { 0% { transform: translate(-50%, -50%) rotate(45deg) translateX(0); } 100% { transform: translate(-50%, -50%) rotate(45deg) translateX(200px); } } @keyframes twinkle { 0% { opacity: 0.2; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.2); } } @keyframes typing { from { width: 0; } to { width: 100%; } } @keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: currentColor; } } [V0_FILE]css:file="app/globals.css" isEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :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: 262.1 83.3% 57.8%; --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: 262.1 83.3% 57.8%; --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: 262.1 83.3% 57.8%; --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: 262.1 83.3% 57.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } .animated-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; } .pure-dark { background-color: #0a0a0a; color: #f8f8f8; } .gradient-text { background: linear-gradient(to right, #6366f1, #8b5cf6, #d946ef, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradient-shift 8s ease infinite; background-size: 200% auto; } @keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .glass-card { background: rgba(20, 20, 20, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.36); } .neon-border { box-shadow: 0 0 5px rgba(99, 102, 241, 0.5), 0 0 10px rgba(99, 102, 241, 0.3); } .neon-text { text-shadow: 0 0 5px rgba(99, 102, 241, 0.5), 0 0 10px rgba(99, 102, 241, 0.3); } [V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", 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))", }, dark: { 100: "#0a0a0a", 200: "#121212", 300: "#1a1a1a", 400: "#242424", 500: "#2a2a2a", }, }, 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")], } satisfies Config export default config [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import "./animations.css" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Sumaira Daniyal | Front End Developer", description: "Portfolio website of Sumaira Daniyal, Front End Developer", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/hero.tsx" isEdit="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { ArrowDown } from "lucide-react" import { Button } from "@/components/ui/button" import BlurryBlob from "@/components/animations/blurry-blob" import StarField from "@/components/animations/star-field" import TypingEffect from "@/components/animations/typing-effect" const Hero = () => { const [typingComplete, setTypingComplete] = useState(false) const [showSubtitle, setShowSubtitle] = useState(false) const [showDescription, setShowDescription] = useState(false) const [showButtons, setShowButtons] = useState(false) const handleTypingComplete = () => { setTypingComplete(true) setShowSubtitle(true) setTimeout(() => { setShowDescription(true) setTimeout(() => { setShowButtons(true) }, 800) }, 800) } return (

{/* Animated Background */}

Sumaira Daniyal

Diligent and motivated software engineering student with a solid foundation in web development and design. Passionate about leveraging technical skills to contribute effectively in dynamic environments.

) } export default Hero [V0_FILE]typescriptreact:file="components/about.tsx" isEdit="true" "use client" import { useRef } from "react" import { motion, useInView } from "framer-motion" import { User, MapPin, Phone, Mail, Linkedin } from "lucide-react" import CubeAnimation from "@/components/animations/cube-animation" const About = () => { const sectionRef = useRef(null) const isInView = useInView(sectionRef, { once: false, margin: "-100px" }) return (

{/* Animated Background */}

About Me

Front End Developer

Diligent and motivated software engineering student at Aptech Learning Institute with a solid foundation in web development and design. Bachelor of Arts graduate from the University of Karachi. Experienced Assistant at Malir Development Authority. Proficient in HTML, CSS, JavaScript, Figma, Bootstrap, MS Office, and Tally. Passionate about leveraging technical skills to contribute effectively in dynamic environments.

Sumaira Daniyal Karachi, Pakistan +92 333 4088951 sumairadaniyal8@gmail.com LinkedIn Profile

Contact Me

) } export default About [V0_FILE]typescriptreact:file="components/experience.tsx" isEdit="true" "use client" import { useRef } from "react" import { motion, useInView } from "framer-motion" import { experience } from "@/lib/data" import { Briefcase } from "lucide-react" import BlurryBlob from "@/components/animations/blurry-blob" const Experience = () => { const sectionRef = useRef(null) const isInView = useInView(sectionRef, { once: false, margin: "-100px" }) return (

{/* Animated Background */}

Work Experience

{experience.map((job, index) => (

{job.title}

{job.date}

{job.company}

{job.location}

• {item}

))}

) } export default Experience [V0_FILE]typescriptreact:file="components/projects.tsx" isEdit="true" "use client" import { useRef } from "react" import { motion, useInView } from "framer-motion" import { projects } from "@/lib/data" import type { ProjectType } from "@/lib/types" import { ExternalLink, Github } from "lucide-react" import Link from "next/link" import { Button } from "@/components/ui/button" import StarField from "@/components/animations/star-field" interface ProjectsProps { openModal: (project: ProjectType) => void } const Projects = ({ openModal }: ProjectsProps) => { const sectionRef = useRef(null) const isInView = useInView(sectionRef, { once: false, margin: "-100px" }) // Only show first 3 projects on the home page const featuredProjects = projects.slice(0, 3) return (

{/* Animated Background */}

My Projects

Here are some of my recent projects. Click on a project to view more details.

{featuredProjects.map((project, index) => (

{project.date}

{project.github && ( )} {project.link && ( )}

{project.title}

{project.description}

{project.technologies.slice(0, 3).map((tech, i) => ( {tech} ))} {project.technologies.length > 3 && ( +{project.technologies.length - 3} more )}

))}

) } export default Projects [V0_FILE]typescriptreact:file="components/education.tsx" isEdit="true" "use client" import { useRef } from "react" import { motion, useInView } from "framer-motion" import { education } from "@/lib/data" import { GraduationCap } from "lucide-react" import CubeAnimation from "@/components/animations/cube-animation" const Education = () => { const sectionRef = useRef(null) const isInView = useInView(sectionRef, { once: false, margin: "-100px" }) return (

{/* Animated Background */}

Education

{education.map((edu, index) => (

{edu.degree}

{edu.date}

{edu.institution}

{edu.description &&

{edu.description}

} ))}

) } export default Education [V0_FILE]typescriptreact:file="components/skills.tsx" isEdit="true" "use client" import { useRef } from "react" import { motion, useInView } from "framer-motion" import { skills } from "@/lib/data" import BlurryBlob from "@/components/animations/blurry-blob" const Skills = () => { const sectionRef = useRef(null) const isInView = useInView(sectionRef, { once: false, margin: "-100px" }) return (

{/* Animated Background */}

My Skills

Here are the technologies and tools I'm proficient with.

{skills.map((skill, index) => (

{skill.name}

{skill.level}%

))}

) } export default Skills [V0_FILE]typescriptreact:file="components/contact.tsx" isEdit="true" "use client" import { useRef, useState } from "react" import type React from "react" import { motion, useInView } from "framer-motion" import { Send, Mail, Phone, MapPin } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Github } from "lucide-react" import StarField from "@/components/animations/star-field" const Contact = () => { const sectionRef = useRef(null) const isInView = useInView(sectionRef, { once: false, margin: "-100px" }) const [formData, setFormData] = useState({ name: "", email: "", subject: "", message: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const [submitSuccess, setSubmitSuccess] = useState(false) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) // Simulate form submission setTimeout(() => { setIsSubmitting(false) setSubmitSuccess(true) setFormData({ name: "", email: "", subject: "", message: "", }) // Reset success message after 3 seconds setTimeout(() => { setSubmitSuccess(false) }, 3000) }, 1500) } return (

{/* Animated Background */}

Get In Touch

Feel free to contact me for any work or suggestions.

Contact Information

Email

sumairadaniyal8@gmail.com

Phone

+92 333 4088951

Location

Karachi, Pakistan

Follow Me

Send Me a Message

</div>

<Button
                type="submit"
                className="w-full bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 transition-all duration-300 border-0"
                disabled={isSubmitting}
              >
                {isSubmitting ? (
                  <span className="flex items-center">
                    <svg
                      className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                    >
                      <circle
                        className="opacity-25"
                        cx="12"
                        cy="12"
                        r="10"
                        stroke="currentColor"
                        strokeWidth="4"
                      ></circle>
                      <path
                        className="opacity-75"
                        fill="currentColor"
                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                      ></path>
                    </svg>
                    Sending...
                  </span>
                ) : (
                  <span className="flex items-center">
                    <Send className="mr-2" size={18} />
                    Send Message
                  </span>
                )}
              </Button>

{submitSuccess && (
                <motion.div
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  className="mt-4 p-3 bg-green-500/10 text-green-500 rounded-md text-center"
                >
                  Your message has been sent successfully!
                </motion.div>
              )}
            </form>
          </motion.div>
        </div>
      </div>
    </section>
  )
}

export default Contact

[V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true"
"use client"
import { motion } from "framer-motion"
import Link from "next/link"
import { ArrowUp } from "lucide-react"
import CubeAnimation from "@/components/animations/cube-animation"

const Footer = () => {
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    })
  }

const currentYear = new Date().getFullYear()

return (
    <footer className="relative bg-dark-100 py-10 overflow-hidden">
      {/* Animated Background */}
      <div className="animated-bg">
        <CubeAnimation count={10} colors={["#6366f1", "#8b5cf6", "#d946ef", "#ec4899"]} />
      </div>

<motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className="mb-6"
          >
            <Link href="/" className="text-2xl font-bold gradient-text neon-text">
              Sumaira<span className="text-white">Daniyal</span>
            </Link>
          </motion.div>

<motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.3 }}
            className="flex flex-wrap justify-center gap-6 mb-8"
          >
            {["About", "Experience", "Projects", "Education", "Skills", "Contact"].map((item, index) => (
              <motion.div key={index} whileHover={{ y: -3, scale: 1.05 }} transition={{ duration: 0.2 }}>
                <Link href={`/#${item.toLowerCase()}`} className="text-gray-400 hover:text-primary transition-colors">
                  {item}
                </Link>
              </motion.div>
            ))}
          </motion.div>

<motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.4 }}
            className="text-center text-gray-400"
          >
            <p>© {currentYear} Sumaira Daniyal. All rights reserved.</p>
            <p className="mt-2 text-sm">Front End Developer based in Karachi, Pakistan</p>
          </motion.div>
        </div>
      </div>
    </footer>
  )
}

export default Footer

[V0_FILE]typescriptreact:file="app/projects/page.tsx" isEdit="true"
"use client"
import { useState } from "react"
import { motion } from "framer-motion"
import Header from "@/components/header"
import Footer from "@/components/footer"
import ProjectModal from "@/components/project-modal"
import type { ProjectType } from "@/lib/types"
import { projects } from "@/lib/data"
import Link from "next/link"
import BlurryBlob from "@/components/animations/blurry-blob"
import StarField from "@/components/animations/star-field"

export default function ProjectsPage() {
  const [selectedProject, setSelectedProject] = useState<ProjectType | null>(null)
  const [isModalOpen, setIsModalOpen] = useState(false)

const openModal = (project: ProjectType) => {
    setSelectedProject(project)
    setIsModalOpen(true)
  }

const closeModal = () => {
    setIsModalOpen(false)
  }

return (
    <main className="min-h-screen bg-dark-100 text-white relative overflow-hidden">
      {/* Animated Background */}
      <div className="animated-bg">
        <BlurryBlob count={5} colors={["#6366f1", "#8b5cf6", "#d946ef", "#ec4899"]} />
        <StarField count={150} />
      </div>

<section className="container mx-auto px-4 py-20 relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="mb-10"
        >
          <Link href="/" className="text-primary hover:text-indigo-300 mb-6 inline-block">
            ← Back to Home
          </Link>
          <h1 className="text-4xl md:text-5xl font-bold mb-6 gradient-text neon-text">All Projects</h1>
          <p className="text-gray-400 max-w-2xl">
            Explore all my projects in detail. Each project represents my skills and experience in web development.
          </p>
        </motion.div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {projects.map((project, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              whileHover={{
                y: -10,
                boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2)",
                transition: { duration: 0.3 },
              }}
              className="glass-card rounded-lg overflow-hidden"
            >
              <div className="relative h-48 overflow-hidden group">
                <img
                  src={project.image || "/placeholder.svg"}
                  alt={project.title}
                  className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/90 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
                  <div className="p-4 w-full">
                    <div className="flex justify-between items-center">
                      <span className="text-white text-sm">{project.date}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div className="p-6">
                <h3 className="text-xl font-bold mb-2">{project.title}</h3>
                <p className="text-gray-400 mb-4 line-clamp-2">{project.description}</p>
                <div className="flex flex-wrap gap-2 mb-4">
                  {project.technologies.slice(0, 3).map((tech, i) => (
                    <span key={i} className="text-xs bg-indigo-500/10 text-indigo-300 px-2 py-1 rounded-full">
                      {tech}
                    </span>
                  ))}
                  {project.technologies.length > 3 && (
                    <span className="text-xs bg-dark-300 px-2 py-1 rounded-full">
                      +{project.technologies.length - 3} more
                    </span>
                  )}
                </div>
                <button
                  onClick={() => openModal(project)}
                  className="px-4 py-2 bg-gradient-to-r from-indigo-500 to-purple-600 text-white rounded-md hover:from-indigo-600 hover:to-purple-700 transition-all duration-300 w-full"
                >
                  View Details
                </button>
              </div>
            </motion.div>
          ))}
        </div>
      </section>

{isModalOpen && selectedProject && <ProjectModal project={selectedProject} onClose={closeModal} />}
    </main>
  )
}

[V0_FILE]typescriptreact:file="components/project-modal.tsx" isEdit="true"
"use client"
import { useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import type { ProjectType } from "@/lib/types"
import { X, ExternalLink, Github } from "lucide-react"

interface ProjectModalProps {
  project: ProjectType
  onClose: () => void
}

const ProjectModal = ({ project, onClose }: ProjectModalProps) => {
  // Close modal when Escape key is pressed
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        onClose()
      }
    }

document.addEventListener("keydown", handleKeyDown)

// Prevent scrolling on the body when modal is open
    document.body.style.overflow = "hidden"

return () => {
      document.removeEventListener("keydown", handleKeyDown)
      document.body.style.overflow = "auto"
    }
  }, [onClose])

return (
    <AnimatePresence>
      <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm">
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          onClick={onClose}
          className="absolute inset-0"
        />

<motion.div
          initial={{ opacity: 0, scale: 0.9, y: 20 }}
          animate={{ opacity: 1, scale: 1, y: 0 }}
          exit={{ opacity: 0, scale: 0.9, y: 20 }}
          transition={{ type: "spring", damping: 20 }}
          className="relative glass-card rounded-lg shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto z-10"
        >
          <button
            onClick={onClose}
            className="absolute top-4 right-4 bg-dark-300/80 p-2 rounded-full hover:bg-dark-400 transition-colors z-10"
            aria-label="Close modal"
          >
            <X size={20} />
          </button>

<div className="relative h-64 sm:h-80 overflow-hidden">
            <img src={project.image || "/placeholder.svg"} alt={project.title} className="w-full h-full object-cover" />
            <div className="absolute inset-0 bg-gradient-to-t from-dark-100 to-transparent"></div>
            <div className="absolute bottom-0 left-0 p-6">
              <h2 className="text-2xl sm:text-3xl font-bold text-white neon-text">{project.title}</h2>
              <p className="text-white/80">{project.date}</p>
            </div>
          </div>

<div className="p-6">
            <div className="flex flex-wrap gap-2 mb-6">
              {project.technologies.map((tech, index) => (
                <span key={index} className="text-sm bg-indigo-500/10 text-indigo-300 px-3 py-1 rounded-full">
                  {tech}
                </span>
              ))}
            </div>

<div className="mb-6">
              <h3 className="text-xl font-bold mb-3 gradient-text">Project Overview</h3>
              <p className="text-gray-400">{project.longDescription}</p>
            </div>

<div className="flex flex-wrap gap-4">
              {project.github && (
                <motion.a
                  href={project.github}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-2 bg-dark-300 border border-dark-400 px-4 py-2 rounded-md hover:bg-dark-400 transition-colors"
                  whileHover={{ scale: 1.05 }}
                  whileTap={{ scale: 0.95 }}
                >
                  <Github size={18} />
                  <span>GitHub Repository</span>
                </motion.a>
              )}
              {project.link && (
                <motion.a
                  href={project.link}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-2 bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-4 py-2 rounded-md hover:from-indigo-600 hover:to-purple-700 transition-colors"
                  whileHover={{ scale: 1.05 }}
                  whileTap={{ scale: 0.95 }}
                >
                  <ExternalLink size={18} />
                  <span>Live Demo</span>
                </motion.a>
              )}
            </div>
          </div>
        </motion.div>
      </div>
    </AnimatePresence>
  )
}

export default ProjectModal
</article></body></html>