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

498

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

Soft Lights & Slow Beats
Sink into the tranquil rhythms of a Sunday afternoon. This playlist blends soft melodies and gentle beats to create a mysterious yet comforting atmosphere — perfect for relaxing, reflecting, or simply unwinding as the day fades away.

Author:
Bonimater

3 months ago

151
Services
This Services page design includes: 1. Responsive layout using Tailwind CSS grid system 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. Header with navigation 5. Six service cards with icons, titles, and descriptions 6. Footer with copyright information 7. Subtle animations and transitions 8. Accessibility considerations (proper heading structure, color contrast) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a white background in light mode and dark gray in dark mode - Service cards have a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - Icons use the Indigo-800 color (Indigo-400 in dark mode) for consistency - Each service card has a hover effect that scales it up slightly - Service cards fade in with a staggered delay for a smooth entrance - Dark mode is automatically applied based on system preferences - The design is fully responsive, adjusting from 1 to 3 columns based on screen size This design provides a clean, professional look for a services page while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

Author:
nejaa badr

10 months ago

1.9k
Marquee Slider of Client Logos – Smooth Scrolling Brand Showcase
Enhance your website's credibility with a sleek marquee slider displaying client logos. This continuously scrolling slider provides a dynamic and engaging way to showcase your trusted partnerships, ensuring a professional and visually appealing design. Perfect for businesses, portfolios, and service-based websites.

Author:
SANJAY SINGH GARIYA

5 months ago

1.2k
Ethical Fashion

Author:
Tanvir Hasan Bappy (Tanvir)

6 months ago

562
Show user details

Author:
Lucas Martinez

2 years ago

24.6k
portfolio
This portfolio page for Claire includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support (the design is already dark-themed) 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections 2. Animated skill bars 3. Hover effects on projects and buttons 4. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Skills, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a frosted glass effect using backdrop filters - Text is white for high contrast against the dark background - Sections fade in and slide up as they enter the viewport - Skill bars animate when the skills section is in view - Project cards have a hover effect with scaling and increased opacity - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens This implementation provides a visually appealing and functional portfolio page for Claire, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions and animations.

Author:
nejaa badr

10 months ago

1.9k
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Author:
Rathanak Phan

2 months ago

235
Moving Background Animation

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

7 months ago

2.4k
templete
templete

Author:
Uwera Dorcas

3 months ago

317
Collapsible content

Author:
Rafferty Kim

2 years ago

13.3k
Our features
Our features

Author:
Tanvir Hasan Bappy (Tanvir)

9 months ago

803
Invoice
Invoice

Author:
Tanvir Hasan Bappy (Tanvir)

5 months ago

460

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components