Personal Portfolio by @sappymid - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<body>Tag primario di un documento HTML
actionDetermina la pagina di destinazione a cui verranno inviati i dati di un form HTML
styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)
methodDetermina il metodo di invio dei dati di un form al server
<th>Definisce una cella di intestazione di una tabella HTML.
<ol>Crea liste ordinate o numerate.

Users

Log in to search for users

Explore

Find inspiration

pagina America(2)

X-Dsigner (Blu Eletric)– Web & U

Keep Your Emails on Target with Ma

Ricetta Cous Cous

CAPPUCCETTO ROSSO

Il mondo della tecnologia

esercizio:sito web

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Saswat S. Patra - Portfolio</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    }

    body {
      background: linear-gradient(135deg, #1a1a22 0%, #22222b 100%);
      color: #e0e0e0;
      line-height: 1.6;
      overflow-x: hidden;
      position: relative;
      transition: background 0.3s;
    }

    body.light-theme {
      background: linear-gradient(135deg, #f5f7fa 0%, #e4e9fd 100%);
      color: #333;
    }

    /* Polka Dots Background */
    .polka-dots {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: -1;
    }

    .dot {
      position: absolute;
      background: rgba(74, 144, 226, 0.3);
      border-radius: 50%;
      animation: twinkle 5s infinite ease-in-out;
      will-change: opacity, transform;
    }

    .dot:nth-child(odd) {
      animation-delay: 1s;
    }

    .dot:nth-child(even) {
      animation-delay: 2s;
    }

    /* Randomly position and size dots */
    .dot:nth-child(1) { top: 10%; left: 15%; width: 8px; height: 8px; }
    .dot:nth-child(2) { top: 20%; left: 80%; width: 6px; height: 6px; }
    .dot:nth-child(3) { top: 30%; left: 25%; width: 10px; height: 10px; }
    .dot:nth-child(4) { top: 40%; left: 60%; width: 7px; height: 7px; }
    .dot:nth-child(5) { top: 50%; left: 10%; width: 9px; height: 9px; }
    .dot:nth-child(6) { top: 60%; left: 70%; width: 5px; height: 5px; }
    .dot:nth-child(7) { top: 70%; left: 30%; width: 8px; height: 8px; }
    .dot:nth-child(8) { top: 80%; left: 50%; width: 6px; height: 6px; }
    .dot:nth-child(9) { top: 90%; left: 20%; width: 7px; height: 7px; }
    .dot:nth-child(10) { top: 15%; left: 90%; width: 9px; height: 9px; }

    @keyframes twinkle {
      0%, 100% { opacity: 0.3; transform: scale(1) translate(0, 0); }
      50% { opacity: 0.7; transform: scale(1.2) translate(5px, 5px); }
    }

    /* Loading Animation */
    .loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(26, 26, 34, 0.9);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 2000;
      opacity: 1;
      transition: opacity 0.5s ease-out;
    }

    .loader.hidden {
      opacity: 0;
      pointer-events: none;
    }

    .cube-container {
      perspective: 800px;
      width: 80px;
      height: 80px;
    }

    .cube {
      position: relative;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      animation: spin 4s linear infinite, pulse 2s ease-in-out infinite;
      will-change: transform;
    }

    .cube-face {
      position: absolute;
      width: 80px;
      height: 80px;
      background: rgba(30, 30, 38, 0.85);
      backdrop-filter: blur(5px);
      border: 1px solid rgba(74, 144, 226, 0.4);
      box-shadow: 0 0 10px rgba(74, 144, 226, 0.3);
    }

    .cube-face.front  { transform: rotateY(0deg) translateZ(40px); }
    .cube-face.back   { transform: rotateY(180deg) translateZ(40px); }
    .cube-face.right  { transform: rotateY(90deg) translateZ(40px); }
    .cube-face.left   { transform: rotateY(-90deg) translateZ(40px); }
    .cube-face.top    { transform: rotateX(90deg) translateZ(40px); }
    .cube-face.bottom { transform: rotateX(-90deg) translateZ(40px); }

    @keyframes spin {
      0% { transform: rotateX(0deg) rotateY(0deg); }
      100% { transform: rotateX(360deg) rotateY(360deg); }
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(74, 144, 226, 0.3); }
      50% { transform: scale(1.1); box-shadow: 0 0 20px rgba(74, 144, 226, 0.6); }
    }

    /* Scroll Progress Bar */
    .progress-bar {
      position: fixed;
      top: 0;
      left: 0;
      height: 4px;
      background: #4a90e2;
      width: 0;
      z-index: 1000;
      transition: width 0.2s ease;
    }

    /* Theme Toggle */
    .theme-toggle {
      position: fixed;
      top: 20px;
      right: 20px;
      background: none;
      border: none;
      font-size: 1.5rem;
      color: #e0e0e0;
      cursor: pointer;
      z-index: 1000;
      transition: color 0.3s;
    }

    .light-theme .theme-toggle {
      color: #333;
    }

    .container {
      max-width: 1200px;
      margin: 20px auto;
      padding: 20px;
      background: rgba(26, 26, 34, 0.7);
      border: 1px solid rgba(74, 144, 226, 0.2);
      border-radius: 15px;
      opacity: 0;
      transition: opacity 0.5s ease-in;
    }

    .light-theme .container {
      background: rgba(255, 255, 255, 0.7);
      border: 1px solid rgba(53, 122, 189, 0.2);
    }

    .container.loaded {
      opacity: 1;
    }

    .bento-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
    }

    .bento-item {
      background: rgba(30, 30, 38, 0.85);
      border: 1px solid rgba(74, 144, 226, 0.3);
      border-radius: 15px;
      padding: 20px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
      transition: transform 0.4s ease, box-shadow 0.4s ease;
      position: relative;
      opacity: 0;
      transform: translateY(50px);
      will-change: transform, opacity;
    }

    .light-theme .bento-item {
      background: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(53, 122, 189, 0.3);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .bento-item::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        135deg,
        rgba(74, 144, 226, 0.1) 0%,
        transparent 50%,
        rgba(74, 144, 226, 0.1) 100%
      );
      opacity: 0.5;
      z-index: 0;
    }

    .bento-item.reveal {
      opacity: 1;
      transform: translateY(0);
    }

    .bento-item:hover {
      transform: translateY(-10px) scale(1.02);
      box-shadow: 0 12px 30px rgba(74, 144, 226, 0.5);
    }

    .light-theme .bento-item:hover {
      box-shadow: 0 12px 30px rgba(53, 122, 189, 0.5);
    }

    .bento-item h2 {
      margin-bottom: 15px;
      font-size: 1.8rem;
      position: relative;
      z-index: 1;
      color: #4a90e2;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }

    .light-theme .bento-item h2 {
      color: #357abd;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .bento-item p, .bento-item ul {
      margin-bottom: 15px;
      position: relative;
      z-index: 1;
      color: #f0f0f0;
    }

    .light-theme .bento-item p, .light-theme .bento-item ul {
      color: #333;
    }

    .bento-item ul {
      list-style: none;
    }

    .bento-item ul li {
      margin-bottom: 10px;
      padding-left: 25px;
      position: relative;
      transition: transform 0.3s, color 0.3s;
    }

    .bento-item ul li:hover {
      transform: translateX(10px);
      color: #4a90e2;
    }

    .light-theme .bento-item ul li:hover {
      color: #357abd;
    }

    .bento-item ul li::before {
      content: '→';
      position: absolute;
      left: 0;
      color: #4a90e2;
      font-size: 1.2em;
    }

    .light-theme .bento-item ul li::before {
      color: #357abd;
    }

    /* Project Cards */
    .project-card {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 10px;
      padding: 10px;
      margin-bottom: 10px;
      cursor: pointer;
      transition: background 0.3s;
    }

    .light-theme .project-card {
      background: rgba(0, 0, 0, 0.05);
    }

    .project-card:hover {
      background: rgba(74, 144, 226, 0.3);
    }

    /* Modal */
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      z-index: 1500;
      justify-content: center;
      align-items: center;
    }

    .modal-content {
      background: rgba(28, 28, 36, 0.8);
      border: 1px solid rgba(74, 144, 226, 0.2);
      border-radius: 15px;
      padding: 20px;
      max-width: 500px;
      width: 90%;
      position: relative;
      animation: slideIn 0.3s ease-out;
    }

    .light-theme .modal-content {
      background: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(53, 122, 189, 0.2);
    }

    .modal-content h3 {
      color: #4a90e2;
      margin-bottom: 15px;
    }

    .light-theme .modal-content h3 {
      color: #357abd;
    }

    .modal-content p {
      color: #f0f0f0;
      margin-bottom: 15px;
    }

    .light-theme .modal-content p {
      color: #333;
    }

    .close-modal {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 1.5rem;
      color: #f0f0f0;
      cursor: pointer;
      transition: color 0.3s;
    }

    .light-theme .close-modal {
      color: #333;
    }

    .close-modal:hover {
      color: #4a90e2;
    }

    .light-theme .close-modal:hover {
      color: #357abd;
    }

    @keyframes slideIn {
      from { transform: translateY(-50px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

    /* Skill Progress Bars */
    .skill {
      margin-bottom: 15px;
    }

    .skill-name {
      margin-bottom: 5px;
      color: #f0f0f0;
    }

    .light-theme .skill-name {
      color: #333;
    }

    .skill-bar {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 5px;
      height: 10px;
      overflow: hidden;
    }

    .light-theme .skill-bar {
      background: rgba(0, 0, 0, 0.1);
    }

    .skill-progress {
      background: #4a90e2;
      height: 100%;
      width: 0;
      transition: width 1s ease-in-out;
    }

    .light-theme .skill-progress {
      background: #357abd;
    }

    .large {
      grid-column: span 2;
    }

    .medium {
      grid-column: span 1;
    }

    .contact-form {
      display: flex;
      flex-direction: column;
      gap: 15px;
      position: relative;
      z-index: 1;
    }

    .contact-form input, .contact-form textarea {
      padding: 12px;
      border: 1px solid rgba(74, 144, 226, 0.3);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.05);
      color: #f0f0f0;
      font-size: 1rem;
      transition: border-color 0.3s, box-shadow 0.3s;
    }

    .light-theme .contact-form input, .light-theme .contact-form textarea {
      background: rgba(0, 0, 0, 0.05);
      color: #333;
      border: 1px solid rgba(53, 122, 189, 0.3);
    }

    .contact-form input:focus, .contact-form textarea:focus {
      outline: none;
      border-color: #4a90e2;
      box-shadow: 0 0 8px rgba(74, 144, 226, 0.5);
    }

    .light-theme .contact-form input:focus, .light-theme .contact-form textarea:focus {
      border-color: #357abd;
      box-shadow: 0 0 8px rgba(53, 122, 189, 0.5);
    }

    .contact-form button {
      background: linear-gradient(90deg, #4a90e2, #357abd);
      color: #fff;
      border: none;
      padding: 12px;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 600;
      transition: transform 0.3s, box-shadow 0.3s;
    }

    .contact-form button:hover {
      transform: scale(1.05);
      box-shadow: 0 5px 15px rgba(74, 144, 226, 0.4);
    }

    /* Social Links */
    .social-links {
      text-align: center;
      margin-top: 40px;
    }

    .social-links a {
      display: inline-block;
      margin: 0 15px;
      font-size: 1rem;
      color: #f0f0f0;
      text-decoration: none;
      transition: color 0.3s, transform 0.3s;
    }

    .social-links a:hover {
      color: #4a90e2;
      transform: scale(1.1);
    }

    .light-theme .social-links a {
      color: #333;
    }

    .light-theme .social-links a:hover {
      color: #357abd;
    }

    /* Performance Optimizations for Low-End Devices */
    @media (prefers-reduced-motion: reduce) or (max-width: 600px) {
      .cube-face {
        backdrop-filter: none;
        background: rgba(30, 30, 38, 0.9);
      }

      .bento-item {
        backdrop-filter: none;
        background: rgba(30, 30, 38, 0.9);
      }

      .container {
        backdrop-filter: none;
        background: rgba(26, 26, 34, 0.8);
      }

      .modal-content {
        backdrop-filter: none;
        background: rgba(28, 28, 36, 0.9);
      }

      .bento-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 15px rgba(74, 144, 226, 0.3);
      }

      .bento-item::after {
        display: none;
      }

      .cube {
        animation: spin 6s linear infinite;
      }

      .skill-progress {
        transition: none;
      }

      .dot {
        animation: none;
        opacity: 0.3;
      }
    }

    @media (max-width: 768px) {
      .bento-grid {
        grid-template-columns: 1fr;
      }

      .large, .medium {
        grid-column: span 1;
      }
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(50px); }
      to { opacity: 1; transform: translateY(0); }
    }
  </style>
</head>
<body>
  <div class="polka-dots">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>

  <div class="loader">
    <div class="cube-container">
      <div class="cube">
        <div class="cube-face front"></div>
        <div class="cube-face back"></div>
        <div class="cube-face right"></div>
        <div class="cube-face left"></div>
        <div class="cube-face top"></div>
        <div class="cube-face bottom"></div>
      </div>
    </div>
  </div>

  <div class="progress-bar"></div>
  <button class="theme-toggle" onclick="toggleTheme()">?</button>

  <div class="container">
    <div class="bento-grid">
      <div class="bento-item large" id="about">
        <h2>About Me</h2>
        <p>
          I'm Saswat S. Patra, a creative web developer obsessed with crafting immersive digital experiences. 
          My expertise lies in front-end technologies, and I thrive on pushing the boundaries of modern web design.
        </p>
      </div>

      <div class="bento-item medium" id="projects">
        <h2>Projects</h2>
        <div class="project-card" onclick="openModal('portfolio')">
          <strong>Interactive Portfolio</strong>: A dynamic portfolio with animated Bento grid layout.
        </div>
        <div class="project-card" onclick="openModal('ecommerce')">
          <strong>E-commerce Dashboard</strong>: A sleek, responsive dashboard for online stores.
        </div>
        <div class="project-card" onclick="openModal('chat')">
          <strong>Real-Time Chat App</strong>: A modern chat application with WebSocket integration.
        </div>
      </div>

      <div class="bento-item medium" id="skills">
        <h2>Skills</h2>
        <div class="skill">
          <div class="skill-name">HTML5, CSS3, JavaScript</div>
          <div class="skill-bar">
            <div class="skill-progress" style="width: 90%"></div>
          </div>
        </div>
        <div class="skill">
          <div class="skill-name">React & TypeScript</div>
          <div class="skill-bar">
            <div class="skill-progress" style="width: 85%"></div>
          </div>
        </div>
        <div class="skill">
          <div class="skill-name">Web Animations & GSAP</div>
          <div class="skill-bar">
            <div class="skill-progress" style="width: 75%"></div>
          </div>
        </div>
        <div class="skill">
          <div class="skill-name">Node.js & REST APIs</div>
          <div class="skill-bar">
            <div class="skill-progress" style="width: 80%"></div>
          </div>
        </div>
      </div>

      <div class="bento-item large" id="contact">
        <h2>Contact Me</h2>
        <div class="contact-form">
          <input type="text" placeholder="Your Name" required>
          <input type="email" placeholder="Your Email" required>
          <textarea placeholder="Your Message" rows="4" required></textarea>
          <button type="button" onclick="handleSubmit()">Send Message</button>
        </div>
      </div>
    </div>

    <div class="social-links">
      <a href="https://github.com" target="_blank">GitHub</a>
      <a href="https://linkedin.com" target="_blank">LinkedIn</a>
      <a href="https://twitter.com" target="_blank">Twitter</a>
    </div>
  </div>

  <!-- Modal -->
  <div class="modal" id="project-modal">
    <div class="modal-content">
      <span class="close-modal" onclick="closeModal()">×</span>
      <div id="modal-body"></div>
    </div>
  </div>

  <script>
    function handleSubmit() {
      alert('Message sent! (Demo - no backend connected)');
      document.querySelector('.contact-form').reset();
    }

    function toggleTheme() {
      document.body.classList.toggle('light-theme');
      const toggleButton = document.querySelector('.theme-toggle');
      toggleButton.textContent = document.body.classList.contains('light-theme') ? '?' : '☀️';
    }

    function openModal(project) {
      const modal = document.getElementById('project-modal');
      const modalBody = document.getElementById('modal-body');
      let content = '';

      switch (project) {
        case 'portfolio':
          content = `
            <h3>Interactive Portfolio</h3>
            <p>A dynamic portfolio showcasing my skills with a modern Bento grid layout. Features smooth animations and responsive design.</p>
            <p><strong>Technologies:</strong> HTML, CSS, JavaScript</p>
          `;
          break;
        case 'ecommerce':
          content = `
            <h3>E-commerce Dashboard</h3>
            <p>A responsive dashboard for managing online stores, with real-time analytics and user-friendly interface.</p>
            <p><strong>Technologies:</strong> React, Node.js, MongoDB</p>
          `;
          break;
        case 'chat':
          content = `
            <h3>Real-Time Chat App</h3>
            <p>A modern chat application with WebSocket integration for seamless real-time communication.</p>
            <p><strong>Technologies:</strong> Node.js, Socket.io, Express</p>
          `;
          break;
      }

      modalBody.innerHTML = content;
      modal.style.display = 'flex';
    }

    function closeModal() {
      document.getElementById('project-modal').style.display = 'none';
    }

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('reveal');
          entry.target.style.animation = 'fadeIn 0.6s ease-out forwards';
          if (entry.target.id === 'skills') {
            document.querySelectorAll('.skill-progress').forEach(bar => {
              bar.style.width = bar.getAttribute('style').split(':')[1];
            });
          }
        }
      });
    }, { threshold: 0.2 });

    document.querySelectorAll('.bento-item').forEach(item => {
      observer.observe(item);
    });

    // Scroll Progress Bar
    window.addEventListener('scroll', () => {
      const scrollTop = document.documentElement.scrollTop;
      const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
      const scrollPercent = (scrollTop / scrollHeight) * 100;
      document.querySelector('.progress-bar').style.width = scrollPercent + '%';
    });

    // Loading Animation
    window.addEventListener('load', () => {
      setTimeout(() => {
        document.querySelector('.loader').classList.add('hidden');
        document.querySelector('.container').classList.add('loaded');
      }, 1500);
    });

    // Performance Optimization: Detect Low-End Devices
    if (navigator.hardwareConcurrency && navigator.hardwareConcurrency <= 2) {
      document.body.classList.add('low-end');
    }
  </script>
</body>
</html>