[V0_FILE]typescriptreact:file="app/page.tsx" import type { Metadata } from "next" import Hero from "@/components/hero" import About from "@/components/about" import TechStack from "@/components/tech-stack" import Projects from "@/components/projects" import Testimonials from "@/components/testimonials" import Contact from "@/components/contact" import Footer from "@/components/footer" import Navbar from "@/components/navbar" export const metadata: Metadata = { title: "MemoryLeaked | Portfolio", description: "Professional portfolio of MemoryLeaked - Software Developer", } export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/navbar.tsx" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Menu, X } from "lucide-react" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" export default function Navbar() { const [isOpen, setIsOpen] = useState(false) const [scrolled, setScrolled] = useState(false) useEffect(() => { const handleScroll = () => { setScrolled(window.scrollY > 10) } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const scrollToSection = (sectionId: string) => { setIsOpen(false) const element = document.getElementById(sectionId) if (element) { const offsetTop = element.getBoundingClientRect().top + window.pageYOffset window.scrollTo({ top: offsetTop, behavior: "smooth", }) } } const navLinks = [ { name: "Home", href: "home" }, { name: "About", href: "about" }, { name: "Tech Stack", href: "tech-stack" }, { name: "Projects", href: "projects" }, { name: "Testimonials", href: "testimonials" }, { name: "Contact", href: "contact" }, ] return (

{/* Desktop Navigation */} {/* Mobile Navigation Toggle */}

{/* Mobile Navigation Menu */} {isOpen && (

)}

) } [V0_FILE]typescriptreact:file="components/hero.tsx" isQuickEdit="true" "use client" import { useEffect, useState } from "react" import { Button } from "@/components/ui/button" import { ArrowRight, Github, Linkedin, Twitter } from "lucide-react" import { motion } from "framer-motion" export default function Hero() { const [text, setText] = useState("") const fullText = "Software Developer" useEffect(() => { let i = 0 const typingInterval = setInterval(() => { if (i < fullText.length) { setText(fullText.substring(0, i + 1)) i++ } else { clearInterval(typingInterval) } }, 100) return () => clearInterval(typingInterval) }, []) const scrollToSection = (sectionId: string) => { const element = document.getElementById(sectionId) if (element) { const offsetTop = element.getBoundingClientRect().top + window.pageYOffset window.scrollTo({ top: offsetTop, behavior: "smooth", }) } } return (

Hi, I'm MemoryLeaked

{text} |

I build exceptional digital experiences with clean code and modern technologies. Turning complex problems into elegant solutions is what I do best.

) } [V0_FILE]typescriptreact:file="components/about.tsx" "use client" import { motion } from "framer-motion" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Code, Lightbulb, Rocket } from "lucide-react" export default function About() { const fadeIn = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 }, } return (

About Me

Who I Am

A Passionate Developer

I'm a software developer with a passion for creating clean, efficient, and user-friendly applications. With over 5 years of experience in the industry, I've worked on a variety of projects ranging from small business websites to complex enterprise applications.

My journey in software development began when I was in college, where I discovered my love for solving complex problems through code. Since then, I've been continuously learning and improving my skills to stay at the forefront of technology.

When I'm not coding, you can find me exploring new technologies, contributing to open-source projects, or sharing my knowledge through blog posts and community forums.


                    
                      Clean Code
                      
                        I write maintainable, scalable, and efficient code following best practices and industry
                        standards.



            
              
                
                  
                    
                      
                    
                    
                      Problem Solver
                      
                        I enjoy tackling complex challenges and finding elegant solutions through creative thinking.
                      
                    
                  
                
              
            

            
              
                
                  
                    
                      
                    
                    
                      Fast Learner
                      
                        I quickly adapt to new technologies and environments, constantly expanding my skill set.


  )
}

[V0_FILE]typescriptreact:file="components/tech-stack.tsx"
"use client"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent } from "@/components/ui/card"
import { Code2, Layout, Server, Database, Wrench, Binary } from "lucide-react"

export default function TechStack() {
  const [selectedCategory, setSelectedCategory] = useState(null)

  const technologies = {
    languages: {
      icon: ,
      title: "Programming Languages",
      description: "Core languages for systems and application development",
      skills: [
        { name: "C++", level: 90 },
        { name: "C", level: 85 },
        { name: "Java", level: 88 },
        { name: "Ruby", level: 82 },
        { name: "Python", level: 85 },
        { name: "TypeScript", level: 90 },
        { name: "JavaScript", level: 90 },
      ],
    },
    concepts: {
      icon: ,
      title: "Engineering Concepts",
      description: "Fundamental software engineering principles",
      skills: [
        { name: "Data Structures", level: 95 },
        { name: "Algorithms", level: 90 },
        { name: "OOP", level: 95 },
        { name: "Design Patterns", level: 85 },
        { name: "System Design", level: 80 },
        { name: "Multithreading", level: 85 },
      ],
    },
    frontend: {
      icon: ,
      title: "Frontend Development",
      description: "Modern web development technologies",
      skills: [
        { name: "React", level: 90 },
        { name: "Next.js", level: 85 },
        { name: "HTML/CSS", level: 95 },
        { name: "Tailwind CSS", level: 95 },
        { name: "Redux", level: 85 },
        { name: "WebGL", level: 75 },
      ],
    },
    backend: {
      icon: ,
      title: "Backend Development",
      description: "Server-side frameworks and technologies",
      skills: [
        { name: "Node.js", level: 85 },
        { name: "Express", level: 80 },
        { name: "Spring Boot", level: 85 },
        { name: "Ruby on Rails", level: 80 },
      ],
    },
    database: {
      icon: ,
      title: "Database Systems",
      description: "Database management and optimization",
      skills: [
        { name: "MongoDB", level: 85 },
        { name: "PostgreSQL", level: 80 },
        { name: "MySQL", level: 75 },
        { name: "Redis", level: 70 },
      ],
    },
    tools: {
      icon: ,
      title: "Development Tools",
      description: "Tools and environments for development",
      skills: [
        { name: "Git", level: 90 },
        { name: "Docker", level: 80 },
        { name: "AWS", level: 75 },
        { name: "Linux/Unix", level: 85 },
        { name: "CMake", level: 80 },
        { name: "Visual Studio", level: 85 },
      ],
    },
  }

  const fadeIn = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0 },
  }

  const scaleUp = {
    hidden: { opacity: 0, scale: 0.95 },
    visible: { opacity: 1, scale: 1 },
  }

  return (
    
      
        
          
            Skills
          
          Technical Expertise
          
        

        
          {Object.entries(technologies).map(([key, category]) => (
            
               setSelectedCategory(selectedCategory === key ? null : key)}
              >
                
                  
                    {category.icon}
                    
                      {category.title}
                      {category.description}
                    
                  

                  
                    {selectedCategory === key && (
                      
                        {category.skills.map((skill, index) => (
                          
                            
                              {skill.name}
                              {skill.level}%
                            
                            
                              
                            
                          
                        ))}
                      
                    )}
                  

                  {selectedCategory !== key && (
                    
                      {category.skills.slice(0, 3).map((skill, index) => (
                        
                          {skill.name}
                        
                      ))}
                      {category.skills.length > 3 && (
                        +{category.skills.length - 3} more
                      )}
                    
                  )}
                
              
            
          ))}
        

        
          
            With extensive experience in both low-level systems programming and modern web development, I bring a
            comprehensive understanding of software engineering principles to every project.
          
        
      
    
  )
}

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

import { motion } from "framer-motion"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent } from "@/components/ui/card"
import { Star, StarHalf } from "lucide-react"
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"

export default function Testimonials() {
  const fadeIn = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0 },
  }

  const testimonials = [
    {
      id: 1,
      name: "Sarah Johnson",
      position: "Product Manager at TechCorp",
      content:
        "Working with MemoryLeaked was an absolute pleasure. They delivered our project on time and exceeded our expectations in terms of quality and functionality. Their attention to detail and problem-solving skills are exceptional.",
      rating: 5,
      image: "/placeholder.svg?height=100&width=100",
    },
    {
      id: 2,
      name: "Michael Chen",
      position: "CTO at StartupX",
      content:
        "MemoryLeaked helped us rebuild our entire platform from the ground up. Their technical expertise and ability to understand our business needs resulted in a product that has significantly improved our user engagement and conversion rates.",
      rating: 5,
      image: "/placeholder.svg?height=100&width=100",
    },
    {
      id: 3,
      name: "Emily Rodriguez",
      position: "Founder of DesignHub",
      content:
        "I was impressed by MemoryLeaked's ability to translate our design vision into a fully functional website. They were responsive, professional, and provided valuable suggestions that improved the overall user experience.",
      rating: 4.5,
      image: "/placeholder.svg?height=100&width=100",
    },
    {
      id: 4,
      name: "David Kim",
      position: "Marketing Director at GrowthCo",
      content:
        "MemoryLeaked developed a custom analytics dashboard for our marketing team that has transformed how we track and optimize our campaigns. Their solution was elegant, intuitive, and exactly what we needed.",
      rating: 5,
      image: "/placeholder.svg?height=100&width=100",
    },
    {
      id: 5,
      name: "Lisa Patel",
      position: "E-commerce Manager at RetailPlus",
      content:
        "The e-commerce platform developed by MemoryLeaked has been a game-changer for our business. It's fast, secure, and our customers love the seamless shopping experience. We've seen a 40% increase in online sales since launch.",
      rating: 4.5,
      image: "/placeholder.svg?height=100&width=100",
    },
  ]

  const renderStars = (rating) => {
    const stars = []
    const fullStars = Math.floor(rating)
    const hasHalfStar = rating % 1 !== 0

    for (let i = 0; i < fullStars; i++) {
      stars.push()
    }

    if (hasHalfStar) {
      stars.push()
    }

    return {stars}
  }

  return (
    
      
        
          
            Testimonials
          
          Client Satisfaction
          
        

        
          
            
              {testimonials.map((testimonial) => (
                
                  
                    
                      
                        
                          
                        
                        
                          {testimonial.name}
                          {testimonial.position}
                        
                      
                      "{testimonial.content}"
                      {renderStars(testimonial.rating)}
                    
                  
                
              ))}
            
            
              
              
            
          
        
      
    
  )
}

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

import { useState } from "react"
import { motion } from "framer-motion"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { toast } from "@/components/ui/use-toast"
import { Mail, MapPin, Phone, Github, Linkedin, Twitter } from "lucide-react"

export default function Contact() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    subject: "",
    message: "",
  })
  const [isSubmitting, setIsSubmitting] = useState(false)

  const fadeIn = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0 },
  }

  const handleChange = (e) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

  const handleSubmit = async (e) => {
    e.preventDefault()
    setIsSubmitting(true)

    // Simulate form submission
    await new Promise((resolve) => setTimeout(resolve, 1500))

    toast({
      title: "Message sent!",
      description: "Thank you for your message. I'll get back to you soon.",
    })

    setFormData({
      name: "",
      email: "",
      subject: "",
      message: "",
    })
    setIsSubmitting(false)
  }

  const contactInfo = [
    {
      icon: ,
      title: "Email",
      value: "contact@memoryleaked.dev",
      link: "mailto:contact@memoryleaked.dev",
    },
    {
      icon: ,
      title: "Phone",
      value: "+44 (123) 456-7890",
      link: "tel:+441234567890",
    },
    {
      icon: ,
      title: "Location",
      value: "Manchester, England",
      link: null,
    },
  ]

  return (
    
      
        
          
            Contact
          
          Get In Touch
          
        

        
          
            
              
                
                  
                    
                      Your Name
                      
                    
                    
                      Your Email
                      
                    
                  
                  
                    Subject
                    
                  
                  
                    Message
                                      </div>
                  <Button type="submit" className="w-full" disabled={isSubmitting}>
                    {isSubmitting ? "Sending..." : "Send Message"}
                  </Button>
                </form>
              </CardContent>
            </Card>
          </motion.div>

          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.3 }}
            variants={fadeIn}
          >
            <div className="space-y-6">
              {contactInfo.map((info, index) => (
                <Card key={index}>
                  <CardContent className="p-6">
                    <div className="flex items-start gap-4">
                      <div className="bg-primary/10 p-3 rounded-full">{info.icon}</div>
                      <div>
                        <h4 className="text-lg font-semibold mb-1">{info.title}</h4>
                        {info.link ? (
                          <a href={info.link} className="text-muted-foreground hover:text-primary transition-colors">
                            {info.value}
                          </a>
                        ) : (
                          <p className="text-muted-foreground">{info.value}</p>
                        )}
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}

              <Card className="mt-8">
                <CardContent className="p-6">
                  <h4 className="text-lg font-semibold mb-4">Follow Me</h4>
                  <div className="flex gap-4">
                    <Button variant="outline" size="icon" className="rounded-full" asChild>
                      <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer">
                        <Linkedin className="h-5 w-5" />
                      </a>
                    </Button>
                    <Button variant="outline" size="icon" className="rounded-full" asChild>
                      <a href="https://twitter.com" target="_blank" rel="noopener noreferrer">
                        <Twitter className="h-5 w-5" />
                      </a>
                    </Button>
                    <Button variant="outline" size="icon" className="rounded-full" asChild>
                      <a href="https://github.com" target="_blank" rel="noopener noreferrer">
                        <Github className="h-5 w-5" />
                      </a>
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  )
}

[V0_FILE]typescriptreact:file="components/footer.tsx"
export default function Footer() {
  const currentYear = new Date().getFullYear()

  return (
    <footer className="bg-muted py-8">
      <div className="container mx-auto px-4">
        <div className="flex flex-col md:flex-row justify-between items-center">
          <div className="mb-4 md:mb-0">
            <p className="text-lg font-bold text-primary">
              Memory<span className="text-destructive">Leaked</span>
            </p>
          </div>
          <div className="text-center md:text-right">
            <p className="text-muted-foreground">© {currentYear} MemoryLeaked. All rights reserved.</p>
          </div>
        </div>
      </div>
    </footer>
  )
}

[V0_FILE]typescriptreact:file="lib/utils.ts"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

[V0_FILE]typescriptreact:file="components/ui/use-toast.tsx"
export const toast = ({ title, description }) => {
  // In a real implementation, this would use a toast library or context
  console.log(`Toast: ${title} - ${description}`)

  // Create a temporary toast element
  const toastElement = document.createElement("div")
  toastElement.className = "fixed top-4 right-4 bg-background border rounded-md shadow-md p-4 max-w-md z-50"
  toastElement.innerHTML = `
    <div class="font-semibold">${title}</div>
    <div class="text-muted-foreground">${description}</div>
  `
  document.body.appendChild(toastElement)

  // Remove after 3 seconds
  setTimeout(() => {
    toastElement.classList.add("opacity-0", "transition-opacity", "duration-300")
    setTimeout(() => {
      document.body.removeChild(toastElement)
    }, 300)
  }, 3000)
}

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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 262.1 83.3% 57.8%;
    --primary-foreground: 210 20% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 262.1 83.3% 57.8%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 263.4 70% 50.4%;
    --primary-foreground: 210 20% 98%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 263.4 70% 50.4%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

.animate-blink {
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  from,
  to {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

[V0_FILE]typescriptreact:file="tailwind.config.js"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

[V0_FILE]typescriptreact:file="components/theme-provider.tsx"
"use client"

import type React from "react"

import { createContext, useContext, useEffect, useState } from "react"

type Theme = "dark" | "light"

type ThemeProviderProps = {
  children: React.ReactNode
  defaultTheme?: Theme
}

type ThemeProviderState = {
  theme: Theme
  setTheme: (theme: Theme) => void
}

const initialState: ThemeProviderState = {
  theme: "dark",
  setTheme: () => null,
}

const ThemeProviderContext = createContext<ThemeProviderState>(initialState)

export function ThemeProvider({ children, defaultTheme = "dark" }: ThemeProviderProps) {
  const [theme, setTheme] = useState<Theme>(defaultTheme)

  useEffect(() => {
    const root = window.document.documentElement
    root.classList.remove("light", "dark")
    root.classList.add(theme)
  }, [theme])

  const value = {
    theme,
    setTheme: (theme: Theme) => setTheme(theme),
  }

  return <ThemeProviderContext.Provider value={value}>{children}</ThemeProviderContext.Provider>
}

export const useTheme = () => {
  const context = useContext(ThemeProviderContext)
  if (context === undefined) {
    throw new Error("useTheme must be used within a ThemeProvider")
  }
  return context
}

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

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

export const metadata: Metadata = {
  title: "MemoryLeaked | Portfolio",
  description: "Professional portfolio of MemoryLeaked - Software Developer",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider defaultTheme="dark">{children}</ThemeProvider>
      </body>
    </html>
  )
}

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

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { ExternalLink, Github, ChevronDown } from "lucide-react"

export default function Projects() {
  const [selectedProject, setSelectedProject] = useState(null)
  const [expandedProject, setExpandedProject] = useState(null)

  const fadeIn = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0 },
  }

  const projects = [
    {
      id: 1,
      title: "E-Commerce Platform",
      shortDescription: "A full-featured e-commerce platform with product management.",
      description:
        "A full-featured e-commerce platform with product management, cart functionality, and payment processing.",
      image: "/placeholder.svg?height=400&width=600",
      tags: ["C++", "Qt", "SQLite", "CMake"],
      features: [
        "Inventory management system",
        "Real-time stock tracking",
        "Secure payment processing",
        "Order management dashboard",
        "Customer analytics",
      ],
      demoLink: "#",
      githubLink: "#",
      fullDescription:
        "This e-commerce platform provides businesses with a complete solution for selling products online. Built with C++ and Qt for high performance and cross-platform compatibility. Features include a responsive design, product catalog with filtering and search capabilities, shopping cart functionality, secure checkout integration, user authentication, and an admin dashboard for managing products, orders, and customers.",
    },
    {
      id: 2,
      title: "Task Management System",
      shortDescription: "A collaborative task management application with real-time updates.",
      description: "A collaborative task management application with real-time updates and team workspaces.",
      image: "/placeholder.svg?height=400&width=600",
      tags: ["Java", "Spring Boot", "React", "PostgreSQL"],
      features: [
        "Real-time collaboration",
        "Task dependencies",
        "Resource allocation",
        "Progress tracking",
        "Team management",
      ],
      demoLink: "#",
      githubLink: "#",
      fullDescription:
        "This task management system helps teams organize and track their work efficiently. Built with Java Spring Boot for the backend and React for the frontend, it provides robust task management capabilities. Features include task creation and assignment, due dates and reminders, progress tracking, file attachments, comments and discussions, team workspaces, and real-time updates.",
    },
    {
      id: 3,
      title: "System Resource Monitor",
      shortDescription: "A comprehensive system monitoring tool with real-time analytics.",
      description: "A comprehensive system monitoring tool with real-time analytics and performance tracking.",
      image: "/placeholder.svg?height=400&width=600",
      tags: ["C++", "Python", "Qt", "Linux"],
      features: [
        "CPU/Memory monitoring",
        "Process management",
        "Network analytics",
        "Disk usage tracking",
        "Performance alerts",
      ],
      demoLink: "#",
      githubLink: "#",
      fullDescription:
        "This system resource monitor provides real-time insights into system performance. Built primarily in C++ with Python for data analysis, it offers comprehensive monitoring capabilities. The application tracks CPU usage, memory consumption, network traffic, and disk operations, providing detailed analytics and alerts for system administrators.",
    },
    {
      id: 4,
      title: "Compiler Design Project",
      shortDescription: "A custom programming language compiler with optimization features.",
      description: "A custom programming language compiler with advanced optimization features.",
      image: "/placeholder.svg?height=400&width=600",
      tags: ["C", "LLVM", "Assembly", "Python"],
      features: ["Lexical analysis", "Syntax parsing", "Code optimization", "Error handling", "Assembly generation"],
      demoLink: "#",
      githubLink: "#",
      fullDescription:
        "This compiler project implements a custom programming language with modern features and optimizations. Built using C and LLVM, it includes comprehensive error handling and code optimization capabilities. The compiler performs lexical analysis, syntax parsing, semantic analysis, and generates optimized assembly code.",
    },
    {
      id: 5,
      title: "Distributed Database System",
      shortDescription: "A distributed database system with high availability.",
      description: "A distributed database system with high availability and fault tolerance.",
      image: "/placeholder.svg?height=400&width=600",
      tags: ["C++", "Rust", "gRPC", "Redis"],
      features: ["Data replication", "Sharding", "Fault tolerance", "Load balancing", "Transaction management"],
      demoLink: "#",
      githubLink: "#",
      fullDescription:
        "This distributed database system provides high availability and fault tolerance for large-scale applications. Built with C++ and Rust for performance, it implements advanced features such as data replication, sharding, and automatic failover. The system includes comprehensive monitoring and management tools.",
    },
    {
      id: 6,
      title: "Neural Network Framework",
      shortDescription: "A deep learning framework optimized for performance.",
      description: "A deep learning framework with CUDA acceleration and optimization features.",
      image: "/placeholder.svg?height=400&width=600",
      tags: ["C++", "CUDA", "Python", "CMake"],
      features: [
        "CUDA acceleration",
        "Automatic differentiation",
        "Model optimization",
        "Training pipelines",
        "Performance profiling",
      ],
      demoLink: "#",
      githubLink: "#",
      fullDescription:
        "This neural network framework provides high-performance deep learning capabilities. Built primarily in C++ with CUDA acceleration, it offers comprehensive tools for building and training neural networks. Features include automatic differentiation, model optimization, and detailed performance profiling.",
    },
  ]

  return (
    <section id="projects" className="py-20 bg-muted/30">
      <div className="container mx-auto px-4">
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
          variants={fadeIn}
          className="text-center mb-16"
        >
          <Badge variant="outline" className="mb-4">
            Portfolio
          </Badge>
          <h2 className="text-3xl md:text-4xl font-bold mb-4">Featured Projects</h2>
          <div className="w-20 h-1 bg-primary mx-auto"></div>
        </motion.div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {projects.map((project, index) => (
            <motion.div
              key={project.id}
              initial="hidden"
              whileInView="visible"
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              variants={fadeIn}
            >
              <Card
                className={`group h-full cursor-pointer transition-all duration-300 hover:shadow-lg ${
                  expandedProject === project.id ? "ring-2 ring-primary" : ""
                }`}
                onClick={() => setExpandedProject(expandedProject === project.id ? null : project.id)}
              >
                <CardContent className="p-0">
                  <div className="relative overflow-hidden">
                    <img
                      src={project.image || "/placeholder.svg"}
                      alt={project.title}
                      className="w-full aspect-video object-cover transition-transform duration-300 group-hover:scale-105"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-background/90 to-background/20 p-6 flex flex-col justify-end">
                      <h3 className="text-xl font-bold mb-2">{project.title}</h3>
                      <p className="text-muted-foreground text-sm">{project.shortDescription}</p>
                    </div>
                  </div>

                  <AnimatePresence>
                    {expandedProject === project.id && (
                      <motion.div
                        initial={{ opacity: 0, height: 0 }}
                        animate={{ opacity: 1, height: "auto" }}
                        exit={{ opacity: 0, height: 0 }}
                        transition={{ duration: 0.3 }}
                        className="p-6 border-t"
                      >
                        <div className="space-y-4">
                          <div className="flex flex-wrap gap-2">
                            {project.tags.map((tag, i) => (
                              <Badge key={i} variant="secondary">
                                {tag}
                              </Badge>
                            ))}
                          </div>

                          <div className="space-y-2">
                            <h4 className="font-semibold">Key Features:</h4>
                            <ul className="list-disc list-inside text-sm text-muted-foreground space-y-1">
                              {project.features.map((feature, i) => (
                                <li key={i}>{feature}</li>
                              ))}
                            </ul>
                          </div>

                          <div className="flex gap-4 pt-2">
                            <Button
                              size="sm"
                              variant="outline"
                              onClick={(e) => {
                                e.stopPropagation()
                                window.open(project.githubLink, "_blank")
                              }}
                            >
                              <Github className="h-4 w-4 mr-2" />
                              Code
                            </Button>
                            <Button
                              size="sm"
                              onClick={(e) => {
                                e.stopPropagation()
                                window.open(project.demoLink, "_blank")
                              }}
                            >
                              <ExternalLink className="h-4 w-4 mr-2" />
                              Demo
                            </Button>
                            <Button
                              size="sm"
                              variant="outline"
                              onClick={(e) => {
                                e.stopPropagation()
                                setSelectedProject(project)
                              }}
                            >
                              Learn More
                            </Button>
                          </div>
                        </div>
                      </motion.div>
                    )}
                  </AnimatePresence>

                  <div className="p-4 text-center">
                    <ChevronDown
                      className={`w-6 h-6 mx-auto transition-transform duration-300 ${
                        expandedProject === project.id ? "rotate-180" : ""
                      }`}
                    />
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </div>
      </div>

      {selectedProject && (
        <Dialog open={!!selectedProject} onOpenChange={() => setSelectedProject(null)}>
          <DialogContent className="max-w-3xl">
            <DialogHeader>
              <DialogTitle>{selectedProject.title}</DialogTitle>
              <DialogDescription>
                <div className="flex flex-wrap gap-2 mt-2 mb-4">
                  {selectedProject.tags.map((tag, i) => (
                    <Badge key={i} variant="secondary">
                      {tag}
                    </Badge>
                  ))}
                </div>
              </DialogDescription>
            </DialogHeader>
            <div className="space-y-4">
              <img
                src={selectedProject.image || "/placeholder.svg"}
                alt={selectedProject.title}
                className="w-full rounded-md object-cover aspect-video"
              />
              <p className="text-muted-foreground">{selectedProject.fullDescription}</p>
              <div className="space-y-4">
                <h4 className="font-semibold">Key Features:</h4>
                <ul className="list-disc list-inside text-muted-foreground space-y-2">
                  {selectedProject.features.map((feature, i) => (
                    <li key={i}>{feature}</li>
                  ))}
                </ul>
              </div>
              <div className="flex justify-end gap-4 mt-4">
                <Button variant="outline" asChild>
                  <a href={selectedProject.githubLink} target="_blank" rel="noopener noreferrer">
                    <Github className="h-4 w-4 mr-2" />
                    View Code
                  </a>
                </Button>
                <Button asChild>
                  <a href={selectedProject.demoLink} target="_blank" rel="noopener noreferrer">
                    <ExternalLink className="h-4 w-4 mr-2" />
                    Live Demo
                  </a>
                </Button>
              </div>
            </div>
          </DialogContent>
        </Dialog>
      )}
    </section>
  )
}
</article></body></html>

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This