Website-Vorlage für Entwicklerportfolio

1910 lebdev

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

29 October 2025

Beispiel für eine HTML- und CSS-Schaltflächenanimation

26 September 2025

CSS-Codeausschnitt für Dopamin-Tropf-Animation

24 August 2025

Tech-Blog: HTML-Vorlage für Technologie und Software

HTML

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

Empfohlen

Beispiel für eine HTML- und CSS-Schaltflächenanimation

CSS-Codeausschnitt für Dopamin-Tropf-Animation

Tech-Blog: HTML-Vorlage für Technologie und Software

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS