Home
nejaa badr
Portfolio

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

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

Profile Other

Author nejaa badr

1.8k

Fork Fullscreen

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Badr Nejaa - Web Developer</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: {
                            light: '#4338ca', // indigo-800
                            dark: '#f97316', // blue-900
                        }
                    }
                }
            }
        }
    </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;
        }
        .transition-transform {
            transition-property: transform;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 150ms;
        }
    </style>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-300">
    <header class="bg-white dark:bg-gray-800 shadow-md fixed w-full z-10 transition-colors duration-300">
        <nav class="container mx-auto px-6 py-3">
            <div class="flex justify-between items-center">
                <a href="#" class="text-2xl font-bold text-primary-light dark:text-primary-dark">Badr Nejaa</a>
                <div class="hidden md:flex space-x-6">
                    <a href="#about" class="hover:text-primary-light dark:hover:text-primary-dark transition-colors duration-300">About</a>
                    <a href="#projects" class="hover:text-primary-light dark:hover:text-primary-dark transition-colors duration-300">Projects</a>
                    <a href="#contact" class="hover:text-primary-light dark:hover:text-primary-dark transition-colors duration-300">Contact</a>
                </div>
                <div class="flex items-center">
                    <button id="darkModeToggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300 mr-4" aria-label="Toggle dark mode">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                        </svg>
                    </button>
                    <button id="mobileMenuToggle" class="md:hidden focus:outline-none" aria-label="Toggle mobile menu">
                        <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>
            </div>
        </nav>
        <div id="mobileMenu" class="md:hidden hidden bg-white dark:bg-gray-800 transition-colors duration-300">
            <a href="#about" class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">About</a>
            <a href="#projects" class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">Projects</a>
            <a href="#contact" class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">Contact</a>
        </div>
    </header>

<main class="container mx-auto px-6 py-20">
        <section id="about" class="mb-20 pt-16 animate-fade-in-up">
            <h1 class="text-4xl md:text-6xl font-bold mb-4 text-primary-light dark:text-primary-dark">Hi, I'm Badr Nejaa</h1>
            <p class="text-xl mb-8">A passionate web developer creating responsive and accessible websites.</p>
            <a href="#contact" class="bg-primary-light dark:bg-primary-dark text-white px-6 py-3 rounded-full font-semibold hover:bg-opacity-90 transition-colors duration-300">Get in touch</a>
        </section>

<section id="projects" class="mb-20 animate-fade-in-up" style="animation-delay: 0.2s;">
            <h2 class="text-3xl font-bold mb-8 text-primary-light dark:text-primary-dark">Projects</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 transform hover:scale-105 transition-transform">
                    <h3 class="text-xl font-semibold mb-2">Responsive Blog Platform</h3>
                    <p class="mb-4">A fully responsive blog platform built with Next.js and Tailwind CSS.</p>
                    <a href="#" class="text-primary-light dark:text-primary-dark hover:underline transition-colors duration-300">View Project →</a>
                </div>
                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 transform hover:scale-105 transition-transform">
                    <h3 class="text-xl font-semibold mb-2">Task Management App</h3>
                    <p class="mb-4">A React-based task management application with drag-and-drop functionality.</p>
                    <a href="#" class="text-primary-light dark:text-primary-dark hover:underline transition-colors duration-300">View Project →</a>
                </div>
                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 transform hover:scale-105 transition-transform">
                    <h3 class="text-xl font-semibold mb-2">E-commerce Website</h3>
                    <p class="mb-4">A full-stack e-commerce platform built with Node.js, Express, and MongoDB.</p>
                    <a href="#" class="text-primary-light dark:text-primary-dark hover:underline transition-colors duration-300">View Project →</a>
                </div>
                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 transform hover:scale-105 transition-transform">
                    <h3 class="text-xl font-semibold mb-2">Weather Dashboard</h3>
                    <p class="mb-4">A weather dashboard using OpenWeatherMap API and Chart.js for data visualization.</p>
                    <a href="#" class="text-primary-light dark:text-primary-dark hover:underline transition-colors duration-300">View Project →</a>
                </div>
            </div>
        </section>

<section id="contact" class="animate-fade-in-up" style="animation-delay: 0.4s;">
            <h2 class="text-3xl font-bold mb-8 text-primary-light dark:text-primary-dark">Get in Touch</h2>
            <form class="max-w-lg mx-auto">
                <div class="mb-4">
                    <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 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-light dark:focus:ring-primary-dark transition-all duration-300" required>
                </div>
                <div class="mb-4">
                    <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 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-light dark:focus:ring-primary-dark transition-all duration-300" required>
                </div>
                <div class="mb-4">
                    <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 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-light dark:focus:ring-primary-dark transition-all duration-300" required></textarea>
                </div>
                <button type="submit" class="bg-primary-light dark:bg-primary-dark text-white px-6 py-3 rounded-full font-semibold hover:bg-opacity-90 transition-colors duration-300">Send Message</button>
            </form>
        </section>
    </main>

<footer class="bg-white dark:bg-gray-800 mt-12 transition-colors duration-300">
        <div class="container mx-auto px-6 py-4 flex flex-col md:flex-row justify-between items-center">
            <p>&copy; 2024 Badr NEJAA. All rights reserved.</p>
            <div class="flex space-x-4 mt-4 md:mt-0">
                <a href="https://github.com/Badrnej?tab=repositories" class="text-gray-600 dark:text-gray-400 hover:text-primary-light dark:hover:text-primary-dark transition-colors duration-300" aria-label="GitHub">
                    <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="https://www.linkedin.com/in/badr-nejaa/" class="text-gray-600 dark:text-gray-400 hover:text-primary-light dark:hover:text-primary-dark transition-colors duration-300" aria-label="LinkedIn">
                    <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>
                <a href="https://x.com/BadrNejaa" class="text-gray-600 dark:text-gray-400 hover:text-primary-light dark:hover:text-primary-dark transition-colors duration-300" aria-label="X">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5  0 00-.08-.83A7.72 7.72 0 0023 3z"/>
                    </svg>
                </a>
            </div>
        </div>
    </footer>

darkModeToggle.addEventListener('click', () => {
            html.classList.toggle('dark');
            localStorage.setItem('darkMode', html.classList.contains('dark'));
        });

// Check for saved dark mode preference
        if (localStorage.getItem('darkMode') === 'true' || 
            (!('darkMode' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            html.classList.add('dark');
        }

// Mobile menu toggle
        const mobileMenuToggle = document.getElementById('mobileMenuToggle');
        const mobileMenu = document.getElementById('mobileMenu');

mobileMenuToggle.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });

// Smooth scroll for navigation links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                const yOffset = -60; // Adjust this value based on your header height
                const y = targetElement.getBoundingClientRect().top + window.pageYOffset + yOffset;

window.scrollTo({top: y, behavior: 'smooth'});

// Close mobile menu if open
                if (!mobileMenu.classList.contains('hidden')) {
                    mobileMenu.classList.add('hidden');
                }
            });
        });

// Intersection Observer for fade-in animations
        const observerOptions = {
            root: null,
            rootMargin: '0px',
            threshold: 0.1
        };

document.querySelectorAll('section').forEach(section => {
            observer.observe(section);
        });

// 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

2 years ago

22.7k
Updated customer details page
Customer details page

Author:
Olivia Smith

9 months ago

2.4k
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.

Author:
nejaa badr

4 months ago

1.2k
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 weeks ago

291
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 weeks ago

294
Collapsible content

Author:
Rafferty Kim

1 year ago

12.7k
cards
cards with background animation

Author:
Anonymous

1 year ago

10.1k
Forgot Password Form
1. Color Updates: 1. Changed background to gradient `from-indigo-800 to-blue-900` 2. Updated text colors to match the new theme 3. Changed button colors to `bg-indigo-800` with `hover:bg-blue-900` 4. Updated focus rings to use indigo colors 5. Made footer links white with indigo hover states 2. Enhanced Styling: 1. Added gradient background 2. Improved border radius to `rounded-xl` 3. Enhanced shadow with `shadow-2xl` 4. Added hover scale effects 5. Added fade-in animation 3. Dark Mode Improvements: 1. Enhanced dark mode colors 2. Added system preference detection 3. Improved dark mode contrast 4. Updated dark mode focus rings 4. Added Functionality: 1. Added form validation 2. Added success message 3. Added form reset after submission 4. Added smooth transitions 5. Accessibility Improvements: 1. Maintained ARIA attributes 2. Enhanced focus states 3. Improved color contrast 4. Added transition animations for better UX 6. Added Interactions: 1. Hover effects on all interactive elements 2. Scale animation on card and button hover 3. Smooth color transitions 4. Form validation feedback The form now matches the Indigo-800 and Blue-900 color scheme while maintaining dark mode support and adding enhanced animations and interactions.

Author:
nejaa badr

4 months ago

683
Neon container

Author:
Anonymous

10 months ago

2.3k
Glassmorphism form

Author:
Geoffrey Callaghan

1 year ago

6k
Twitter like users list

Author:
Simon Scheffer

2 years ago

10.9k
admin panel

Author:
Anonymous

9 months ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components