Awesome Portfolio Website

1908 hasan

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alex Carter | Innovative Developer & Designer</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #6c63ff;
            --secondary: #4d44db;
            --dark: #1a1a2e;
            --light: #f5f5f7;
            --accent: #ff6b6b;
            --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--dark);
            color: var(--light);
            overflow-x: hidden;
            line-height: 1.6;
        }
        
        /* Particle.js background */
        #particles-js {
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: -1;
            top: 0;
            left: 0;
        }
        
        /* Smooth scroll */
        html {
            scroll-behavior: smooth;
        }
        
        /* Navigation */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            padding: 1.5rem 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: var(--transition);
        }
        
        header.scrolled {
            background-color: rgba(26, 26, 46, 0.9);
            backdrop-filter: blur(10px);
            padding: 1rem 5%;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        }
        
        .logo {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 1.8rem;
            color: var(--light);
            text-decoration: none;
            display: flex;
            align-items: center;
        }
        
        .logo span {
            color: var(--primary);
        }
        
        .nav-links {
            display: flex;
            list-style: none;
        }
        
        .nav-links li {
            margin-left: 2.5rem;
        }
        
        .nav-links a {
            color: var(--light);
            text-decoration: none;
            font-weight: 500;
            font-size: 1.1rem;
            position: relative;
            transition: var(--transition);
        }
        
        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--primary);
            transition: var(--transition);
        }
        
        .nav-links a:hover::after {
            width: 100%;
        }
        
        .nav-links a:hover {
            color: var(--primary);
        }
        
        .hamburger {
            display: none;
            cursor: pointer;
            z-index: 1001;
        }
        
        .hamburger div {
            width: 25px;
            height: 3px;
            background-color: var(--light);
            margin: 5px;
            transition: var(--transition);
        }
        
        /* Hero Section */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding: 0 5%;
            position: relative;
        }
        
        .hero-content {
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            align-items: center;
            gap: 2rem;
        }
        
        .hero-text h4 {
            font-size: 1.5rem;
            color: var(--primary);
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s 0.2s forwards;
        }
        
        .hero-text h1 {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            line-height: 1.2;
            opacity: 0;
            animation: fadeInUp 1s 0.4s forwards;
        }
        
        .hero-text h1 span {
            color: var(--primary);
        }
        
        .hero-text p {
            font-size: 1.1rem;
            margin-bottom: 2rem;
            opacity: 0;
            animation: fadeInUp 1s 0.6s forwards;
        }
        
        .hero-btns {
            display: flex;
            gap: 1.5rem;
            opacity: 0;
            animation: fadeInUp 1s 0.8s forwards;
        }
        
        .btn {
            display: inline-block;
            padding: 0.8rem 2rem;
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: var(--transition);
            border: 2px solid transparent;
        }
        
        .btn-primary {
            background-color: var(--primary);
            color: var(--light);
        }
        
        .btn-primary:hover {
            background-color: transparent;
            border-color: var(--primary);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(108, 99, 255, 0.3);
        }
        
        .btn-secondary {
            background-color: transparent;
            color: var(--light);
            border-color: var(--light);
        }
        
        .btn-secondary:hover {
            background-color: var(--light);
            color: var(--dark);
            transform: translateY(-3px);
        }
        
        .hero-image {
            position: relative;
            opacity: 0;
            animation: fadeIn 1s 1s forwards;
        }
        
        .hero-image img {
            width: 100%;
            max-width: 500px;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            transform: perspective(1000px) rotateY(-15deg);
            transition: var(--transition);
        }
        
        .hero-image:hover img {
            transform: perspective(1000px) rotateY(0deg);
        }
        
        .social-links {
            position: absolute;
            left: -50px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
        
        .social-links a {
            color: var(--light);
            font-size: 1.5rem;
            transition: var(--transition);
        }
        
        .social-links a:hover {
            color: var(--primary);
            transform: translateX(5px);
        }
        
        /* About Section */
        .section {
            padding: 6rem 5%;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 4rem;
        }
        
        .section-title h2 {
            font-size: 2.5rem;
            font-weight: 700;
            position: relative;
            display: inline-block;
        }
        
        .section-title h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background-color: var(--primary);
            border-radius: 2px;
        }
        
        .about-content {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 3rem;
            align-items: center;
        }
        
        .about-image {
            position: relative;
        }
        
        .about-image img {
            width: 100%;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        }
        
        .about-image::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border: 5px solid var(--primary);
            border-radius: 20px;
            top: 20px;
            left: 20px;
            z-index: -1;
        }
        
        .about-text h3 {
            font-size: 2rem;
            margin-bottom: 1.5rem;
        }
        
        .about-text p {
            margin-bottom: 1.5rem;
        }
        
        .skills {
            margin-top: 2rem;
        }
        
        .skill-item {
            margin-bottom: 1.5rem;
        }
        
        .skill-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
        }
        
        .skill-bar {
            height: 10px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            overflow: hidden;
        }
        
        .skill-progress {
            height: 100%;
            background-color: var(--primary);
            border-radius: 5px;
            position: relative;
            transition: width 1.5s ease-in-out;
        }
        
        /* Services Section */
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }
        
        .service-card {
            background-color: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            padding: 2.5rem 2rem;
            transition: var(--transition);
            text-align: center;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .service-card:hover {
            transform: translateY(-10px);
            background-color: rgba(108, 99, 255, 0.1);
            box-shadow: 0 15px 30px rgba(108, 99, 255, 0.2);
        }
        
        .service-icon {
            font-size: 3rem;
            color: var(--primary);
            margin-bottom: 1.5rem;
        }
        
        .service-card h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }
        
        /* Portfolio Section */
        .portfolio-filter {
            display: flex;
            justify-content: center;
            margin-bottom: 3rem;
            flex-wrap: wrap;
            gap: 1rem;
        }
        
        .filter-btn {
            padding: 0.5rem 1.5rem;
            background-color: transparent;
            color: var(--light);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50px;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .filter-btn.active, .filter-btn:hover {
            background-color: var(--primary);
            border-color: var(--primary);
        }
        
        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 2rem;
        }
        
        .portfolio-item {
            position: relative;
            border-radius: 15px;
            overflow: hidden;
            height: 250px;
        }
        
        .portfolio-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .portfolio-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, rgba(108, 99, 255, 0.9), transparent);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 2rem;
            opacity: 0;
            transition: var(--transition);
        }
        
        .portfolio-item:hover .portfolio-overlay {
            opacity: 1;
        }
        
        .portfolio-item:hover .portfolio-img {
            transform: scale(1.1);
        }
        
        .portfolio-overlay h3 {
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
            transform: translateY(20px);
            transition: var(--transition);
        }
        
        .portfolio-overlay p {
            transform: translateY(20px);
            transition: var(--transition);
            transition-delay: 0.1s;
        }
        
        .portfolio-item:hover .portfolio-overlay h3,
        .portfolio-item:hover .portfolio-overlay p {
            transform: translateY(0);
        }
        
        /* Testimonials Section */
        .testimonials-container {
            max-width: 800px;
            margin: 0 auto;
            position: relative;
        }
        
        .testimonial-card {
            background-color: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            padding: 2.5rem;
            text-align: center;
            margin: 0 1rem;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .client-img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            margin: 0 auto 1.5rem;
            border: 3px solid var(--primary);
        }
        
        .client-rating {
            color: var(--accent);
            font-size: 1.2rem;
            margin-bottom: 1.5rem;
        }
        
        .client-name {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
        }
        
        .client-role {
            color: var(--primary);
            font-weight: 500;
            margin-bottom: 1.5rem;
        }
        
        /* Contact Section */
        .contact-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 3rem;
        }
        
        .contact-info {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }
        
        .contact-card {
            display: flex;
            align-items: flex-start;
            gap: 1.5rem;
        }
        
        .contact-icon {
            font-size: 1.8rem;
            color: var(--primary);
        }
        
        .contact-details h3 {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
        }
        
        .contact-form {
            background-color: rgba(255, 255, 255, 0.05);
            padding: 2.5rem;
            border-radius: 15px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .form-group {
            margin-bottom: 1.5rem;
        }
        
        .form-control {
            width: 100%;
            padding: 1rem;
            background-color: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            color: var(--light);
            font-family: 'Poppins', sans-serif;
            transition: var(--transition);
        }
        
        .form-control:focus {
            outline: none;
            border-color: var(--primary);
            background-color: rgba(108, 99, 255, 0.1);
        }
        
        textarea.form-control {
            resize: vertical;
            min-height: 150px;
        }
        
        .submit-btn {
            background-color: var(--primary);
            color: var(--light);
            border: none;
            padding: 1rem 2.5rem;
            border-radius: 50px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            display: inline-block;
        }
        
        .submit-btn:hover {
            background-color: var(--secondary);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(108, 99, 255, 0.3);
        }
        
        /* Footer */
        footer {
            background-color: rgba(0, 0, 0, 0.2);
            padding: 3rem 5%;
            text-align: center;
        }
        
        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .footer-logo {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 2rem;
            color: var(--light);
            margin-bottom: 1.5rem;
            display: inline-block;
        }
        
        .footer-logo span {
            color: var(--primary);
        }
        
        .footer-links {
            display: flex;
            justify-content: center;
            list-style: none;
            margin-bottom: 2rem;
            flex-wrap: wrap;
            gap: 1.5rem;
        }
        
        .footer-links a {
            color: var(--light);
            text-decoration: none;
            transition: var(--transition);
        }
        
        .footer-links a:hover {
            color: var(--primary);
        }
        
        .footer-social {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .footer-social a {
            color: var(--light);
            font-size: 1.5rem;
            transition: var(--transition);
        }
        
        .footer-social a:hover {
            color: var(--primary);
            transform: translateY(-5px);
        }
        
        .copyright {
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.9rem;
        }
        
        /* Animations */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }
        
        /* Scroll to top button */
        .scroll-top {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            width: 50px;
            height: 50px;
            background-color: var(--primary);
            color: var(--light);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.2rem;
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
            z-index: 999;
        }
        
        .scroll-top.active {
            opacity: 1;
            visibility: visible;
        }
        
        .scroll-top:hover {
            background-color: var(--secondary);
            transform: translateY(-5px);
        }
        
        /* Responsive Design */
        @media (max-width: 992px) {
            .hero-content {
                grid-template-columns: 1fr;
                text-align: center;
            }
            
            .social-links {
                position: static;
                flex-direction: row;
                justify-content: center;
                margin-top: 2rem;
                transform: none;
            }
            
            .about-content {
                grid-template-columns: 1fr;
            }
            
            .contact-container {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 768px) {
            .nav-links {
                position: fixed;
                top: 0;
                right: -100%;
                width: 70%;
                height: 100vh;
                background-color: var(--dark);
                flex-direction: column;
                align-items: center;
                justify-content: center;
                transition: var(--transition);
                z-index: 1000;
            }
            
            .nav-links.active {
                right: 0;
            }
            
            .nav-links li {
                margin: 1.5rem 0;
            }
            
            .hamburger {
                display: block;
            }
            
            .hamburger.active div:nth-child(1) {
                transform: rotate(-45deg) translate(-5px, 6px);
            }
            
            .hamburger.active div:nth-child(2) {
                opacity: 0;
            }
            
            .hamburger.active div:nth-child(3) {
                transform: rotate(45deg) translate(-5px, -6px);
            }
            
            .hero-text h1 {
                font-size: 2.8rem;
            }
            
            .section {
                padding: 4rem 5%;
            }
        }
        
        @media (max-width: 576px) {
            .hero-text h1 {
                font-size: 2.2rem;
            }
            
            .hero-btns {
                flex-direction: column;
                gap: 1rem;
            }
            
            .btn {
                width: 100%;
                text-align: center;
            }
            
            .portfolio-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    
    <div id="particles-js"></div>
    
    
    <header id="header">
        <a href="#" class="logo">Alex<span>Carter</span></a>
        
        <ul class="nav-links">
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
        
        <div class="hamburger">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </header>
    
    
    <section class="hero" id="home">
        <div class="hero-content">
            <div class="hero-text">
                <h4>Hello, I'm</h4>
                <h1>Alex Carter <span>Creative Developer</span></h1>
                <p>I build exceptional digital experiences that are fast, accessible, visually appealing, and responsive. Let's turn your ideas into reality!</p>
                <div class="hero-btns">
                    <a href="#portfolio" class="btn btn-primary">View My Work</a>
                    <a href="#contact" class="btn btn-secondary">Hire Me</a>
                </div>
            </div>
            
            <div class="hero-image">
                <img src="https://images.unsplash.com/photo-1580927752452-89d86da3fa0a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Alex Carter">
                
                <div class="social-links">
                    <a href="#"><i class="fab fa-github"></i></a>
                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-dribbble"></i></a>
                </div>
            </div>
        </div>
    </section>
    
    
    <section class="section" id="about">
        <div class="section-title">
            <h2>About Me</h2>
        </div>
        
        <div class="about-content">
            <div class="about-image">
                <img src="https://images.unsplash.com/photo-1571171637578-41bc2dd41cd2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="About Alex">
            </div>
            
            <div class="about-text">
                <h3>Who am I?</h3>
                <p>I'm a passionate full-stack developer with 5+ years of experience creating digital products. I specialize in JavaScript frameworks and have a strong eye for design and user experience.</p>
                <p>My approach combines technical expertise with creative problem-solving to deliver solutions that not only work flawlessly but also delight users.</p>
                
                <div class="skills">
                    <div class="skill-item">
                        <div class="skill-info">
                            <span>Web Development</span>
                            <span>95%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 95%"></div>
                        </div>
                    </div>
                    
                    <div class="skill-item">
                        <div class="skill-info">
                            <span>UI/UX Design</span>
                            <span>85%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 85%"></div>
                        </div>
                    </div>
                    
                    <div class="skill-item">
                        <div class="skill-info">
                            <span>Mobile Development</span>
                            <span>80%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 80%"></div>
                        </div>
                    </div>
                </div>
                
                <a href="#" class="btn btn-primary" style="margin-top: 2rem;">Download CV</a>
            </div>
        </div>
    </section>
    
    
    <section class="section" id="services">
        <div class="section-title">
            <h2>My Services</h2>
        </div>
        
        <div class="services-grid">
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-code"></i>
                </div>
                <h3>Web Development</h3>
                <p>Custom websites and web applications built with modern technologies like React, Vue, Node.js, and more.</p>
            </div>
            
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-mobile-alt"></i>
                </div>
                <h3>Mobile Development</h3>
                <p>Cross-platform mobile apps for iOS and Android using React Native or Flutter for maximum reach.</p>
            </div>
            
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-paint-brush"></i>
                </div>
                <h3>UI/UX Design</h3>
                <p>Beautiful, intuitive interfaces designed with users in mind to create engaging digital experiences.</p>
            </div>
            
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-search"></i>
                </div>
                <h3>SEO Optimization</h3>
                <p>Improve your search rankings and online visibility with proven SEO strategies and techniques.</p>
            </div>
            
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-server"></i>
                </div>
                <h3>Backend Development</h3>
                <p>Robust server-side solutions with Node.js, Python, PHP, and database architecture.</p>
            </div>
            
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-chart-line"></i>
                </div>
                <h3>Digital Marketing</h3>
                <p>Comprehensive digital marketing strategies to grow your brand and reach your audience.</p>
            </div>
        </div>
    </section>
    
    
    <section class="section" id="portfolio">
        <div class="section-title">
            <h2>My Portfolio</h2>
        </div>
        
        <div class="portfolio-filter">
            <button class="filter-btn active" data-filter="all">All</button>
            <button class="filter-btn" data-filter="web">Web</button>
            <button class="filter-btn" data-filter="app">App</button>
            <button class="filter-btn" data-filter="design">Design</button>
        </div>
        
        <div class="portfolio-grid">
            <div class="portfolio-item" data-category="web">
                <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Project 1" class="portfolio-img">
                <div class="portfolio-overlay">
                    <h3>E-commerce Platform</h3>
                    <p>Full-featured online store with custom CMS</p>
                </div>
            </div>
            
            <div class="portfolio-item" data-category="app">
                <img src="https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Project 2" class="portfolio-img">
                <div class="portfolio-overlay">
                    <h3>Fitness Tracker App</h3>
                    <p>Mobile application for workout tracking</p>
                </div>
            </div>
            
            <div class="portfolio-item" data-category="design">
                <img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Project 3" class="portfolio-img">
                <div class="portfolio-overlay">
                    <h3>Brand Identity</h3>
                    <p>Complete branding for startup company</p>
                </div>
            </div>
            
            <div class="portfolio-item" data-category="web">
                <img src="https://images.unsplash.com/photo-1559028012-481c04fa702d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1636&q=80" alt="Project 4" class="portfolio-img">
                <div class="portfolio-overlay">
                    <h3>Corporate Website</h3>
                    <p>Modern responsive website for tech firm</p>
                </div>
            </div>
            
            <div class="portfolio-item" data-category="app">
                <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Project 5" class="portfolio-img">
                <div class="portfolio-overlay">
                    <h3>Recipe App</h3>
                    <p>Mobile cooking companion with AI features</p>
                </div>
            </div>
            
            <div class="portfolio-item" data-category="design">
                <img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Project 6" class="portfolio-img">
                <div class="portfolio-overlay">
                    <h3>UI Kit</h3>
                    <p>Design system for web applications</p>
                </div>
            </div>
        </div>
    </section>
    
    
    <section class="section" id="testimonials">
        <div class="section-title">
            <h2>Client Testimonials</h2>
        </div>
        
        <div class="testimonials-container">
            <div class="testimonial-card">
                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client" class="client-img">
                <div class="client-rating">
                    <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>
                <p>"Alex delivered our project ahead of schedule and exceeded our expectations. The attention to detail and communication throughout the process was exceptional."</p>
                <h4 class="client-name">Sarah Johnson</h4>
                <p class="client-role">CEO, TechStart Inc.</p>
            </div>
        </div>
    </section>
    
    
    <section class="section" id="contact">
        <div class="section-title">
            <h2>Get In Touch</h2>
        </div>
        
        <div class="contact-container">
            <div class="contact-info">
                <div class="contact-card">
                    <div class="contact-icon">
                        <i class="fas fa-map-marker-alt"></i>
                    </div>
                    <div class="contact-details">
                        <h3>Location</h3>
                        <p>San Francisco, CA</p>
                    </div>
                </div>
                
                <div class="contact-card">
                    <div class="contact-icon">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <div class="contact-details">
                        <h3>Email</h3>
                        <p>hello@alexcarter.dev</p>
                    </div>
                </div>
                
                <div class="contact-card">
                    <div class="contact-icon">
                        <i class="fas fa-phone-alt"></i>
                    </div>
                    <div class="contact-details">
                        <h3>Phone</h3>
                        <p>+1 (555) 123-4567</p>
                    </div>
                </div>
                
                <div class="contact-card">
                    <div class="contact-icon">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="contact-details">
                        <h3>Working Hours</h3>
                        <p>Mon-Fri: 9AM - 5PM</p>
                    </div>
                </div>
            </div>
            
            <div class="contact-form">
                <form id="form">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Your Name" required>
                    </div>
                    
                    <div class="form-group">
                        <input type="email" class="form-control" placeholder="Your Email" required>
                    </div>
                    
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Subject">
                    </div>
                    
                    <div class="form-group">
                        <input class="form-control" placeholder="Your Message" required />
                    </div>
                    
                    <button type="submit" class="submit-btn">Send Message</button>
                </form>
            </div>
        </div>
    </section>
    
    
    <footer>
        <div class="footer-content">
            <a href="#" class="footer-logo">Alex<span>Carter</span></a>
            
            <ul class="footer-links">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
            
            <div class="footer-social">
                <a href="#"><i class="fab fa-github"></i></a>
                <a href="#"><i class="fab fa-linkedin-in"></i></a>
                <a href="#"><i class="fab fa-twitter"></i></a>
                <a href="#"><i class="fab fa-dribbble"></i></a>
                <a href="#"><i class="fab fa-instagram"></i></a>
            </div>
            
            <p class="copyright">© 2023 Alex Carter. All Rights Reserved.</p>
        </div>
    </footer>
    
    
    <div class="scroll-top">
        <i class="fas fa-arrow-up"></i>
    </div>
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
    <script>
        // Mobile Navigation
        const hamburger = document.querySelector('.hamburger');
        const navLinks = document.querySelector('.nav-links');
        const links = document.querySelectorAll('.nav-links li');
        
        hamburger.addEventListener('click', () => {
            navLinks.classList.toggle('active');
            hamburger.classList.toggle('active');
            
            // Animate Links
            links.forEach((link, index) => {
                if (link.style.animation) {
                    link.style.animation = '';
                } else {
                    link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.3}s`;
                }
            });
        });
        
        // Close mobile menu when clicking a link
        links.forEach(link => {
            link.addEventListener('click', () => {
                navLinks.classList.remove('active');
                hamburger.classList.remove('active');
                links.forEach(link => {
                    link.style.animation = '';
                });
            });
        });
        
        // Sticky Header
        window.addEventListener('scroll', () => {
            const header = document.getElementById('header');
            header.classList.toggle('scrolled', window.scrollY > 100);
        });
        
        // Scroll to Top Button
        const scrollTopBtn = document.querySelector('.scroll-top');
        
        window.addEventListener('scroll', () => {
            if (window.pageYOffset > 300) {
                scrollTopBtn.classList.add('active');
            } else {
                scrollTopBtn.classList.remove('active');
            }
        });
        
        scrollTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
        
        // Portfolio Filter
        const filterBtns = document.querySelectorAll('.filter-btn');
        const portfolioItems = document.querySelectorAll('.portfolio-item');
        
        filterBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                // Remove active class from all buttons
                filterBtns.forEach(btn => btn.classList.remove('active'));
                // Add active class to clicked button
                btn.classList.add('active');
                
                const filter = btn.getAttribute('data-filter');
                
                portfolioItems.forEach(item => {
                    if (filter === 'all' || item.getAttribute('data-category') === filter) {
                        item.style.display = 'block';
                    } else {
                        item.style.display = 'none';
                    }
                });
            });
        });
        
        // Animate skills on scroll
        const skillProgress = document.querySelectorAll('.skill-progress');
        
        function animateSkills() {
            skillProgress.forEach(progress => {
                const width = progress.parentElement.previousElementSibling.lastElementChild.textContent;
                progress.style.width = width;
            });
        }
        
        // Initialize skills animation when section is in view
        const aboutSection = document.getElementById('about');
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    animateSkills();
                    observer.unobserve(entry.target);
                }
            });
        }, { threshold: 0.2 });
        
        observer.observe(aboutSection);
        
        // Particles.js Configuration
        particlesJS("particles-js", {
            "particles": {
                "number": {
                    "value": 80,
                    "density": {
                        "enable": true,
                        "value_area": 800
                    }
                },
                "color": {
                    "value": "#6c63ff"
                },
                "shape": {
                    "type": "circle",
                    "stroke": {
                        "width": 0,
                        "color": "#000000"
                    },
                    "polygon": {
                        "nb_sides": 5
                    }
                },
                "opacity": {
                    "value": 0.5,
                    "random": false,
                    "anim": {
                        "enable": false,
                        "speed": 1,
                        "opacity_min": 0.1,
                        "sync": false
                    }
                },
                "size": {
                    "value": 3,
                    "random": true,
                    "anim": {
                        "enable": false,
                        "speed": 40,
                        "size_min": 0.1,
                        "sync": false
                    }
                },
                "line_linked": {
                    "enable": true,
                    "distance": 150,
                    "color": "#6c63ff",
                    "opacity": 0.4,
                    "width": 1
                },
                "move": {
                    "enable": true,
                    "speed": 2,
                    "direction": "none",
                    "random": false,
                    "straight": false,
                    "out_mode": "out",
                    "bounce": false,
                    "attract": {
                        "enable": false,
                        "rotateX": 600,
                        "rotateY": 1200
                    }
                }
            },
            "interactivity": {
                "detect_on": "canvas",
                "events": {
                    "onhover": {
                        "enable": true,
                        "mode": "grab"
                    },
                    "onclick": {
                        "enable": true,
                        "mode": "push"
                    },
                    "resize": true
                },
                "modes": {
                    "grab": {
                        "distance": 140,
                        "line_linked": {
                            "opacity": 1
                        }
                    },
                    "bubble": {
                        "distance": 400,
                        "size": 40,
                        "duration": 2,
                        "opacity": 8,
                        "speed": 3
                    },
                    "repulse": {
                        "distance": 200,
                        "duration": 0.4
                    },
                    "push": {
                        "particles_nb": 4
                    },
                    "remove": {
                        "particles_nb": 2
                    }
                }
            },
            "retina_detect": true
        });
        
        // Form Submission
        const form = document.getElementById('form');
        
        form.addEventListener('submit', (e) => {
            e.preventDefault();
            
            // Here you would typically send the form data to a server
            // For demo purposes, we'll just show an alert
            alert('Thank you for your message! I will get back to you soon.');
            form.reset();
        });
        
        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });
    </script>
</body>
</html>

Awesome Portfolio Website

Recommended

Developer Portfolio Page

Fitness Gym Website HTML CSS Template

HTML

CSS

JS

Recommended

Developer Portfolio Page

Fitness Gym Website HTML CSS Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS