Página de destino do portfólio

1020 zegarkidawida

Abrir no Editor Video Publique Seu Código

Página de destino do portfólio

Recomendado

24 May 2025

financeiro

12 October 2025

Estrutura HTML de animação de carregamento CSS

14 September 2024

Alternar Olho do Minion

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