Home
nejaa badr
portfolio

portfolio

This portfolio page for Claire includes:

1. Responsive design that works on both desktop and mobile
2. Indigo-800 and Blue-900 color scheme for the background
3. Dark mode support (the design is already dark-themed)
4. Beautiful animations and effects:

1. Fade-in and slide-up animations for sections
2. Animated skill bars
3. Hover effects on projects and buttons
4. Smooth scrolling for navigation

5. Mobile-friendly navigation with a toggle menu
6. Sections for About, Skills, Projects, and Contact
7. A contact form with styled inputs
8. Social media links in the footer
9. Accessibility considerations (proper heading structure, color contrast, focus styles)

Key features:

- The background uses a gradient from Indigo-800 to Blue-900
- The header and footer have a frosted glass effect using backdrop filters
- Text is white for high contrast against the dark background
- Sections fade in and slide up as they enter the viewport
- Skill bars animate when the skills section is in view
- Project cards have a hover effect with scaling and increased opacity
- The contact form has animated focus states
- Social media icons change color on hover
- The layout is responsive, with a hamburger menu for mobile screens

This implementation provides a visually appealing and functional portfolio page for Claire, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions and animations.

This tailwind example is contributed by nejaa badr, on 01-Nov-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Author box, User information

Profile Other

Author nejaa badr

337

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Badr's Portfolio</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in-up {
            animation: fadeInUp 0.6s ease-out forwards;
        }
        .skill-bar {
            transition: width 1s ease-out;
        }
    </style>
</head>
<body class="bg-gradient-to-r from-indigo-800 to-blue-900 min-h-screen text-white">
    <header class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg">
        <nav class="container mx-auto px-6 py-4">
            <div class="flex justify-between items-center">
                <a href="#" class="text-2xl font-bold">Badr</a>
                <div class="hidden md:flex space-x-6">
                    <a href="#about" class="hover:text-indigo-300 transition-colors duration-300">About</a>
                    <a href="#skills" class="hover:text-indigo-300 transition-colors duration-300">Skills</a>
                    <a href="#projects" class="hover:text-indigo-300 transition-colors duration-300">Projects</a>
                    <a href="#contact" class="hover:text-indigo-300 transition-colors duration-300">Contact</a>
                </div>
                <button id="menuToggle" class="md:hidden focus:outline-none">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </button>
            </div>
        </nav>
        <div id="mobileMenu" class="md:hidden hidden bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg">
            <a href="#about" class="block py-2 px-4 text-sm hover:bg-white hover:bg-opacity-20 transition-colors duration-300">About</a>
            <a href="#skills" class="block py-2 px-4 text-sm hover:bg-white hover:bg-opacity-20 transition-colors duration-300">Skills</a>
            <a href="#projects" class="block py-2 px-4 text-sm hover:bg-white hover:bg-opacity-20 transition-colors duration-300">Projects</a>
            <a href="#contact" class="block py-2 px-4 text-sm hover:bg-white hover:bg-opacity-20 transition-colors duration-300">Contact</a>
        </div>
    </header>

<main class="container mx-auto px-6 py-12">
        <section id="about" class="mb-20 animate-fade-in-up" style="animation-delay: 0.2s;">
            <h1 class="text-4xl md:text-6xl font-bold mb-4">Hi, I'm Badr</h1>
            <p class="text-xl mb-8">A passionate web developer and designer creating beautiful, functional websites.</p>
            <a href="#contact" class="bg-white text-indigo-800 px-6 py-3 rounded-full font-semibold hover:bg-indigo-100 transition-colors duration-300">Get in touch</a>
        </section>

<section id="skills" class="mb-20 animate-fade-in-up" style="animation-delay: 0.4s;">
            <h2 class="text-3xl font-bold mb-8">Skills</h2>
            <div class="space-y-4">
                <div>
                    <div class="flex justify-between mb-1">
                        <span>HTML/CSS</span>
                        <span>90%</span>
                    </div>
                    <div class="w-full bg-white bg-opacity-20 rounded-full h-2.5">
                        <div class="bg-indigo-500 h-2.5 rounded-full skill-bar" style="width: 0%"></div>
                    </div>
                </div>
                <div>
                    <div class="flex justify-between mb-1">
                        <span>Vuejs</span>
                        <span>90%</span>
                    </div>
                    <div class="w-full bg-white bg-opacity-20 rounded-full h-2.5">
                        <div class="bg-indigo-500 h-2.5 rounded-full skill-bar" style="width: 0%"></div>
                    </div>
                </div>
                <div>
                    <div class="flex justify-between mb-1">
                        <span>Laravel</span>
                        <span>90%</span>
                    </div>
                    <div class="w-full bg-white bg-opacity-20 rounded-full h-2.5">
                        <div class="bg-indigo-500 h-2.5 rounded-full skill-bar" style="width: 0%"></div>
                    </div>
                </div>
                <div>
                    <div class="flex justify-between mb-1">
                        <span>JavaScript</span>
                        <span>85%</span>
                    </div>
                    <div class="w-full bg-white bg-opacity-20 rounded-full h-2.5">
                        <div class="bg-indigo-500 h-2.5 rounded-full skill-bar" style="width: 0%"></div>
                    </div>
                </div>
                <div>
                    <div class="flex justify-between mb-1">
                        <span>React</span>
                        <span>80%</span>
                    </div>
                    <div class="w-full bg-white bg-opacity-20 rounded-full h-2.5">
                        <div class="bg-indigo-500 h-2.5 rounded-full skill-bar" style="width: 0%"></div>
                    </div>
                </div>
            </div>
        </section>

<section id="projects" class="mb-20 animate-fade-in-up" style="animation-delay: 0.6s;">
            <h2 class="text-3xl font-bold mb-8">Projects</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div class="bg-white bg-opacity-10 p-6 rounded-lg backdrop-filter backdrop-blur-lg hover:bg-opacity-20 transition-all duration-300 transform hover:scale-105">
                    <h3 class="text-xl font-semibold mb-2">E-commerce Website</h3>
                    <p class="mb-4">A fully functional online store built with React and Node.js.</p>
                    <a href="#" class="text-indigo-300 hover:text-indigo-100 transition-colors duration-300">View Project →</a>
                </div>
                <div class="bg-white bg-opacity-10 p-6 rounded-lg backdrop-filter backdrop-blur-lg hover:bg-opacity-20 transition-all duration-300 transform hover:scale-105">
                    <h3 class="text-xl font-semibold mb-2">Portfolio Template</h3>
                    <p class="mb-4">A customizable portfolio website template for creatives.</p>
                    <a href="#" class="text-indigo-300 hover:text-indigo-100 transition-colors duration-300">View Project →</a>
                </div>
            </div>
        </section>

<section id="contact" class="animate-fade-in-up" style="animation-delay: 0.8s;">
            <h2 class="text-3xl font-bold mb-8">Get in Touch</h2>
            <form class="space-y-4">
                <div>
                    <label for="name" class="block mb-2">Name</label>
                    <input type="text" id="name" name="name" class="w-full px-4 py-2 rounded-lg bg-white bg-opacity-20 focus:bg-opacity-30 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all duration-300" required>
                </div>
                <div>
                    <label for="email" class="block mb-2">Email</label>
                    <input type="email" id="email" name="email" class="w-full px-4 py-2 rounded-lg bg-white bg-opacity-20 focus:bg-opacity-30 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all duration-300" required>
                </div>
                <div>
                    <label for="message" class="block mb-2">Message</label>
                    <textarea id="message" name="message" rows="4" class="w-full px-4 py-2 rounded-lg bg-white bg-opacity-20 focus:bg-opacity-30 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all duration-300" required></textarea>
                </div>
                <button type="submit" class="bg-white text-indigo-800 px-6 py-3 rounded-full font-semibold hover:bg-indigo-100 transition-colors duration-300">Send Message</button>
            </form>
        </section>
    </main>

<footer class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg mt-12">
        <div class="container mx-auto px-6 py-4 flex justify-between items-center">
            <p>&copy; 2024 Badr. All rights reserved.</p>
            <div class="flex space-x-4">
                <a href="#" class="hover:text-indigo-300 transition-colors duration-300">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                    </svg>
                </a>
                <a href="#" class="hover:text-indigo-300 transition-colors duration-300">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
                    </svg>
                </a>
            </div>
        </div>
    </footer>

// Smooth scroll for navigation links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });

// Animate skill bars on scroll
        function animateSkillBars() {
            const skillBars = document.querySelectorAll('.skill-bar');
            skillBars.forEach(bar => {
                const targetWidth = bar.parentElement.previousElementSibling.lastElementChild.textContent;
                bar.style.width = targetWidth;
            });
        }

// Trigger skill bar animation when the skills section is in view
        const skillsSection = document.getElementById('skills');
        const observer = new IntersectionObserver((entries) => {
            if (entries[0].isIntersecting) {
                animateSkillBars();
                observer.unobserve(skillsSection);
            }
        }, { threshold: 0.5 });

observer.observe(skillsSection);

// Form submission (replace with your own logic)
        const form = document.querySelector('form');
        form.addEventListener('submit', (e) => {
            e.preventDefault();
            alert('Form submitted! (Replace this with your own logic)');
            form.reset();
        });
    </script>
</body>
</html>

Related Examples

Show user details

Author:
Lucas Martinez

1 year ago

21.4k
Updated customer details page
Customer details page

Author:
Olivia Smith

6 months ago

1.9k
Portfolio
This responsive portfolio with dark mode support includes: 1. Fully responsive design that works on both desktop and mobile devices 2. Dark mode toggle with system preference detection and local storage persistence 3. Indigo-800 and Blue-900 color scheme for primary colors in light and dark modes 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections using Intersection Observer 2. Hover effects on projects and buttons 3. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles, ARIA labels) Key features: - The color scheme uses Indigo-800 for light mode and orange-400 for dark mode as primary colors - Dark mode toggle in the header with a sun/moon icon - Sections fade in and slide up as they enter the viewport - Project cards have a hover effect with scaling and increased shadow - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens - Smooth scrolling behavior for navigation links - Dark mode preference is saved in local storage and syncs with system preference This implementation provides a visually appealing, accessible, and functional responsive portfolio with dark mode support, using HTML, Tailwind CSS, and vanilla JavaScript for the

Author:
nejaa badr

1 month ago

709
Google map iframe with tailwind

Author:
Kofi Osei

1 year ago

18.6k
beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

5 months ago

900
Designing a Responsive Form Layouts with Tailwind CSS
Enhance your web application by building a sleek and responsive Form Layouts using Tailwind CSS. This comprehensive guide walks you through creating an interactive Form Layouts section featuring.

Author:
zobaidul kaziex

3 months ago

730
GitHub For you Feed
GitHub For you Feed Clone

Author:
Samuel Abera

1 month ago

542
Responsive navbar with alpinejs
A mix of Penguin navbar with PineUI Slide-Over

Author:
Muhammad Rizqi Juniyanto

2 months ago

695
Profile Card
Show more details on hover

Author:
Tamani Phiri

1 year ago

11.9k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

5 months ago

1.2k
News feed

Author:
Bunny

1 year ago

12.6k
Recipe Card
beautiful recipe component with image and step-by-step instructions

Author:
Anonymous

1 year ago

6.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components