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)

773

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

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

5 months ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

591
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

284
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

2 days ago

48
User Profile Sidebar Menu
A clean and modern user profile sidebar menu built with TailwindCSS. This component displays a user’s profile picture, name, and a vertical navigation menu with links such as Dashboard, Order History, Account Details, Address, Reviews, and Logout. Ideal for account dashboards in web applications, the design features rounded corners, subtle shadows, and interactive hover effects, delivering a smooth and user-friendly experience.

Author:
SHARIFUL ISLAM

11 months ago

1.4k
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:
M Junaid

8 months ago

537
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Author:
Ijila Itunu

5 months ago

575
Social Media Icons
Social Media Icons

Author:
Aman kumar

1 year ago

2.4k
Home css
Home by css

Author:
Hacker Development

9 months ago

453

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components