Home
gidy
Innovative Developer & Digital Creator

Innovative Developer & Digital Creator

Innovative Developer

This tailwind example is contributed by gidy, on 28-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Author gidy

894

<!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://plus.unsplash.com/premium_photo-1661877737564-3dfd7282efcb?q=80&w=1500&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 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://plus.unsplash.com/premium_photo-1661877737564-3dfd7282efcb?q=80&w=1500&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 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

Upvote downvote buttons

Author:
Lucas Martinez

3 years ago

11.7k
Show credit card details

Author:
Manuela Bianka

3 years ago

12.3k
Track Your Order
Track Your Order

Author:
Tanvir Hasan Bappy (Tanvir)

9 months ago

401
button animation
button animation big

Author:
QQ-VVN

8 months ago

799
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

1.1k
chatbot
is my chatbot

Author:
Omer fils ELENGA

2 months ago

294
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

1 year ago

3.9k
Fancy underline

Author:
Simon Scheffer

3 years ago

12.5k
A Code Master Academy
A Code Master Academy – Empowering the Next Generation of Tech Leaders in Rwanda 👨‍💻 I'm Acode Master, the founder of A Code Master Academy, a practical and inclusive coding school based in Rubavu, Rwanda. The academy is dedicated to transforming lives by equipping unemployed youth and passionate learners with job-ready skills in modern software development.

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

1.1k
Subscription Plans
Subscription Plans

Author:
Tanvir Hasan Bappy (Tanvir)

8 months ago

783
Invoice Generator
Invoice Generator

Author:
Tanvir Hasan Bappy (Tanvir)

3 weeks ago

94
portfolio
Complete Portfolio UI Kit with hero, about, skills, projects, testimonials, contact form, and footer. Fully responsive and dark mode supported using Tailwind CSS.

Author:
Lekhraj Ghimire

7 months ago

727

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components