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

503

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

Responsive Hero Section with Typewriter Effect
A modern hero section featuring a typewriter animation effect, social media links, and responsive design. Includes a user avatar placeholder and a clean dark gradient background. Built with Tailwind CSS and Font Awesome icons. Perfect for personal portfolio websites.

Author:
Muhammad Umair Arshad

6 months ago

367
rotate card
rotate card

Author:
Tanvir Hasan Bappy (Tanvir)

10 months ago

1.3k
Calculator
This calculator uses CSS although it can be passed directly to tailwind

Author:
Ameth Galarcio

1 year ago

1.8k
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

3 months ago

595
Upvote downvote buttons [alpine]
upvote and downvote buttons made as working version in alpine.js

Author:
Anonymous

2 years ago

8.5k
Snake Game tailwind
snake game

Author:
QQ-VVN

4 months ago

350
BONIMATOR Responsive Tailwind Starter Template
Responsive Tailwind Starter Template

Author:
Bonimater

3 months ago

536
Typewriter effect
using javascript

Author:
Samuel Dawson

2 years ago

41.2k
image

Author:
pablitodgb

3 months ago

133
Plant Game
Checking to see if it works

Author:
Becky Keyworth

4 months ago

465
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

5 months ago

535
Restaurant menu card

Author:
Anonymous

1 year ago

3.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components