Developer Portfolio Website Template

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css">
</head>
<body>
    <main>
        
        <aside>
            <ul class="Links">
                <li onclick="Navigate(0)" class="activeLink">
                    <i class="fa-solid fa-house"></i><p>Dashboard</p>
                </li>
                <li onclick="Navigate(1)">
                    <i class="fa-solid fa-user"></i><p>Profile</p>
                </li>
                <li onclick="Navigate(2)">
                    <i class="fa-solid fa-briefcase"></i><p>Portfolio</p>
                </li>
                <li onclick="Navigate(3)">
                    <i class="fa-solid fa-camera"></i><p>Gallery</p>
                </li>
                <li onclick="Navigate(4)">
                    <i class="fa-solid fa-envelope"></i><p>Contact</p>
                </li>
            </ul>
        </aside>

<div class="swiper mySwiper">
            <div class="SlideContainer swiper-wrapper">
                
                
                <div class="swiper-slide home-slide">
                    <div class="HomeContent">
                        <h1>Hello! I'm <span class="stylized-name">Alex</span>,</h1>
                        <h2>A <span class="professions">Creative Designer</span></h2>
                        <p class="heroline">Passionate about crafting unique digital experiences. With over 7 years in design, I'm here to bring your ideas to life.</p>
                        <div class="buttonGroup">
                            <button>Get in Touch</button>
                            <button>View Portfolio</button>
                        </div>
                    </div>
                    <div class="SideImg">
                        <div class="top-right-corner">
                            <hr class="hr1"><hr class="hr2">
                        </div>
                        <img src="https://picsum.photos/id/238/200/200" alt="Profile Image">
                        <div class="bottom-left-corner">
                            <hr class="hr1"><hr class="hr2">
                        </div>
                    </div>
                    <p class="slide-help">Scroll for more <i class="fa-solid fa-chevron-right fa-shake"></i></p>
                </div>

<div class="swiper-slide about-us">
                    <h1 class="heading">About Me</h1>
                    <h3 class="sub-heading">I'm Alex, <span class="professions">A Creative Designer</span></h3>
                    <p class="aboutme-details">With a background in graphic design and web development, I bring a versatile skill set to any project. From sleek interfaces to powerful websites, my goal is to help brands thrive online.</p>
                    <div class="about-me-division">
                        
                        <div class="about-me-table">
                            <li><span>Experience:</span> 7+ years</li>
                            <li><span>Location:</span> United States</li>
                            <li><span>Availability:</span> Flexible</li>
                            <li><span>Projects Completed:</span> 150+</li>
                            <li><span>Age:</span> 28</li>
                            <li><span>Phone:</span> 987-654-3210</li>
                            <li><span>Languages:</span> HTML, CSS, JavaScript</li>
                            <li><span>Degree:</span> Graphic Design</li>
                            <div class="buttonGroup"><button>Hire Me</button><button>Contact Me</button></div>
                        </div>

<div class="skill-bar">
                            <li><p>HTML</p><div class="bar"><div class="active-bar" style="width:95%"></div></div></li>
                            <li><p>CSS</p><div class="bar"><div class="active-bar" style="width:90%"></div></div></li>
                            <li><p>JavaScript</p><div class="bar"><div class="active-bar" style="width:80%"></div></div></li>
                            <li><p>Photoshop</p><div class="bar"><div class="active-bar" style="width:85%"></div></div></li>
                            <li><p>Illustrator</p><div class="bar"><div class="active-bar" style="width:88%"></div></div></li>
                        </div>
                    </div>
                </div>

<div class="swiper-slide services">
                    <h1 class="heading">Services</h1>
                    <div class="service">
                        <div class="service-icon"><i class="fa-solid fa-laptop-code"></i></div>
                        <h2>UI/UX Design</h2>
                        <p>Crafting intuitive and aesthetic interfaces that engage users effectively.</p>
                    </div>
                    <div class="service">
                        <div class="service-icon"><i class="fa-solid fa-code"></i></div>
                        <h2>Front-End Development</h2>
                        <p>Responsive, fast, and reliable front-end development with modern technologies.</p>
                    </div>
                    <div class="service">
                        <div class="service-icon"><i class="fa-solid fa-search"></i></div>
                        <h2>SEO Optimization</h2>
                        <p>Enhancing website visibility with tailored SEO strategies.</p>
                    </div>
                </div>

<div class="swiper-slide gallery">
                    <h1 class="heading">Gallery</h1>
                    <div class="project"><img src="https://picsum.photos/200/300?random=11" alt="Project 1"></div>
                    <div class="project"><img src="https://picsum.photos/200/300?random=12" alt="Project 2"></div>
                    <div class="project"><img src="https://picsum.photos/200/300?random=13" alt="Project 3"></div>
                    <div class="project"><img src="https://picsum.photos/200/300?random=14" alt="Project 4"></div>
                </div>

<div class="swiper-slide contactMe">
                    <h1 class="heading">Contact</h1>
                    <div class="contactinfo"><i class="fa-solid fa-phone"></i><h3>Phone</h3><p>987-654-3210</p></div>
                    <div class="contactinfo"><i class="fa-solid fa-map-marker-alt"></i><h3>Location</h3><p>New York, USA</p></div>
                    <div class="contactinfo"><i class="fa-regular fa-envelope"></i><h3>Email</h3><p>alex@example.com</p></div>
                    <form>
                        <h2>Send a Message</h2>
                        <input type="text" placeholder="Your Name">
                        <input type="email" placeholder="Your Email">
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>
    <script>
        // JavaScript to initialize Swiper or any other functionality can go here.
    </script>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bonbon&display=swap');

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

body {
    height: 100vh;
}

main {
    display: flex;
    height: 100%;
    width: 100%;
    font-family: Poppins;
}

aside {
    width: 280px;
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: 1.1rem;
    background-color: #2c3e50;
    backdrop-filter: blur(20px);
}

.Links {
    display: flex;
    flex-direction: column;
    margin: auto;
}

aside li {
    list-style-type: none;
    display: flex;
    padding: 20px;
    gap: 10px;
    color: #ecf0f1;
    align-items: center;
    cursor: pointer;
    position: relative;
    transition-duration: 0.2s;
}

aside li:hover {
    color: #3498db;
}

aside li::after {
    position: absolute;
    width: 100%;
    left: 0px;
    height: 1px;
    background: linear-gradient(to left, transparent, #bdc3c7, transparent);
    content: '';
    bottom: 0px;
}

aside li i {
    font-size: 1.3rem;
}

.activeLink {
    color: #3498db;
}

.mySwiper {
    flex: 1;
    height: 100%;
}

.home-slide {
    color: #ecf0f1;
    display: flex;
    background-color: #34495e;
}

.HomeContent {
    margin: auto 0px;
    flex: 1;
    height: auto;
    padding: 100px;
    user-select: none;
}

.SideImg {
    width: 30%;
    margin: auto 10px;
    margin-right: 100px;
    position: relative;
}

.SideImg img {
    width: 100%;
    border-radius: 10px;
}

.SideImg .top-right-corner, .bottom-left-corner {
    position: absolute;
}

.bottom-left-corner {
    left: -50px;
    bottom: -50px;
    rotate: -90deg;
}

.top-right-corner {
    right: -50px;
    top: -50px;
    rotate: 90deg;
}

.hr1 {
    width: 150px;
    height: 10px;
    border: none;
    background: #3498db;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.hr2 {
    width: 10px;
    height: 120px;
    border-bottom-left-radius: 3px;
    background: #3498db;
    border: none;
    border-bottom-right-radius: 3px;
}

.HomeContent h1 {
    font-size: 3em;
    font-weight: 700;
    margin-bottom: 10px;
}

.HomeContent h2 {
    font-size: 2.3em;
    margin-bottom: 10px;
    font-weight: 600;
}

.HomeContent h1 .stylized-name {
    font-weight: 700;
    color: #3498db;
}

.proffesions {
    color: #2980b9;
}

.HomeContent .heroline {
    font-size: 1.5rem;
    font-weight: 300;
    padding-right: 50px;
}

.buttonGroup {
    display: flex;
    padding: 10px 0px;
    margin-top: 10px;
}

.buttonGroup button, .primary {
    padding: 10px 20px;
    border: none;
    outline: none;
    font-size: 1.2rem;
    font-weight: 500;
    margin: 5px;
    cursor: pointer;
    background-color: #2980b9;
    color: #ecf0f1;
    border-radius: 5px;
}

.slide-help {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
    font-weight: 400;
    z-index: 100;
    left: 0%;
    width: 100%;
    box-sizing: border-box;
    font-size: 1.2rem;
}

.mySwiper {
    width: 80vw;
    height: 100vh;
    overflow: hidden;
    background-color: #34495e;
}

.swiper-slide {
    width: 100%;
    background-color: #34495e;
    height: 100%;
}

.about-us {
    width: 100%;
    height: 100%;
    padding: 100px;
    color: #ecf0f1;
}

.heading {
    padding: 20px 10px;
    font-size: 2.5rem;
    color: #3498db;
}

.about-us h3 {
    padding: 10px;
}

.aboutme-details {
    padding: 20px;
    font-weight: 300;
}

.about-me-division {
    display: flex;
}

.about-me-table {
    width: 60%;
    display: grid;
    grid-template-columns: repeat(2, 50%);
}

.about-me-table li {
    padding: 20px;
    position: relative;
}

.about-me-table li::after {
    position: absolute;
    width: 100%;
    left: 0px;
    height: 1px;
    background: linear-gradient(to left, transparent, #bdc3c7, transparent);
    content: '';
    bottom: 0px;
}

.about-me-table span {
    color: #3498db;
    font-weight: bold;
    margin-right: 5px;
}

.about-me-table .buttonGroup {
    grid-column: 1/span 2;
    justify-content: center;
    padding: 50px;
    flex: 1;
}

.skill-bar {
    width: calc(40% - 20px);
}

.skill-bar li {
    width: 100%;
    padding: 10px;
}

.skill-bar p {
    color: #3498db;
    font-weight: bold;
    margin: 10px;
}

.skill-bar .bar {
    width: 100%;
    height: 15px;
    background-color: #2c3e50;
    border-radius: 20px;
}

.active-bar {
    background-color: #3498db;
    height: 100%;
    width: auto;
    border-radius: 20px;
}

.services {
    color: #ecf0f1;
    display: grid;
    grid-template-columns: repeat(3, calc(34% - 10px));
    grid-template-rows: 100px calc(50% - 50px) calc(50% - 50px);
    padding: 100px;
    box-sizing: border-box;
}

.services .heading {
    grid-column: 1/span 3;
}

.services .service {
    display: flex;
    text-align: center;
    justify-content: center;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    margin: 20px;
    backdrop-filter: blur(10px);
    flex-direction: column;
    transition-duration: 0.25s;
}

.services .service i {
    font-size: 3rem;
    color: #3498db;
}

.services .service .service-icon {
    padding: 0px 50px;
    border-radius: 5px;
    margin: 20px auto;
}

.service h2 {
    color: #3498db;
}

.service:hover {
    background-color: #3498db;
    color: #2c3e50;
}

.service:hover h2, .service:hover i {
    color: #2c3e50;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 33%);
    padding: 100px;
    grid-template-rows: 100px calc(50% - 50px) calc(50% - 50px);
}

.gallery h1, .gallery h2 {
    grid-column: 1/span 3;
}

.gallery h2 {
    color: #ecf0f1;
    font-weight: 600;
    font-size: 1.5rem;
    padding: 20px 10px;
}

.gallery .project {
    margin: 25px 20px;
    margin-top: 0px;
    background: #2c3e50;
    padding: 5px;
    border-radius: 20px;
}

.gallery .project img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
    border: none;
}

.contactMe {
    display: grid;
    grid-template-columns: 20% 80%;
    grid-template-rows: 80px calc(25% - 20px) calc(25% - 20px) calc(25% - 20px) calc(25% - 20px);
    position: relative;
    padding: 100px;
}

.contactMe h1 {
    grid-column: 1/span 3;
    font-size: 2.5rem;
    padding: 30px;
}

.contactMe form {
    grid-area: 2/2/ span 5/span 2;
}

.contactinfo {
    display: flex;
    flex-direction: column;
    padding: 10px;
    color: #ecf0f1;
    justify-content: center;
    text-align: center;
    align-items: center;
}

.contactinfo i {
    padding: 10px;
    font-size: 2.5rem;
    color: #3498db;
    margin: 20px auto;
}

.contactinfo h3 {
    color: #3498db;
}

.contactMe form {
    display: grid;
    grid-template-columns: 50% 50%;
    width: 100%;
    padding: 20px;
    height: fit-content;
    color: #ecf0f1;
}

.contactMe form h2 {
    grid-column: 1/span 2;
    padding: 20px;
    display: flex;
}

.contactMe form input {
    padding: 15px;
    border-radius: 10px;
    margin: 20px;
    font-size: 1.1rem;
    border: none;
    color: #ecf0f1;
    background-color: #2c3e50;
}

.contactMe form input:focus {
    border: 1px solid #2980b9;
    outline: none;
}

.contactMe form textarea {
    width: calc(100% - 40px);
    grid-column: 1/span 2;
    margin: 20px;
    padding: 20px;
    font-size: 1.1rem;
    border-radius: 10px;
    resize: none;
    border: none;
    color: #ecf0f1;
    background-color: #2c3e50;
}

.contactMe form textarea:focus {
    border: 1px solid #2980b9 !important;
}

.contactMe button {
    grid-column: 1/span 2;
    margin: 20px auto;
}

footer {
    position: absolute;
    bottom: 0px;
    right: 0px;
    text-align: center;
    color: #ecf0f1;
    width: 100%;
    font-weight: 200;
    font-size: 0.8rem;
}

footer li {
    padding: 10px;
}

form h2 .SocialLinks {
    padding: 5px;
    width: fit-content;
    margin-left: auto;
    margin-right: 10px;
    background-color: #2c3e50;
    border-radius: 30px;
}

form h2 .SocialLinks i {
    padding: 10px;
    border-radius: 50%;
    transition-duration: 0.25s;
}

form h2 .SocialLinks i:hover {
    background-color: #2980b9;
}

.about-us {
    overflow: auto;
}

Developer Portfolio Website Template

Recommended

Couture Atelier Dashboard HTML Template

Portfolio Webpage Example

HTML CSS Portfolio Website Template

HTML

CSS

JS

Recommended

Couture Atelier Dashboard HTML Template

Portfolio Webpage Example

HTML CSS Portfolio Website Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS