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

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

Hero w/ navbar
the modern and clean hero section

Author:
Carla Hoffman

1 year ago

4k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Author:
Amit Pachange

1 year ago

11.5k
Portfolio Hero Section 2
visually stunning and captivating hero section component for your portfolio website.

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

11 months ago

4.3k
beautifull web page
I create a web page using cloude ai its amazing.

Author:
Akram Khan

10 months ago

2.2k
beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

10 months ago

1.4k
Modern CV Template - Stylish HTML and Tailwind CSS Design for Professionals
Download this modern CV template crafted with HTML and Tailwind CSS. Featuring a clean, stylish design and easy customization, this CV template is perfect for professionals looking to make a strong impression. Showcase your skills, experience, and education with a visually appealing and responsive layout.

Author:
Hezron Okoko

9 months ago

2.1k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

7 months ago

2.8k
Portfolio Hero Section 4

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

6 months ago

2.6k
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

5 months ago

2.4k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

4 months ago

1.1k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

3 months ago

845
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

3 months ago

951

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components