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 v3.4. It is responsive. similar terms for this example are Author box, User information

Breadcrumb Pagination Profile Logo cloud

Author Code Master(Mfuranziza Dusabe Hamza)

Tailwind v3.4 1.4k 38

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.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

2k
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"

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.7k
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."

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

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

Indra

1 year ago

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

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

786
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?

gidy

10 months ago

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

Ayyamperumal S

7 months ago

987
Engineering Project Dashboard
Track engineering assignments, project progress, technology stack, and delivery timelines in one simple dashboard.

Ayyamperumal S

6 months ago

460
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

5 months ago

607
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

5 months ago

446
Productivity Dashboard UI
A modern developer productivity dashboard built using HTML, Tailwind CSS, JavaScript, and Chart.js. Features a premium SaaS-style UI with analytics cards, interactive charts, kanban sprint board, developer management table, live search functionality, responsive layouts, activity feeds, and modern frontend components. Designed for frontend developers to showcase dashboard architecture, UI/UX skills, responsive design systems, and interactive web application interfaces. Includes glassmorphism styling, developer workflow management, team collaboration sections, and portfolio-ready dashboard components optimized for modern admin experiences.

Ayyamperumal S

4 months ago

474
Portofolio website Modern
Crafting beautiful digital experiences with modern technologies and elegant design principles.

Alif Bima Pradana

7 months ago

663