Portfolio Landing Page

1,368 zegarkidawida

Open In Editor Publish Your Code

Portfolio Landing Page

Recommended

15 September 2024

10 September 2024

Rock, Paper, Schissor V.2

22 November 2025

Liquid Glass Login Form HTML CSS

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});