index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Portfolio</title>
    <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <!-- Sidebar -->
  <aside class="sidebar">
    <h1 class="logo">Portfolio</h1>
    <nav class="nav">
      <a href="#home" class="nav-link active">Home</a>
      <a href="#about" class="nav-link">About</a>
      <a href="#skills" class="nav-link">Skills</a>
      <a href="#projects" class="nav-link">Projects</a>
      <a href="#contact" class="nav-link">Contact</a>
    </nav>
    <div class="sidebar-footer">
      <button id="themeToggle" aria-label="Toggle theme">🌙</button>
    </div>
  </aside>

  <!-- Main -->
  <main class="main">
    <!-- Home -->
    <section id="home" class="section home">
      <div class="hero">
        <h2 class="hero-title">Hi, I'm <span>Shufwath Raqeeb</span> 👋</h2>
        <p class="hero-sub">Engineering Student · Web & AI Enthusiast</p>
        <div class="cta-row">
          <a href="#projects" class="btn primary">View Projects</a>
          <a href="#contact" class="btn ghost">Contact</a>
        </div>
      </div>

      <!-- Interactive Shapes -->
      <div class="shape-layer" aria-hidden="true">
        <div class="blob b1"></div>
        <div class="blob b2"></div>
        <div class="blob b3"></div>
        <div class="geo g1"></div>
        <div class="geo g2"></div>
        <div class="geo g3"></div>
      </div>
    </section>

    <!-- About -->
<section id="about" class="about section">
  <h2>About Me</h2>
  <div class="about-box">
    <p>
      Hi, I’m Shufwath Raqeeb — an engineering student passionate about
      technology, problem-solving, and creating interactive digital experiences.  
      I’ve worked on projects like a Smart Triage Assistant, a Stock Price Tracker
      hardware system, and an Auction Website.  
      Always curious and eager to learn, I love building impactful solutions.
    </p>
  </div>
</section>


    <!-- Skills -->
<!-- Skills Section -->
<section id="skills">
  <h2>My Skills</h2>
  <div class="skills-container">
    <div class="skill-card">
      <i class="fab fa-html5"></i>
      <span>HTML</span>
    </div>
    <div class="skill-card">
      <i class="fab fa-css3-alt"></i>
      <span>CSS</span>
    </div>
    <div class="skill-card">
      <i class="fab fa-js"></i>
      <span>JavaScript</span>
    </div>
    <div class="skill-card">
      <i class="fab fa-react"></i>
      <span>React</span>
    </div>
    <div class="skill-card">
      <i class="fab fa-node-js"></i>
      <span>Node.js</span>
    </div>
    <div class="skill-card">
      <i class="fas fa-database"></i>
      <span>Database</span>
    </div>
    <div class="skill-card">
      <i class="fab fa-python"></i>
      <span>Python</span>
    </div>
    <div class="skill-card">
      <i class="fas fa-cloud"></i>
      <span>Cloud</span>
    </div>
  </div>
</section>



    <!-- Projects -->
    <section id="projects" class="section projects">
      <h3 class="section-title">Projects</h3>

      <div class="cards">
        <!-- 1: Smart Triage Assistant -->
        <article class="card tilt">
          <div class="card-media placeholder" title="Your image here"></div>
          <div class="card-body">
            <h4>Smart Triage Assistant</h4>
            <p>
              AI-powered triage that collects symptoms, prioritizes urgency, and helps route
              patients to the right care with optional messaging integration.
            </p>
            <div class="chips">
              <span>Python</span><span>Flask</span><span>ML</span><span>Twilio</span>
            </div>
            <div class="card-actions">
              <button class="btn small outline" disabled>Live</button>
              <button class="btn small">Details</button>
            </div>
          </div>
        </article>

        <!-- 2: Stock Price Tracker (Hardware) -->
        <article class="card tilt">
          <div class="card-media placeholder" title="Your image here"></div>
          <div class="card-body">
            <h4>Stock Price Tracker (Hardware)</h4>
            <p>
              An IoT device that fetches live market data and displays price changes on an
              external LED/epaper module—quick glance, real time.
            </p>
            <div class="chips">
              <span>ESP8266</span><span>Arduino</span><span>APIs</span><span>Python</span>
            </div>
            <div class="card-actions">
              <button class="btn small outline" disabled>Live</button>
              <button class="btn small">Details</button>
            </div>
          </div>
        </article>

        <!-- 3: Auction Website -->
        <article class="card tilt">
          <div class="card-media placeholder" title="Your image here"></div>
          <div class="card-body">
            <h4>Auction Website</h4>
            <p>
              Real-time online auctions with listing management and live bidding. Clean UX,
              notifications, and secure auth.
            </p>
            <div class="chips">
              <span>Django</span><span>SQLite</span><span>WebSockets</span><span>JS</span>
            </div>
            <div class="card-actions">
              <button class="btn small outline" disabled>Live</button>
              <button class="btn small">Details</button>
            </div>
          </div>
        </article>
      </div>
    </section>

    <!-- Contact -->
<!-- Contact Section -->
<section id="contact">
  <h2 class="section-title">Get In Touch</h2>
  <div class="contact-container">
    <!-- Left Side -->
    <div class="contact-info">
      <h3>Let's Work Together</h3>
      <p>
        I'm always interested in new opportunities, whether it's a full-time position, internship, 
        or freelance project. If you have a project in mind or just want to chat about technology, 
        feel free to reach out!
      </p>
      <p>📧 alex.johnson@email.com</p>
      <p>📞 +1 (555) 123-4567</p>
      <p>📍 San Francisco, CA</p>
      <div class="social-links">
        <a href="#">GitHub</a> | <a href="#">LinkedIn</a>
      </div>
    </div>

    <!-- Right Side -->
    <form class="contact-form">
      <input type="text" placeholder="Your Name" required />
      <input type="email" placeholder="Your Email" required />
      <input type="text" placeholder="Subject" required />
      <textarea placeholder="Your Message" required></textarea>
      <button type="submit">Send Message</button>
    </form>
  </div>
</section>