Personal Portfolio by @sappymid - Codewith.it

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

Referenze

srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>
formenctypeDefinisce il tipo di codifica dei dati di un elemento input
<h4>Titolo di intestazione di quarto livello
<table>Tag primario per la creazione di tabelle
mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.
_blankApre i collegamenti ipertestuali in una nuova scheda del browser

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

PROGETTO DIGITAL

Portfolio | DFD Design

Young Corporate Lawyer - Experienc

Prova altro form

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!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>