Modern Portfolio Website Template

Open In Editor Publish Your Code

</head>
<body>
    <header>
        <div class="container">
            <h1 class="logo">Your Name</h1>
            <nav>
                <ul>
                    <li><a href="#about">About</a></li>
                    <li><a href="#skills">Skills</a></li>
                    <li><a href="#projects">Projects</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

<section id="hero">
        <div class="container">
            <div class="hero-content">
                <h2>Hi, I'm <span class="highlight">Your Name</span></h2>
                <p>Creating immersive web experiences with passion and creativity.</p>
                <a href="#projects" class="cta-button">See My Work</a>
            </div>
            <div class="hero-animation">
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
            </div>
        </div>
    </section>

<section id="about">
        <div class="container">
            <h2>About Me</h2>
            <p>I’m a creative developer with a knack for innovative solutions. I specialize in crafting sleek, user-friendly websites that merge aesthetics with functionality.</p>
        </div>
    </section>

<section id="skills">
        <div class="container">
            <h2>Skills</h2>
            <div class="skills-grid">
                <div class="skill-card">
                    <h3>HTML</h3>
                    <p>Building clean, semantic, and accessible markup.</p>
                </div>
                <div class="skill-card">
                    <h3>CSS</h3>
                    <p>Designing responsive and visually appealing layouts.</p>
                </div>
                <div class="skill-card">
                    <h3>JavaScript</h3>
                    <p>Adding interactivity and functionality.</p>
                </div>
                <div class="skill-card">
                    <h3>React</h3>
                    <p>Creating modern, dynamic web applications.</p>
                </div>
            </div>
        </div>
    </section>

<section id="projects">
        <div class="container">
            <h2>Projects</h2>
            <div class="projects-grid">
                <div class="project-card">
                    <h3>Project 1</h3>
                    <p>A stunning website showcasing sleek animations.</p>
                </div>
                <div class="project-card">
                    <h3>Project 2</h3>
                    <p>A full-stack application with a seamless user interface.</p>
                </div>
                <div class="project-card">
                    <h3>Project 3</h3>
                    <p>An interactive data visualization tool.</p>
                </div>
            </div>
        </div>
    </section>

<section id="contact">
        <div class="container">
            <h2>Contact Me</h2>
            <p>Let’s collaborate to bring your ideas to life!</p>
            <a href="mailto:yourname@example.com" class="cta-button">Get in Touch</a>
        </div>
    </section>

<footer>
        <p>© 2024 Your Name. All rights reserved.</p>
    </footer>
</body>
</html>

CSS

/* General Reset */
body, h1, h2, p, ul, li {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: #444;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Header */
header {
    background: linear-gradient(135deg, #1e3a8a, #6366f1);
    padding: 15px 0;
    color: white;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

header ul {
    list-style: none;
    display: flex;
}

header ul li {
    margin: 0 10px;
}

header ul li a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    transition: color 0.3s;
}

header ul li a:hover {
    color: #d1d5db;
}

/* Hero Section */
#hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 100px 20px;
    text-align: center;
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    color: white;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#hero .highlight {
    color: #ffd700;
}

.hero-content {
    max-width: 800px;
}

.hero-animation {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-animation .circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    animation: float 6s infinite;
}

.hero-animation .circle:nth-child(1) {
    width: 100px;
    height: 100px;
    top: 20%;
    left: 10%;
}

.hero-animation .circle:nth-child(2) {
    width: 150px;
    height: 150px;
    top: 50%;
    right: 20%;
}

.hero-animation .circle:nth-child(3) {
    width: 200px;
    height: 200px;
    bottom: 10%;
    left: 40%;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* About Section */
#about, #skills, #projects, #contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 60px 20px;
    width: 100%;
    max-width: 1200px;
}

#about h2, #skills h2, #projects h2, #contact h2 {
    margin-bottom: 20px;
    font-size: 28px;
    color: #2575fc;
}

#about p {
    max-width: 800px;
}

/* Skills Section */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    width: 100%;
}

.skill-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    text-align: center;
}

.skill-card:hover {
    transform: translateY(-10px);
}

/* Projects Section */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    width: 100%;
}

.project-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    text-align: center;
}

.project-card:hover {
    transform: translateY(-10px);
}

/* Contact Section */
.cta-button {
    display: inline-block;
    padding: 10px 20px;
    background: #6366f1;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;
}

.cta-button:hover {
    background: #4f46e5;
}

/* Footer */
footer {
    background: #1e293b;
    color: white;
    text-align: center;
    padding: 15px 0;
    width: 100%;
}

Modern Portfolio Website Template

Recommended

HTML Portfolio Website with Side Menu

Modern Login Form

HTML Developer Portfolio V2

HTML

CSS

JS

Recommended

HTML Portfolio Website with Side Menu

Modern Login Form

HTML Developer Portfolio V2

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS