ACODE,ASTER

love my projuct

This tailwind example is contributed by Code Master(Mfuranziza Dusabe Hamza), on 21-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Author box, User information

Breadcrumb Pagination Profile Logo cloud

Author Code Master(Mfuranziza Dusabe Hamza)

712

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Creative Portfolio</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .floating {
            animation: float 6s ease-in-out infinite;
        }
        
        .pulse {
            animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        
        .rotate {
            animation: rotate 15s linear infinite;
        }
        
        .gradient-bg {
            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
        }
        
        @keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .shape-blob {
            background: rgba(59, 130, 246, 0.5);
            height: 200px;
            width: 200px;
            border-radius: 30% 50% 20% 40%;
            animation: transform 20s ease-in-out infinite both alternate, movement_one 40s ease-in-out infinite both;
            opacity: 0.7;
            position: absolute;
            left: 70%;
            top: 50%;
        }
        
        .shape-blob.one {
            height: 500px;
            width: 500px;
            left: -200px;
            top: -150px;
            transform: rotate(-180deg);
            animation: transform 30s ease-in-out infinite both alternate, movement_two 60s ease-in-out infinite both;
        }
        
        .shape-blob.two {
            height: 350px;
            width: 350px;
            left: 600px;
            top: -150px;
            transform: rotate(-180deg);
            animation: transform 40s ease-in-out infinite both alternate, movement_two 60s ease-in-out infinite both;
        }
        
        @keyframes transform {
            0%, 100% { border-radius: 33% 67% 70% 30% / 30% 30% 70% 70%; }
            20% { border-radius: 37% 63% 51% 49% / 37% 65% 35% 63%; }
            40% { border-radius: 36% 64% 64% 36% / 64% 48% 52% 36%; }
            60% { border-radius: 37% 63% 51% 49% / 30% 30% 70% 70%; }
            80% { border-radius: 40% 60% 42% 58% / 41% 51% 49% 59%; }
        }
        
        @keyframes movement_one {
            0%, 100% { transform: none; }
            50% { transform: translate(50%, 20%) rotateY(10deg) scale(1.2); }
        }
        
        @keyframes movement_two {
            0%, 500% { transform: none; }
            50% { transform: translate(50%, 20%) rotate(-200deg) scale(1.2); }
        }
    </style>
</head>
<body class="gradient-bg min-h-screen overflow-x-hidden relative">
    
    <div class="shape-blob one"></div>
    <div class="shape-blob two"></div>
    <div class="shape-blob"></div>
    
    
    <div class="container mx-auto px-4 py-16 relative z-10">
        <header class="flex justify-between items-center mb-16">
            <h1 class="text-4xl font-bold text-white pulse">My<span class="text-blue-200">Portfolio</span></h1>
            <nav class="hidden md:block">
                <ul class="flex space-x-8">
                    <li><a href="#" class="text-white hover:text-blue-200 transition duration-300">Home</a></li>
                    <li><a href="#" class="text-white hover:text-blue-200 transition duration-300">Work</a></li>
                    <li><a href="#" class="text-white hover:text-blue-200 transition duration-300">About</a></li>
                    <li><a href="#" class="text-white hover:text-blue-200 transition duration-300">Contact</a></li>
                </ul>
            </nav>
        </header>
        
        <main class="flex flex-col lg:flex-row items-center justify-between gap-12">
            <div class="lg:w-1/2 space-y-8">
                <h2 class="text-5xl font-bold text-white leading-tight">
                    Hi, I'm <span class="text-blue-200">MFURANZIZA DUSABE HAMZA</span><br>
                    Creative <span class="inline-block floating">Developer</span>
                </h2>
                <p class="text-gray-200 text-lg">
                    I create innovative digital experiences with a focus on animation and interactivity. 
                    Let's build something amazing together!
                </p>
                <div class="flex space-x-4">
                    <button class="bg-white text-blue-600 px-6 py-3 rounded-full font-semibold hover:bg-blue-100 transition duration-300 transform hover:scale-105">
                        View My Work
                    </button>
                    <button class="border-2 border-white text-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:text-blue-600 transition duration-300 transform hover:scale-105">
                        Contact Me
                    </button>
                </div>
                
                <div class="flex items-center space-x-6 pt-8">
                    <div class="w-12 h-12 bg-white rounded-full flex items-center justify-center rotate hover:scale-110 transition duration-300">
                        <svg class="w-6 h-6 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
                        </svg>
                    </div>
                    <div class="w-12 h-12 bg-white rounded-full flex items-center justify-center rotate hover:scale-110 transition duration-300">
                        <svg class="w-6 h-6 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z"/>
                        </svg>
                    </div>
                    <div class="w-12 h-12 bg-white rounded-full flex items-center justify-center rotate hover:scale-110 transition duration-300">
                        <svg class="w-6 h-6 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
                            <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>
                    </div>
                </div>
            </div>
            
            <div class="lg:w-1/2 relative">
                
                <div class="relative w-80 h-80 mx-auto lg:mx-0">
                    <div class="absolute inset-0 bg-blue-200 rounded-full opacity-20 rotate" style="animation-duration: 20s;"></div>
                    <div class="absolute inset-4 bg-blue-300 rounded-full opacity-20 rotate" style="animation-duration: 25s; animation-direction: reverse;"></div>
                    <div class="absolute inset-8 bg-white rounded-full overflow-hidden border-4 border-white shadow-xl floating" style="animation-duration: 5s;">
                        
                  <img src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" alt="AcodeMaster" class="w-full h-full object-cover">

</div>
                </div>
                
                
                <div class="absolute -top-8 -left-8 w-16 h-16 bg-yellow-300 rounded-full opacity-30 floating" style="animation-duration: 7s;"></div>
                <div class="absolute -bottom-8 -right-8 w-20 h-20 bg-pink-300 rounded-full opacity-30 floating" style="animation-duration: 8s;"></div>
                <div class="absolute top-1/2 -right-12 w-12 h-12 bg-green-300 rounded-full opacity-30 floating" style="animation-duration: 6s;"></div>
            </div>
        </main>
        
        <div class="mt-32 text-center">
            <h3 class="text-2xl font-semibold text-white mb-8">Technologies I Work With</h3>
            <div class="flex flex-wrap justify-center gap-8">
                <div class="w-20 h-20 bg-white bg-opacity-20 backdrop-blur-md rounded-xl flex items-center justify-center hover:scale-110 transition duration-300">
                    <span class="text-white text-xl font-bold">HTML</span>
                </div>
                <div class="w-20 h-20 bg-white bg-opacity-20 backdrop-blur-md rounded-xl flex items-center justify-center hover:scale-110 transition duration-300">
                    <span class="text-white text-xl font-bold">CSS</span>
                </div>
                <div class="w-20 h-20 bg-white bg-opacity-20 backdrop-blur-md rounded-xl flex items-center justify-center hover:scale-110 transition duration-300">
                    <span class="text-white text-xl font-bold">JS</span>
                </div>
                <div class="w-20 h-20 bg-white bg-opacity-20 backdrop-blur-md rounded-xl flex items-center justify-center hover:scale-110 transition duration-300">
                    <span class="text-white text-xl font-bold">React</span>
                </div>
                <div class="w-20 h-20 bg-white bg-opacity-20 backdrop-blur-md rounded-xl flex items-center justify-center hover:scale-110 transition duration-300">
                    <span class="text-white text-xl font-bold">Tailwind</span>
                </div>
            </div>
        </div>
    </div>
    
    
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
        <div class="absolute w-2 h-2 bg-white rounded-full opacity-20" style="top: 20%; left: 10%; animation: float 8s infinite linear;"></div>
        <div class="absolute w-3 h-3 bg-blue-200 rounded-full opacity-30" style="top: 80%; left: 20%; animation: float 12s infinite linear reverse;"></div>
        <div class="absolute w-4 h-4 bg-pink-200 rounded-full opacity-20" style="top: 60%; left: 80%; animation: float 10s infinite linear;"></div>
        <div class="absolute w-2 h-2 bg-yellow-200 rounded-full opacity-30" style="top: 30%; left: 70%; animation: float 15s infinite linear reverse;"></div>
        <div class="absolute w-3 h-3 bg-green-200 rounded-full opacity-20" style="top: 50%; left: 40%; animation: float 9s infinite linear;"></div>
    </div>
</body>
</html>

Related Examples

Acode Master
Acode Master is a skilled and passionate software developer known for mastering coding and creating innovative tech solutions. Specializing in modern web technologies like React.js, Node.js, PHP, and databases such as MySQL and PostgreSQL, Acode Master builds practical, efficient, and scalable applications. Beyond coding, Acode Master is dedicated to continuous learning, sharing knowledge, and empowering others through technology-driven projects and education.

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

1.3k
TailwindFlex – Creative Animated Home Experience
"Innovative Home with Tailwind Animated Background" "Animated Hero – TailwindFlex Design" "Smooth UI – Creative Motion with Tailwind CSS" "Home Harmony – Motion Meets Design" "TailwindFlex Home – Fluid Animation & UI"

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

838
ACODE MASTER — Cyberpunk Full Stack Developer from Rwanda
"I’m ACODE MASTER — a visionary Full Stack Developer from Rwanda, blending cutting-edge tech with bold design. I specialize in building modern web applications using React, Node.js, and TailwindCSS, inspired by the cyberpunk aesthetic and driven by a passion for digital innovation. Welcome to the future of code."

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

1.4k
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Author:
Indra

3 months ago

362
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

330
FLESH & BONE
Stranded in the heart of a cannibal-infested jungle, you must make unthinkable choices to survive. How far will you go to see another sunrise?

Author:
gidy

1 month ago

109
Portfolio Hero Section 2
visually stunning and captivating hero section component for your portfolio website.

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

1 year ago

5.4k
Stylish profile card with a hover effect

Author:
Anonymous

2 years ago

9k
Profile Card

Author:
KULDEEP

6 months ago

544
Twitter like users list

Author:
Simon Scheffer

3 years ago

11.9k
Profile Card

Author:
Crimson

11 months ago

1.5k
Breadcrumb

Author:
Gopi Yadav

3 years ago

10k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components