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)

804

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)

9 months ago

1.4k
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)

9 months ago

1.1k
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)

9 months ago

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

Author:
Indra

6 months ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

602
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

3 months ago

288
High-Performance Hotel Operations & AI Agent Testing Dashboard
A sophisticated, real-time command center designed for modern hotel management. This dashboard features deep integration for monitoring AI agent performance, guest sentiment, and room occupancy. Built with a "Mobile-First" philosophy, it demonstrates advanced data visualization, glassmorphism UI design, and a centralized state-management architecture. Perfect for showcasing full-stack capabilities in AI-driven automation.

Author:
Ayyamperumal S

1 week ago

138
Card
Profile Card

Author:
Manuel Dala

10 months ago

1.2k
Profile Card
Responsive modern profile card

Author:
Rajesh Maheshwari

1 year ago

865
Profile Card
Modern Profile card with Subtle overlay on image, minimal and clean approach with emphasis on readability and hierarchy.

Author:
UI-Templates

4 months ago

571
Services
explore our awesome Services

Author:
ابراهيم سيد

1 year ago

2.8k
Pagination with active page indicator

Author:
Leif99

3 years ago

13.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components