Diya Arora | UI/UX Designer Portfolio

[V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]css:file="app/globals.css" isMerged="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: 222.2 47.4% 11.2%; --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: 222.2 84% 4.9%; --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: 210 40% 98%; --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: 212.7 26.8% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Animation classes */ .animate-in { opacity: 1 !important; transform: translateY(0) !important; } [V0_FILE]typescriptreact:file="components/ui/avatar.tsx" isMerged="true" "use client" import * as React from "react" import * as AvatarPrimitive from "@radix-ui/react-avatar" import { cn } from "@/lib/utils" const Avatar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Avatar.displayName = AvatarPrimitive.Root.displayName const AvatarImage = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarImage.displayName = AvatarPrimitive.Image.displayName const AvatarFallback = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName export { Avatar, AvatarImage, AvatarFallback } [V0_FILE]jpg:file="public/diya-photo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202025-03-27%20at%202.51.02%20PM-kOu5YlGrbmfzk0xCUW9Eda4MYUMFdp.jpeg" isMerged="true" [V0_FILE]png:file="public/fontober-poster-1.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Square%20Outdoor%20Sign%20Mockup-IreXn0AXBGjP03tioCm2z4mArkIUNG.png" isMerged="true" [V0_FILE]png:file="public/fontober-poster-2.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Street%20Sign%20Mockup%2C%20Side%20View%20%281%29-bZdLeZ3zbuwGrFPvND9nI0qoniZXom.png" isMerged="true" [V0_FILE]png:file="public/fontober-poster-3.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Tote%20Bag%20Mockup%20Hanging-xNBmSjcdlvFj7bRIGLFlz0fnBuNB6z.png" isMerged="true" [V0_FILE]png:file="public/kindhub-screenshot.png" url="https://sjc.microlink.io/kWnOf2oXlI8tJK16UUEcsnSSXatHHy2-osFp_1ClgGjNMJoiSdXCO2BGB365YqhKz132MNQM-REZwqtieRPdyw.jpeg" isMerged="true" [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" 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: "Diya Arora | UI/UX Designer Portfolio", description: "Aspiring UI/UX designer creating meaningful and user-centered digital experiences. Specializing in design systems, accessibility, and responsive web design. View my work with LibraryMitra, KINDsummit 2025, and creative typography projects.", keywords: [ "UI/UX Designer", "User Experience Design", "User Interface Design", "Design Systems", "Accessibility Design", "Responsive Design", "Figma Designer", "Brand Identity", "Typography Design", "Portfolio", "Diya Arora", "LibraryMitra", "KINDsummit", "Fontober", "Web Design", "Digital Design", ], authors: [{ name: "Diya Arora" }], creator: "Diya Arora", publisher: "Diya Arora", robots: { index: true, follow: true, googleBot: { index: true, follow: true, "max-video-preview": -1, "max-image-preview": "large", "max-snippet": -1, }, }, openGraph: { type: "website", locale: "en_US", url: "https://diyaarora.dev", siteName: "Diya Arora - UI/UX Designer", title: "Diya Arora | UI/UX Designer Portfolio", description: "Aspiring UI/UX designer creating meaningful and user-centered digital experiences. Specializing in design systems, accessibility, and responsive web design.", images: [ { url: "/og-image.jpg", width: 1200, height: 630, alt: "Diya Arora - UI/UX Designer Portfolio", }, ], }, twitter: { card: "summary_large_image", title: "Diya Arora | UI/UX Designer Portfolio", description: "Aspiring UI/UX designer creating meaningful and user-centered digital experiences. View my design work and case studies.", images: ["/og-image.jpg"], creator: "@diyaarora", }, alternates: { canonical: "https://diyaarora.dev", }, category: "Design Portfolio", classification: "UI/UX Design Portfolio", other: { "theme-color": "#f8f9fa", "color-scheme": "light", "mobile-web-app-capable": "yes", "apple-mobile-web-app-capable": "yes", "apple-mobile-web-app-status-bar-style": "default", "apple-mobile-web-app-title": "Diya Arora Portfolio", "application-name": "Diya Arora Portfolio", "msapplication-TileColor": "#f8f9fa", "msapplication-config": "/browserconfig.xml", }, } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]json:file="public/manifest.json" isMerged="true" { "name": "Diya Arora - UI/UX Designer Portfolio", "short_name": "Diya Arora", "description": "UI/UX Designer creating meaningful and user-centered digital experiences", "start_url": "/", "display": "standalone", "background_color": "#f8f9fa", "theme_color": "#f8f9fa", "orientation": "portrait-primary", "icons": [ { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable any" }, { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable any" } ], "categories": ["design", "portfolio", "business"], "lang": "en", "dir": "ltr" } [V0_FILE]xml:file="public/sitemap.xml" isMerged="true" https://diyaarora.dev 2025-01-14 monthly 1.0 https://diyaarora.dev#about 2025-01-14 monthly 0.8 https://diyaarora.dev#work 2025-01-14 weekly 0.9 https://diyaarora.dev#contact 2025-01-14 monthly 0.7 [V0_FILE]xml:file="public/robots.txt" isMerged="true" User-agent: * Allow: / Sitemap: https://diyaarora.dev/sitemap.xml [V0_FILE]typescriptreact:file="components/mode-toggle.tsx" isQuickEdit="true" isMerged="true" "use client" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { Sun, Moon } from "lucide-react" export function ModeToggle() { const { setTheme, theme } = useTheme() return ( ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { ArrowDown, Search, Users, Copy, ExternalLink, Sparkles, Figma, Layers, Grid3X3, MousePointer, Smartphone, Monitor, Zap, Target, Eye, PenTool, Type, Layout, Compass, Briefcase, ChevronUp, } from "lucide-react" import Image from "next/image" import { useEffect, useRef, useState } from "react" import Head from "next/head" export default function Portfolio() { const [isVisible, setIsVisible] = useState(false) const [activeSection, setActiveSection] = useState("") const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }) const [scrollY, setScrollY] = useState(0) const copyEmail = () => { navigator.clipboard.writeText("diyaarora1997@gmail.com") // Add toast notification const toast = document.createElement("div") toast.textContent = "Email copied to clipboard!" toast.className = "fixed top-4 right-4 bg-gray-900 text-white px-4 py-2 rounded-lg shadow-lg z-50 animate-in fade-in slide-in-from-top-2 duration-300" document.body.appendChild(toast) setTimeout(() => { toast.remove() }, 2000) } // Refs for animation elements const heroRef = useRef(null) const aboutRef = useRef(null) const processRef = useRef(null) const skillsRef = useRef(null) const workRef = useRef(null) const projectsRef = useRef(null) const contactRef = useRef(null) // Mouse tracking for parallax useEffect(() => { const handleMouseMove = (e: MouseEvent) => { setMousePosition({ x: e.clientX, y: e.clientY }) } const handleScroll = () => { setScrollY(window.scrollY) } window.addEventListener("mousemove", handleMouseMove) window.addEventListener("scroll", handleScroll) return () => { window.removeEventListener("mousemove", handleMouseMove) window.removeEventListener("scroll", handleScroll) } }, []) // Smooth scroll animation and section tracking useEffect(() => { const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add("animate-in") setActiveSection(entry.target.id) } }) }, { threshold: 0.1, rootMargin: "-10% 0px -10% 0px", }, ) // Observe all sections const sections = [heroRef, aboutRef, processRef, skillsRef, workRef, projectsRef, contactRef] sections.forEach((ref) => { if (ref.current) { observer.observe(ref.current) } }) // Show back to top button const handleScroll = () => { setIsVisible(window.scrollY > 300) } window.addEventListener("scroll", handleScroll) return () => { observer.disconnect() window.removeEventListener("scroll", handleScroll) } }, []) const scrollToTop = () => { window.scrollTo({ top: 0, behavior: "smooth" }) } const smoothScrollTo = (elementId: string) => { document.getElementById(elementId)?.scrollIntoView({ behavior: "smooth", block: "start", }) } return ( <> Diya Arora | UI/UX Designer Portfolio