import Image from "next/image" import Link from "next/link" import { Github, Linkedin, FileText } from "lucide-react" import { Badge } from "@/components/ui/badge" import { Card, CardContent } from "@/components/ui/card"

export default function Portfolio() { return ( <main className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800"> <div className="container mx-auto px-4 py-12"> {/* Header Section */} <div className="flex flex-col items-center md:flex-row md:items-start gap-8 mb-16"> <div className="w-48 h-48 relative rounded-full overflow-hidden border-4 border-slate-200 dark:border-slate-700 shadow-lg"> <Image src="/placeholder.svg?height=192&width=192" alt="Gagan's profile photo" width={192} height={192} className="object-cover" priority /> </div>

      <div className="max-w-2xl">
        <h1 className="text-3xl font-bold mb-4 text-center md:text-left">Gagan</h1>
        <p className="text-slate-700 dark:text-slate-300 mb-6 text-lg">
          Hi, I am Gagan, and I'm a passionate Cloud Engineer with a strong interest in designing, deploying, and
          managing scalable cloud solutions. I specialize in cloud platforms like AWS, Azure, and Google Cloud, and
          I enjoy working with modern DevOps tools to automate infrastructure and ensure high availability. My goal
          is to continuously learn and innovate in the cloud space, contributing to secure, efficient, and
          future-ready cloud architectures.
        </p>

        <div className="flex gap-4 justify-center md:justify-start">
          <Link
            href="https://linkedin.com/in/yourusername"
            target="_blank"
            className="flex items-center gap-2 px-4 py-2 bg-[#0077B5] text-white rounded-md hover:bg-[#005885] transition-colors"
          >
            <Linkedin size={20} />
            <span>LinkedIn</span>
          </Link>

          <Link
            href="https://github.com/yourusername"
            target="_blank"
            className="flex items-center gap-2 px-4 py-2 bg-slate-800 text-white rounded-md hover:bg-slate-700 transition-colors dark:bg-slate-700 dark:hover:bg-slate-600"
          >
            <Github size={20} />
            <span>GitHub</span>
          </Link>
          <Link
            href="/Gagan_CV.docx"
            className="flex items-center gap-2 px-4 py-2 bg-slate-600 text-white rounded-md hover:bg-slate-500 transition-colors dark:bg-slate-700 dark:hover:bg-slate-600"
            download
          >
            <FileText size={20} />
            <span>Download CV</span>
          </Link>
        </div>
      </div>
    </div>

    {/* Skills Section */}
    <div className="mb-16">
      <h2 className="text-2xl font-bold mb-6 border-b pb-2 border-slate-200 dark:border-slate-700">
        Programming Languages
      </h2>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <SkillCard
          name="Java"
          level="Advanced"
          color="bg-green-100 text-green-800 border-green-200 dark:bg-green-900/30 dark:text-green-400 dark:border-green-800"
        />
        <SkillCard
          name="C++"
          level="Intermediate"
          color="bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800"
        />
      </div>
    </div>

    {/* Technologies Section */}
    <div className="mb-16">
      <h2 className="text-2xl font-bold mb-6 border-b pb-2 border-slate-200 dark:border-slate-700">Technologies</h2>

      <div className="space-y-8">
        <div>
          <h3 className="text-xl font-semibold mb-4">Databases</h3>
          <div className="flex flex-wrap gap-3">
            <Badge className="px-3 py-1 text-base bg-purple-100 text-purple-800 hover:bg-purple-200 dark:bg-purple-900/30 dark:text-purple-400 dark:hover:bg-purple-900/50">
              NoSQL
            </Badge>
            <Badge className="px-3 py-1 text-base bg-purple-100 text-purple-800 hover:bg-purple-200 dark:bg-purple-900/30 dark:text-purple-400 dark:hover:bg-purple-900/50">
              MySQL
            </Badge>
          </div>
        </div>

        <div>
          <h3 className="text-xl font-semibold mb-4">Cloud Backend</h3>
          <div className="flex flex-wrap gap-3">
            <Badge className="px-3 py-1 text-base bg-amber-100 text-amber-800 hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-400 dark:hover:bg-amber-900/50">
              Containers
            </Badge>
            <Badge className="px-3 py-1 text-base bg-amber-100 text-amber-800 hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-400 dark:hover:bg-amber-900/50">
              AWS Lambda
            </Badge>
            <Badge className="px-3 py-1 text-base bg-amber-100 text-amber-800 hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-400 dark:hover:bg-amber-900/50">
              Terraform
            </Badge>
          </div>
        </div>
      </div>
    </div>

    {/* Projects Section */}
    <div className="mb-16">
      <h2 className="text-2xl font-bold mb-6 border-b pb-2 border-slate-200 dark:border-slate-700">Projects</h2>

      <div className="space-y-8">
        <Card className="border border-slate-200 dark:border-slate-700">
          <CardContent className="p-6">
            <h3 className="text-xl font-semibold mb-3">Cloud Identity and Role Assignment System (CIRAS)</h3>
            <ul className="list-disc pl-5 space-y-2 text-slate-700 dark:text-slate-300">
              <li>
                Developed an AWS-based role management system to efficiently assign and manage user roles and
                permissions across multiple domains (Engineering, Business, etc).
              </li>
              <li>
                Implemented AWS Identity and Access Management (IAM) to securely manage 10 employee accounts,
                assigning them to domain-specific IAM groups and defining role-based access control policies.
              </li>
              <li>
                Designed and configured custom IAM roles and policies to ensure least-privilege access, enabling
                secure interaction with resources like EC2, S3, and IAM, while enforcing compliance and security
                best practices.
              </li>
              <li>
                Configured multi-factor authentication (MFA) for all users to enhance security and prevent
                unauthorized access to AWS resources.
              </li>
            </ul>
          </CardContent>
        </Card>

        <Card className="border border-slate-200 dark:border-slate-700">
          <CardContent className="p-6">
            <div className="flex flex-col md:flex-row justify-between mb-3">
              <h3 className="text-xl font-semibold">Personal Blog Hosting with AWS (Static Website Hosting)</h3>
              <span className="text-slate-500 dark:text-slate-400">September 2024</span>
            </div>
            <div className="mb-3">
              <span className="font-medium">Technologies:</span> AWS S3, CloudFront, Route 53, HTML, CSS.
            </div>
            <div>
              <span className="font-medium">Description:</span> Developed and deployed a personal blog using AWS S3
              for static website hosting. Set up Amazon Route 53 for custom domain management and AWS CloudFront for
              content delivery. Implemented secure HTTPS connections with AWS Certificate Manager. Gained hands-on
              experience in cloud infrastructure, static site hosting, and security practice.
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  </div>
</main>

) }

function SkillCard({ name, level, color }: { name: string; level: string; color: string }) { return ( <Card className="overflow-hidden border border-slate-200 dark:border-slate-700"> <CardContent className="p-6"> <div className="flex justify-between items-center mb-4"> <h3 className="text-xl font-semibold">{name}</h3> <Badge className={${color}}>{level}</Badge> </div> <div className="w-full bg-slate-200 dark:bg-slate-700 rounded-full h-2.5"> <div className={h-2.5 rounded-full ${level === "Advanced" ? "w-[90%] bg-green-500" : "w-[65%] bg-blue-500"}} ></div> </div> </CardContent> </Card> ) }