"use client";

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

const capabilities = [
  {
    number: "01",
    title: "Product Engineering",
    copy: "Scalable web products, business workflows, and APIs built from architecture through production support.",
    tags: ["ASP.NET Core", "Laravel", "Node.js", "REST APIs"],
  },
  {
    number: "02",
    title: "Cloud & Delivery",
    copy: "Repeatable infrastructure, secure releases, and observable systems across cloud-first environments.",
    tags: ["AWS", "Azure", "Terraform", "Docker", "Kubernetes"],
  },
  {
    number: "03",
    title: "Frontend Systems",
    copy: "Fast, maintainable interfaces that turn complex workflows into clear and useful experiences.",
    tags: ["React", "Next.js", "Vue.js", "JavaScript"],
  },
  {
    number: "04",
    title: "Production Ownership",
    copy: "Hands-on troubleshooting across databases, networks, Linux servers, deployments, and live incidents.",
    tags: ["Linux", "Nginx", "PostgreSQL", "Redis", "CI/CD"],
  },
];

const roles = [
  {
    period: "2025 — NOW",
    role: "Full Stack Developer",
    company: "BHE Uni",
    summary:
      "Own product delivery and production operations for a university lead-management and enrollment platform.",
    details: [
      "Built Meta Graph API lead collection, scoring, counselor assignment, notification, and enrollment workflows.",
      "Designed queues, schedulers, Redis caching, authentication, optimized SQL, and maintainable Laravel services.",
      "Run CI/CD, containerized releases, Nginx, SSL/TLS, environment configuration, and rollback-aware deployments.",
    ],
  },
  {
    period: "2022 — 2025",
    role: "Program Manager / Senior Software Engineer",
    company: "D2Soft Intelligence",
    summary:
      "Led delivery across enterprise applications, cloud infrastructure, and technical team operations.",
    details: [
      "Designed production AWS environments spanning EC2, VPC, Route 53, RDS, load balancing, S3, IAM, and monitoring.",
      "Provisioned repeatable infrastructure with Terraform and shipped containerized workloads with Docker and Kubernetes.",
      "Developed systems with Laravel, ASP.NET Core, Node.js, React, Next.js, microservices, and WebSockets.",
    ],
  },
  {
    period: "2021 — 2022",
    role: "Web Developer",
    company: "Bangla Puzzle Limited",
    summary:
      "Delivered customer-facing applications and managed the operational path from code to production.",
    details: [
      "Built Laravel, Vue.js, React, and jQuery applications for private, public, and government organizations.",
      "Integrated bKash and SSLCommerz payments and managed Linux hosting, deployments, and troubleshooting.",
    ],
  },
];

const work = [
  {
    index: "01",
    title: "University Lead Management",
    category: "Product · Automation · Operations",
    copy: "An end-to-end system for lead ingestion, scoring, counselor assignment, follow-up, notifications, and enrollment tracking.",
    stack: "Laravel / Meta Graph API / Redis / SQL",
    tone: "blue",
  },
  {
    index: "02",
    title: "Multi-Cloud Delivery",
    category: "Infrastructure · Reliability",
    copy: "Backend and infrastructure delivery across AWS and Azure, designed with adaptable patterns for GCP-based workloads.",
    stack: "AWS / Azure / Terraform / Docker",
    tone: "ink",
  },
  {
    index: "03",
    title: "Infrastructure Automation",
    category: "DevOps · Platform Engineering",
    copy: "Reproducible environments and safer releases through Terraform provisioning and Docker-driven CI/CD workflows.",
    stack: "Terraform / GitHub Actions / Linux / Nginx",
    tone: "lime",
  },
  {
    index: "04",
    title: "Backend API Platforms",
    category: "APIs · Payments · Data",
    copy: "Production REST platforms with payment integrations, relational data design, authentication, and operational ownership.",
    stack: ".NET / Laravel / Node.js / PostgreSQL",
    tone: "cream",
  },
];

function getCompanyLogo(company: string) {
  switch (company) {
    case "BHE Uni":
      return (
        <svg style={{ display: "inline-block", verticalAlign: "middle", marginRight: "8px", width: "20px", height: "20px" }} viewBox="0 0 24 24" fill="none" strokeWidth="2">
          <path d="M12 2L2 7l10 5 10-5-10-5z" stroke="var(--blue)" strokeLinecap="round" strokeLinejoin="round"/>
          <path d="M2 17l10 5 10-5" stroke="var(--sea-green)" strokeLinecap="round" strokeLinejoin="round"/>
          <path d="M2 12l10 5 10-5" stroke="var(--blue)" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      );
    case "D2Soft Intelligence":
      return (
        <svg style={{ display: "inline-block", verticalAlign: "middle", marginRight: "8px", width: "20px", height: "20px" }} viewBox="0 0 24 24" fill="none" strokeWidth="2">
          <rect x="3" y="3" width="18" height="18" rx="4" stroke="var(--blue)"/>
          <circle cx="9" cy="9" r="2" fill="var(--sea-green)"/>
          <circle cx="15" cy="15" r="2" fill="var(--blue)"/>
          <path d="M9 9h6v6" stroke="var(--sea-green)" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      );
    case "Bangla Puzzle Limited":
      return (
        <svg style={{ display: "inline-block", verticalAlign: "middle", marginRight: "8px", width: "20px", height: "20px" }} viewBox="0 0 24 24" fill="none" strokeWidth="2">
          <rect x="4" y="4" width="16" height="16" rx="3" stroke="var(--sea-green)"/>
          <path d="M9 9h6v6h-6z" stroke="var(--blue)" strokeLinecap="round" strokeLinejoin="round"/>
          <path d="M12 4v4M12 16v4M4 12h4M16 12h4" stroke="var(--sea-green)"/>
        </svg>
      );
    default:
      return null;
  }
}

function Arrow() {
  return <span aria-hidden="true">↗</span>;
}

function HalftonePortrait() {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    const img = new Image();
    img.src = "/tanvir-cafe-portrait.jpg";
    img.onload = () => {
      const targetWidth = 400;
      const scale = targetWidth / img.width;
      const targetHeight = img.height * scale;
      
      canvas.width = targetWidth;
      canvas.height = targetHeight;

      const offscreen = document.createElement("canvas");
      offscreen.width = img.width;
      offscreen.height = img.height;
      const oCtx = offscreen.getContext("2d");
      if (!oCtx) return;
      oCtx.drawImage(img, 0, 0);

      ctx.fillStyle = "#080c14";
      ctx.fillRect(0, 0, targetWidth, targetHeight);

      const imgData = oCtx.getImageData(0, 0, img.width, img.height);
      const pixels = imgData.data;

      const dotSpacing = 8; 

      for (let y = 0; y < img.height; y += dotSpacing) {
        for (let x = 0; x < img.width; x += dotSpacing) {
          const index = (y * img.width + x) * 4;
          const r = pixels[index];
          const g = pixels[index + 1];
          const b = pixels[index + 2];
          const brightness = (r + g + b) / 3;
          const normBrightness = brightness / 255;

          if (normBrightness > 0.05) {
            const cx = x * scale;
            const cy = y * scale;
            const maxRadius = (dotSpacing * 0.95) / 2;
            const radius = normBrightness * maxRadius;

            // Interpolate color between Sea Green (#10b981) and Sky Blue (#38bdf8)
            const t = cy / targetHeight;
            const rColor = Math.round(16 + (56 - 16) * t);
            const gColor = Math.round(185 + (189 - 185) * t);
            const bColor = Math.round(129 + (248 - 129) * t);

            ctx.fillStyle = `rgb(${rColor}, ${gColor}, ${bColor})`;
            ctx.beginPath();
            ctx.arc(cx, cy, radius, 0, Math.PI * 2);
            ctx.fill();
          }
        }
      }
    };
  }, []);

  return (
    <div className="portrait-canvas-wrapper" style={{ position: "relative", width: "100%", overflow: "hidden", borderRadius: "12px", border: "1px solid rgba(255,255,255,0.08)", boxShadow: "0 20px 40px rgba(0,0,0,0.5)" }}>
      <canvas ref={canvasRef} style={{ display: "block", width: "100%", height: "auto" }} />
      <div className="portrait-label" style={{ 
        position: "absolute",
        bottom: "1rem", 
        left: "1rem",
        background: "rgba(8, 12, 20, 0.85)",
        backdropFilter: "blur(8px)",
        border: "1px solid rgba(255, 255, 255, 0.08)",
        padding: "0.5rem 1rem",
        borderRadius: "6px",
        display: "flex",
        flexDirection: "column"
      }}>
        <span style={{ color: "var(--blue)", fontSize: "0.6rem", letterSpacing: "0.1em", fontWeight: "700" }}>FULL STACK + CLOUD</span>
        <strong style={{ color: "white", fontSize: "0.95rem" }}>MD. TANVIR HASAN ANIK</strong>
      </div>
      <div className="portrait-status" style={{
        position: "absolute",
        top: "1rem",
        right: "1rem",
        background: "rgba(12, 45, 38, 0.85)",
        backdropFilter: "blur(8px)",
        border: "1px solid var(--sea-green)",
        color: "white",
        fontSize: "0.6rem",
        padding: "0.4rem 0.8rem",
        borderRadius: "20px",
        display: "flex",
        alignItems: "center",
        gap: "0.4rem"
      }}>
        <i style={{
          display: "inline-block",
          width: "6px",
          height: "6px",
          borderRadius: "50%",
          backgroundColor: "var(--sea-green)",
          boxShadow: "0 0 8px var(--sea-green)"
        }} />
        Available worldwide
      </div>
    </div>
  );
}

function Terminal() {
  const [activeTab, setActiveTab] = useState("profile.json");
  const tabs = ["profile.json", "skills.json", "education.sh"];

  const renderContent = () => {
    switch (activeTab) {
      case "profile.json":
        return (
          <div className="terminal-code">
            <span className="t-comment">// MD. Tanvir Hasan Anik Profile</span>{"\n"}
            <span className="t-bracket">{"{"}</span>{"\n"}
            {"  "}<span className="t-key">"name"</span>: <span className="t-string">"MD. TANVIR HASAN ANIK"</span>,{"\n"}
            {"  "}<span className="t-key">"role"</span>: <span className="t-string">"Full Stack Developer & Cloud Engineer"</span>,{"\n"}
            {"  "}<span className="t-key">"experience"</span>: <span className="t-string">"5+ Years"</span>,{"\n"}
            {"  "}<span className="t-key">"focus"</span>: <span className="t-string">"High-Performance APIs & Cloud Delivery"</span>,{"\n"}
            {"  "}<span className="t-key">"academic"</span>: <span className="t-string">"M.Sc. in CS & B.Sc. in CSE"</span>,{"\n"}
            {"  "}<span className="t-key">"location"</span>: <span className="t-string">"Dhaka, Bangladesh"</span>,{"\n"}
            {"  "}<span className="t-key">"availability"</span>: <span className="t-string">"Open to Remote Roles"</span>,{"\n"}
            {"  "}<span className="t-key">"contact"</span>: <span className="t-bracket">{"{"}</span>{"\n"}
            {"    "}<span className="t-key">"email"</span>: <span className="t-string">"tanviranikcs@gmail.com"</span>,{"\n"}
            {"    "}<span className="t-key">"phones"</span>: <span className="t-bracket">[</span><span className="t-string">"+8801887454489"</span>, <span className="t-string">"+8801754630009"</span><span className="t-bracket">]</span>,{"\n"}
            {"    "}<span className="t-key">"github"</span>: <span className="t-string">"ProAnik"</span>,{"\n"}
            {"    "}<span className="t-key">"linkedin"</span>: <span className="t-string">"md-tanvir-hasan-anik-8711551ba"</span>{"\n"}
            {"  "}<span className="t-bracket">{"}"}</span>{"\n"}
            <span className="t-bracket">{"}"}</span>
            <span className="t-cursor"></span>
          </div>
        );
      case "skills.json":
        return (
          <div className="terminal-code">
            <span className="t-comment">// Core Technical Expertise</span>{"\n"}
            <span className="t-bracket">{"{"}</span>{"\n"}
            {"  "}<span className="t-key">"backend"</span>: <span className="t-bracket">[</span>
            <span className="t-string">".NET Core"</span>, <span className="t-string">"Laravel"</span>, <span className="t-string">"Node.js"</span>, <span className="t-string">"Python"</span>
            <span className="t-bracket">]</span>,{"\n"}
            {"  "}<span className="t-key">"frontend"</span>: <span className="t-bracket">[</span>
            <span className="t-string">"React"</span>, <span className="t-string">"Next.js"</span>, <span className="t-string">"Vue.js"</span>, <span className="t-string">"JS/TS"</span>
            <span className="t-bracket">]</span>,{"\n"}
            {"  "}<span className="t-key">"cloud"</span>: <span className="t-bracket">[</span>
            <span className="t-string">"AWS"</span>, <span className="t-string">"Azure"</span>, <span className="t-string">"GCP"</span>
            <span className="t-bracket">]</span>,{"\n"}
            {"  "}<span className="t-key">"devops"</span>: <span className="t-bracket">[</span>
            <span className="t-string">"Terraform"</span>, <span className="t-string">"Docker"</span>, <span className="t-string">"Kubernetes"</span>, <span className="t-string">"CI/CD"</span>
            <span className="t-bracket">]</span>,{"\n"}
            {"  "}<span className="t-key">"databases"</span>: <span className="t-bracket">[</span>
            <span className="t-string">"PostgreSQL"</span>, <span className="t-string">"MSSQL"</span>, <span className="t-string">"MySQL"</span>, <span className="t-string">"Redis"</span>
            <span className="t-bracket">]</span>{"\n"}
            <span className="t-bracket">{"}"}</span>
            <span className="t-cursor"></span>
          </div>
        );
      case "education.sh":
        return (
          <div className="terminal-code">
            <span className="t-comment"># Displaying Academic History</span>{"\n"}
            <span className="t-key">tanvir@portfolio</span>:<span className="t-string">~</span>$ ./education.sh{"\n"}
            {"\n"}
            <span className="t-comment"># Higher Education</span>{"\n"}
            <span className="t-keyword">M.Sc. in Computer Science</span> - Jahangirnagar University [2024 - Present]{"\n"}
            {"  "}Focus: AI Applications in Medical Science{"\n"}
            <span className="t-keyword">B.Sc. in Computer Science & Eng.</span> - Daffodil International University [2017 - 2020]{"\n"}
            {"  "}Focus: Core software engineering, systems & databases{"\n"}
            {"\n"}
            <span className="t-comment"># Schooling & Background</span>{"\n"}
            <span className="t-keyword">HSC in Science</span> - Govt. Rajendra College, Faridpur{"\n"}
            {"  "}Major: Physics, Chemistry, Math & Computer Science{"\n"}
            <span className="t-keyword">SSC in Science</span> - Faridpur Zilla School, Faridpur{"\n"}
            {"  "}Focus: Foundation in sciences and mathematics{"\n"}
            <span className="t-cursor"></span>
          </div>
        );
      default:
        return null;
    }
  };

  return (
    <div className="terminal-window">
      <div className="terminal-header">
        <div className="terminal-dots">
          <span className="terminal-dot red" />
          <span className="terminal-dot yellow" />
          <span className="terminal-dot green" />
        </div>
        <span className="terminal-title">tanvir@anik-portfolio:~</span>
        <div />
      </div>
      <div className="terminal-tabs">
        {tabs.map((tab) => (
          <button
            key={tab}
            className={`terminal-tab ${activeTab === tab ? "active" : ""}`}
            onClick={() => setActiveTab(tab)}
          >
            {tab}
          </button>
        ))}
      </div>
      <pre className="terminal-body">
        <code>{renderContent()}</code>
      </pre>
    </div>
  );
}

export default function Home() {
  return (
    <main>
      <nav className="nav-shell" aria-label="Primary navigation">
        <a className="brand" href="#top" aria-label="Md. Tanvir Hasan Anik, home">
          <span style={{ color: "var(--blue)" }}>Anik</span><span style={{ color: "var(--sea-green)" }}>.</span>
        </a>
        <div className="nav-links">
          <a href="#expertise">Expertise</a>
          <a href="#experience">Experience</a>
          <a href="#work">Work</a>
        </div>
        <a className="nav-cta" href="mailto:tanviranikcs@gmail.com">
          Let&apos;s talk <Arrow />
        </a>
      </nav>

      <section id="top" className="hero section-pad">
        <div className="hero-grid">
          <div className="hero-copy">
            <div className="eyebrow reveal">
              <span className="status-dot" style={{ backgroundColor: "var(--sea-green)" }} />
              Available for remote opportunities
            </div>
            <h1 className="hero-title">
              <span className="title-line reveal delay-1">Engineering</span>
              <span className="title-line reveal delay-2">
                products <em style={{ background: "linear-gradient(135deg, var(--blue), var(--sea-green))", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", fontStyle: "normal", fontWeight: "700" }}>&amp;</em>
              </span>
              <span className="title-line reveal delay-3" style={{ background: "linear-gradient(135deg, var(--blue), var(--sea-green))", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>production.</span>
            </h1>
            <p className="hero-intro reveal delay-4">
              As a full-stack engineer and cloud architect, <strong>Md. Tanvir Hasan Anik</strong> specializes in building robust, high-performance APIs and automating secure cloud pipelines that scale.
            </p>
            <div className="hero-actions reveal delay-4">
              <a className="button button-primary" href="#work">
                Explore my work <Arrow />
              </a>
              <a
                className="button button-ghost"
                href="/Tanvir_Anik_Full_Stack_Developer_CV.pdf"
                download
              >
                Download CV <span aria-hidden="true">↓</span>
              </a>
            </div>
          </div>

          <div className="hero-console portrait-card reveal delay-3" aria-label="Portrait of Md. Tanvir Hasan Anik">
            <img
              src="/tanvir-halftone-portrait.png"
              alt="Md. Tanvir Hasan Anik seated with a laptop, rendered in a grayscale halftone style"
            />
            <div className="portrait-label">
              <span>FULL STACK + CLOUD</span>
              <strong>MD. TANVIR HASAN ANIK</strong>
            </div>
            <div className="portrait-status">
              <i />
              Available worldwide
            </div>
            <div className="orbit orbit-one">AWS</div>
            <div className="orbit orbit-two">.NET</div>
            <div className="orbit orbit-three">React</div>
          </div>
        </div>
        <div className="hero-marquee" aria-hidden="true">
          <div className="marquee-track">
            <span>FULL STACK</span><b>✦</b><span>CLOUD</span><b>✦</b>
            <span>DEVOPS</span><b>✦</b><span>PRODUCT OWNERSHIP</span><b>✦</b>
            <span>FULL STACK</span><b>✦</b><span>CLOUD</span><b>✦</b>
            <span>DEVOPS</span><b>✦</b><span>PRODUCT OWNERSHIP</span><b>✦</b>
          </div>
        </div>
      </section>

      <section className="stack-strip section-pad" aria-label="Core technology stack">
        <p>Core technology stack</p>
        <div className="stack-icons">
          {stackIcons.map(({ name, Icon }) => (
            <div className="stack-icon" key={name} title={name}>
              <Icon aria-hidden="true" />
              <span>{name}</span>
            </div>
          ))}
        </div>
      </section>

      <section className="section-pad terminal-section" style={{ paddingBottom: "5rem", paddingTop: "5rem", borderBottom: "1px solid var(--line)", background: "#060910" }}>
        <div className="section-heading" style={{ marginBottom: "3rem" }}>
          <div>
            <p className="kicker">Interactive Console</p>
            <h2>My credentials.<br /><span style={{ background: "linear-gradient(135deg, var(--blue), var(--sea-green))", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>In real time.</span></h2>
          </div>
          <p className="heading-copy">
            Explore my background, technical skills, and contact data dynamically using this terminal simulation interface.
          </p>
        </div>
        <div style={{ maxWidth: "800px", margin: "0 auto" }}>
          <Terminal />
        </div>
      </section>

      <section id="expertise" className="section-pad expertise">
        <div className="section-heading">
          <p className="kicker">What I bring</p>
          <h2>One engineer.<br /><span>Full lifecycle.</span></h2>
          <p className="heading-copy">
            I bridge the gap between feature development and operational
            reality—combining product thinking with reliable delivery.
          </p>
        </div>
        <div className="capability-grid">
          {capabilities.map((item) => (
            <article className="capability-card" key={item.number}>
              <div className="capability-top">
                <span>{item.number}</span>
                <Arrow />
              </div>
              <h3>{item.title}</h3>
              <p>{item.copy}</p>
              <div className="tag-list">
                {item.tags.map((tag) => <span key={tag}>{tag}</span>)}
              </div>
            </article>
          ))}
        </div>
      </section>

      <section id="experience" className="section-pad experience">
        <div className="experience-intro">
          <p className="kicker light">Experience</p>
          <h2>From writing code<br />to owning outcomes.</h2>
          <p>
            My work has expanded from application development into architecture,
            cloud operations, delivery leadership, and technical hiring.
          </p>
          <div className="metric-row">
            <div><strong>5+</strong><span>Years building</span></div>
            <div><strong>3</strong><span>Cloud ecosystems</span></div>
            <div><strong>360°</strong><span>Delivery ownership</span></div>
          </div>
        </div>
        <div className="timeline">
          {roles.map((role, index) => (
            <article className="role" key={role.company}>
              <div className="role-marker">
                <span>{String(index + 1).padStart(2, "0")}</span>
              </div>
              <div className="role-main">
                <p className="role-period">{role.period}</p>
                <h3>{role.role}</h3>
                <p className="role-company" style={{ display: "flex", alignItems: "center" }}>
                  {getCompanyLogo(role.company)}
                  {role.company}
                </p>
                <p className="role-summary">{role.summary}</p>
                <ul>
                  {role.details.map((detail) => <li key={detail}>{detail}</li>)}
                </ul>
              </div>
            </article>
          ))}
        </div>
      </section>

      <section id="work" className="section-pad work">
        <div className="work-heading">
          <div>
            <p className="kicker">Selected work</p>
            <h2>Built for the<br /><span>real world.</span></h2>
          </div>
          <p>
            Systems designed to solve operational problems, simplify complex
            workflows, and stay dependable after launch.
          </p>
        </div>
        <div className="work-grid">
          {work.map((project) => (
            <article className={`work-card ${project.tone}`} key={project.index}>
              <div className="work-card-top">
                <span>{project.index}</span>
                <span>{project.category}</span>
              </div>
              <div>
                <h3>{project.title}</h3>
                <p>{project.copy}</p>
              </div>
              <div className="work-stack">{project.stack}</div>
            </article>
          ))}
        </div>
      </section>

      <section className="section-pad education">
        <div className="education-head">
          <p className="kicker">Education & growth</p>
          <h2>Always learning.<br />Always shipping.</h2>
        </div>
        <div className="education-list">
          <article>
            <span>2024 — PRESENT</span>
            <div>
              <h3>M.Sc. in Computer Science</h3>
              <p>Jahangirnagar University</p>
              <small>Research: AI Applications in Medical Science</small>
            </div>
          </article>
          <article>
            <span>2017 — 2020</span>
            <div>
              <h3>B.Sc. in Computer Science & Engineering</h3>
              <p>Daffodil International University</p>
              <small>Focus: Algorithms, Relational Database Systems, and Web Engineering</small>
            </div>
          </article>
          <article>
            <span>2014 — 2016</span>
            <div>
              <h3>HSC in Science</h3>
              <p>Govt. Rajendra College, Faridpur</p>
              <small>Focus: Physics, Chemistry, Higher Mathematics, and Computer Science</small>
            </div>
          </article>
          <article>
            <span>2009 — 2014</span>
            <div>
              <h3>SSC in Science</h3>
              <p>Faridpur Zilla School, Faridpur</p>
              <small>Focus: Science & Mathematics (Established analytical and programming foundations)</small>
            </div>
          </article>
        </div>
      </section>

      <footer className="footer section-pad">
        <div className="footer-top">
          <p className="kicker light">Have a complex problem?</p>
          <h2>Let&apos;s build what&apos;s next<span>.</span></h2>
          <a href="mailto:tanviranikcs@gmail.com">
            Start a conversation <Arrow />
          </a>
        </div>
        <div className="footer-bottom">
          <div>
            <strong>MD. TANVIR HASAN ANIK</strong>
            <span>Full Stack Developer · Software Engineer · Cloud & DevOps</span>
          </div>
          <div className="social-links">
            <a href="https://github.com/ProAnik" target="_blank" rel="noreferrer">GitHub <Arrow /></a>
            <a href="https://www.linkedin.com/in/md-tanvir-hasan-anik-8711551ba" target="_blank" rel="noreferrer">LinkedIn <Arrow /></a>
            <a href="mailto:tanviranikcs@gmail.com">Email <Arrow /></a>
          </div>
          <p>Dhaka, Bangladesh · Open to remote · +8801887454489 / +8801754630009</p>
        </div>
      </footer>
    </main>
  );
}
import { FaAws } from "react-icons/fa6";
import { VscAzure } from "react-icons/vsc";
import {
  SiDocker,
  SiDotnet,
  SiGithubactions,
  SiKubernetes,
  SiLaravel,
  SiNextdotjs,
  SiNodedotjs,
  SiPostgresql,
  SiReact,
  SiRedis,
  SiTerraform,
} from "react-icons/si";

const stackIcons = [
  { name: ".NET", Icon: SiDotnet },
  { name: "Laravel", Icon: SiLaravel },
  { name: "Node.js", Icon: SiNodedotjs },
  { name: "React", Icon: SiReact },
  { name: "Next.js", Icon: SiNextdotjs },
  { name: "AWS", Icon: FaAws },
  { name: "Azure", Icon: VscAzure },
  { name: "Terraform", Icon: SiTerraform },
  { name: "Docker", Icon: SiDocker },
  { name: "Kubernetes", Icon: SiKubernetes },
  { name: "PostgreSQL", Icon: SiPostgresql },
  { name: "Redis", Icon: SiRedis },
  { name: "CI/CD", Icon: SiGithubactions },
];