Portfolio Landing Page

864 zegarkidawida

Open In Editor Publish Your Code

Portfolio Landing Page

Recommended

26 December 2024

A Code by pan4o

29 December 2024

A Code by wsss

27 November 2024

Button Hover

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dawid Wróbel - Portfolio</title>
    <link rel="stylesheet" href="style.css">
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
    <header class="l-header">
        <nav class="nav bd-grid">
            <div>
                <a href="#" class="nav-logo">Dawid Wróbel</a>
            </div>
        <div class="nav-menu" id="nav-menu">
            <ul class="nav-list">
                <li class="nav-item"><a href="#home" class="nav-link active">Home</a></li>
                <li class="nav-item"><a href="#about" class="nav-link">About</a></li>
                <li class="nav-item"><a href="#skills" class="nav-link">Skills</a></li>
                <li class="nav-item"><a href="#portfolio" class="nav-link">Portfolio</a></li>
                <li class="nav-item"><a href="#contact" class="nav-link">Contact</a></li>
            </ul>
        </div>

<div class="nav-toggle" id="nav-toggle">
            <i class='bx bx-menu'></i>
        </div>
    </nav>
</header>

<main class="l-main">
    <section class="home" id="home">
        <div class="home-container bd-grid">
            <h1 class="home-title"><span>HE</span><br>LLO</h1>

<div class="home-scroll">
                <a href="#about" class="home-scroll-link"><i class='bx bx-up-arrow-alt' ></i>SCROLL DOWN</a>
            </div>

<img src="https://i.postimg.cc/x8js2KnT/perfil.png" alt="Dawid Wróbel" class="home-img">
        </div>
    </section>
    <section class="about section" id="about">
        <h2 class="section-title">About</h2>

<div class="about-container bd-grid">
            <div class="about-img">
                <img src="https://i.postimg.cc/x8js2KnT/perfil.png" alt="Dawid Wróbel image">
            </div>

<div>
                <h2 class="about-subtitle">I'm Dawid Wróbel</h2>
                <span class="about-profession">Front-end Developer & Flutter Mobile/Game Developer</span>
                <p class="about-text">As a passionate Front-end developer, I specialize in creating visually appealing and user-friendly websites. Additionally, I develop mobile applications and games using Flutter, bringing seamless and engaging experiences to users.</p>

<div class="about-social">
                    <a href="#" class="about-social-icon"><i class='bx bxl-linkedin'></i></a>
                    <a href="#" class="about-social-icon"><i class='bx bxl-github'></i></a>
                    <a href="#" class="about-social-icon"><i class='bx bxl-instagram'></i></a>
                </div>
            </div>   
        </div>
    </section>

<section class="skills section" id="skills">
        <h2 class="section-title">Skills</h2>

<div class="skills-container bd-grid">
            <div class="skills-box">
                <h3 class="skils-subtitle">Development</h3>

<span class="skills-name">HTML</span>
                <span class="skills-name">CSS</span>
                <span class="skills-name">JAVASCRIPT</span>
                <span class="skills-name">SCSS</span>
                <span class="skills-name">REACT</span>
                <span class="skills-name">VUE</span>
                <span class="skills-name">FLUTTER</span>

<h3 class="skils-subtitle">Design</h3>

<span class="skills-name">FIGMA</span>
                <span class="skills-name">ADOBE XD</span>
                <span class="skills-name">PHOTOSHOP</span>
            </div>

<div class="skills-img">
                <img src="https://i.postimg.cc/fL7Z1bFw/skill.jpg" alt="skills image">
            </div>
        </div>
    </section>

<section class="portfolio section" id="portfolio">
        <h2 class="section-title">Portfolio</h2>

<div class="portfolio-container bd-grid">
            <div class="portfolio-img">
                <img src="https://i.postimg.cc/c4LgMqgK/work1.jpg" alt="work image">

<div class="portfolio-link">
                    <a href="#" class="portfolio-link-name">View Details</a>
                </div>
            </div>

<div class="portfolio-img">
                <img src="https://i.postimg.cc/CxZRXj4S/work2.jpg" alt="work image">

<div class="portfolio-link">
                    <a href="#" class="portfolio-link-name">View Details</a>
                </div>
            </div>

<div class="portfolio-img">
                <img src="https://i.postimg.cc/wjS1p7WJ/work3.jpg" alt="work image">

<div class="portfolio-link">
                    <a href="#" class="portfolio-link-name">View Details</a>
                </div>
            </div>

<div class="portfolio-img">
                <img src="https://i.postimg.cc/N0m5fBVn/work4.jpg" alt="work image">

<div class="portfolio-link">
                    <a href="#" class="portfolio-link-name">View Details</a>
                </div>
            </div>

<div class="portfolio-img">
                <img src="https://i.postimg.cc/vHTTxWkf/work5.jpg" alt="work image">

<div class="portfolio-link">
                    <a href="#" class="portfolio-link-name">View Details</a>
                </div>
            </div>

<div class="portfolio-img">
                <img src="https://i.postimg.cc/cHT1rHcF/work6.jpg" alt="work image">

<div class="portfolio-link">
                    <a href="#" class="portfolio-link-name">View Details</a>
                </div>
            </div>

</div>
    </section>

<section class="contact section" id="contact">
        <h2 class="section-title">Contact</h2>

<div class="contact-container bd-grid">
            <div class="contact-info">
                <h3 class="contact-subtitle">EMAIL</h3>
                <span class="contact-text">info.mail.com</span>

<h3 class="contact-subtitle">PHONE</h3>
                <span class="contact-text">+48 123-456-789</span>

<h3 class="contact-subtitle">ADDRESS</h3>
                <span class="contact-text">Poland</span>
            </div>

<form action="" class="contact-form">
                <div class="contact-inputs">
                    <input type="text" placeholder="Name" class="contact-input">
                    <input type="email" placeholder="Email" class="contact-input">
                </div>

<input name="" id="" cols="0" rows="10" class="contact-input" />

<input type="submit" value="Send" class="contact-button">
            </form>
        </div>
    </section>

</main>

<footer class="footer section">
    <div class="footer-container bd-grid">
        <div class="footer-data">
            <h2 class="footer-title">Dawid Wróbel</h2>
            <p class="footer-text">I'm Dawid Wróbel and this is my personal website</p>
        </div>

<div class="footer-data">
            <h2 class="footer-title">Dawid Wróbel</h2>
            <ul>
                <li><a href="#home" class="footer-link">Home</a></li>
                <li><a href="#about" class="footer-link">About</a></li>
                <li><a href="#skills" class="footer-link">Skills</a></li>
                <li><a href="#portfolio" class="footer-link">Portfolio</a></li>
                <li><a href="#contact" class="footer-link">Contact</a></li>
            </ul>
        </div>

<div class="footer-data">
            <h2 class="footer-title">FOLLOW</h2>

<a href="#" class="footer-social"><i class='bx bxl-instagram'></i></a>
            <a href="#" class="footer-social"><i class='bx bxl-facebook'></i></a>
            <a href="#" class="footer-social"><i class='bx bxl-twitter'></i></a>
        </div>
    </div>
</footer>

<script src="https://unpkg.com/scrollreveal"></script>
<script src="main.js"></script>

</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

:root {
    --header-height: 4rem;
    --font-regular: 400;
    --font-medium: 500;
    --font-bold: 600;

/* Updated color palette for 2025 trends */
    --primary-color: #6B48FF; /* Vibrant purple */
    --primary-gradient: linear-gradient(135deg, #6B48FF 0%, #00DDEB 100%);
    --secondary-color: #1E2A44; /* Deep navy */
    --text-color: #4A5568; /* Neutral gray */
    --white-color: #FFFFFF;
    --light-bg: #F7F9FC;
    --accent-color: #FF6B6B; /* Coral accent for highlights */

--body-font: 'Poppins', sans-serif;
    --heading-font: 'Inter', sans-serif;
    --big-font-size: 5rem;
    --h1-font-size: 2.5rem;
    --h2-font-size: 1.75rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;

--mb-1: .5rem;
    --mb-2: 1rem;
    --mb-3: 1.5rem;
    --mb-4: 2rem;
    --mb-6: 3rem;

--z-fixed: 100;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-blur: blur(8px);
}

@media screen and (min-width: 768px) {
    :root {
        --big-font-size: 8rem;
        --h1-font-size: 3.5rem;
        --h2-font-size: 2.25rem;
        --normal-font-size: 1.1rem;
        --small-font-size: .938rem;
    }
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: var(--header-height) 0 0 0;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    font-weight: var(--font-regular);
    color: var(--text-color);
    line-height: 1.7;
    background-color: var(--light-bg);
}

h1, h2, h3, p {
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--text-color);
    transition: color 0.3s ease;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.section {
    padding: 4rem 0;
}

.section-title {
    font-family: var(--heading-font);
    font-size: var(--h2-font-size);
    font-weight: var(--font-bold);
    color: var(--secondary-color);
    text-align: center;
    margin-bottom: var(--mb-6);
    position: relative;
}

.section-title::after {
    content: '';
    width: 50px;
    height: 4px;
    background: var(--primary-gradient);
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
}

.bd-grid {
    max-width: 1200px;
    display: grid;
    grid-template-columns: 100%;
    gap: 2rem;
    width: calc(100% - 2rem);
    margin-left: auto;
    margin-right: auto;
}

/* HEADER */
.l-header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-fixed);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow);
    transition: background 0.3s ease;
}

.nav {
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.5rem;
}

.nav-logo {
    font-family: var(--heading-font);
    font-size: var(--h2-font-size);
    font-weight: var(--font-bold);
    color: var(--white-color);
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-item {
    margin-bottom: var(--mb-3);
}

.nav-link {
    font-family: var(--body-font);
    font-weight: var(--font-medium);
    color: var(--white-color);
    position: relative;
    padding: 0.5rem;
    transition: transform 0.3s ease, color 0.3s ease;
}

.nav-link:hover {
    color: var(--accent-color);
    transform: translateY(-2px);
}

.active::after {
    content: '';
    width: 100%;
    height: 3px;
    background: var(--primary-gradient);
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 2px;
}

.nav-toggle {
    color: var(--white-color);
    font-size: 1.8rem;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    .nav-menu {
        position: fixed;
        top: var(--header-height);
        right: -100%;
        width: 80%;
        height: 100%;
        padding: 2rem;
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur);
        box-shadow: var(--shadow);
        transition: right 0.5s ease-in-out;
    }

.show {
        right: 0;
    }
}

/* HOME */
.home {
    position: relative;
    background: var(--primary-gradient);
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.home-container {
    height: calc(100vh - var(--header-height));
    display: grid;
    align-content: center;
    gap: 3rem;
}

.home-title {
    font-family: var(--heading-font);
    font-size: var(--big-font-size);
    font-weight: var(--font-bold);
    color: var(--white-color);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.home-title span {
    display: block;
    font-size: 0.7em;
}

.home-scroll {
    padding-bottom: var(--mb-4);
}

.home-scroll-link {
    font-family: var(--body-font);
    font-size: var(--small-font-size);
    color: var(--white-color);
    writing-mode: vertical-lr;
    transform: rotate(-180deg);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.3s ease;
}

.home-scroll-link:hover {
    color: var(--accent-color);
}

.home-img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 350px;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
    transition: transform 0.5s ease;
}

.home-img:hover {
    transform: scale(1.05);
}

/* ABOUT */
.about-container {
    gap: 2rem;
    text-align: center;
    padding: 2rem 0;
}

.about-img {
    width: 150px;
    height: 150px;
    background: var(--white-color);
    border-radius: 50%;
    overflow: hidden;
    box-shadow: var(--shadow);
    margin: 0 auto;
}

.about-img img {
    width: 120px;
    margin: 15px;
}

.about-subtitle {
    font-family: var(--heading-font);
    font-size: var(--h1-font-size);
    color: var(--secondary-color);
    margin-bottom: var(--mb-2);
}

.about-profession {
    display: block;
    font-size: var(--normal-font-size);
    color: var(--accent-color);
    margin-bottom: var(--mb-3);
}

.about-text {
    max-width: 600px;
    margin: 0 auto var(--mb-4);
}

.about-social-icon {
    font-size: 1.6rem;
    margin: 0 var(--mb-2);
    color: var(--text-color);
    transition: color 0.3s ease, transform 0.3s ease;
}

.about-social-icon:hover {
    color: var(--primary-color);
    transform: translateY(-3px);
}

/* SKILLS */
.skills-container {
    gap: 2rem;
}

.skills-subtitle {
    font-family: var(--heading-font);
    font-size: var(--h2-font-size);
    color: var(--primary-color);
    margin-bottom: var(--mb-3);
}

.skills-name {
    display: inline-block;
    font-size: var(--small-font-size);
    font-weight: var(--font-medium);
    padding: 0.75rem 1.25rem;
    margin: 0 var(--mb-2) var(--mb-3) 0;
    border-radius: 1rem;
    background: var(--white-color);
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, background 0.3s ease;
}

.skills-name:hover {
    background: var(--primary-gradient);
    color: var(--white-color);
    transform: translateY(-3px);
}

.skills-img img {
    border-radius: 1rem;
    box-shadow: var(--shadow);
}

/* PORTFOLIO */
.portfolio {
    background-color: var(--white-color);
}

.portfolio-container {
    gap: 2rem;
}

.portfolio-img {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease;
}

.portfolio-img:hover {
    transform: translateY(-5px);
}

.portfolio-img img {
    border-radius: 1rem;
}

.portfolio-link {
    position: absolute;
    bottom: -100%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border-radius: 1rem;
    transition: bottom 0.4s ease;
}

.portfolio-img:hover .portfolio-link {
    bottom: 0;
}

.portfolio-link-name {
    font-family: var(--body-font);
    font-weight: var(--font-medium);
    color: var(--white-color);
    background: var(--primary-gradient);
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    transition: transform 0.3s ease;
}

.portfolio-link-name:hover {
    transform: scale(1.05);
}

/* CONTACT */
.contact-container {
    gap: 2rem;
}

.contact-subtitle {
    font-family: var(--heading-font);
    font-size: var(--normal-font-size);
    color: var(--primary-color);
}

.contact-text {
    font-size: var(--small-font-size);
    margin-bottom: var(--mb-2);
}

.contact-inputs {
    gap: 1rem;
}

.contact-input {
    width: 100%;
    padding: 1rem;
    border: none;
    border-radius: 0.5rem;
    background: var(--white-color);
    box-shadow: var(--shadow);
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    transition: box-shadow 0.3s ease;
}

.contact-input:focus {
    box-shadow: 0 0 10px rgba(107, 72, 255, 0.3);
}

.contact-button {
    background: var(--primary-gradient);
    color: var(--white-color);
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    border: none;
    font-family: var(--body-font);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.contact-button:hover {
    transform: translateY(-3px);
}

/* FOOTER */
.footer {
    background: var(--secondary-color);
    padding: 3rem 0;
}

.footer-container {
    gap: 2rem;
}

.footer-title {
    font-family: var(--heading-font);
    font-size: var(--h2-font-size);
    color: var(--white-color);
    margin-bottom: var(--mb-2);
}

.footer-text {
    color: var(--white-color);
    opacity: 0.8;
}

.footer-link {
    color: var(--white-color);
    padding: 0.5rem 0;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: var(--accent-color);
}

.footer-social {
    font-size: 1.6rem;
    margin-right: var(--mb-2);
    color: var(--white-color);
    transition: color 0.3s ease, transform 0.3s ease;
}

.footer-social:hover {
    color: var(--accent-color);
    transform: translateY(-3px);
}

/* MEDIA QUERIES */
@media screen and (min-width: 768px) {
    body {
        margin: 0;
    }

.section {
        padding-top: 6rem;
    }

.section-title {
        margin-bottom: var(--mb-6);
    }

.section-title::after {
        width: 80px;
    }

.nav {
        height: calc(var(--header-height) + 1rem);
    }

.nav-list {
        display: flex;
        gap: 2rem;
    }

.nav-item {
        margin: 0;
    }

.nav-toggle {
        display: none;
    }

.nav-link {
        color: var(--white-color);
    }

.nav-link:hover {
        color: var(--accent-color);
    }

.active::after {
        background: var(--primary-gradient);
    }

.home-container {
        height: 100vh;
        grid-template-rows: 1.5fr 1fr;
        gap: 0;
    }

.home-img {
        width: 500px;
        right: 5%;
    }

.about-container {
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        text-align: left;
        padding: 4rem 0;
    }

.about-img {
        width: 200px;
        height: 200px;
    }

.about-img img {
        width: 160px;
        margin: 20px;
    }

.skills-container {
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
    }

.portfolio-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

.contact-container {
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
    }

.contact-form {
        width: 450px;
    }

.footer-container {
        grid-template-columns: repeat(3, 1fr);
        justify-items: center;
    }
}

@media screen and (min-width: 1024px) {
    .bd-grid {
        margin-left: auto;
        margin-right: auto;
        width: calc(100% - 4rem);
        max-width: 1400px;
    }

.home-img {
        width: 600px;
    }
}

@media screen and (min-width: 1440px) {
    :root {
        --big-font-size: 10rem;
        --h1-font-size: 4rem;
        --h2-font-size: 2.5rem;
    }
}

JS

//Activating Mobile Menu

const showMenu = (toggleId, navId) => {
    const toggle = document.getElementById(toggleId);
    const nav = document.getElementById(navId);

if(toggle && nav) {
        toggle.addEventListener('click', () => {
            nav.classList.toggle('show');
        })
    }
}

showMenu('nav-toggle', 'nav-menu');

//Toggling Menu by clicking in mobile menu links

const navLink = document.querySelectorAll('.nav-link');

function linkAction() {
    navLink.forEach(n => n.classList.remove('active'));
    this.classList.add('active');

const navMenu = document.getElementById('nav-menu');
    navMenu.classList.remove('show');
}

navLink.forEach(n => n.addEventListener('click', linkAction));

// Changing Active Menu section while scrolling

const sections = document.querySelectorAll('section[id]');
window.addEventListener('scroll', scrollActive);

function scrollActive() {
    const scrollY = window.pageYOffset;

sections.forEach(current => {
        const sectionHeight = current.offsetHeight;
        const sectionTop = current.offsetTop - 50;
        const sectionId = current.getAttribute('id');

if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){
            document.querySelector('.nav-menu a[href*=' + sectionId + ']').classList.add('active');
        } else {
            document.querySelector('.nav-menu a[href*=' + sectionId + ']').classList.remove('active');
        }
    })
}

// Scroll Reveal Settings

const sr = ScrollReveal({
    origin: 'top',
    distance: '80px',
    duration: 2000,
    reset: true
})

sr.reveal('.home-title', {});
sr.reveal('.home-scroll', {delay: 200});
sr.reveal('.home-img', {origin: 'right', delay: 400 });

sr.reveal('.about-img', {delay: 500});
sr.reveal('.about-subtitle', {delay: 300});
sr.reveal('.about-profession', {delay: 400});
sr.reveal('.about-text', {delay: 500});
sr.reveal('.about-social-icon', {delay: 600, interval: 200});

sr.reveal('.skills-subtitle', {});
sr.reveal('.skills-name', {distance: '20px', delay: 50, interval: 100});
sr.reveal('.skills-img', {delay: 400});

sr.reveal('.portfolio-img', {interval: 200});

sr.reveal('.contact-subtitle', {});
sr.reveal('.contact-text', {interval: 200});
sr.reveal('.contact-input', {delay: 400});
sr.reveal('.contact-button', {delay: 600});