Home
ishimwe prince
portifolio

portifolio

skills

This tailwind example is contributed by ishimwe prince, on 21-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Author box, User information

Footer Hero Profile Navbar

Author ishimwe prince

749

Fork Fullscreen

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2DD4BF',
                        secondary: '#0F766E',
                        dark: '#0F172A',
                        light: '#F8FAFC',
                        accent: '#F43F5E',
                    },
                    fontFamily: {
                        sans: ['Montserrat', 'sans-serif'],
                        mono: ['Space Mono', 'monospace'],
                    },
                    animation: {
                        'float': 'float 6s ease-in-out infinite',
                        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-20px)' },
                        }
                    }
                }
            }
        }
    </script>
    <style>
       
    </style>
</head>

<body class="bg-dark text-light font-sans">
    <div class="canvas-container" id="canvas-container"></div>
    
    
    <div id="particles" class="fixed inset-0 z-0 pointer-events-none"></div>
    
    
    <nav class="sticky-nav w-full py-4 px-6 flex justify-between items-center">
        <a href="#" class="text-primary font-bold text-2xl flex items-center">
            <span class="text-glow">Dev</span><span class="text-accent">Portfolio</span>
        </a>
        
        <div class="hidden md:flex items-center space-x-8">
            <a href="#home" class="hover:text-primary transition-colors relative after:absolute after:w-0 after:h-0.5 after:bg-primary after:left-0 after:-bottom-1 after:transition-all hover:after:w-full">Home</a>
            <a href="#about" class="hover:text-primary transition-colors relative after:absolute after:w-0 after:h-0.5 after:bg-primary after:left-0 after:-bottom-1 after:transition-all hover:after:w-full">About</a>
            <a href="#skills" class="hover:text-primary transition-colors relative after:absolute after:w-0 after:h-0.5 after:bg-primary after:left-0 after:-bottom-1 after:transition-all hover:after:w-full">Skills</a>
            <a href="#projects" class="hover:text-primary transition-colors relative after:absolute after:w-0 after:h-0.5 after:bg-primary after:left-0 after:-bottom-1 after:transition-all hover:after:w-full">Projects</a>
            <a href="#contact" class="hover:text-primary transition-colors relative after:absolute after:w-0 after:h-0.5 after:bg-primary after:left-0 after:-bottom-1 after:transition-all hover:after:w-full">Contact</a>
        </div>
        
        <button class="md:hidden text-primary text-xl">
            <i class="fas fa-bars"></i>
        </button>
    </nav>
    
    
    <div class="hidden fixed inset-0 z-50 bg-dark bg-opacity-95 flex flex-col justify-center items-center space-y-8 backdrop-blur">
        <button class="absolute top-6 right-6 text-primary text-xl">
            <i class="fas fa-times"></i>
        </button>
        <a href="#home" class="text-2xl hover:text-primary transition-colors">Home</a>
        <a href="#about" class="text-2xl hover:text-primary transition-colors">About</a>
        <a href="#skills" class="text-2xl hover:text-primary transition-colors">Skills</a>
        <a href="#projects" class="text-2xl hover:text-primary transition-colors">Projects</a>
        <a href="#contact" class="text-2xl hover:text-primary transition-colors">Contact</a>
    </div>
    
    
    <section id="home" class="min-h-screen flex items-center justify-center relative px-6 py-20 overflow-hidden">
        <div class="grid-pattern absolute inset-0 opacity-20"></div>
        
        <div class="max-w-6xl w-full grid md:grid-cols-2 gap-12 items-center relative z-10">
            <div class="animate-on-scroll">
                <h1 class="text-4xl md:text-6xl font-bold mb-4">
                    <span class="text-primary text-glow">Creative</span> 
                    <span class="block">Web Developer</span>
                </h1>
                <p class="text-lg md:text-xl opacity-80 mb-8 max-w-lg">
                    Bringing your digital experiences to life with stunning 3D animations and interactive designs
                </p>
                <div class="flex space-x-4">
                    <a href="#projects" class="px-8 py-3 bg-primary text-dark font-bold rounded-lg hover:bg-opacity-90 transition-all transform hover:-translate-y-1 hover:shadow-lg hover:shadow-primary/30">
                        View Projects
                    </a>
                    <a href="#contact" class="px-8 py-3 border-2 border-primary text-primary font-bold rounded-lg hover:bg-primary/10 transition-all transform hover:-translate-y-1">
                        Contact Me
                    </a>
                </div>
                
                <div class="flex items-center space-x-4 mt-12">
                    <a href="#" class="text-light hover:text-primary transition-colors text-2xl">
                        <i class="fab fa-github"></i>
                    </a>
                    <a href="#" class="text-light hover:text-primary transition-colors text-2xl">
                        <i class="fab fa-linkedin"></i>
                    </a>
                    <a href="#" class="text-light hover:text-primary transition-colors text-2xl">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="#" class="text-light hover:text-primary transition-colors text-2xl">
                        <i class="fab fa-dribbble"></i>
                    </a>
                </div>
            </div>
            
            <div class="perspective-container animate-on-scroll">
                <div class="tilt-card bg-gradient-to-br from-secondary/30 to-primary/20 p-6 rounded-xl border border-primary/30 shadow-xl">
                    <div class="card-content flex flex-col items-center">
                        <div class="w-48 h-48 rounded-full overflow-hidden border-4 border-primary mb-6 ring-pulse">
                            <img src="https://scontent.fkgl4-1.fna.fbcdn.net/v/t39.30808-6/489928610_122135113598701722_3593409516722580159_n.jpg?_nc_cat=107&ccb=1-7&_nc_sid=6ee11a&_nc_eui2=AeHr64wNEkB75YF4sM4U83Yp7tmkawqKd8Pu2aRrCop3wxiQ89gjnBB7NGHLVCl5Ya45BDcxml9qD-GpU3YDfSQc&_nc_ohc=sTThA_do4c8Q7kNvwFZJAR7&_nc_oc=AdlOXI_LlhsJ1gEbobM0t1dnma-b0Sd5I6_5Jhc42gRsgwQ5brOtANF8Hbx2EzP5gNc&_nc_zt=23&_nc_ht=scontent.fkgl4-1.fna&_nc_gid=95gdNzrTQj-BiiqfKAqHcw&oh=00_AfKGpzhSiaJ40RL_SMwhbJJEzpmJXpCAfVTuCC318AYRKQ&oe=683397E6" alt="Profile" class="w-full h-full object-cover" />
                        </div>
                        <h2 class="text-2xl font-bold text-primary mb-2">Dev prince</h2>
                        <p class="text-center opacity-80 mb-4">Frontend Developer & 3D Designer</p>
                        <div class="flex flex-wrap justify-center gap-2">
                            <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">React</span>
                            <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">Three.js</span>
                            <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">Tailwind</span>
                            <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">WebGL</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 flex flex-col items-center animate-bounce">
            <p class="mb-2 text-sm opacity-70">Scroll Down</p>
            <i class="fas fa-chevron-down text-primary"></i>
        </div>
    </section>
    
    
    <section id="about" class="py-20 px-6 relative">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-5xl font-bold mb-4 wavy-border inline-block">
                    About <span class="text-primary">Me</span>
                </h2>
                <p class="text-lg opacity-70 max-w-2xl mx-auto">
                    Get to know more about my journey, skills, and passion for creating immersive digital experiences
                </p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-12 items-center">
                <div class="perspective-container animate-on-scroll">
                    <div class="relative h-80 md:h-96 w-full overflow-hidden rounded-xl">
                        <div id="about-scene" class="absolute inset-0"></div>
                        <div class="absolute inset-0 bg-gradient-to-t from-dark via-transparent to-transparent"></div>
                    </div>
                </div>
                
                <div class="animate-on-scroll">
                    <h3 class="text-2xl font-bold mb-4">Who I Am</h3>
                    <p class="mb-4 opacity-90">
                        I'm a passionate web developer specializing in creating interactive 3D experiences. With over 5 years of experience, I've worked on projects across various industries, always pushing the boundaries of what's possible on the web.
                    </p>
                    <p class="mb-6 opacity-90">
                        My approach combines creative thinking with technical expertise to deliver solutions that are not only visually stunning but also functionally robust.
                    </p>
                    
                    <div class="grid grid-cols-2 gap-4 mb-8">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-primary/20 rounded-lg flex items-center justify-center">
                                <i class="fas fa-graduation-cap text-primary"></i>
                            </div>
                            <div>
                                <h4 class="font-bold">MSc in Computer Science</h4>
                                <p class="text-sm opacity-70">Stanford University</p>
                            </div>
                        </div>
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-primary/20 rounded-lg flex items-center justify-center">
                                <i class="fas fa-briefcase text-primary"></i>
                            </div>
                            <div>
                                <h4 class="font-bold">5+ Years Experience</h4>
                                <p class="text-sm opacity-70">Professional Development</p>
                            </div>
                        </div>
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-primary/20 rounded-lg flex items-center justify-center">
                                <i class="fas fa-project-diagram text-primary"></i>
                            </div>
                            <div>
                                <h4 class="font-bold">100+ Projects</h4>
                                <p class="text-sm opacity-70">Completed Successfully</p>
                            </div>
                        </div>
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-primary/20 rounded-lg flex items-center justify-center">
                                <i class="fas fa-users text-primary"></i>
                            </div>
                            <div>
                                <h4 class="font-bold">50+ Clients</h4>
                                <p class="text-sm opacity-70">Worldwide</p>
                            </div>
                        </div>
                    </div>
                    
                    <a href="#" class="inline-flex items-center space-x-2 text-primary hover:underline">
                        <span>Download Resume</span>
                        <i class="fas fa-download"></i>
                    </a>
                </div>
            </div>
        </div>
        
        <div class="custom-shape-divider">
            <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
                <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" fill="#0F172A" fill-opacity="0.5"></path>
            </svg>
        </div>
    </section>
    
    
    <section id="skills" class="py-20 px-6 bg-gradient-to-b from-dark/50 to-dark relative">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-5xl font-bold mb-4">
                    My <span class="text-primary">Skills</span>
                </h2>
                <p class="text-lg opacity-70 max-w-2xl mx-auto">
                    The tools and technologies I use to bring digital products to life
                </p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-16 items-start">
                <div class="animate-on-scroll">
                    <h3 class="text-2xl font-bold mb-6 flex items-center">
                        <i class="fas fa-code text-primary mr-3"></i>
                        Technical Skills
                    </h3>
                    
                    <div class="space-y-6">
                        <div>
                            <div class="flex justify-between mb-2">
                                <span class="font-medium">HTML / CSS</span>
                                <span class="text-primary">95%</span>
                            </div>
                            <div class="progress-bar">
                                <div class="skill-progress h-full bg-gradient-to-r from-primary to-accent" data-width="95"></div>
                            </div>
                        </div>
                        
                        <div>
                            <div class="flex justify-between mb-2">
                                <span class="font-medium">JavaScript / TypeScript</span>
                                <span class="text-primary">90%</span>
                            </div>
                            <div class="progress-bar">
                                <div class="skill-progress h-full bg-gradient-to-r from-primary to-accent" data-width="90"></div>
                            </div>
                        </div>
                        
                        <div>
                            <div class="flex justify-between mb-2">
                                <span class="font-medium">React / Next.js</span>
                                <span class="text-primary">85%</span>
                            </div>
                            <div class="progress-bar">
                                <div class="skill-progress h-full bg-gradient-to-r from-primary to-accent" data-width="85"></div>
                            </div>
                        </div>
                        
                        <div>
                            <div class="flex justify-between mb-2">
                                <span class="font-medium">Three.js / WebGL</span>
                                <span class="text-primary">80%</span>
                            </div>
                            <div class="progress-bar">
                                <div class="skill-progress h-full bg-gradient-to-r from-primary to-accent" data-width="80"></div>
                            </div>
                        </div>
                        
                        <div>
                            <div class="flex justify-between mb-2">
                                <span class="font-medium">Tailwind CSS</span>
                                <span class="text-primary">90%</span>
                            </div>
                            <div class="progress-bar">
                                <div class="skill-progress h-full bg-gradient-to-r from-primary to-accent" data-width="90"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="animate-on-scroll">
                    <h3 class="text-2xl font-bold mb-6 flex items-center">
                        <i class="fas fa-laptop-code text-primary mr-3"></i>
                        Technical Toolkit
                    </h3>
                    
                    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-3 gap-4">
                        <div class="hexagon bg-dark/50 hover:bg-primary/20 p-6 flex flex-col items-center text-center transition-colors border border-primary/30">
                            <i class="fab fa-react text-4xl text-primary mb-3"></i>
                            <h4 class="font-bold">React</h4>
                        </div>
                        
                        <div class="hexagon bg-dark/50 hover:bg-primary/20 p-6 flex flex-col items-center text-center transition-colors border border-primary/30">
                            <i class="fab fa-js-square text-4xl text-primary mb-3"></i>
                            <h4 class="font-bold">JavaScript</h4>
                        </div>
                        
                        <div class="hexagon bg-dark/50 hover:bg-primary/20 p-6 flex flex-col items-center text-center transition-colors border border-primary/30">
                            <i class="fab fa-html5 text-4xl text-primary mb-3"></i>
                            <h4 class="font-bold">HTML5</h4>
                        </div>
                        
                        <div class="hexagon bg-dark/50 hover:bg-primary/20 p-6 flex flex-col items-center text-center transition-colors border border-primary/30">
                            <i class="fab fa-css3-alt text-4xl text-primary mb-3"></i>
                            <h4 class="font-bold">CSS3</h4>
                        </div>
                        
                        <div class="hexagon bg-dark/50 hover:bg-primary/20 p-6 flex flex-col items-center text-center transition-colors border border-primary/30">
                            <i class="fab fa-figma text-4xl text-primary mb-3"></i>
                            <h4 class="font-bold">Figma</h4>
                        </div>
                        
                        <div class="hexagon bg-dark/50 hover:bg-primary/20 p-6 flex flex-col items-center text-center transition-colors border border-primary/30">
                            <i class="fab fa-node-js text-4xl text-primary mb-3"></i>
                            <h4 class="font-bold">Node.js</h4>
                        </div>
                    </div>
                    
                    <div class="mt-8 p-6 rounded-xl bg-gradient-to-br from-secondary/30 to-primary/10 border border-primary/20">
                        <h4 class="font-bold mb-2
                          
                          
                          
                            <span>Certifications</span>

</h4>
                        <p class="text-sm opacity-80 mb-3">
                            Officially certified in modern web technologies
                        </p>
                        <div class="flex flex-wrap gap-2">
                            <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-xs">AWS Certified</span>
                            <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-xs">Google Analytics</span>
                            <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-xs">Three.js Expert</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="py-20 px-6 relative bg-dark">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-5xl font-bold mb-4">
                    Work <span class="text-primary">Experience</span>
                </h2>
                <p class="text-lg opacity-70 max-w-2xl mx-auto">
                    My professional journey and the companies I've worked with
                </p>
            </div>

<div class="timeline-container">
                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-content w-full md:w-5/12 p-6 rounded-xl bg-dark/50 border border-primary/20 animate-on-scroll">
                        <div class="flex justify-between items-start mb-2">
                            <h3 class="text-xl font-bold">Senior Frontend Developer</h3>
                            <span class="px-2 py-1 bg-primary/20 text-primary rounded-full text-xs">2021 - Present</span>
                        </div>
                        <h4 class="text-primary mb-3">TechVision Inc.</h4>
                        <p class="opacity-80 text-sm">
                            Leading a team of developers to create immersive web experiences using React and Three.js. Implemented performance optimizations that reduced load times by 40%.
                        </p>
                    </div>
                </div>

<div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-content w-full md:w-5/12 p-6 rounded-xl bg-dark/50 border border-primary/20 animate-on-scroll">
                        <div class="flex justify-between items-start mb-2">
                            <h3 class="text-xl font-bold">Frontend Developer</h3>
                            <span class="px-2 py-1 bg-primary/20 text-primary rounded-full text-xs">2018 - 2021</span>
                        </div>
                        <h4 class="text-primary mb-3">Digital Creations</h4>
                        <p class="opacity-80 text-sm">
                            Developed interactive web applications for clients in the entertainment industry. Created custom WebGL components that increased user engagement by 35%.
                        </p>
                    </div>
                </div>

<div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-content w-full md:w-5/12 p-6 rounded-xl bg-dark/50 border border-primary/20 animate-on-scroll">
                        <div class="flex justify-between items-start mb-2">
                            <h3 class="text-xl font-bold">Junior Web Developer</h3>
                            <span class="px-2 py-1 bg-primary/20 text-primary rounded-full text-xs">2016 - 2018</span>
                        </div>
                        <h4 class="text-primary mb-3">WebCraft Studios</h4>
                        <p class="opacity-80 text-sm">
                            Built responsive websites and learned fundamentals of modern web development. Contributed to open source projects and developed first 3D web experiments.
                        </p>
                    </div>
                </div>
            </div>
        </div>

<section id="projects" class="py-20 px-6 relative bg-gradient-to-b from-dark to-dark/80">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-5xl font-bold mb-4">
                    Featured <span class="text-primary">Projects</span>
                </h2>
                <p class="text-lg opacity-70 max-w-2xl mx-auto">
                    A selection of my recent work showcasing interactive 3D experiences
                </p>
            </div>

<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                
                <div class="project-card group animate-on-scroll">
                    <div class="relative overflow-hidden rounded-xl h-64 bg-dark/50 border border-primary/20">
                        <img src="https://media.licdn.com/dms/image/v2/D4E12AQHIuGSEQzRZXQ/article-cover_image-shrink_720_1280/article-cover_image-shrink_720_1280/0/1694177255002?e=2147483647&v=beta&t=L9SzoihsZWca4Q8FgZ45eKoP5Dz3FMIy5Tz-ifDr88w" alt="3D Product Configurator" class="w-full h-full object-cover group-hover:opacity-30 transition-opacity">
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                            <div class="text-center p-6">
                                <h3 class="text-xl font-bold mb-2">3D Product Configurator</h3>
                                <p class="text-sm opacity-80 mb-4">Interactive product customization tool with real-time 3D rendering</p>
                                <div class="flex justify-center space-x-2">
                                    <span class="px-2 py-1 bg-primary/20 text-primary rounded-full text-xs">React</span>
                                    <span class="px-2 py-1 bg-primary/20 text-primary rounded-full text-xs">Three.js</span>
                                    <span class="px-2 py-1 bg-primary/20 text-primary rounded-full text-xs">GSAP</span>
                                </div>
                            </div>
                        </div>
                        <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-dark to-transparent">
                            <h3 class="font-bold">3D Product Configurator</h3>
                            <p class="text-sm opacity-80">E-commerce Solution</p>
                        </div>
                    </div>
                </div>

<div class="project-card group animate-on-scroll">
                    <div class="relative overflow-hidden rounded-xl h-64 bg-dark/50 border border-primary/20">
                        <img src="https://sourceemea.thesourcemediaassets.com/2025/01/MS_New_1920x1080_banneri_EN-1900x1069.png" alt="Virtual Art Gallery" class="w-full h-full object-cover group-hover:opacity-30 transition-opacity">
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                            <div class="text-center p-6">
                                <h3 class="text-xl font-bold mb-2">Virtual Art Gallery</h3>
                                <p class="text-sm opacity-80 mb-4">Immersive 3D gallery space for digital art exhibitions</p>
                                <div class="flex justify-center space-x-2">
                                    <span class="px-2 py-1 bg-primary/20 text-primary rounded-full text-xs">Next.js</span>
                                    <span class="px-2 py-1 bg-primary/20 text-primary rounded-full text-xs">Three.js</span>
                                    <span class="px-2 py-1 bg-primary/20 text-primary rounded-full text-xs">WebXR</span>
                                </div>
                            </div>
                        </div>
                        <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-dark to-transparent">
                            <h3 class="font-bold">Virtual Art Gallery</h3>
                            <p class="text-sm opacity-80">Immersive Experience</p>
                        </div>
                    </div>
                </div>

<div class="project-card group animate-on-scroll">
                    <div class="relative overflow-hidden rounded-xl h-64 bg-dark/50 border border-primary/20">
                        <img src="https://img.freepik.com/free-vector/pair-programming-concept-illustration_114360-1812.jpg?ga=GA1.1.1117164648.1747833691&semt=ais_hybrid&w=740" alt="Data Visualization" class="w-full h-full object-cover group-hover:opacity-30 transition-opacity">
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                            <div class="text-center p-6">
                                <h3 class="text-xl font-bold mb-2">Interactive Data Viz</h3>
                                <p class="text-sm opacity-80 mb-4">3D data visualization platform for complex datasets</p>
                                <div class="flex justify-center space-x-2">
                                    <span class="px-2 py-1 bg-primary/20 text-primary rounded-full text-xs">D3.js</span>
                                    <span class="px-2 py-1 bg-primary/20 text-primary rounded-full text-xs">Three.js</span>
                                    <span class="px-2 py-1 bg-primary/20 text-primary rounded-full text-xs">Node.js</span>
                                </div>
                            </div>
                        </div>
                        <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-dark to-transparent">
                            <h3 class="font-bold">Interactive Data Viz</h3>
                            <p class="text-sm opacity-80">Analytics Platform</p>
                        </div>
                    </div>
                </div>
            </div>

<div class="text-center mt-16 animate-on-scroll">
                <a href="#" class="inline-flex items-center px-8 py-3 border-2 border-primary text-primary font-bold rounded-lg hover:bg-primary/10 transition-all transform hover:-translate-y-1">
                    <span>View All Projects</span>
                    <i class="fas fa-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </section>

<section class="py-20 px-6 relative bg-dark/80 backdrop-blur">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-5xl font-bold mb-4">
                    Client <span class="text-primary">Testimonials</span>
                </h2>
                <p class="text-lg opacity-70 max-w-2xl mx-auto">
                    What people say about working with me
                </p>
            </div>

<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                
                <div class="p-6 rounded-xl bg-dark/50 border border-primary/20 animate-on-scroll">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
                            <img src="http://youngleaderssummit.org/wp-content/uploads/2024/01/Michael-Chen-Headshot-Michael-Chen-e1705425786691.jpg" alt="Client" class="w-full h-full object-cover">
                        </div>
                        <div>
                            <h4 class="font-bold">Sarah Johnson</h4>
                            <p class="text-sm opacity-70">CEO, TechStart</p>
                        </div>
                    </div>
                    <p class="opacity-80 italic mb-4">
                        "John transformed our e-commerce platform with his 3D product configurator. The results exceeded our expectations and increased conversions by 27%."
                    </p>
                    <div class="flex text-yellow-400">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                </div>

<div class="p-6 rounded-xl bg-dark/50 border border-primary/20 animate-on-scroll">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
                            <img src="https://www.bakertilly.com/_next/image?url=https%3A%2F%2Fimages.prismic.io%2Fbakertilly%2FZxA7wYF3NbkBXm8H_Chen%252CMichael_Website.jpg%3Fauto%3Dformat%2Ccompress&w=1920&q=75" alt="Client" class="w-full h-full object-cover">
                        </div>
                        <div>
                            <h4 class="font-bold">Michael Chen</h4>
                            <p class="text-sm opacity-70">Creative Director, ArtSpace</p>
                        </div>
                    </div>
                    <p class="opacity-80 italic mb-4">
                        "The virtual gallery John created for our exhibition was stunning. His attention to detail and creative approach made all the difference."
                    </p>
                    <div class="flex text-yellow-400">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    </div>
                </div>

<div class="p-6 rounded-xl bg-dark/50 border border-primary/20 animate-on-scroll">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
                            <img src="https://static.foxdealer.com/51/2017/03/David-Wilson-Updated.jpg" alt="Client" class="w-full h-full object-cover">
                        </div>
                        <div>
                            <h4 class="font-bold">David Wilson</h4>
                            <p class="text-sm opacity-70">Product Manager, DataViz</p>
                        </div>
                    </div>
                    <p class="opacity-80 italic mb-4">
                        "Working with John on our data visualization platform was a game-changer. His technical skills and creative vision brought our data to life."
                    </p>
                    <div class="flex text-yellow-400">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="contact" class="py-20 px-6 relative">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-5xl font-bold mb-4">
                    Get In <span class="text-primary">Touch</span>
                </h2>
                <p class="text-lg opacity-70 max-w-2xl mx-auto">
                    Have a project in mind or want to discuss potential opportunities?
                </p>
            </div>

<div class="grid md:grid-cols-2 gap-12">
                <div class="animate-on-scroll">
                    <h3 class="text-2xl font-bold mb-6">Contact Information</h3>
                    
                    <div class="space-y-6">
                        <div class="flex items-start space-x-4">
                            <div class="w-12 h-12 rounded-lg bg-primary/20 flex items-center justify-center text-primary">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div>
                                <h4 class="font-bold mb-1">Email</h4>
                                <a href="mailto:hello@example.com" class="opacity-80 hover:text-primary transition-colors">hello@example.com</a>
                            </div>
                        </div>
                        
                        <div class="flex items-start space-x-4">
                            <div class="w-12 h-12 rounded-lg bg-primary/20 flex items-center justify-center text-primary">
                                <i class="fas fa-phone-alt"></i>
                            </div>
                            <div>
                                <h4 class="font-bold mb-1">Phone</h4>
                                <a href="tel:+1234567890" class="opacity-80 hover:text-primary transition-colors">+1 (234) 567-890</a>
                            </div>
                        </div>
                        
                        <div class="flex items-start space-x-4">
                            <div class="w-12 h-12 rounded-lg bg-primary/20 flex items-center justify-center text-primary">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div>
                                <h4 class="font-bold mb-1">Location</h4>
                                <p class="opacity-80">San Francisco, CA</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-10">
                        <h4 class="font-bold mb-4">Connect With Me</h4>
                        <div class="flex space-x-4">
                            <a href="#" class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary hover:bg-primary hover:text-dark transition-colors">
                                <i class="fab fa-github"></i>
                            </a>
                            <a href="#" class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary hover:bg-primary hover:text-dark transition-colors">
                                <i class="fab fa-linkedin-in"></i>
                            </a>
                            <a href="#" class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary hover:bg-primary hover:text-dark transition-colors">
                                <i class="fab fa-twitter"></i>
                            </a>
                            <a href="#" class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary hover:bg-primary hover:text-dark transition-colors">
                                <i class="fab fa-dribbble"></i>
                            </a>
                        </div>
                    </div>
                </div>
                
                <div class="animate-on-scroll">
                    <form class="space-y-6">
                        <div class="grid grid-cols-2 gap-6">
                            <div>
                                <label for="name" class="block mb-2 font-medium">Your Name</label>
                                <input type="text" id="name" class="w-full px-4 py-3 rounded-lg bg-dark/50 border border-primary/20 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all" placeholder="John Doe">
                            </div>
                            <div>
                                <label for="email" class="block mb-2 font-medium">Your Email</label>
                                <input type="email" id="email" class="w-full px-4 py-3 rounded-lg bg-dark/50 border border-primary/20 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all" placeholder="hello@example.com">
                            </div>
                        </div>
                        
                        <div>
                            <label for="subject" class="block mb-2 font-medium">Subject</label>
                            <input type="text" id="subject" class="w-full px-4 py-3 rounded-lg bg-dark/50 border border-primary/20 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all" placeholder="Project Inquiry">
                        </div>
                        
                        <div>
                            <label for="message" class="block mb-2 font-medium">Message</label>
                            <textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg bg-dark/50 border border-primary/20 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all" placeholder="Tell me about your project..."></textarea>
                        </div>
                        
                        <button type="submit" class="w-full px-6 py-3 bg-primary text-dark font-bold rounded-lg hover:bg-opacity-90 transition-all transform hover:-translate-y-1 hover:shadow-lg hover:shadow-primary/30">
                            Send Message
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<footer class="py-12 px-6 bg-dark/90 backdrop-blur border-t border-primary/10">
        <div class="max-w-6xl mx-auto">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <a href="#" class="text-primary font-bold text-2xl flex items-center">
                        <span class="text-glow">Dev</span><span class="text-accent">Portfolio</span>
                    </a>
                    <p class="mt-2 opacity-70 text-sm">Creating immersive digital experiences</p>
                </div>
                
                <div class="flex flex-wrap justify-center gap-6">
                    <a href="#home" class="opacity-70 hover:text-primary hover:opacity-100 transition-colors">Home</a>
                    <a href="#about" class="opacity-70 hover:text-primary hover:opacity-100 transition-colors">About</a>
                    <a href="#skills" class="opacity-70 hover:text-primary hover:opacity-100 transition-colors">Skills</a>
                    <a href="#projects" class="opacity-70 hover:text-primary hover:opacity-100 transition-colors">Projects</a>
                    <a href="#contact" class="opacity-70 hover:text-primary hover:opacity-100 transition-colors">Contact</a>
                </div>
            </div>
            
            <div class="border-t border-primary/10 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
                <p class="text-sm opacity-50 mb-4 md:mb-0">© 2023 John Doe. All rights reserved.</p>
                
                <div class="flex space-x-6">
                    <a href="#" class="opacity-50 hover:opacity-100 hover:text-primary transition-colors">
                        <i class="fab fa-github"></i>
                    </a>
                    <a href="#" class="opacity-50 hover:opacity-100 hover:text-primary transition-colors">
                        <i class="fab fa-linkedin-in"></i>
                    </a>
                    <a href="#" class="opacity-50 hover:opacity-100 hover:text-primary transition-colors">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="#" class="opacity-50 hover:opacity-100 hover:text-primary transition-colors">
                        <i class="fab fa-dribbble"></i>
                    </a>
                </div>
            </div>
        </div>
    </footer>

<a href="#home" class="fixed bottom-8 right-8 w-12 h-12 rounded-full bg-primary text-dark flex items-center justify-center shadow-lg hover:bg-opacity-90 transition-all transform hover:-translate-y-1 z-50">
        <i class="fas fa-arrow-up"></i>
    </a>

<script>
        // Initialize Three.js scene
        const initThreeScene = () => {
            const container = document.getElementById('canvas-container');
            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
            
            renderer.setSize(window.innerWidth, window.innerHeight);
            container.appendChild(renderer.domElement);
            
            // Add lights
            const ambientLight = new THREE.AmbientLight(0x404040);
            scene.add(ambientLight);
            
            const directionalLight = new THREE.DirectionalLight(0x2dd4bf, 0.8);
            directionalLight.position.set(1, 1, 1);
            scene.add(directionalLight);
            
            // Add objects
            const geometry = new THREE.IcosahedronGeometry(2, 0);
            const material = new THREE.MeshPhongMaterial({
                color: 0x2dd4bf,
                emissive: 0x0f766e,
                specular: 0xffffff,
                shininess: 50,
                transparent: true,
                opacity: 0.8,
                wireframe: true
            });
            
            const mesh = new THREE.Mesh(geometry, material);
            scene.add(mesh);
            
            camera.position.z = 5;
            
            // Animation loop
            const animate = () => {
                requestAnimationFrame(animate);
                
                mesh.rotation.x += 0.005;
                mesh.rotation.y += 0.01;
                
                renderer.render(scene, camera);
            };
            
            animate();
            
            // Handle window resize
            window.addEventListener('resize', () => {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            });
        };
        
        // Initialize particles
        const initParticles = () => {
            const particlesContainer = document.getElementById('particles');
            const particleCount = 30;
            
            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.classList.add('particle');
                
                // Random position
                const x = Math.random() * 100 - 50;
                const y = Math.random() * 100 - 50;
                particle.style.left = `${Math.random() * 100}%`;
                particle.style.top = `${Math.random() * 100}%`;
                
                // Random size
                const size = Math.random() * 4 + 2;
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                
                // Random animation
                const duration = Math.random() * 20 + 10;
                const delay = Math.random() * 5;
                particle.style.setProperty('--x', `${Math.random() * 200 - 100}px`);
                particle.style.setProperty('--y', `${Math.random() * 200 - 100}px`);
                particle.style.animationDuration = `${duration}s`;
                particle.style.animationDelay = `${delay}s`;
                
                particlesContainer.appendChild(particle);
            }
        };
        
        // Initialize scroll animations
        const initScrollAnimations = () => {
            const animateElements = document.querySelectorAll('.animate-on-scroll');
            
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('active');
                    }
                });
            }, { threshold: 0.1 });
            
            animateElements.forEach(el => observer.observe(el));
        };
        
        // Initialize skill progress animations
        const initSkillProgress = () => {
            const progressBars = document.querySelectorAll('.skill-progress');
            
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const width = entry.target.dataset.width;
                        entry.target.style.width = `${width}%`;
                    }
                });
            }, { threshold: 0.5 });
            
            progressBars.forEach(bar => observer.observe(bar));
        };
        
        // Initialize mobile menu toggle
        const initMobileMenu = () => {
            const menuButton = document.querySelector('nav button');
            const closeButton = document.querySelector('.fixed button');
            const mobileMenu = document.querySelector('.fixed.hidden');
            
            menuButton.addEventListener('click', () => {
                mobileMenu.classList.remove('hidden');
                document.body.style.overflow = 'hidden';
            });
            
            closeButton.addEventListener('click', () => {
                mobileMenu.classList.add('hidden');
                document.body.style.overflow = '';
            });
            
            // Close menu when clicking on links
            mobileMenu.querySelectorAll('a').forEach(link => {
                link.addEventListener('click', () => {
                    mobileMenu.classList.add('hidden');
                    document.body.style.overflow = '';
                });
            });
        };
        
        // Initialize tilt effect
        const initTiltEffect = () => {
            VanillaTilt.init(document.querySelector('.tilt-card'), {
                max: 15,
                speed: 400,
                glare: true,
                'max-glare': 0.2,
            });
        };
        
        // Initialize GSAP animations
        const initGSAPAnimations = () => {
            gsap.registerPlugin(ScrollTrigger);
            
            // Animate nav on scroll
            const nav = document.querySelector('nav');
            
            ScrollTrigger.create({
                start: 100,
                onEnter: () => nav.classList.add('scrolled'),
                onLeaveBack: () => nav.classList.remove('scrolled')
            });
            
            // Animate hero text
            gsap.from('.hero-text', {
                opacity: 0,
                y: 50,
                duration: 1,
                ease: 'power3.out'
            });
        };
        
        // Initialize everything when DOM is loaded
        document.addEventListener('DOMContentLoaded', () => {
            initThreeScene();
            initParticles();
            initScrollAnimations();
            initSkillProgress();
            initMobileMenu();
            initTiltEffect();
            initGSAPAnimations();
        });
    </script>

Related Examples

Footer

Author:
Abdul Baset Bappy

6 months ago

486
User | Author profile card template

Author:
Computer guy

2 years ago

9.2k
Garden
by salvator

Author:
Baraka Salvator

7 months ago

1k
Crafting a Responsive Footer with TypeScript, and Tailwind CSS
This is a well-structured and comprehensive footer section that uses Tailwind CSS for styling and layout. Here’s a brief explanation of what each part does: Footer Container (<footer class="bg-gray-800">): The footer is wrapped in a <footer> element with a dark background using the bg-gray-800 class. The aria-labelledby="footer-heading" attribute is used for accessibility, linking the <footer> to the invisible heading (<h2 id="footer-heading" class="sr-only">Footer</h2>). Main Content Area: The content inside the footer is centered and spaced using utility classes like max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8. Footer Sections: The footer is divided into several sections using grid layouts (xl:grid xl:grid-cols-5 xl:gap-8), which organize content into columns. Each section (Solutions, Support, Company, Legal) contains a heading with a list of links. These links are styled with Tailwind classes for consistent spacing and hover effects (text-base text-gray-300 hover:text-white). Language & Currency Selector: This section provides dropdowns for selecting language and currency. Tailwind's form utilities (@tailwindcss/forms plugin) are used to style the select elements. Newsletter Subscription Form: A subscription form is provided with an email input and a submit button. The form is styled to be responsive, with focus states for accessibility (focus:ring-2 focus:ring-offset-2). Social Media Links: Social media icons (Facebook, Instagram, etc.) are included, each wrapped in a link with hover effects. Icons are created using SVGs, which are scalable and look sharp at any size. Final Section: The footer concludes with another grid layout, ensuring spacing and alignment for different screen sizes. Customization Tips: Colors: You can easily customize the colors using Tailwind's utility classes (e.g., bg-gray-800, text-gray-400) to match your design. Icons: Replace SVGs with the appropriate icons for your needs. You might use a different icon set or add more icons. Responsive Design: Tailwind's utility classes like sm:, md:, lg:, xl: ensure that the footer is responsive across devices. Adjust the layout or padding if needed. Additional Considerations: SEO: Ensure the links in the footer point to meaningful pages to improve SEO. Accessibility: Consider adding aria-labels to the form elements and social media links to enhance accessibility further. This footer is ready to be integrated into a Tailwind CSS-powered project, offering both aesthetic appeal and functional utility.

Author:
zobaidul kaziex

1 year ago

2.9k
footer
Footer with contact info, navigation, account links, and social media icons.

Author:
Yasmin Rodrigues

1 year ago

3k
htmlbasics

Author:
Anonymous

6 months ago

740
Hero section

Author:
iamlos

9 months ago

1.4k
A Fullscreen Hero Section

Author:
Hasan AlDoy (McDoy)

11 months ago

1.3k
Basic Auto-Hiding Navbar

Author:
Anonymous

1 year ago

2.3k
htmlcolours

Author:
Anonymous

6 months ago

349
Footer
Footer with responsive desing

Author:
Rajesh Maheshwari

9 months ago

1.1k
Centered footer with CTA
Use this Tailwind CSS footer compoent for simple footer with center aligned everything and with CTA buttons.

Author:
Pagedone

1 year ago

2.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components