Home
nii fanny
Software Developer

Software Developer

A software developer designs, builds, tests, and maintains software applications and systems. They use programming languages to create code that meets user needs and client specifications. Software developers may work on various projects, including applications, systems software, or web development

This tailwind example is contributed by nii fanny, on 29-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Header

Author nii fanny

666

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Software Developer Portfolio</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700;800&display=swap');
        
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            --accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            --dark-gradient: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background: #0a0a0a;
        }
        
        .code-font {
            font-family: 'JetBrains Mono', monospace;
        }
        
        .hero-section {
            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
            position: relative;
            overflow: hidden;
        }
        
        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23333" stroke-width="0.5" opacity="0.3"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
            pointer-events: none;
        }
        
        .floating-code {
            position: absolute;
            color: #4ade80;
            opacity: 0.1;
            font-family: 'JetBrains Mono', monospace;
            font-size: 14px;
            animation: float 8s ease-in-out infinite;
            pointer-events: none;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-30px) rotate(5deg); }
        }
        
        .skill-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }
        
        .skill-card:hover {
            transform: translateY(-10px) scale(1.02);
            background: rgba(255, 255, 255, 0.1);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }
        
        .course-card {
            background: linear-gradient(145deg, #1e293b, #334155);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }
        
        .course-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transition: left 0.5s;
        }
        
        .course-card:hover::before {
            left: 100%;
        }
        
        .course-card:hover {
            transform: translateY(-8px) rotateY(5deg);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
        }
        
        .project-card {
            background: rgba(17, 24, 39, 0.8);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(59, 130, 246, 0.2);
            transition: all 0.3s ease;
        }
        
        .project-card:hover {
            border-color: rgba(59, 130, 246, 0.5);
            transform: scale(1.02);
            box-shadow: 0 20px 40px rgba(59, 130, 246, 0.1);
        }
        
        .typing-animation {
            border-right: 2px solid #4ade80;
            animation: blink 1s infinite;
        }
        
        @keyframes blink {
            0%, 50% { border-color: #4ade80; }
            51%, 100% { border-color: transparent; }
        }
        
        .progress-bar {
            background: linear-gradient(90deg, #4ade80, #3b82f6, #8b5cf6);
            background-size: 200% 100%;
            animation: shimmer 2s infinite;
        }
        
        @keyframes shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
        
        .neon-glow {
            text-shadow: 0 0 20px rgba(74, 222, 128, 0.5);
        }
        
        .tech-icon {
            transition: all 0.3s ease;
        }
        
        .tech-icon:hover {
            transform: scale(1.2) rotate(5deg);
            filter: drop-shadow(0 0 10px currentColor);
        }
        
        .section-divider {
            height: 2px;
            background: linear-gradient(90deg, transparent, #4ade80, transparent);
            margin: 4rem 0;
        }
        
        .contact-form {
            background: rgba(17, 24, 39, 0.9);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(59, 130, 246, 0.2);
        }
        
        .status-indicator {
            width: 12px;
            height: 12px;
            background: #4ade80;
            border-radius: 50%;
            animation: pulse 2s infinite;
            box-shadow: 0 0 10px #4ade80;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.7; transform: scale(1.1); }
        }
        
        .gradient-text {
            background: linear-gradient(135deg, #4ade80, #3b82f6, #8b5cf6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
    </style>
</head>
<body class="text-white">
    
    <nav class="fixed top-0 w-full bg-black/80 backdrop-blur-md z-50 border-b border-gray-800">
        <div class="container mx-auto px-6 py-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <div class="status-indicator"></div>
                    <span class="code-font text-green-400">&lt;Developer/&gt;</span>
                </div>
                <div class="hidden md:flex space-x-8">
                    <a href="#home" class="hover:text-green-400 transition-colors">Home</a>
                    <a href="#about" class="hover:text-green-400 transition-colors">About</a>
                    <a href="#courses" class="hover:text-green-400 transition-colors">Courses</a>
                    <a href="#projects" class="hover:text-green-400 transition-colors">Projects</a>
                    <a href="#skills" class="hover:text-green-400 transition-colors">Skills</a>
                    <a href="#contact" class="hover:text-green-400 transition-colors">Contact</a>
                </div>
                <button class="md:hidden text-xl" onclick="toggleMobileMenu()">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </div>
        
        <div id="mobileMenu" class="hidden md:hidden bg-black/90 backdrop-blur-md">
            <div class="px-6 py-4 space-y-4">
                <a href="#home" class="block hover:text-green-400 transition-colors">Home</a>
                <a href="#about" class="block hover:text-green-400 transition-colors">About</a>
                <a href="#courses" class="block hover:text-green-400 transition-colors">Courses</a>
                <a href="#projects" class="block hover:text-green-400 transition-colors">Projects</a>
                <a href="#skills" class="block hover:text-green-400 transition-colors">Skills</a>
                <a href="#contact" class="block hover:text-green-400 transition-colors">Contact</a>
            </div>
        </div>
    </nav>

<section id="home" class="hero-section min-h-screen flex items-center justify-center relative">
        
        <div class="floating-code top-20 left-10" style="animation-delay: -1s;">const skills = ['JavaScript', 'Python', 'React'];</div>
        <div class="floating-code top-40 right-20" style="animation-delay: -3s;">function buildFuture() { return 'innovation'; }</div>
        <div class="floating-code bottom-32 left-20" style="animation-delay: -2s;">&lt;div className="developer-mindset"&gt;</div>
        <div class="floating-code bottom-20 right-10" style="animation-delay: -4s;">git commit -m "Level up complete"</div>
        
        <div class="text-center z-10 max-w-4xl mx-auto px-6">
            <div class="mb-6">
                <span class="code-font text-green-400 text-lg">&lt;h1&gt;</span>
            </div>
            <h1 class="text-6xl md:text-8xl font-bold mb-6">
                <span class="gradient-text">Software</span><br>
                <span class="neon-glow">Developer</span>
            </h1>
            <div class="mb-6">
                <span class="code-font text-green-400 text-lg">&lt;/h1&gt;</span>
            </div>
            
            <div class="code-font text-xl md:text-2xl mb-8 text-gray-300">
                <span id="typingText" class="typing-animation">Building the future, one line of code at a time</span>
            </div>
            
            <p class="text-lg text-gray-400 mb-12 max-w-2xl mx-auto">
                Passionate about creating innovative solutions through code. Currently mastering 
                modern web technologies and software development practices.
            </p>
            
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="#projects" class="bg-gradient-to-r from-green-500 to-blue-500 px-8 py-4 rounded-full font-semibold hover:scale-105 transform transition-all duration-300 shadow-lg hover:shadow-green-500/25">
                    View My Work
                </a>
                <a href="#contact" class="border-2 border-green-400 px-8 py-4 rounded-full font-semibold hover:bg-green-400/10 transition-all duration-300">
                    Get In Touch
                </a>
            </div>
        </div>
    </section>

<section id="about" class="py-20 bg-gray-900/50">
        <div class="container mx-auto px-6">
            <h2 class="text-4xl md:text-5xl font-bold text-center mb-16">
                <span class="code-font text-green-400">&lt;</span>
                <span class="gradient-text">About Me</span>
                <span class="code-font text-green-400">/&gt;</span>
            </h2>
            
            <div class="grid md:grid-cols-2 gap-12 items-center">
                <div>
                    <div class="w-64 h-64 mx-auto bg-gradient-to-br from-green-400 to-blue-500 rounded-full flex items-center justify-center text-8xl">
                        👨‍💻
                    </div>
                </div>
                
                <div class="space-y-6">
                    <h3 class="text-3xl font-bold text-green-400">Hello, I'm a Developer!</h3>
                    <p class="text-lg text-gray-300 leading-relaxed">
                        I'm passionate about software development and constantly learning new technologies. 
                        My journey in programming started with curiosity and has evolved into a deep 
                        commitment to creating meaningful digital solutions.
                    </p>
                    
                    <div class="grid grid-cols-2 gap-4">
                        <div class="bg-gray-800/50 p-4 rounded-lg">
                            <h4 class="font-semibold text-green-400 mb-2">Focus Areas</h4>
                            <ul class="text-sm text-gray-300 space-y-1">
                                <li>• Web Development</li>
                                <li>• Mobile Apps</li>
                                <li>• Backend Systems</li>
                                <li>• UI/UX Design</li>
                            </ul>
                        </div>
                        
                        <div class="bg-gray-800/50 p-4 rounded-lg">
                            <h4 class="font-semibold text-green-400 mb-2">Interests</h4>
                            <ul class="text-sm text-gray-300 space-y-1">
                                <li>• AI & Machine Learning</li>
                                <li>• Cloud Computing</li>
                                <li>• Open Source</li>
                                <li>• Tech Innovation</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="courses" class="py-20">
        <div class="container mx-auto px-6">
            <h2 class="text-4xl md:text-5xl font-bold text-center mb-16">
                <span class="code-font text-green-400">&lt;</span>
                <span class="gradient-text">My Courses</span>
                <span class="code-font text-green-400">/&gt;</span>
            </h2>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                
                <div class="course-card rounded-xl p-6 relative">
                    <div class="text-4xl mb-4">🌐</div>
                    <h3 class="text-2xl font-bold mb-3 text-green-400">Full Stack Web Development</h3>
                    <div class="mb-4">
                        <div class="flex justify-between text-sm mb-2">
                            <span>Progress</span>
                            <span>85%</span>
                        </div>
                        <div class="w-full bg-gray-700 rounded-full h-2">
                            <div class="progress-bar h-2 rounded-full" style="width: 85%"></div>
                        </div>
                    </div>
                    <p class="text-gray-300 mb-4">Comprehensive course covering HTML, CSS, JavaScript, React, Node.js, and database management.</p>
                    <div class="flex flex-wrap gap-2 mb-4">
                        <span class="bg-blue-500/20 text-blue-300 px-3 py-1 rounded-full text-sm">React</span>
                        <span class="bg-green-500/20 text-green-300 px-3 py-1 rounded-full text-sm">Node.js</span>
                        <span class="bg-yellow-500/20 text-yellow-300 px-3 py-1 rounded-full text-sm">JavaScript</span>
                    </div>
                    <div class="text-sm text-gray-400">
                        <i class="fas fa-calendar mr-2"></i>Duration: 6 months
                    </div>
                </div>

<div class="course-card rounded-xl p-6 relative">
                    <div class="text-4xl mb-4">🐍</div>
                    <h3 class="text-2xl font-bold mb-3 text-green-400">Python Programming</h3>
                    <div class="mb-4">
                        <div class="flex justify-between text-sm mb-2">
                            <span>Progress</span>
                            <span>92%</span>
                        </div>
                        <div class="w-full bg-gray-700 rounded-full h-2">
                            <div class="progress-bar h-2 rounded-full" style="width: 92%"></div>
                        </div>
                    </div>
                    <p class="text-gray-300 mb-4">From basics to advanced Python concepts including OOP, data structures, and web frameworks like Django.</p>
                    <div class="flex flex-wrap gap-2 mb-4">
                        <span class="bg-blue-500/20 text-blue-300 px-3 py-1 rounded-full text-sm">Python</span>
                        <span class="bg-green-500/20 text-green-300 px-3 py-1 rounded-full text-sm">Django</span>
                        <span class="bg-purple-500/20 text-purple-300 px-3 py-1 rounded-full text-sm">Flask</span>
                    </div>
                    <div class="text-sm text-gray-400">
                        <i class="fas fa-calendar mr-2"></i>Duration: 4 months
                    </div>
                </div>

<div class="course-card rounded-xl p-6 relative">
                    <div class="text-4xl mb-4">📱</div>
                    <h3 class="text-2xl font-bold mb-3 text-green-400">Mobile App Development</h3>
                    <div class="mb-4">
                        <div class="flex justify-between text-sm mb-2">
                            <span>Progress</span>
                            <span>78%</span>
                        </div>
                        <div class="w-full bg-gray-700 rounded-full h-2">
                            <div class="progress-bar h-2 rounded-full" style="width: 78%"></div>
                        </div>
                    </div>
                    <p class="text-gray-300 mb-4">Learning React Native and Flutter to build cross-platform mobile applications with native performance.</p>
                    <div class="flex flex-wrap gap-2 mb-4">
                        <span class="bg-blue-500/20 text-blue-300 px-3 py-1 rounded-full text-sm">React Native</span>
                        <span class="bg-cyan-500/20 text-cyan-300 px-3 py-1 rounded-full text-sm">Flutter</span>
                        <span class="bg-orange-500/20 text-orange-300 px-3 py-1 rounded-full text-sm">Dart</span>
                    </div>
                    <div class="text-sm text-gray-400">
                        <i class="fas fa-calendar mr-2"></i>Duration: 5 months
                    </div>
                </div>

<div class="course-card rounded-xl p-6 relative">
                    <div class="text-4xl mb-4">🗄️</div>
                    <h3 class="text-2xl font-bold mb-3 text-green-400">Database Management</h3>
                    <div class="mb-4">
                        <div class="flex justify-between text-sm mb-2">
                            <span>Progress</span>
                            <span>95%</span>
                        </div>
                        <div class="w-full bg-gray-700 rounded-full h-2">
                            <div class="progress-bar h-2 rounded-full" style="width: 95%"></div>
                        </div>
                    </div>
                    <p class="text-gray-300 mb-4">Mastering SQL, NoSQL databases, data modeling, and database optimization techniques.</p>
                    <div class="flex flex-wrap gap-2 mb-4">
                        <span class="bg-blue-500/20 text-blue-300 px-3 py-1 rounded-full text-sm">MySQL</span>
                        <span class="bg-green-500/20 text-green-300 px-3 py-1 rounded-full text-sm">MongoDB</span>
                        <span class="bg-red-500/20 text-red-300 px-3 py-1 rounded-full text-sm">Redis</span>
                    </div>
                    <div class="text-sm text-gray-400">
                        <i class="fas fa-calendar mr-2"></i>Duration: 3 months
                    </div>
                </div>

<div class="course-card rounded-xl p-6 relative">
                    <div class="text-4xl mb-4">☁️</div>
                    <h3 class="text-2xl font-bold mb-3 text-green-400">Cloud Computing</h3>
                    <div class="mb-4">
                        <div class="flex justify-between text-sm mb-2">
                            <span>Progress</span>
                            <span>60%</span>
                        </div>
                        <div class="w-full bg-gray-700 rounded-full h-2">
                            <div class="progress-bar h-2 rounded-full" style="width: 60%"></div>
                        </div>
                    </div>
                    <p class="text-gray-300 mb-4">Learning AWS, Azure, and Docker containerization for scalable cloud-native applications.</p>
                    <div class="flex flex-wrap gap-2 mb-4">
                        <span class="bg-orange-500/20 text-orange-300 px-3 py-1 rounded-full text-sm">AWS</span>
                        <span class="bg-blue-500/20 text-blue-300 px-3 py-1 rounded-full text-sm">Docker</span>
                        <span class="bg-purple-500/20 text-purple-300 px-3 py-1 rounded-full text-sm">Kubernetes</span>
                    </div>
                    <div class="text-sm text-gray-400">
                        <i class="fas fa-calendar mr-2"></i>Duration: 4 months
                    </div>
                </div>

<div class="course-card rounded-xl p-6 relative">
                    <div class="text-4xl mb-4">🤖</div>
                    <h3 class="text-2xl font-bold mb-3 text-green-400">AI & Machine Learning</h3>
                    <div class="mb-4">
                        <div class="flex justify-between text-sm mb-2">
                            <span>Progress</span>
                            <span>45%</span>
                        </div>
                        <div class="w-full bg-gray-700 rounded-full h-2">
                            <div class="progress-bar h-2 rounded-full" style="width: 45%"></div>
                        </div>
                    </div>
                    <p class="text-gray-300 mb-4">Exploring machine learning algorithms, neural networks, and AI application development.</p>
                    <div class="flex flex-wrap gap-2 mb-4">
                        <span class="bg-orange-500/20 text-orange-300 px-3 py-1 rounded-full text-sm">TensorFlow</span>
                        <span class="bg-blue-500/20 text-blue-300 px-3 py-1 rounded-full text-sm">PyTorch</span>
                        <span class="bg-green-500/20 text-green-300 px-3 py-1 rounded-full text-sm">Scikit-learn</span>
                    </div>
                    <div class="text-sm text-gray-400">
                        <i class="fas fa-calendar mr-2"></i>Duration: 6 months
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="projects" class="py-20 bg-gray-900/30">
        <div class="container mx-auto px-6">
            <h2 class="text-4xl md:text-5xl font-bold text-center mb-16">
                <span class="code-font text-green-400">&lt;</span>
                <span class="gradient-text">My Projects</span>
                <span class="code-font text-green-400">/&gt;</span>
            </h2>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                
                <div class="project-card rounded-xl p-6">
                    <div class="bg-gradient-to-br from-blue-500 to-purple-600 h-48 rounded-lg mb-4 flex items-center justify-center text-6xl">
                        🌐
                    </div>
                    <h3 class="text-2xl font-bold mb-3">E-Commerce Platform</h3>
                    <p class="text-gray-300 mb-4">Full-stack e-commerce solution with React frontend, Node.js backend, and MongoDB database.</p>
                    <div class="flex flex-wrap gap-2 mb-4">
                        <span class="bg-blue-500/20 text-blue-300 px-2 py-1 rounded text-sm">React</span>
                        <span class="bg-green-500/20 text-green-300 px-2 py-1 rounded text-sm">Node.js</span>
                        <span class="bg-purple-500/20 text-purple-300 px-2 py-1 rounded text-sm">MongoDB</span>
                    </div>
                    <div class="flex space-x-4">
                        <button class="flex-1 bg-blue-600 hover:bg-blue-700 py-2 rounded transition-colors">
                            <i class="fab fa-github mr-2"></i>Code
                        </button>
                        <button class="flex-1 border border-blue-600 hover:bg-blue-600/10 py-2 rounded transition-colors">
                            <i class="fas fa-external-link-alt mr-2"></i>Demo
                        </button>
                    </div>
                </div>

<div class="project-card rounded-xl p-6">
                    <div class="bg-gradient-to-br from-green-500 to-teal-600 h-48 rounded-lg mb-4 flex items-center justify-center text-6xl">
                        📱
                    </div>
                    <h3 class="text-2xl font-bold mb-3">Task Management App</h3>
                    <p class="text-gray-300 mb-4">Cross-platform mobile app built with React Native for productivity and task organization.</p>
                    <div class="flex flex-wrap gap-2 mb-4">
                        <span class="bg-cyan-500/20 text-cyan-300 px-2 py-1 rounded text-sm">React Native</span>
                        <span class="bg-purple-500/20 text-purple-300 px-2 py-1 rounded text-sm">Redux</span>
                        <span class="bg-blue-500/20 text-blue-300 px-2 py-1 rounded text-sm">Firebase</span>
                    </div>
                    <div class="flex space-x-4">
                        <button class="flex-1 bg-blue-600 hover:bg-blue-700 py-2 rounded transition-colors">
                            <i class="fab fa-github mr-2"></i>Code
                        </button>
                        <button class="flex-1 border border-blue-600 hover:bg-blue-600/10 py-2 rounded transition-colors">
                            <i class="fas fa-external-link-alt mr-2"></i>Demo
                        </button>
                    </div>
                </div>

<div class="project-card rounded-xl p-6">
                    <div class="bg-gradient-to-br from-orange-500 to-red-600 h-48 rounded-lg mb-4 flex items-center justify-center text-6xl">
                        🤖
                    </div>
                    <h3 class="text-2xl font-bold mb-3">AI Chatbot</h3>
                    <p class="text-gray-300 mb-4">Intelligent chatbot using natural language processing with Python and machine learning.</p>
                    <div class="flex flex-wrap gap-2 mb-4">
                        <span class="bg-blue-500/20 text-blue-300 px-2 py-1 rounded text-sm">Python</span>
                        <span class="bg-green-500/20 text-green-300 px-2 py-1 rounded text-sm">TensorFlow</span>
                        <span class="bg-orange

Related Examples

A Code Master Academy
A Code Master Academy – Empowering the Next Generation of Tech Leaders in Rwanda 👨‍💻 I'm Acode Master, the founder of A Code Master Academy, a practical and inclusive coding school based in Rubavu, Rwanda. The academy is dedicated to transforming lives by equipping unemployed youth and passionate learners with job-ready skills in modern software development.

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

704
Enhanced Modern Navbar
The navbar now feels premium and modern while maintaining all original functionality. The glassmorphism effect, smooth animations, and professional styling create a cutting-edge user experience that would fit perfectly on any modern website!

Author:
Rathanak Phan

3 months ago

383
Tailwind Hero Section
Fully Responsive Hero Section with Navbar

Author:
AKASH GANDHAR

1 year ago

4.4k
Navbar with sub menus

Author:
Rajesh Maheshwari

6 months ago

1.9k
Full-page header for landing pages
an attention-grabbing header with a strong message and clear calls to action.

Author:
Junclarkaizen Pagu

2 years ago

11.4k
Promotional sticky top section

Author:
Leon Bachmann

2 years ago

12.1k
Stars: Sun and Moon Illustrations
I Created Sun and Moon Illustrations with Tailwind CSS, Embracing Light and Dark Modes

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

1 year ago

3.9k
Markert shop
wellcome tothe my online shoping

Author:
Umutoniwase Yvette

3 months ago

102
App Hero Section With header

Author:
Abdul Baset Bappy

3 months ago

591
yvette
is good

Author:
Umutoniwase Yvette

3 months ago

390
Portfolio Hero Section 1
visually stunning and captivating hero section component for your portfolio website.

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

1 year ago

4.7k
Simple web portfolio
The portfolio includes all required sections (Hero, Projects, About, Contact) with professional styling, and I've added some premium touches like social media icons, a sticky navigation, and beautiful gradient effects that make it feel cutting-edge and engaging.

Author:
Rathanak Phan

3 months ago

625

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components