ACODE,ASTER

love my projuct

This tailwind example is contributed by Acode 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 Acode Master(Mfuranziza Dusabe Hamza)

160

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:
Acode Master(Mfuranziza Dusabe Hamza)

3 weeks ago

100
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:
Acode Master(Mfuranziza Dusabe Hamza)

3 weeks ago

190
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:
Acode Master(Mfuranziza Dusabe Hamza)

2 weeks ago

276
Responsive Pricing Table
can be used when you want to price

Author:
Bonimater

3 weeks ago

55
Ai clone, chat ui
Chat interface for ai builder, dont toomuch focused on designing responsive

Author:
Abhiraj

4 months ago

841
User Profile
User Profile

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

1 year ago

7.4k
portfolio
This portfolio page for Claire includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support (the design is already dark-themed) 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections 2. Animated skill bars 3. Hover effects on projects and buttons 4. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Skills, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a frosted glass effect using backdrop filters - Text is white for high contrast against the dark background - Sections fade in and slide up as they enter the viewport - Skill bars animate when the skills section is in view - Project cards have a hover effect with scaling and increased opacity - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens This implementation provides a visually appealing and functional portfolio page for Claire, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions and animations.

Author:
nejaa badr

7 months ago

1.6k
Button group

Author:
Conan Hilton

2 years ago

8.6k
Avatar
Avatar

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

1 year ago

4.2k
Profile Form
Enhanced User Profile Form with Stunning Profile and Cover Image Fields

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

1 year ago

9k
Card profile
profile card

Author:
Aman kumar

1 year ago

2.4k
Card
Profile Card

Author:
Manuel Dala

1 month ago

354

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components