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

960

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

Sticky Changelog

Author:
Michael Andreuzza

1 year ago

2.2k
Title

Author:
Morris Muriuki Muthigani

5 months ago

785
sticky headings
sticky headings

Author:
Anonymous

2 years ago

6.1k
Hero Section
A 2 column responsive hero section

Author:
Emdadul Islam

1 year ago

2.7k
Header

Author:
Morris Muriuki Muthigani

5 months ago

502
my website

Author:
Creative Solution

1 year ago

3.1k
Tailwind Pricing Section 2
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

1 year ago

2.1k
home
html , css

Author:
Hacker Development

7 months ago

1.7k
Hero

Author:
Aman kumar

1 year ago

6.9k
Admin portal landing page

Author:
Srreyashi DeyChakii

1 year ago

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

Author:
Indra

3 months ago

362
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

6 months ago

929

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components