Página de destino do portfólio

371 zegarkidawida

Abrir no Editor Publique Seu Código Precisa de um site?

Página de destino do portfólio

Recomendado

17 May 2025

MÚSICA

11 December 2024

Botão Hover

28 June 2025

Navegação da barra lateral HTML do painel OMIC EST

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