8c:I[903690,["/chat-static/_next/static/chunks/0e2tb6ztxas0b.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/1f7u6rgo4cul0.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/05pq8s6zv_wn1.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/43vadfihbvtl1.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/1gycrwvtm60qn.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/3wkp7zrf5-jmz.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/3xh9s6el8_6_x.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/0ke63s91gpvy3.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/1ccgxhg3rjfjo.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/0vd414frz2dl_.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/2mgce5j5u79tt.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/01gmrqojqtlsu.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/2qjug_t8m8oho.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/2womqu661fmr2.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/0qdgtnqed6832.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/1po5wfdz3ceh_.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/1lmne7b3yag00.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/330f8n_uwn2ft.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/0h7t4vk9gyu0g.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/2f3-lsrmmuv6z.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/1qov2bia_ns-o.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/10xq309qhj3gr.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/1v78dfwqx8tl-.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/1m_h06jid1ekf.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/34kx6djl8qij7.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/3hwyfh3v3lizg.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/3y2nzgu33897a.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/2xm81q215cv7s.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/3vtvee1raa1hh.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/0ylrm5ajfx1z7.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/0j_lsstp2mbsx.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/0aas_nxnpj24g.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/42h7tmr-x85i0.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/1pycny3zv2irk.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/2nrg64o7044ea.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/2wb66rh9_-phb.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/2934g55qd7tuc.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/111x4t_autsmc.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/18ivfh5uja4t0.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/2r3_xwoqt-j-8.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh"],"ExplicitChatIdProvider"] 8d:I[838238,["/chat-static/_next/static/chunks/0e2tb6ztxas0b.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/1f7u6rgo4cul0.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/05pq8s6zv_wn1.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/43vadfihbvtl1.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/1gycrwvtm60qn.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/3wkp7zrf5-jmz.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/3xh9s6el8_6_x.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/0ke63s91gpvy3.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/1ccgxhg3rjfjo.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/0vd414frz2dl_.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/2mgce5j5u79tt.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/01gmrqojqtlsu.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/2qjug_t8m8oho.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/2womqu661fmr2.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/0qdgtnqed6832.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/1po5wfdz3ceh_.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/1lmne7b3yag00.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/330f8n_uwn2ft.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/0h7t4vk9gyu0g.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/2f3-lsrmmuv6z.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/1qov2bia_ns-o.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/10xq309qhj3gr.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/1v78dfwqx8tl-.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/1m_h06jid1ekf.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/34kx6djl8qij7.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/3hwyfh3v3lizg.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/3y2nzgu33897a.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/2xm81q215cv7s.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/3vtvee1raa1hh.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/0ylrm5ajfx1z7.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/0j_lsstp2mbsx.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/0aas_nxnpj24g.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/42h7tmr-x85i0.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/1pycny3zv2irk.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/2nrg64o7044ea.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/2wb66rh9_-phb.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/2934g55qd7tuc.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/111x4t_autsmc.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/18ivfh5uja4t0.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh","/chat-static/_next/static/chunks/2r3_xwoqt-j-8.js?dpl=dpl_3s81AjTzYj1frYfpX9B14v86dCLh"],"SWRDataProvider"] 8e:Td6f5,[V0_FILE]css:file="app/globals.css" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated theme for professional architect portfolio - dark luxury aesthetic */ --background: oklch(0.09 0.02 280); --foreground: oklch(0.95 0.01 0); --card: oklch(0.15 0.02 280); --card-foreground: oklch(0.95 0.01 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.58 0.18 45); --primary-foreground: oklch(0.09 0.02 280); --secondary: oklch(0.5 0.15 220); --secondary-foreground: oklch(0.95 0.01 0); --accent: oklch(0.65 0.18 40); --accent-foreground: oklch(0.09 0.02 280); --muted: oklch(0.3 0.02 280); --muted-foreground: oklch(0.75 0.01 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.25 0.02 280); --input: oklch(0.12 0.02 280); --ring: oklch(0.58 0.18 45); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.09 0.02 280); --foreground: oklch(0.95 0.01 0); --card: oklch(0.15 0.02 280); --card-foreground: oklch(0.95 0.01 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.65 0.18 45); --primary-foreground: oklch(0.09 0.02 280); --secondary: oklch(0.55 0.15 220); --secondary-foreground: oklch(0.09 0.02 280); --accent: oklch(0.68 0.18 40); --accent-foreground: oklch(0.09 0.02 280); --muted: oklch(0.3 0.02 280); --muted-foreground: oklch(0.75 0.01 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.25 0.02 280); --input: oklch(0.12 0.02 280); --ring: oklch(0.65 0.18 45); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */ --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Custom animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes parallax { 0% { transform: translateY(0); } 100% { transform: translateY(-50px); } } .animate-fade-in-up { animation: fadeInUp 0.8s ease-out; } .animate-slide-in-left { animation: slideInLeft 0.8s ease-out; } .animate-slide-in-right { animation: slideInRight 0.8s ease-out; } .animate-scale-in { animation: scaleIn 0.8s ease-out; } .animate-parallax { animation: parallax linear forwards; } /* Background image utilities */ .bg-hero { background-image: url("/placeholder.svg?height=1080&width=1920"); background-size: cover; background-position: center; background-attachment: fixed; } .bg-overlay { background: linear-gradient(135deg, rgba(10, 14, 39, 0.8) 0%, rgba(10, 14, 39, 0.95) 100%); } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import LoadingAnimation from "@/components/loading-animation" import Navbar from "@/components/navbar" import Hero from "@/components/hero" import About from "@/components/about" import Experience from "@/components/experience" import Projects from "@/components/projects" import Contact from "@/components/contact" export default function Home() { const [isLoading, setIsLoading] = useState(true) useEffect(() => { const timer = setTimeout(() => setIsLoading(false), 3000) return () => clearTimeout(timer) }, []) if (isLoading) { return } return (

) } [V0_FILE]typescriptreact:file="components/gallery.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent } from "@/components/ui/card" interface Project { id: number title: string category: "victorian" | "modern" | "traditional" | "infrastructure" location: string image: string year: number } const projects: Project[] = [ { id: 1, title: "Victorian Heritage Restoration", category: "victorian", location: "Nottingham, UK", image: "/victorian-mansion-uk-architecture.jpg", year: 2024, }, { id: 2, title: "Modern Office Complex", category: "modern", location: "London, UK", image: "/modern-glass-office-building-architecture.jpg", year: 2024, }, { id: 3, title: "Heritage Temple Complex", category: "traditional", location: "Telangana, India", image: "/traditional-temple-india-architecture.jpg", year: 2023, }, { id: 4, title: "Lift Irrigation Structure", category: "infrastructure", location: "Hyderabad, India", image: "/irrigation-dam-water-infrastructure.jpg", year: 2023, }, { id: 5, title: "Contemporary Residential", category: "modern", location: "Manchester, UK", image: "/modern-residential-building-contemporary-design.jpg", year: 2024, }, { id: 6, title: "Tank Restoration Project", category: "infrastructure", location: "Karnataka, India", image: "/water-tank-restoration-rural-india.jpg", year: 2023, }, { id: 7, title: "Historic Brick Building", category: "victorian", location: "Manchester, UK", image: "/brick-victorian-era-building-uk.jpg", year: 2022, }, { id: 8, title: "Modern Urban Development", category: "modern", location: "Bangalore, India", image: "/modern-urban-development-skyline-india.jpg", year: 2024, }, ] export default function Gallery() { const [filter, setFilter] = useState("all") const [filteredProjects, setFilteredProjects] = useState(projects) const [isLoaded, setIsLoaded] = useState(false) useEffect(() => { setIsLoaded(true) }, []) useEffect(() => { if (filter === "all") { setFilteredProjects(projects) } else { setFilteredProjects(projects.filter((p) => p.category === filter)) } }, [filter]) const categories = [ { id: "all", label: "All Projects" }, { id: "victorian", label: "Victorian" }, { id: "modern", label: "Modern" }, { id: "traditional", label: "Traditional" }, { id: "infrastructure", label: "Infrastructure" }, ] return (

{/* Section Header */}

Portfolio

Architectural Excellence

A curated collection of projects spanning Victorian heritage, modern innovation, and infrastructure development.

{/* Filter Buttons */}

{categories.map((cat) => ( ))}

{/* Projects Grid */}

{filteredProjects.map((project, idx) => (

{project.location}

{project.title}

{project.category} {project.year}

))}

) } [V0_FILE]typescriptreact:file="components/project-showcase.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" export default function ProjectShowcase() { const [activeTab, setActiveTab] = useState(0) const [isVisible, setIsVisible] = useState(false) useEffect(() => { setIsVisible(true) }, []) const showcases = [ { title: "Kaleshwaram Lift Irrigation Project", location: "Hyderabad, India", description: "One of India's largest lift irrigation schemes featuring pump houses, canals, and distribution systems. Delivered on time and within budget with advanced digital monitoring.", highlights: ["Pump House Design", "Canal Infrastructure", "Digital Monitoring", "Quality Audits"], image: "/large-irrigation-project-infrastructure-engineerin.jpg", }, { title: "Victorian Heritage Restoration", location: "Nottingham, UK", description: "Comprehensive restoration of Grade II listed Victorian architecture maintaining authentic design while incorporating modern utilities and safety systems.", highlights: ["Heritage Conservation", "Structural Analysis", "Modern Integration", "BIS Compliance"], image: "/victorian-era-building-restoration-brick-architect.jpg", }, { title: "Mission Kakatiya Tank Restoration", location: "Telangana, India", description: "Large-scale irrigation tank restoration and strengthening project including desilting, bund rehabilitation, and sluice gate upgrades.", highlights: ["Tank Desilting", "Bund Strengthening", "Sluice Rehabilitation", "Water Storage Capacity"], image: "/water-tank-restoration-india-rural-infrastructure.jpg", }, ] return (

{/* Section Header */}

Featured Projects

Project Highlights

In-depth exploration of significant architectural and infrastructure projects.

{/* Tabs */}

{showcases.map((showcase, idx) => ( ))}

{/* Showcase Content */}

{/* Image */}

{/* Content */}

{showcases[activeTab].location}

{showcases[activeTab].title}

{showcases[activeTab].description}

{/* Highlights */}

{showcases[activeTab].highlights.map((highlight, idx) => (

✓

{highlight}

))}

) } [V0_FILE]typescriptreact:file="components/contact.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Mail, Phone, MapPin, Linkedin } from "lucide-react" export default function Contact() { const [formData, setFormData] = useState({ name: "", email: "", phone: "", message: "", }) const [submitted, setSubmitted] = useState(false) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() setSubmitted(true) setTimeout(() => setSubmitted(false), 3000) setFormData({ name: "", email: "", phone: "", message: "" }) } const handleChange = (e: React.ChangeEvent) => { setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value, })) } return (

{/* Section Header */}

Get In Touch

Contact

Interested in discussing a project? I'm always available to chat about architecture and innovation.

{/* Contact Info */}

rajuganga97@gmail.com

Phone

+44 7919 307 767

Location

Nottingham, UK

linkedin.com/in/gangavemula

{/* Stats */}

15+

Years Experience

50+

Projects Completed

Continents

{/* Contact Form */}

Full name

Phone number

Message

</div>

<button
              type="submit"
              className="w-full px-6 py-3 bg-primary text-primary-foreground font-semibold rounded hover:opacity-90 transition-opacity duration-300"
            >
              {submitted ? "Message Sent!" : "Send Message"}
            </button>
          </form>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true"
import * as React from 'react'

import { cn } from '@/lib/utils'

function Card({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card"
      className={cn(
        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
        className,
      )}
      {...props}
    />
  )
}

function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-header"
      className={cn(
        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
        className,
      )}
      {...props}
    />
  )
}

function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-title"
      className={cn('leading-none font-semibold', className)}
      {...props}
    />
  )
}

function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-action"
      className={cn(
        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
        className,
      )}
      {...props}
    />
  )
}

function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-content"
      className={cn('px-6', className)}
      {...props}
    />
  )
}

function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-footer"
      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
      {...props}
    />
  )
}

export {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardAction,
  CardDescription,
  CardContent,
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Geist, Geist_Mono } from "next/font/google"
import { Analytics } from "@vercel/analytics/next"
import "./globals.css"

const _geist = Geist({ subsets: ["latin"] })
const _geistMono = Geist_Mono({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "ARTIFACT - Architecture Portfolio | Ganga Raju Vemula",
  description:
    "Architectural portfolio showcasing UK Victorian heritage, modern architecture, Indian traditional design, and infrastructure excellence. PMP Certified Civil Engineer.",
  generator: "v0.app",
  icons: {
    icon: [
      {
        url: "/icon-light-32x32.png",
        media: "(prefers-color-scheme: light)",
      },
      {
        url: "/icon-dark-32x32.png",
        media: "(prefers-color-scheme: dark)",
      },
      {
        url: "/icon.svg",
        type: "image/svg+xml",
      },
    ],
    apple: "/apple-icon.png",
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={`font-sans antialiased`}>
        {children}
        <Analytics />
      </body>
    </html>
  )
}
[V0_FILE]jpg:file="public/victorian-mansion-uk-architecture.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/victorian-mansion-uk-architecture-WletbVAHH00nOdGDL7BM2I6ZPSeG3M.jpg" isMerged="true"
[V0_FILE]jpg:file="public/modern-glass-office-building-architecture.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-glass-office-building-architecture-GI5sokuXidIDFhLe5jEs76EAJHtO7A.jpg" isMerged="true"
[V0_FILE]jpg:file="public/traditional-temple-india-architecture.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/traditional-temple-india-architecture-ovgdeCPfwLR5XOKf7fgY43sjOE6gv8.jpg" isMerged="true"
[V0_FILE]jpg:file="public/irrigation-dam-water-infrastructure.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/irrigation-dam-water-infrastructure-VtxNEvUuqm31pXzfrbhY5tqAJwDM5T.jpg" isMerged="true"
[V0_FILE]jpg:file="public/modern-residential-building-contemporary-design.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-residential-building-contemporary-design-UyohkhaqvXWZEW7fQmJY268ZgXbbg6.jpg" isMerged="true"
[V0_FILE]jpg:file="public/water-tank-restoration-rural-india.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/water-tank-restoration-rural-india-3SUtcPQEWwskfgbCSpyVd7bDerEJEZ.jpg" isMerged="true"
[V0_FILE]jpg:file="public/brick-victorian-era-building-uk.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/brick-victorian-era-building-uk-rgCa8MXepADUbO2bMCZXvpxKFx2pxB.jpg" isMerged="true"
[V0_FILE]jpg:file="public/modern-urban-development-skyline-india.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-urban-development-skyline-india-8Qe2OqUwt19PrJho5hbzF1YPDJRxH2.jpg" isMerged="true"
[V0_FILE]jpg:file="public/large-irrigation-project-infrastructure-engineerin.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/large-irrigation-project-infrastructure-engineerin-VFoY96VcxRrETeUH9Ph19RrhmfaTOX.jpg" isMerged="true"
[V0_FILE]jpg:file="public/victorian-era-building-restoration-brick-architect.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/victorian-era-building-restoration-brick-architect-ki45G5aOSapVvFKZ1m4xmdJA6p14kf.jpg" isMerged="true"
[V0_FILE]jpg:file="public/water-tank-restoration-india-rural-infrastructure.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/water-tank-restoration-india-rural-infrastructure-wvVN4aB8mH4C8x4GR9JMzmVKLjUBqQ.jpg" isMerged="true"
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint ."
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "16.0.7",
    "next-themes": "^0.4.6",
    "react": "19.2.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.2.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^1.1.2",
    "zod": "3.25.76"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]typescriptreact:file="components/loading-animation.tsx" isMerged="true"
"use client"

import { useEffect, useRef } from "react"

export default function LoadingAnimation() {
  const canvasRef = useRef<HTMLCanvasElement>(null)

useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

const ctx = canvas.getContext("2d")
    if (!ctx) return

canvas.width = window.innerWidth
    canvas.height = window.innerHeight

let animationId: number
    let progress = 0

const animate = () => {
      progress += 0.016
      if (progress > 1) progress = 1

ctx.fillStyle = "#0a0e27"
      ctx.fillRect(0, 0, canvas.width, canvas.height)

drawBuilding(ctx, canvas.width / 2, canvas.height / 2, progress)

if (progress < 1) {
        animationId = requestAnimationFrame(animate)
      }
    }

const drawBuilding = (ctx: CanvasRenderingContext2D, x: number, y: number, progress: number) => {
      const scale = 50 + progress * 100
      const alpha = Math.min(1, progress * 2)

// Building base
      ctx.fillStyle = `rgba(139, 90, 43, ${alpha})`
      ctx.fillRect(x - scale / 2, y - scale, scale, scale * 1.5)

// Windows
      ctx.fillStyle = `rgba(255, 200, 100, ${alpha})`
      for (let row = 0; row < 4; row++) {
        for (let col = 0; col < 3; col++) {
          const wx = x - scale / 2 + 15 + col * 15
          const wy = y - scale + 15 + row * 15
          ctx.fillRect(wx, wy, 8, 8)
        }
      }

// Door
      ctx.fillStyle = `rgba(101, 67, 33, ${alpha})`
      ctx.fillRect(x - 12, y - 5, 24, 30)

// Loading text
      ctx.fillStyle = `rgba(200, 200, 200, ${alpha})`
      ctx.font = "20px Arial"
      ctx.textAlign = "center"
      ctx.fillText(`Loading... ${Math.round(progress * 100)}%`, x, y + 80)
    }

animate()

const handleResize = () => {
      canvas.width = window.innerWidth
      canvas.height = window.innerHeight
    }

window.addEventListener("resize", handleResize)
    return () => window.removeEventListener("resize", handleResize)
  }, [])

return (
    <div className="fixed inset-0 bg-[#0a0e27] flex items-center justify-center">
      <canvas ref={canvasRef} className="absolute inset-0" />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/navbar.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import { Menu, X } from "lucide-react"

export default function Navbar() {
  const [isOpen, setIsOpen] = useState(false)

return (
    <nav className="fixed w-full top-0 z-50 bg-background/80 backdrop-blur-lg border-b border-border">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          <div className="flex items-center gap-2">
            <div className="w-10 h-10 bg-gradient-to-br from-primary to-accent rounded-lg flex items-center justify-center text-primary-foreground font-bold text-lg">
              GR
            </div>
            <span className="font-serif text-xl font-bold text-foreground hidden sm:block tracking-tight">
              Ganga Raju
            </span>
          </div>

<div className="hidden md:flex items-center gap-8">
            <a href="#about" className="text-foreground/80 hover:text-primary transition-colors text-sm font-medium">
              About
            </a>
            <a
              href="#experience"
              className="text-foreground/80 hover:text-primary transition-colors text-sm font-medium"
            >
              Experience
            </a>
            <a href="#projects" className="text-foreground/80 hover:text-primary transition-colors text-sm font-medium">
              Projects
            </a>
            <a href="#contact" className="text-foreground/80 hover:text-primary transition-colors text-sm font-medium">
              Contact
            </a>
          </div>

{/* Mobile Menu Button */}
          <button onClick={() => setIsOpen(!isOpen)} className="md:hidden text-foreground">
            {isOpen ? <X size={24} /> : <Menu size={24} />}
          </button>
        </div>

{/* Mobile Menu */}
        {isOpen && (
          <div className="md:hidden pb-4 border-t border-border">
            <a href="#about" className="block py-2 text-foreground/80 hover:text-primary text-sm font-medium">
              About
            </a>
            <a href="#experience" className="block py-2 text-foreground/80 hover:text-primary text-sm font-medium">
              Experience
            </a>
            <a href="#projects" className="block py-2 text-foreground/80 hover:text-primary text-sm font-medium">
              Projects
            </a>
            <a href="#contact" className="block py-2 text-foreground/80 hover:text-primary text-sm font-medium">
              Contact
            </a>
          </div>
        )}
      </div>
    </nav>
  )
}
[V0_FILE]typescriptreact:file="components/hero.tsx" isEdit="true"
"use client"

import { useEffect, useState } from "react"
import { ChevronDown } from "lucide-react"

export default function Hero() {
  const [isVisible, setIsVisible] = useState(false)

useEffect(() => {
    setIsVisible(true)
  }, [])

return (
    <section className="min-h-screen flex items-center justify-center pt-16 px-4 relative overflow-hidden bg-background">
      <div
        className="absolute inset-0 opacity-10"
        style={{
          backgroundImage: "url('/modern-architecture-building.png')",
          backgroundSize: "cover",
          backgroundPosition: "center",
        }}
      />

<div className="max-w-4xl mx-auto text-center relative z-10">
        <div className={`space-y-6 transition-all duration-1000 ${isVisible ? "animate-fade-in-up" : "opacity-0"}`}>
          <p className="text-primary font-semibold text-sm tracking-widest uppercase">PMP® Certified Civil Engineer</p>

<h1 className="text-6xl sm:text-7xl lg:text-8xl font-serif font-bold text-foreground leading-tight">
            Ganga Raju <span className="text-primary">Vemula</span>
          </h1>

<p className="text-lg sm:text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
            15+ years of infrastructure excellence. Specializing in construction management, project leadership, and
            modern architecture across UK and India.
          </p>

<div className="flex flex-col sm:flex-row justify-center gap-4 pt-8">
            <a
              href="#contact"
              className="px-8 py-3 bg-primary text-primary-foreground font-semibold rounded-lg hover:opacity-90 transition-opacity duration-300"
            >
              Get in Touch
            </a>
            <a
              href="#projects"
              className="px-8 py-3 border border-primary text-primary font-semibold rounded-lg hover:bg-primary/10 transition-colors duration-300"
            >
              View Work
            </a>
          </div>

<div className="flex justify-center pt-12">
            <ChevronDown className="w-6 h-6 text-primary animate-bounce" />
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/about.tsx"
"use client"

import { useEffect, useRef, useState } from "react"

export default function About() {
  const [isVisible, setIsVisible] = useState(false)
  const sectionRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true)
        }
      },
      { threshold: 0.1 },
    )

if (sectionRef.current) observer.observe(sectionRef.current)
    return () => observer.disconnect()
  }, [])

return (
    <section id="about" ref={sectionRef} className="py-24 px-4 bg-card/30">
      <div className="max-w-6xl mx-auto">
        <div className="grid md:grid-cols-2 gap-12 items-center">
          {/* Content */}
          <div
            className={`space-y-6 transition-all duration-1000 ${isVisible ? "animate-slide-in-left" : "opacity-0"}`}
          >
            <p className="text-primary font-semibold text-sm tracking-widest uppercase">About Me</p>
            <h2 className="text-4xl sm:text-5xl font-serif font-bold text-foreground">Professional Background</h2>

<div className="space-y-4 text-muted-foreground leading-relaxed">
              <p>
                I'm a PMP® Certified Civil Engineer with 15+ years of proven experience leading complex infrastructure
                projects across India and the UK. My expertise spans structural design, construction management, and
                project delivery.
              </p>
              <p>
                Recently completed my MSc in Construction Management (1st Class Honours) from Nottingham Trent
                University, combining academic excellence with real-world expertise to drive innovation in the
                construction industry.
              </p>
              <p>
                Passionate about optimizing timelines, reducing project delays, and fostering cross-functional
                collaboration to deliver exceptional results within budget and schedule.
              </p>
            </div>

{/* Quick Stats */}
            <div className="grid grid-cols-3 gap-6 pt-8">
              <div className="border-l-2 border-primary pl-4">
                <p className="text-3xl font-bold text-primary">15+</p>
                <p className="text-sm text-muted-foreground">Years Experience</p>
              </div>
              <div className="border-l-2 border-primary pl-4">
                <p className="text-3xl font-bold text-primary">50+</p>
                <p className="text-sm text-muted-foreground">Projects Delivered</p>
              </div>
              <div className="border-l-2 border-primary pl-4">
                <p className="text-3xl font-bold text-primary">2</p>
                <p className="text-sm text-muted-foreground">Continents</p>
              </div>
            </div>
          </div>

{/* Image */}
          <div className={`transition-all duration-1000 ${isVisible ? "animate-scale-in" : "opacity-0"}`}>
            <div
              className="rounded-lg overflow-hidden h-96 bg-gradient-to-br from-primary/20 to-accent/20 border border-border flex items-center justify-center"
              style={{
                backgroundImage: "url('/professional-architect-engineer.jpg')",
                backgroundSize: "cover",
                backgroundPosition: "center",
              }}
            />
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/experience.tsx"
"use client"

import { useEffect, useRef, useState } from "react"
import { CheckCircle2, Award } from "lucide-react"

export default function Experience() {
  const [isVisible, setIsVisible] = useState(false)
  const sectionRef = useRef<HTMLDivElement>(null)

if (sectionRef.current) observer.observe(sectionRef.current)
    return () => observer.disconnect()
  }, [])

const experiences = [
    {
      role: "Trainee Construction Manager",
      company: "F & A Constructions Ltd",
      period: "Feb 2025 – Jul 2025",
      highlights: ["Project planning & scheduling", "Team coordination", "Quality control (20% improvement)"],
    },
    {
      role: "Senior Engineer / Site In-Charge",
      company: "Kaleshwaram Lift Irrigation Project",
      period: "Major Achievement",
      highlights: [
        "Lift irrigation structures supervision",
        "Budget & contract management",
        "Delivered on time & within budget",
      ],
    },
    {
      role: "Project Engineer / Team Lead",
      company: "Mission Kakatiya – Tank Restoration",
      period: "Key Role",
      highlights: ["Tank restoration & strengthening", "Contractor supervision", "Increased water storage capacity"],
    },
    {
      role: "Structural Design Engineer",
      company: "Kirby Building Systems",
      period: "May 2012 – Jul 2013",
      highlights: ["Steel structure design", "25% project feasibility increase", "95% design issue resolution"],
    },
  ]

return (
    <section id="experience" ref={sectionRef} className="py-24 px-4 bg-background">
      <div className="max-w-6xl mx-auto">
        <div className="mb-16 text-center">
          <p className="text-primary font-semibold text-sm tracking-widest uppercase">Career Journey</p>
          <h2 className="text-4xl sm:text-5xl font-serif font-bold text-foreground mt-2">Professional Experience</h2>
        </div>

<div className="space-y-8">
          {experiences.map((exp, index) => (
            <div
              key={index}
              className={`p-6 md:p-8 border border-border rounded-lg bg-card/50 hover:border-primary/50 transition-all duration-500 ${
                isVisible ? "animate-fade-in-up" : "opacity-0"
              }`}
              style={{ animationDelay: `${index * 100}ms` }}
            >
              <div className="flex items-start gap-4">
                <CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-1" />
                <div className="flex-1">
                  <h3 className="text-xl font-semibold text-foreground">{exp.role}</h3>
                  <p className="text-primary text-sm font-medium">{exp.company}</p>
                  <p className="text-muted-foreground text-sm">{exp.period}</p>
                  <ul className="mt-4 space-y-2">
                    {exp.highlights.map((highlight, i) => (
                      <li key={i} className="flex items-center gap-2 text-muted-foreground text-sm">
                        <span className="w-1.5 h-1.5 rounded-full bg-primary" />
                        {highlight}
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </div>
          ))}
        </div>

{/* Certifications */}
        <div
          className={`mt-16 p-8 border border-border rounded-lg bg-gradient-to-r from-primary/5 to-accent/5 transition-all duration-1000 ${isVisible ? "animate-scale-in" : "opacity-0"}`}
        >
          <div className="flex items-center gap-3 mb-4">
            <Award className="w-6 h-6 text-primary" />
            <h3 className="text-2xl font-semibold text-foreground">Certifications & Skills</h3>
          </div>
          <div className="grid md:grid-cols-2 gap-6">
            <div>
              <p className="font-semibold text-foreground mb-3">Certifications</p>
              <ul className="space-y-2 text-muted-foreground text-sm">
                <li>• PMP (PMI) - 2025</li>
                <li>• International COIL Project - 2025</li>
                <li>• Advanced Project Management - 2020</li>
                <li>• Full UK Driving Licence</li>
              </ul>
            </div>
            <div>
              <p className="font-semibold text-foreground mb-3">Technical Skills</p>
              <ul className="space-y-2 text-muted-foreground text-sm">
                <li>• Microsoft Project, ASTA Powerproject</li>
                <li>• AutoCAD, STAAD Pro</li>
                <li>• Project Management & Planning</li>
                <li>• Infrastructure Development</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/projects.tsx"
"use client"

import { useEffect, useRef, useState } from "react"
import { MapPin, Award, TrendingUp } from "lucide-react"

export default function Projects() {
  const [isVisible, setIsVisible] = useState(false)
  const sectionRef = useRef<HTMLDivElement>(null)

if (sectionRef.current) observer.observe(sectionRef.current)
    return () => observer.disconnect()
  }, [])

const projects = [
    {
      title: "Kaleshwaram Lift Irrigation Project",
      location: "India",
      category: "Mega Infrastructure",
      description: "One of India's largest lift irrigation schemes",
      achievements: ["Pump houses design", "Canal systems", "On-time delivery"],
      icon: TrendingUp,
    },
    {
      title: "Mission Kakatiya Tank Restoration",
      location: "Telangana, India",
      category: "Heritage Restoration",
      description: "Large-scale water tank restoration & strengthening",
      achievements: ["Tank strengthening", "Desilting operations", "Capacity increase"],
      icon: Award,
    },
    {
      title: "Check Dam Construction Projects",
      location: "India",
      category: "Water Management",
      description: "Multiple check dam projects across small rivers",
      achievements: ["Groundwater recharge", "Irrigation coverage", "Rural development"],
      icon: MapPin,
    },
    {
      title: "UK Modern Architecture Design",
      location: "United Kingdom",
      category: "Contemporary Design",
      description: "Modern architectural structures in UK landscape",
      achievements: ["Design excellence", "Structural innovation", "Sustainability focus"],
      icon: Award,
    },
  ]

return (
    <section id="projects" ref={sectionRef} className="py-24 px-4 bg-card/20">
      <div className="max-w-6xl mx-auto">
        <div className="mb-16 text-center">
          <p className="text-primary font-semibold text-sm tracking-widest uppercase">Portfolio</p>
          <h2 className="text-4xl sm:text-5xl font-serif font-bold text-foreground mt-2">Featured Projects</h2>
        </div>

<div className="grid md:grid-cols-2 gap-8">
          {projects.map((project, index) => {
            const Icon = project.icon
            return (
              <div
                key={index}
                className={`group relative p-8 border border-border rounded-lg bg-background hover:border-primary hover:shadow-lg transition-all duration-500 overflow-hidden ${
                  isVisible ? "animate-fade-in-up" : "opacity-0"
                }`}
                style={{ animationDelay: `${index * 150}ms` }}
              >
                {/* Background accent */}
                <div className="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />

<div className="relative z-10">
                  <div className="flex items-start justify-between mb-4">
                    <Icon className="w-8 h-8 text-primary" />
                    <span className="text-xs font-semibold text-primary bg-primary/10 px-3 py-1 rounded-full">
                      {project.category}
                    </span>
                  </div>

<h3 className="text-2xl font-semibold text-foreground mb-2">{project.title}</h3>
                  <p className="text-sm text-muted-foreground mb-2 flex items-center gap-2">
                    <MapPin className="w-4 h-4" /> {project.location}
                  </p>
                  <p className="text-muted-foreground mb-6">{project.description}</p>

<div className="space-y-2">
                    {project.achievements.map((achievement, i) => (
                      <div key={i} className="flex items-center gap-2 text-sm text-muted-foreground">
                        <span className="w-1 h-1 rounded-full bg-primary" />
                        {achievement}
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            )
          })}
        </div>

<div className="mt-16 text-center">
          <p className="text-muted-foreground mb-4">Interested in collaborating on your next project?</p>
          <a
            href="#contact"
            className="inline-block px-8 py-3 bg-primary text-primary-foreground font-semibold rounded-lg hover:opacity-90 transition-opacity duration-300"
          >
            Start a Conversation
          </a>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]png:file="public/modern-architecture-building.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-architecture-building-CRvGSPHkP2SbJEIj7PPpIsqK52B0Kp.png"
[V0_FILE]jpg:file="public/professional-architect-engineer.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-architect-engineer-23XrsgNV8ZdxPIBaA3sYaLLJN1izOG.jpg"84:["$","$L8c",null,{"chatId":"mRyE9TE4d7x","children":["$","$L8d",null,{"data":{"@\"active-block\",\"mRyE9TE4d7x\",":{"id":"b_5DX6gT573VK","messageId":"qS5mj6GFAqnSMW2jYLkHz5hwg9sF51SD","source":"$8e","language":"typescriptreact","type":"code-project","closed":true,"meta":{"type":"code-project","project":"Code","taskNameActive":"Creating architect portfolio sections","taskNameComplete":"Built portfolio sections"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"mRyE9TE4d7x\",":false,"":null},"children":"$L8f"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More from pranaytadakamalla

More Templates Like This