Dawid Wróbel - Portfólio de Desenvolvedores Full Stack

Abrir no Editor Publique Seu Código

Recomendado

7 March 2025

Página de login HTML CSS com design de impressão digital

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="styles.css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About Me</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#skills">Skills</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>

<section id="home" class="hero">
        <h1>Dawid Wróbel</h1>
        <p>Full Stack Developer</p>
        <p>I create modern and responsive web applications.</p>
    </section>

<section id="about" class="about">
        <h2>About Me</h2>
        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" alt="Dawid Wróbel">
        <p>I am a technology enthusiast with experience in building web applications. I specialize in full stack development, working on both front-end and back-end.</p>
        <div class="social-links">
            <a href="https://www.linkedin.com/in/dawid-wr%C3%B3bel-106a95281/" target="_blank">LinkedIn</a>
            <a href="https://github.com/IcedSparrow" target="_blank">GitHub</a>
        </div>
    </section>

<section id="projects" class="projects">
        <h2>Projects</h2>
        <div class="project">
            <img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" alt="Project 1">
            <h3>Project 1</h3>
            <p>Description of project 1. Technologies: HTML, CSS, JavaScript.</p>
            <a href="https://github.com" target="_blank">View on GitHub</a>
        </div>
        <div class="project">
            <img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" alt="Project 2">
            <h3>Project 2</h3>
            <p>Description of project 2. Technologies: React, Node.js, MongoDB.</p>
            <a href="https://github.com" target="_blank">View on GitHub</a>
        </div>
    </section>

<section id="skills" class="skills">
        <h2>Skills</h2>
        <ul>
            <li>HTML5</li>
            <li>CSS3</li>
            <li>JavaScript</li>
            <li>React</li>
            <li>Node.js</li>
            <li>Express</li>
            <li>MongoDB</li>
            <li>Git</li>
        </ul>
    </section>

<section id="contact" class="contact">
        <h2>Contact</h2>
        <form id="contact-form">
            <input type="text" placeholder="Name" required>
            <input type="email" placeholder="Email" required>
            <textarea placeholder="Message" required>

CSS

/* Import nowoczesnego fontu */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #ffffff;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Nawigacja */
nav {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px); /* Glassmorphism */
    padding: 15px 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    transition: all 0.3s ease;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 30px;
}

nav ul li a {
    color: #e0e0e0;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    position: relative;
    transition: color 0.3s ease;
}

nav ul li a:hover {
    color: #00ff88; /* Neonowy akcent */
}

nav ul li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background: #00ff88;
    bottom: -5px;
    left: 0;
    transition: width 0.3s ease;
}

nav ul li a:hover::after {
    width: 100%;
}

/* Sekcja powitalna */
.hero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url('https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover;
    position: relative;
    text-align: center;
    animation: fadeIn 1.5s ease-in-out;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.hero h1, .hero p {
    position: relative;
    z-index: 2;
}

.hero h1 {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 20px;
    background: linear-gradient(45deg, #00ff88, #00ddeb);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: slideIn 1s ease;
}

.hero p {
    font-size: 1.5rem;
    max-width: 600px;
    opacity: 0;
    animation: fadeIn 1.5s ease forwards;
    animation-delay: 0.5s;
}

/* Sekcja O mnie */
.about {
    padding: 80px 20px;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    animation: fadeInUp 1s ease;
}

.about img {
    border-radius: 50%;
    width: 200px;
    height: 200px;
    object-fit: cover;
    border: 3px solid #00ff88;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.about img:hover {
    transform: scale(1.1);
}

.about p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 20px auto;
    color: #d0d0d0;
}

.social-links a {
    margin: 0 15px;
    color: #00ff88;
    font-size: 1.1rem;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-links a:hover {
    color: #00ddeb;
    transform: translateY(-3px);
}

/* Sekcja Projekty */
.projects {
    padding: 80px 20px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
}

.projects h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 40px;
    color: #00ff88;
}

.project {
    max-width: 600px;
    margin: 20px auto;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 255, 136, 0.2);
}

.project img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.project h3 {
    font-size: 1.8rem;
    padding: 20px;
    color: #e0e0e0;
}

.project p {
    padding: 0 20px 20px;
    color: #d0d0d0;
}

.project a {
    display: inline-block;
    margin: 0 20px 20px;
    color: #00ff88;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.project a:hover {
    color: #00ddeb;
}

/* Sekcja Umiejętności */
.skills {
    padding: 80px 20px;
    text-align: center;
}

.skills h2 {
    font-size: 2.5rem;
    margin-bottom: 40px;
    color: #00ff88;
}

.skills ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.skills li {
    background: rgba(0, 255, 136, 0.2);
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 1.1rem;
    color: #e0e0e0;
    transition: transform 0.3s ease, background 0.3s ease;
}

.skills li:hover {
    transform: scale(1.1);
    background: #00ff88;
    color: #1a1a2e;
}

/* Sekcja Kontakt */
.contact {
    padding: 80px 20px;
    background: rgba(255, 255, 255, 0.05);
}

.contact h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 40px;
    color: #00ff88;
}

.contact form {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact input, .contact textarea {
    padding: 15px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
    font-size: 1rem;
    transition: background 0.3s ease;
}

.contact input:focus, .contact textarea:focus {
    background: rgba(255, 255, 255, 0.2);
    outline: none;
}

.contact textarea {
    resize: vertical;
    min-height: 150px;
}

.contact button {
    padding: 15px;
    background: #00ff88;
    border: none;
    border-radius: 10px;
    color: #1a1a2e;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}

.contact button:hover {
    background: #00ddeb;
    transform: scale(1.05);
}

/* Animacje */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
    from { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Responsywność */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }

.hero p {
        font-size: 1.2rem;
    }

nav ul {
        flex-direction: column;
        gap: 15px;
    }

.about img {
        width: 150px;
        height: 150px;
    }

.project {
        margin: 20px 10px;
    }
}

/* Styl dla komunikatów formularza */
.form-message {
    margin-top: 10px;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1rem;
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.form-message.success {
    background: rgba(0, 255, 136, 0.2);
    color: #00ff88;
}

.form-message.error {
    background: rgba(255, 82, 82, 0.2);
    color: #ff5252;
}

/* Subtelne podświetlenie pól formularza przy focus */
.contact input:focus, .contact textarea:focus {
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
    background: rgba(255, 255, 255, 0.15);
}

JS

const form = document.getElementById('contact-form');
const formMessage = document.createElement('div'); 
formMessage.classList.add('form-message');
form.appendChild(formMessage);

const showMessage = (message, type) => {
    formMessage.textContent = message;
    formMessage.className = 'form-message'; 
    formMessage.classList.add(type); 
    formMessage.style.opacity = '1';

setTimeout(() => {
        formMessage.style.opacity = '0';
    }, 3000);
};

form.addEventListener('submit', async (event) => {
    event.preventDefault();

const name = form.querySelector('input[placeholder="Name"]').value;
    const email = form.querySelector('input[placeholder="Email"]').value;
    const message = form.querySelector('textarea[placeholder="Message"]').value;

// Walidacja
    const validation = validateForm(name, email, message);
    if (!validation.valid) {
        showMessage(validation.message, 'error');
        return;
    }

const formData = { name, email, message };

try {
        const response = await fetch('https://formspree.io/f/YOUR_FORM_ID', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(formData),
        });

if (response.ok) {
            showMessage('Message sent successfully! I’ll get back to you soon.', 'success');
            form.reset(); 
        } else {
            throw new Error('Failed to send message.');
        }
    } catch (error) {
        showMessage('Something went wrong. Please try again later.', 'error');
    }
});

Dawid Wróbel - Portfólio de Desenvolvedores Full Stack

Recomendado

máquina de garra

Barra de menu horizontal

Página de login HTML CSS com design de impressão digital

HTML

CSS

JS

Recomendado

máquina de garra

Barra de menu horizontal

Página de login HTML CSS com design de impressão digital

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS