पोर्टफोलियो सामान्य (चरण दर चरण)

अनुशंसित

4 November 2024

पोर्टफोलियो साइट के लिए मुखपृष्ठ

28 July 2024

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfólio</title>
    <link rel="stylesheet" href="styles.css">
    <head>
        
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    </head>

<body>
        <header>
            <h1>Meu Portfólio</h1>
            <nav>
                <ul>
                    <li><a href="#sobre">Sobre</a></li>
                    <li><a href="#projetos">Projetos</a></li>
                    <li><a href="#contato">Contato</a></li>
                </ul>
            </nav>
            <i id="toggle-theme" class="fas fa-adjust theme-icon"></i>
        </header>
        
    </body>

<section id="sobre">
        <h2>Sobre Mim</h2>
        <p>Descrição sobre você e suas habilidades.</p>
    </section>

<section id="projetos">
        <h2>Projetos</h2>
        <div class="projetos-container">
            
            <div class="projeto" data-category="web">
                <img src="https://cdn.discordapp.com/attachments/1277796210916462645/1289764974872498318/Moletom.png?ex=671eecbc&is=671d9b3c&hm=7a5fe7af545d6cd7229d9787538bc5b4fe9b3c40579a2a2b528c949b53d7bd18&" alt="Projeto 1">
                <h3>Projeto 1</h3>
                <p>Descrição do projeto 1.</p>
            </div>
            
            <div class="projeto" data-category="web">
                <img src="https://cdn.discordapp.com/attachments/1277796210916462645/1289764882199220234/Mackbook_Pro.png?ex=671eeca6&is=671d9b26&hm=f29756222fbf5aa18a6fcfcf1a54c286f44e8a21025e65c803d22cf9e3fae8ea&" alt="Projeto 2">
                <h3>Projeto 2</h3>
                <p>Descrição do projeto 2.</p>
            </div>
            
            <div class="projeto" data-category="web">
                <img src="https://cdn.discordapp.com/attachments/1277796210916462645/1289764869255598101/GARRAFA_3.png?ex=671eeca3&is=671d9b23&hm=976674f0d9011e00106a1cc9cf51bf82caaad0f885e13079a30680b3f6dab80b&" alt="Projeto 3">
                <h3>Projeto 3</h3>
                <p>Descrição do projeto 3.</p>
            </div>
            
        </div>
    </section>

<section id="contato">
        <section id="contato">
            <h2>Contato</h2>
            <a href="https://example.com/contact" class="contato-button">
                <i class="fas fa-envelope"></i> 
            </a>
        </section>
    </section>

CSS

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

:root {
    --primary-color: #111321; /* Yellow for primary elements */
    --background-color: #b4a196; /* Light brown background */
    --text-color: #111321; /* Dark text color */
    --project-background-color: #BAC2FE; /* Light blue for project backgrounds */
    --button-background-color: #fff; /* White button color for light mode */
    --button-text-color: #111321; /* Dark text color for light mode */
}

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-color);
}

header {
    background-color: var(--primary-color);
    color: #fff;
    padding: 10px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.55);
    position: relative;
    border-radius: 30px; /* Rounded corners */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    margin-top: 7px; /* Add margin to move the header down */
}

header:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

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

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    transition: border-bottom 0.3s;
    position: relative;
}

nav ul li a::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #fff;
    transition: width 0.3s;
    position: absolute;
    bottom: -2px;
    left: 0;
}

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

#banner img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

section {
    padding: 40px 20px;
    text-align: center;
}

.categorias {
    margin: 20px 0;
    text-align: center;
}

.categoria {
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.2s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.categoria:hover {
    background-color: #e68900;
    transform: translateY(-3px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.projetos-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.projeto {
    margin: 10px;
    padding: 20px;
    width: 250px;
    background-color: var(--project-background-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.55); /* Sombra leve */
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    position: relative;
    overflow: hidden;
    transform: translateY(10px);
    opacity: 0;
    animation: fadeInUp 0.5s forwards;
    animation-delay: calc(var(--i) * 0.1s);
}

.projeto:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.projeto::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    border: 2px solid transparent;
    box-sizing: border-box;
    transition: border-color 0.4s ease;
}

.projeto:hover::before {
    border-color: var(--highlight-color, rgb(161, 161, 161)); /* Borda laranja */
    animation: borderExplosion 1s ease forwards;
}

/* Efeito de explosão da borda */
@keyframes borderExplosion {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); /* Começo da explosão */
    }
    50% {
        box-shadow: 0 0 10px 10px rgba(190, 190, 190, 0.2); /* Expansão */
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 165, 0, 0); /* Retorno */
    }
}

.projeto::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.15), transparent 70%);
    transform: scale(0);
    transition: transform 0.5s ease;
    border-radius: 50%;
    opacity: 0;
}

.projeto:hover::after {
    transform: scale(1.3); /* Brilho suave */
    opacity: 1;
}

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

footer {
    background-color: var(--primary-color);
    color: #fff;
    text-align: center;
    padding: 20px;
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
}

/* Tema escuro */
body.dark-mode {
    --background-color: #2B2B2B; /* Dark gray background */
    --text-color: #FFFFFF; /* White text color */
    --project-background-color: #2B2B2B; /* Dark gray for project backgrounds */
    --button-background-color: #2B2B2B; /* Dark gray button background */
    --button-text-color: #FFFFFF; /* White button text color */
    --primary-color: #25D162; /* Green for primary elements */
}

.theme-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    font-size: 24px;
    color: #fff;
    transition: color 0.3s;
}

.theme-icon:hover {
    color: var(--primary-color);
}

.projeto img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 10px;
}

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

.contato-button {
    position: relative;
    background-color: var(--button-background-color);
    color: var(--button-text-color);
    border: none;
    padding: 15px 30px;
    margin: 20px 0;
    cursor: pointer;
    border-radius: 25px;
    font-size: 16px;
    font-weight: bold;
    overflow: hidden;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.contato-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 25px;
    box-sizing: border-box;
    border: 2px solid var(--primary-color);
    transform: scale(1);
    opacity: 1;
    animation: pulseBorder 2s infinite;
}

@keyframes pulseBorder {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.0;
    }
}

@keyframes blinkEffect {
    0%, 100% {
        background-color: var(--button-background-color);
    }
    50% {
        background-color: var(--button-background-color-hover);
    }
}

.contato-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    animation: blinkEffect 1.5s infinite;
}

पोर्टफोलियो सामान्य (चरण दर चरण)

अनुशंसित

पोर्टफोलियो साइट के लिए मुखपृष्ठ

आवश्यक पोर्टफोलियो

पोर्टफोलियो वेबपेज उदाहरण

HTML

CSS

JS

अनुशंसित

पोर्टफोलियो साइट के लिए मुखपृष्ठ

आवश्यक पोर्टफोलियो

पोर्टफोलियो वेबपेज उदाहरण

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS