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

736

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

Sidebar with Tailwind CSs and alpinejs

Author:
Michael Andreuzza

1 year ago

3.9k
Header + simple Hero Section

Author:
ABDO-SY

1 year ago

2.1k
PrimeCorp | Professional Business Solutions
We deliver cutting-edge business solutions through strategic consulting, tailored services, and continuous support. Partner with us to optimize operations, drive growth, and achieve sustainable success in today's competitive market.

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

945
Tailwind Hero Section
Fully Responsive Hero Section with Navbar

Author:
AKASH GANDHAR

1 year ago

5k
Navbar
Navbar

Author:
TakaMorY

6 months ago

540
yvette
is good

Author:
Umutoniwase Yvette

9 months ago

744
Responsive Header

Author:
Rajesh Maheshwari

1 year ago

1.8k
Header with logo, menu and buttons
Header with logo, menu and buttons. If you want to toggle the visibility of the mobile menu when clicking on the hamburger menu icon you can achieve this with JavaScript by adding and removing a class that controls the visibility of the mobile menu

Author:
Mike Varen

1 year ago

4.5k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

1 year ago

3.8k
Responsive NavBar Using CSS Only
A complete responsive navbar only using tailwind css

Author:
Shivam Vishwakarma

8 months ago

543
Navbar
E-commerce Navbar

Author:
Aman kumar

1 year ago

4.8k
Heade With Hero Section

Author:
Abdul Baset Bappy

8 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components