DevPort

modern portifolio by salvator

This tailwind example is contributed by Baraka Salvator, on 22-May-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Social media links,

Card Button Hero Navbar Social media buttons

Author Baraka Salvator

458

Fork Fullscreen

<!DOCTYPE html>
<html lang="en" class="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DevPort | Next-Gen Portfolio</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://unpkg.com/tilt.js@1.2.1/dest/tilt.jquery.min.js"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            'neon': '#00f0ff',
            'cyber': '#ff00aa',
            'matrix': '#00ff88',
            'void': '#0a0a0a',
            'glass': 'rgba(255, 255, 255, 0.1)',
            'dark-glass': 'rgba(0, 0, 0, 0.3)',
          },
          fontFamily: {
            'sans': ['"Inter"', 'sans-serif'],
            'mono': ['"Fira Code"', 'monospace'],
          },
          animation: {
            'float': 'float 6s ease-in-out infinite',
            'pulse-slow': 'pulse 8s cubic-bezier(0.4, 0, 0.6, 1) infinite',
            'text-gradient': 'textGradient 8s linear infinite',
            'spin-slow': 'spin 20s linear infinite',
          },
          keyframes: {
            float: {
              '0%, 100%': { transform: 'translateY(0)' },
              '50%': { transform: 'translateY(-20px)' },
            },
            textGradient: {
              '0%, 100%': { 'background-position': '0% 50%' },
              '50%': { 'background-position': '100% 50%' },
            }
          }
        }
      }
    }
  </script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;500;700&family=Fira+Code:wght@400;600&display=swap" rel="stylesheet">
  <style>
    body {
      background-color: #0a0a0a;
      color: #e5e7eb;
    }
    .particle {
      position: absolute;
      border-radius: 50%;
      filter: blur(1px);
      opacity: 0.7;
    }
    .glass-card {
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .gradient-text {
      background-image: linear-gradient(90deg, #00f0ff, #ff00aa, #00ff88);
      background-size: 300% 300%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .dark .gradient-text-darkmode {
      background-image: linear-gradient(90deg, #00f0ff, #ff00aa, #00ff88);
      background-size: 300% 300%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .tilt-effect {
      transform-style: preserve-3d;
      transform: perspective(1000px);
    }
  </style>
</head>
<body class="min-h-screen overflow-x-hidden font-sans">
  
  <div id="particles-js" class="fixed inset-0 -z-10"></div>

<nav class="fixed w-full z-50 bg-dark-glass glass-card py-4 px-8 backdrop-blur-lg">
    <div class="container mx-auto flex justify-between items-center">
      <div class="text-2xl font-bold gradient-text">DEV<span class="text-white">PORT</span></div>
      <div class="flex items-center space-x-6">
        <a href="#about" class="hover:text-neon transition-colors">About</a>
        <a href="#work" class="hover:text-cyber transition-colors">Work</a>
        <a href="#skills" class="hover:text-matrix transition-colors">Skills</a>
        <button id="theme-toggle" class="p-2 rounded-full bg-glass hover:bg-opacity-50 transition-all">
          <svg id="dark-icon" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
          </svg>
          <svg id="light-icon" class="w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
          </svg>
        </button>
      </div>
    </div>
  </nav>

<section class="min-h-screen flex items-center pt-20 px-8">
    <div class="container mx-auto">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
        <div class="space-y-8">
          <h1 class="text-5xl md:text-6xl font-bold leading-tight">
            <span class="gradient-text animate-text-gradient">Innovative</span>
            <br>Developer &<br>
            <span class="gradient-text animate-text-gradient">Digital Creator</span>
          </h1>
          <p class="text-lg opacity-80 max-w-lg">
            Crafting immersive digital experiences with cutting-edge tech. 
            Focused on performance, design, and seamless functionality.
          </p>
          <div class="flex space-x-4">
            <button class="px-6 py-3 bg-gradient-to-r from-neon to-cyber rounded-lg font-medium hover:shadow-lg hover:shadow-cyan-500/30 transition-all">
              View Projects
            </button>
            <button class="px-6 py-3 border border-glass rounded-lg hover:bg-glass transition-all">
              Contact Me
            </button>
          </div>
        </div>
        <div class="relative">
          <div class="tilt-effect" data-tilt data-tilt-max="10" data-tilt-speed="400" data-tilt-perspective="1000">
            <div class="glass-card rounded-2xl p-1">
              <img src="https://images.unsplash.com/photo-1633356122544-f134324a6cee?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
                   alt="Developer Coding" 
                   class="rounded-xl w-full h-auto">
            </div>
          </div>
          <div class="absolute -bottom-6 -left-6 w-24 h-24 bg-neon rounded-full opacity-20 animate-pulse-slow -z-10"></div>
          <div class="absolute -top-6 -right-6 w-32 h-32 bg-cyber rounded-full opacity-20 animate-pulse-slow -z-10" style="animation-delay: 2s;"></div>
        </div>
      </div>
    </div>
  </section>

<section id="work" class="py-20 px-8">
    <div class="container mx-auto">
      <h2 class="text-4xl font-bold mb-12 gradient-text">Featured <span class="text-white">Work</span></h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        
        <div class="tilt-effect" data-tilt data-tilt-max="5" data-tilt-glare="true">
          <div class="glass-card rounded-xl overflow-hidden hover:shadow-lg hover:shadow-neon/20 transition-all h-full">
            <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
                 alt="Project 1" 
                 class="w-full h-48 object-cover">
            <div class="p-6">
              <h3 class="text-xl font-bold mb-2">AI Dashboard</h3>
              <p class="opacity-80 mb-4">Next.js + Tailwind + TensorFlow</p>
              <div class="flex flex-wrap gap-2 mb-4">
                <span class="px-3 py-1 bg-glass rounded-full text-sm">React</span>
                <span class="px-3 py-1 bg-glass rounded-full text-sm">AI</span>
                <span class="px-3 py-1 bg-glass rounded-full text-sm">Node.js</span>
              </div>
              <a href="#" class="text-neon hover:underline">View Project →</a>
            </div>
          </div>
        </div>
        
        
        <div class="tilt-effect" data-tilt data-tilt-max="5" data-tilt-glare="true">
          <div class="glass-card rounded-xl overflow-hidden hover:shadow-lg hover:shadow-cyber/20 transition-all h-full">
            <img src="https://images.unsplash.com/photo-1555774698-0b77e0d5fac6?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
                 alt="Project 2" 
                 class="w-full h-48 object-cover">
            <div class="p-6">
              <h3 class="text-xl font-bold mb-2">E-Commerce Platform</h3>
              <p class="opacity-80 mb-4">React + GraphQL + Stripe</p>
              <div class="flex flex-wrap gap-2 mb-4">
                <span class="px-3 py-1 bg-glass rounded-full text-sm">React</span>
                <span class="px-3 py-1 bg-glass rounded-full text-sm">GraphQL</span>
                <span class="px-3 py-1 bg-glass rounded-full text-sm">MongoDB</span>
              </div>
              <a href="#" class="text-cyber hover:underline">View Project →</a>
            </div>
          </div>
        </div>
        
        
        <div class="tilt-effect" data-tilt data-tilt-max="5" data-tilt-glare="true">
          <div class="glass-card rounded-xl overflow-hidden hover:shadow-lg hover:shadow-matrix/20 transition-all h-full">
            <img src="https://images.unsplash.com/photo-1626785774573-4b799315345d?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
                 alt="Project 3" 
                 class="w-full h-48 object-cover">
            <div class="p-6">
              <h3 class="text-xl font-bold mb-2">Blockchain Explorer</h3>
              <p class="opacity-80 mb-4">Solidity + Web3.js + Ethers</p>
              <div class="flex flex-wrap gap-2 mb-4">
                <span class="px-3 py-1 bg-glass rounded-full text-sm">Blockchain</span>
                <span class="px-3 py-1 bg-glass rounded-full text-sm">Web3</span>
                <span class="px-3 py-1 bg-glass rounded-full text-sm">React</span>
              </div>
              <a href="#" class="text-matrix hover:underline">View Project →</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

<section id="skills" class="py-20 px-8 bg-gradient-to-br from-void to-gray-900">
    <div class="container mx-auto">
      <h2 class="text-4xl font-bold mb-12 gradient-text">Tech <span class="text-white">Stack</span></h2>
      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
        
        <div class="glass-card rounded-xl p-6 text-center hover:transform hover:scale-105 transition-all">
          <div class="w-16 h-16 mx-auto mb-4 flex items-center justify-center bg-glass rounded-full">
            <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" alt="React" class="w-10 h-10">
          </div>
          <h3 class="font-bold">React</h3>
          <p class="text-sm opacity-70">Frontend</p>
        </div>
        
        
        <div class="glass-card rounded-xl p-6 text-center hover:transform hover:scale-105 transition-all">
          <div class="w-16 h-16 mx-auto mb-4 flex items-center justify-center bg-glass rounded-full">
            <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg" alt="Node.js" class="w-10 h-10">
          </div>
          <h3 class="font-bold">Node.js</h3>
          <p class="text-sm opacity-70">Backend</p>
        </div>
        
        
        <div class="glass-card rounded-xl p-6 text-center hover:transform hover:scale-105 transition-all">
          <div class="w-16 h-16 mx-auto mb-4 flex items-center justify-center bg-glass rounded-full">
            <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/tailwindcss/tailwindcss-plain.svg" alt="Tailwind" class="w-10 h-10">
          </div>
          <h3 class="font-bold">Tailwind</h3>
          <p class="text-sm opacity-70">CSS</p>
        </div>
        
        
        <div class="glass-card rounded-xl p-6 text-center hover:transform hover:scale-105 transition-all">
          <div class="w-16 h-16 mx-auto mb-4 flex items-center justify-center bg-glass rounded-full">
            <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg" alt="TypeScript" class="w-10 h-10">
          </div>
          <h3 class="font-bold">TypeScript</h3>
          <p class="text-sm opacity-70">Language</p>
        </div>
        
        
        <div class="glass-card rounded-xl p-6 text-center hover:transform hover:scale-105 transition-all">
          <div class="w-16 h-16 mx-auto mb-4 flex items-center justify-center bg-glass rounded-full">
            <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg" alt="Python" class="w-10 h-10">
          </div>
          <h3 class="font-bold">Python</h3>
          <p class="text-sm opacity-70">AI/ML</p>
        </div>
      </div>
    </div>
  </section>

<footer class="py-12 px-8 bg-dark-glass">
    <div class="container mx-auto text-center">
      <div class="flex justify-center space-x-6 mb-6">
        <a href="#" class="text-gray-400 hover:text-neon transition-colors">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
          </svg>
        </a>
        <a href="#" class="text-gray-400 hover:text-cyber transition-colors">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
          </svg>
        </a>
        <a href="#" class="text-gray-400 hover:text-matrix transition-colors">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
          </svg>
        </a>
      </div>
      <p class="text-gray-500 text-sm">© 2023 DevPort. All rights reserved.</p>
    </div>
  </footer>

<script>
    // Dark/Light Mode Toggle
    const themeToggle = document.getElementById('theme-toggle');
    const darkIcon = document.getElementById('dark-icon');
    const lightIcon = document.getElementById('light-icon');
    
    themeToggle.addEventListener('click', () => {
      document.documentElement.classList.toggle('dark');
      darkIcon.classList.toggle('hidden');
      lightIcon.classList.toggle('hidden');
    });

// Particle Background
    function createParticles() {
      const container = document.getElementById('particles-js');
      const particleCount = 50;
      
      for (let i = 0; i < particleCount; i++) {
        const particle = document.createElement('div');
        particle.classList.add('particle');
        
        // Random properties
        const size = Math.random() * 5 + 1;
        const posX = Math.random() * 100;
        const posY = Math.random() * 100;
        const delay = Math.random() * 10;
        const duration = Math.random() * 20 + 10;
        const color = `hsl(${Math.random() * 60 + 180}, 100%, 70%)`;
        
        particle.style.width = `${size}px`;
        particle.style.height = `${size}px`;
        particle.style.left = `${posX}%`;
        particle.style.top = `${posY}%`;
        particle.style.animation = `float ${duration}s ease-in-out ${delay}s infinite`;
        particle.style.backgroundColor = color;
        
        container.appendChild(particle);
      }
    }
    
    // Initialize
    document.addEventListener('DOMContentLoaded', () => {
      createParticles();
      
      // Initialize tilt.js
      if (window.innerWidth > 768) {
        const elements = document.querySelectorAll('.tilt-effect');
        elements.forEach(el => {
          VanillaTilt.init(el, {
            max: 5,
            speed: 400,
            glare: true,
            'max-glare': 0.2,
          });
        });
      }
    });
  </script>
</body>
</html>

Related Examples