yvette

vibes kbx

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

Header

Author Umutoniwase Yvette

398

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YVETTE  - Full Stack Developer</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: #fff;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            overflow-x: hidden;
        }

.container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

/* Header */
        header {
            position: fixed;
            top: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            z-index: 1000;
            transition: all 0.3s ease;
        }

nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 2rem;
        }

.logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: #fff;
            text-decoration: none;
            animation: glow 2s ease-in-out infinite alternate;
        }

@keyframes glow {
            from { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #00f; }
            to { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #00f; }
        }

.nav-links {
            display: flex;
            list-style: none;
            gap: 2rem;
        }

.nav-links a {
            color: #fff;
            text-decoration: none;
            transition: all 0.3s ease;
            position: relative;
        }

.nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 0;
            background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
            transition: width 0.3s ease;
        }

.nav-links a:hover::after {
            width: 100%;
        }

/* Hero Section */
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

.hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a"><stop offset="0%" stop-color="%23ffffff" stop-opacity="0.1"/><stop offset="100%" stop-color="%23ffffff" stop-opacity="0"/></radialGradient></defs><circle cx="200" cy="200" r="100" fill="url(%23a)"><animateTransform attributeName="transform" type="translate" values="0,0;800,600;0,0" dur="20s" repeatCount="indefinite"/></circle><circle cx="800" cy="300" r="150" fill="url(%23a)"><animateTransform attributeName="transform" type="translate" values="0,0;-600,400;0,0" dur="25s" repeatCount="indefinite"/></circle></svg>');
            animation: float 6s ease-in-out infinite;
        }

@keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }

.hero-content {
            z-index: 2;
            position: relative;
        }

.hero h1 {
            font-size: 4rem;
            margin-bottom: 1rem;
            opacity: 0;
            animation: slideUp 1s ease forwards 0.5s;
        }

.hero p {
            font-size: 1.5rem;
            margin-bottom: 2rem;
            opacity: 0;
            animation: slideUp 1s ease forwards 1s;
        }

@keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

.cta-button {
            display: inline-block;
            padding: 15px 30px;
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
            color: #fff;
            text-decoration: none;
            border-radius: 50px;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            opacity: 0;
            animation: slideUp 1s ease forwards 1.5s;
        }

.cta-button:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
        }

section {
            padding: 100px 0;
            position: relative;
        }

.section-title {
            text-align: center;
            font-size: 3rem;
            margin-bottom: 3rem;
            position: relative;
        }

.section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
            border-radius: 2px;
        }

.about {
            background: rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
        }

.about-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
        }

.about-text {
            font-size: 1.2rem;
            line-height: 1.8;
        }

.skills {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

.skill-card {
            background: rgba(255, 255, 255, 0.1);
            padding: 2rem;
            border-radius: 15px;
            text-align: center;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }

.skill-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

.skill-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
            display: block;
        }

.projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 3rem;
        }

.project-card {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            overflow: hidden;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
            position: relative;
        }

.project-card:hover {
            transform: translateY(-15px);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
        }

.project-image {
            height: 200px;
            background: linear-gradient(45deg, #ff9a9e, #fad0c4);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4rem;
            color: #fff;
        }

.project-content {
            padding: 2rem;
        }

.project-title {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

.project-description {
            margin-bottom: 1.5rem;
            opacity: 0.9;
        }

.project-tech {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
        }

.tech-tag {
            background: rgba(255, 255, 255, 0.2);
            padding: 0.3rem 0.8rem;
            border-radius: 20px;
            font-size: 0.9rem;
        }

.project-links {
            display: flex;
            gap: 1rem;
        }

.project-link {
            color: #4ecdc4;
            text-decoration: none;
            font-weight: bold;
            transition: color 0.3s ease;
        }

.project-link:hover {
            color: #ff6b6b;
        }

.contact {
            background: rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
        }

.contact-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
        }

.contact-info {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

.contact-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            font-size: 1.2rem;
        }

.contact-form {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

.form-group {
            display: flex;
            flex-direction: column;
        }

.form-group label {
            margin-bottom: 0.5rem;
            font-weight: bold;
        }

.form-group input,
        .form-group textarea {
            padding: 1rem;
            border: none;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }

.form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
            transform: scale(1.02);
        }

.form-group input::placeholder,
        .form-group textarea::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }

.submit-btn {
            padding: 1rem 2rem;
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
            color: #fff;
            border: none;
            border-radius: 50px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

.submit-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
        }

footer {
            background: rgba(0, 0, 0, 0.2);
            text-align: center;
            padding: 2rem;
            backdrop-filter: blur(10px);
        }

.social-links {
            display: flex;
            justify-content: center;
            gap: 2rem;
            margin-bottom: 1rem;
        }

.social-link {
            color: #fff;
            font-size: 1.5rem;
            transition: all 0.3s ease;
        }

.social-link:hover {
            color: #4ecdc4;
            transform: scale(1.2);
        }

@media (max-width: 768px) {
            .nav-links {
                display: none;
            }

.hero h1 {
                font-size: 2.5rem;
            }

.hero p {
                font-size: 1.2rem;
            }

.about-content,
            .contact-content {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

.projects-grid {
                grid-template-columns: 1fr;
            }

.section-title {
                font-size: 2rem;
            }
        }

.fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }

.fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <a href="#" class="logo">AR</a>
            <ul class="nav-links">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

<section id="home" class="hero">
        <div class="hero-content">
            <h1>My project</h1>
            <p>Full Stack Developer & UI/UX Designer</p>
            <a href="#projects" class="cta-button">View My Work</a>
        </div>
    </section>

<section id="about" class="about">
        <div class="container">
            <h2 class="section-title fade-in">About Me</h2>
            <div class="about-content">
                <div class="about-text fade-in">
                    <p>I am a person who likes to do things and I have the ability to do them. If you want to help me, I will go far and wide..</p>
                    <p> It's always good when someone does something and does it well and with passion, and that's when people really enjoy it.</p>
                <div class="skills fade-in">
                    <div class="skill-card">
                        <span class="skill-icon">⚛️</span>
                        <h3>Frontend</h3>
                        <p>React, Vue, TypeScript</p>
                    </div>
                    <div class="skill-card">
                        <span class="skill-icon">🚀</span>
                        <h3>Backend</h3>
                        <p>Node.js, Python, PostgreSQL</p>
                    </div>
                    <div class="skill-card">
                        <span class="skill-icon">☁️</span>
                        <h3>Cloud</h3>
                        <p>AWS, Docker, Kubernetes</p>
                    </div>
                    <div class="skill-card">
                        <span class="skill-icon">🎨</span>
                        <h3>Design</h3>
                        <p>Figma, Adobe XD, UI/UX</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="projects" class="projects">
        <div class="container">
            <h2 class="section-title fade-in">Featured Projects</h2>
            <div class="projects-grid">
                <div class="project-card fade-in">
                    <div class="project-image">🛍️</div>
                    <div class="project-content">
                        <h3 class="project-title">E-Commerce Platform</h3>
                        <p class="project-description">A modern e-commerce solution with real-time inventory, payment processing, and admin dashboard.</p>
                        <div class="project-tech">
                            <span class="tech-tag">React</span>
                            <span class="tech-tag">Node.js</span>
                            <span class="tech-tag">MongoDB</span>
                            <span class="tech-tag">Stripe</span>
                        </div>
                        <div class="project-links">
                            <a href="#" class="project-link">Live Demo</a>
                            <a href="#" class="project-link">GitHub</a>
                        </div>
                    </div>
                </div>

<div class="project-card fade-in">
                    <div class="project-image">📱</div>
                    <div class="project-content">
                        <h3 class="project-title">Social Media App</h3>
                        <p class="project-description">A full-featured social platform with real-time messaging, photo sharing, and community features.</p>
                        <div class="project-tech">
                            <span class="tech-tag">React Native</span>
                            <span class="tech-tag">Firebase</span>
                            <span class="tech-tag">Socket.io</span>
                            <span class="tech-tag">Redux</span>
                        </div>
                        <div class="project-links">
                            <a href="#" class="project-link">Live Demo</a>
                            <a href="#" class="project-link">GitHub</a>
                        </div>
                    </div>
                </div>

<div class="project-card fade-in">
                    <div class="project-image">📊</div>
                    <div class="project-content">
                        <h3 class="project-title">Analytics Dashboard</h3>
                        <p class="project-description">A comprehensive business intelligence dashboard with interactive charts and real-time data visualization.</p>
                        <div class="project-tech">
                            <span class="tech-tag">Vue.js</span>
                            <span class="tech-tag">D3.js</span>
                            <span class="tech-tag">Python</span>
                            <span class="tech-tag">PostgreSQL</span>
                        </div>
                        <div class="project-links">
                            <a href="#" class="project-link">Live Demo</a>
                            <a href="#" class="project-link">GitHub</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="contact" class="contact">
        <div class="container">
            <h2 class="section-title fade-in">Get In Touch</h2>
            <div class="contact-content">
                <div class="contact-info fade-in">
                    <div class="contact-item">
                        <span>📧</span>
                        <span>alex.rivera@email.com</span>
                    </div>
                    <div class="contact-item">
                        <span>📱</span>
                        <span>+1 (555) 123-4567</span>
                    </div>
                    <div class="contact-item">
                        <span>📍</span>
                        <span>San Francisco, CA</span>
                    </div>
                    <div class="contact-item">
                        <span>💼</span>
                        <span>Available for freelance</span>
                    </div>
                </div>
                <form class="contact-form fade-in">
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" id="name" name="name" placeholder="Your name" required>
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" id="email" name="email" placeholder="your.email@example.com" required>
                    </div>
                    <div class="form-group">
                        <label for="message">Message</label>
                        <textarea id="message" name="message" rows="5" placeholder="Tell me about your project..." required></textarea>
                    </div>
                    <button type="submit" class="submit-btn">Send Message</button>
                </form>
            </div>
        </div>
    </section>

<footer>
        <div class="social-links">
            <a href="#" class="social-link">🐙</a>
            <a href="#" class="social-link">💼</a>
            <a href="#" class="social-link">🐦</a>
            <a href="#" class="social-link">📷</a>
        </div>
        <p>&copy; 2025 my project. All rights reserved.</p>
    </footer>

// Scroll animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -100px 0px'
        };

document.querySelectorAll('.fade-in').forEach(el => {
            observer.observe(el);
        });

// Header background on scroll
        window.addEventListener('scroll', () => {
            const header = document.querySelector('header');
            if (window.scrollY > 100) {
                header.style.background = 'rgba(0, 0, 0, 0.3)';
            } else {
                header.style.background = 'rgba(0, 0, 0, 0.1)';
            }
        });

// Form submission
        document.querySelector('.contact-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Get form data
            const formData = new FormData(this);
            const name = formData.get('name');
            const email = formData.get('email');
            const message = formData.get('message');
            
            // Simple validation
            if (name && email && message) {
                // Simulate form submission
                const submitBtn = this.querySelector('.submit-btn');
                submitBtn.textContent = 'Sending...';
                submitBtn.disabled = true;
                
                setTimeout(() => {
                    alert('Thank you for your message! I\'ll get back to you soon.');
                    this.reset();
                    submitBtn.textContent = 'Send Message';
                    submitBtn.disabled = false;
                }, 2000);
            }
        });

// Add some interactive particles
        function createParticle() {
            const particle = document.createElement('div');
            particle.style.position = 'fixed';
            particle.style.width = '4px';
            particle.style.height = '4px';
            particle.style.background = 'rgba(255, 255, 255, 0.5)';
            particle.style.borderRadius = '50%';
            particle.style.pointerEvents = 'none';
            particle.style.left = Math.random() * window.innerWidth + 'px';
            particle.style.top = window.innerHeight + 'px';
            particle.style.zIndex = '1';
            
            document.body.appendChild(particle);
            
            const animation = particle.animate([
                { transform: 'translateY(0px)', opacity: 1 },
                { transform: `translateY(-${window.innerHeight + 100}px)`, opacity: 0 }
            ], {
                duration: Math.random() * 3000 + 5000,
                easing: 'linear'
            });
            
            animation.onfinish = () => particle.remove();
        }

// Create particles periodically
        setInterval(createParticle, 300);
    </script>
</body>
</html>

Related Examples

SocialConnect - Stay Connected
SocialConnect - Stay Connected

Author:
Uwera Dorcas

5 months ago

438
Responsive Header

Author:
Rajesh Maheshwari

8 months ago

1.3k
Responsive Header and Hero Section Design
Responsive Header and Hero Section Design provides flexible adaptability across all screen sizes and devices.

Author:
ABDO-SY

8 months ago

2.4k
Promotional sticky top section

Author:
Leon Bachmann

2 years ago

12.4k
Title

Author:
Morris Muriuki Muthigani

3 months ago

389
New Nav Component
A new navigation component

Author:
Amit PR

1 year ago

3.4k
Tailwind Header
responsive mobile menu with a smooth transition

Author:
Anonymous

10 months ago

3.2k
Job Platfoam
If you need a Job You will Have to Apply for it

Author:
soft mind

5 months ago

604
Acode Master - FB & WhatsApp UI Combo
Description (meta description) ni tag ikoreshwa mu mutwe (head) wa HTML igaragaza mu ncamake icyo urubuga cyangwa urupapuro rwawe ruvuga. Iyi description ikoreshwa cyane na search engines (nka Google) mu kwerekana summary y’urubuga mu bisubizo by’ubushakashatsi.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

503
Full width header with gradient
Header component for showing Info.

Author:
TailwindFlex

3 years ago

13.2k
Collapsible Sidebar Menu

Author:
Rajesh Maheshwari

8 months ago

2k
Next-Gen Hero Section – Tailwind CSS Component
A stunning, futuristic Hero Section built with Tailwind CSS, designed to capture user attention with glowing animations, smooth gradients, and bold typography. Perfect for modern web apps, education platforms like EduForce, landing pages, or portfolios. This component is responsive, interactive, and visually unique — not commonly found in typical UI libraries.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

876

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components