🔥🤯 使用 HTML、CSS 和 JS 的精彩作品集网站。您可能会发现有用的视频教程代码文章，分享现场演示有什么问题，aleman 先生？

2025-05-28

🔥🤯 使用 HTML、CSS 和 JS 的惊人的投资组合网站。

视频教程

代码

您可能觉得有用的文章

分享现场演示有什么问题吗，aleman 先生？

无论您是初学者还是专业人士，本博客都适合您，致力于打造出众作品集。在本教程中，您将学习如何使用 HTML、CSS 和 JS 创建您自己的现代化作品集网站。在本文中，您将学习如何在导航栏上创建流畅的过渡效果，创建 CSS 时间轴来展示您的教育背景和经验，以及如何为您的项目创建一个带有炫酷悬停效果的独立版块。您必须制作这样的作品集来打动您的招聘人员。

那么，别再浪费时间了，我们开始吧。想要查看项目演示或更好地理解代码，您可以观看下面的教程。

视频教程

如果您能订阅我的 YouTube 频道来支持我，我将不胜感激。

源代码

代码

那么，我们先从制作网站的导航栏开始吧。在此之前，你应该了解一下我们的文件和文件夹。

作品集网站 - 文件夹结构

您可以在此处下载图像。

导航栏

那么，让我们开始吧。要创建导航栏，首先要编写 HTML 基本模板、链接style.css和app.js文件到index.html文件。完成所有这些后，就可以创建导航栏了。



<!-- navbar -->
<nav class="navbar">
    <ul class="link-group">
        <li class="link active"><a href="#">home</a></li>
        <li class="link"><a href="#">projects</a></li>
        <li class="link"><a href="#">about</a></li>
        <li class="link"><a href="#">contact</a></li>
    </ul>
</nav>
Enter fullscreen mode Exit fullscreen mode

好的，我们已经完成了 HTMl，因此也为其添加一些样式。



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

body{
    width: 100%;
    max-width: 1400px;
    display: block;
    margin: auto;
    min-height: 100vh;
    background: #191919;
    font-family: sans-serif;
}

.navbar{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9;
    background: #1a1a1a;
}

.link-group{
    list-style: none;
    display: flex;
}

.link a{
    color: #fff;
    opacity: 0.5;
    text-decoration: none;
    text-transform: capitalize;
    padding: 10px 30px;
    margin: 0 20px;
    line-height: 80px;
    transition: .5s;
    font-size: 20px;
}

.link a:hover, .link.active a{
    opacity: 1;
}
Enter fullscreen mode Exit fullscreen mode

完成此操作后，您可能会看到类似这样的内容。

作品集网站 - 导航栏

好的，导航栏就完成了。接下来我们进入主页部分

主页部分

要在导航栏元素之后创建主页部分代码，请遵循以下 HTML 结构。



<!-- home section -->

<section class="home-section active">
    <h1 class="hero-heading">hello, i am <br> kunaal</h1>
    <img src="img/home.png" class="home-img" alt="">
</section>
Enter fullscreen mode Exit fullscreen mode

并赋予它一些风格。



.home-section{
    width: 100%;
    height: 100vh;
    padding: 0 150px;
    display: flex;
    align-items: center;
    position: relative;
    top: 0;
    opacity: 0;
    transition: 1s;
}

.hero-heading{
    color: #fff;
    font-size: 120px;
    text-transform: capitalize;
    font-weight: 300;
}

.home-img{
    position: absolute;
    top: 0;
    right: 0;
    height: 100vh;
    width: 50%;
    object-fit: cover;
    opacity: 0.2;
}
Enter fullscreen mode Exit fullscreen mode

如果您查看上面的代码，您将在 下方看到position: relative和。这些属性在导航时非常重要，因为我们的导航工作原理有点复杂。我们所有的部分（主页、项目、关于、联系）都将具有，因此所有部分都将彼此叠加。我们将使用类来指示活动部分。使用类，我们将部分的位置设置为 相对 ，并将其不透明度设置为 1。这就是我们的导航工作原理。是不是很复杂？top: 0.home-sectionposition: fixedactiveactive

输出

输出

因此，一旦您完成了主页部分，请确保将其位置更改为fixed相对。



.home-section{
    /* previous styles */
    position: fixed;
}
Enter fullscreen mode Exit fullscreen mode

然后制作active班级风格。



.home-section.active,
.project-section.active,
.about-section.active,
.contact-section.active{
    position: relative;
    opacity: 1;
    z-index: 8;
}
Enter fullscreen mode Exit fullscreen mode

您可以看到，为了实现顺畅的导航，我在这里添加了每一个部分。

项目部分

现在，我们来创建项目部分。代码如下：



<!-- project section -->
<section class="project-section">
    <h1 class="project-heading">some of my projects</h1>
    <div class="project-container">
        <div class="project-card">
            <img src="img/project-1.png" class="project-img" alt="">
            <div class="project-content">
                <h1 class="project-title">project 01</h1>
                <p class="project-info">
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Impedit vitae delectus cumque repudiandae aliquam optio accusamus natus nobis! Nam, sunt?
                </p>
                <div class="project-btn-grp">
                    <button class="project-btn github">github repo</button>
                    <button class="project-btn live">see live</button>
                </div>
            </div>
        </div>
        // +3 more cards
    </div>
</section>
Enter fullscreen mode Exit fullscreen mode

也设计它。



/* project-section */

.project-section{
    width: 100%;
    min-height: 100vh;
    padding: 150px 100px 100px;
    position: fixed;
    top: 0;
    transition: 1s;
    opacity: 0;
}

.project-heading{
    font-size: 100px;
    background: #252525;
    text-transform: capitalize;
    text-align: center;
    margin-bottom: 50px;
    color: #1a1a1a;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-stroke: 8px transparent;
}

.project-container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 100px;
}

.project-card{
    height: 400px;
    position: relative;
}

.project-img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    transition: .5s;
}

.project-content{
    position: relative;
    padding: 40px;
    color: #fff;
    transition: .5s;
    opacity: 0;
}

.project-title{
    font-size: 50px;
    text-transform: capitalize;
    text-align: center;
    font-weight: 300;
}

.project-info{
    margin: 40px;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
}

.project-btn-grp{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
}

.project-btn{
    height: 40px;
    text-transform: capitalize;
    font-size: 18px;
    border: none;
    background: #000;
    color: #fff;
    cursor: pointer;
}

.project-btn.live{
    background: none;
    border: 2px solid #fff;
}

.project-card:hover .project-img{
    filter: blur(20px);
}

.project-card:hover .project-content{
    opacity: 1;
}
Enter fullscreen mode Exit fullscreen mode

在上面的代码中，我已经添加了fixed位置project-section并将其不透明度定义为 0。但是为了让您看到输出，请确保像这样添加active类。project-section



<section class="project-section active">
Enter fullscreen mode Exit fullscreen mode
输出 [ 带悬停效果 ]

项目部分

导航

在继续下一步之前，我们先来创建导航系统。代码请见此app.js文件。



const links = document.querySelectorAll('.link');
const sections = document.querySelectorAll('section');

let activeLink = 0;

links.forEach((link, i) => {
    link.addEventListener('click', () => {
        if(activeLink != i){
            links[activeLink].classList.remove('active');
            link.classList.add('active');
            sections[activeLink].classList.remove('active');

            setTimeout(() => {
                activeLink = i;
                sections[i].classList.add('active');
            }, 1000);
        }
    })
})
Enter fullscreen mode Exit fullscreen mode

在上面的代码中，首先我选中了所有链接和版块。然后，我定义了activeLink一个变量来追踪当前活动版块或链接。之后，我使用forEach方法循环遍历所有链接。在循环中，我可以访问单个链接及其索引。

首先，我使用 为链接添加了点击事件addEventListener。然后，我使用了一个简单的条件来确保用户没有点击活动链接。之后，我使用 从当前活动链接中移除了 active 类，classList.remove并active使用 为被点击的链接添加了类classList.add。我使用相同的方法active从 active 部分移除了类。

完成之后，我会setTimeout在执行以下代码时添加 1 秒的延迟。在超时时间内，只需再次添加 active 类即可。

你可能会觉得导航非常简单，但它是这个项目中第二难的事情😅

关于部分。

现在，我们来创建“关于”部分。说实话，整个网站里我最喜欢的部分就是这个“关于”部分。我们的“关于”部分内容丰富，包括技能部分，以及教育经历时间表。

要创建关于部分，请在之后编写以下代码project section。



<!-- about section -->
<section class="about-section">
    <div class="about">
        <div class="about-img-container">
            <img src="img/home.png" class="about-img" alt="">
            <button class="download-cv-btn">downlaod cv</button>
        </div>
        <p class="about-info">Lorem ipsum.....</p>
    </div>
</section>
Enter fullscreen mode Exit fullscreen mode

并进行造型。



/* about-section */

.about-section{
    width: 100%;
    min-height: 100vh;
    padding: 150px 100px 0;
    position: fixed;
    top: 0;
    opacity: 0;
    transition: 1s;
}

.about{
    width: 100%;
    display: grid;
    grid-template-columns: 30% 65%;
    grid-gap: 40px;
}

.about-img-container{
    position: relative;
}

.about-info{
    color: #fff;
    opacity: 0.6;
    font-size: 20px;
    line-height: 40px;
}

.about-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.download-cv-btn{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    color: #fff;
    border: none;
    font-size: 16px;
    text-transform: capitalize;
    cursor: pointer;
    transition: .5s;
    background: rgba(0, 0, 0, 0.5);
}

.download-cv-btn:hover{
    background: #000;
}
Enter fullscreen mode Exit fullscreen mode

同样，您可能看不到任何内容，请确保将active类添加到about-section所有其他部分并将其从所有其他部分中删除。

输出

关于部分

那么，现在我们要创建技能部分吗？嗯，在我们的技能部分，我没有任何技能进度条，而我认为这是作品集里最常用的东西。但我认为这是最糟糕的情况。我在网上看到过，进度条可能看起来很棒，但假设你对 Python 的了解程度达到 90%，然后你把它添加到你的网站上，说你对 Python 的了解程度达到了 90%。这样一来，你的客户就认为你对 Python 的了解程度达到了 90%，所以你可能对高级主题不了解，尽管你也了解高级主题。所以这会造成混淆。好吧，这只是一个偏好问题。总之，让我们开始创建技能部分吧。



<!-- skills -->
<div class="skill-section">
    <h1 class="heading">skills</h1>
    <div class="skills-container">
        <div class="skill-card">
            <img src="img/html.png" class="skill-img" alt="">
            <div class="skill-level">98%</div>
            <h1 class="skill-name">HTML</h1>
            <p class="skill-info">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur, delectus!</p>
        </div>
        // +4 more cards
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

在元素下编写上述代码about-section并设置样式。



/* skills */

.skill-section{
    position: relative;
    margin: 100px 0;
}

.heading{
    text-align: center;
    font-size: 60px;
    color: #fff;
    text-transform: capitalize;
    font-weight: 300;
    margin-bottom: 100px;
}

.skills-container{
    width: 95%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 100px;
    color: #fff;
}

.skill-card{
    position: relative;
}

.skill-img{
    display: block;
    margin: auto;
    height: 200px;
}

.skill-name{
    font-size: 30px;
    font-weight: 300;
    text-align: center;
    text-transform: capitalize;
    margin: 30px 0 20px;
}

.skill-info{
    text-align: center;
    opacity: 0.5;
    font-size: 18px;
    line-height: 30px;
}

.skill-level{
    position: absolute;
    top: 80px;
    right: 0;
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    border-radius: 50%;
    border: 10px solid;
}

.skill-card:nth-child(1) .skill-level{
    background: #ff4f4f28;
    border-color: #ff4f4f;
    color: #ff4f4f;
}

.skill-card:nth-child(2) .skill-level{
    background: #4fa0ff28;
    border-color: #4fa0ff;
    color: #4fa0ff;
}

.skill-card:nth-child(3) .skill-level{
    background: #ffed4f28;
    border-color: #ffed4f;
    color: #ffed4f;
}

.skill-card:nth-child(4) .skill-level{
    background: #52ff4f28;
    border-color: #52ff4f;
    color: #52ff4f;
}

.skill-card:nth-child(5) .skill-level{
    background: #4fdfff28;
    border-color: #4fdfff;
    color: #4fdfff;
}
Enter fullscreen mode Exit fullscreen mode
输出

技能部分

现在是最难的部分，CSS时间轴。一开始对我来说有点难，但我尽量不使用大量代码来实现目标。



<!-- timeline -->
<div class="timeline">
    <h1 class="heading">education and experience</h1>
    <div class="card">
        <div class="card-body">
            <h1 class="card-title">2000-2002</h1>
            <p class="card-detail">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto sequi recusandae laborum ipsam dignissimos nostrum vitae provident officia, consectetur ab accusantium corrupti exercitationem temporibus repellat non magni cupiditate ea reprehenderit.</p>
        </div>
    </div>
    //+4 more cards
</div>
Enter fullscreen mode Exit fullscreen mode

确保也添加这些代码about-section。



/* timeline */

.timeline{
    display: block;
    width: 80%;
    margin: 150px auto;
}

.timeline .heading{
    margin-bottom: 150px;
}

.card{
    width: 45%;
    padding: 30px;
    border-radius: 10px;
    color: #fff;
    display: block;
    margin: -80px 0;
    position: relative;
    background: #f00;
}

.card:nth-child(even){
    margin-left: auto;
}

.card:nth-child(even):before{
    content: '';
    position: absolute;
    left: -15%;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 5px solid #191919;
    border-radius: 50%;
}

.card:nth-child(even):after{
    content: '';
    position: absolute;
    left: -8.5%;
    top: 50%;
    transform: translateY(-50%);
    width: 7%;
    height: 2px;
    background: #fff;
    z-index: -1;
}

.card:nth-child(odd):before{
    content: '';
    position: absolute;
    right: -13%;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 5px solid #191919;
    border-radius: 50%;
}

.card:nth-child(odd):after{
    content: '';
    position: absolute;
    right: -8.5%;
    top: 50%;
    transform: translateY(-50%);
    width: 7%;
    height: 2px;
    background: #fff;
    z-index: -1;
}

.card:nth-child(2), .card:nth-child(2):before{
    background: #ff4f4f;
}
.card:nth-child(3), .card:nth-child(3):before{
    background: #ffb84f;
}
.card:nth-child(4), .card:nth-child(4):before{
    background: #3dca5c;
}
.card:nth-child(5), .card:nth-child(5):before{
    background: #565252;
}
.card:nth-child(6), .card:nth-child(6):before{
    background: #4fa0ff;
}

.card:nth-child(even) .card-body:before{
    content: '';
    position: absolute;
    left: -12%;
    top: 0;
    width: 0px;
    height: 100%;
    border: 1px dashed #fff;
    z-index: -1;
}

.card-title{
    font-size: 30px;
    font-weight: 300;
    margin-bottom: 20px;
}
Enter fullscreen mode Exit fullscreen mode
输出

时间线

联系部分

还有最后一部分，接触部分。我们也来创建一下。



<!-- contact section -->
<section class="contact-section">
    <form class="contact-form">
        <input type="text" name="name" id="name" autocomplete="off" placeholder="name">
        <input type="text" name="email" id="email" autocomplete="off" placeholder="email">
        <textarea name="msg" id="msg" placeholder="message" autocomplete="off"></textarea>
        <button type="submit" class="form-submit-btn">contact</button>
    </form>
    <!-- map -->
    <div class="map">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d448181.163742937!2d76.81306771991275!3d28.647279935262464!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfd5b347eb62d%3A0x37205b715389640!2sDelhi!5e0!3m2!1sen!2sin!4v1639489002410!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
    </div>
</section>
Enter fullscreen mode Exit fullscreen mode

顺便说一下，上面的iframe代码是谷歌地图嵌入链接。您可以使用谷歌地图获取它。




.contact-section{

    position: absolute;

    top: 0;

    opacity: 0;

    transition: 1s;

    padding: 100px 150px;

    height: 100vh;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    grid-gap: 50px;

}



.contact-form input, .contact-form textarea{

    width: 100%;

    height: 40px;

    background: rgba(255, 255, 255, 0.2);

    border: 1px solid #fff;

    margin-bottom: 30px;

    border-radius: 5px;

    text-transform: capitalize;

    color: #fff;

    padding: 5px 10px;

}



::placeholder{

    color: #fff;

}



#msg{

    height: 280px;

    resize: none;

    font-family: sans-serif;

}



.form-submit-btn{

    background: #ff4f4f;

    color: #fff;

    text-transform: capitalize;

    padding: 15px 40px;

    display: block;

    margin: auto;

    border: none;

    border-radius: 10px;

    cursor: pointer;

}



.map{

    width: 100%;

    height: 100%;

    padding: 10px;

    border: 2px solid #fff;

    background: rgba(255, 255, 255, 0.2);

    border-radius: 10px;

}



.map iframe{

    width: 100%;

    height: 100%;

    border-radius: 5px;

}
Enter fullscreen mode Exit fullscreen mode



输出

联系部分

好了，就这样了。干得好，伙计们。我们的投资组合完成了。

希望你理解了所有内容。如果你有疑问或者我遗漏了什么，请在评论区告诉我。

您可能觉得有用的文章

  1. 最佳 CSS 效果
  2. 无限 CSS 加载器
  3. Disney+ 克隆版
  4. Youtube API - Youtube 克隆
  5. TMDB - Netflix 克隆

如果您能订阅我的YouTube频道，我将不胜感激。我创作了非常棒的网络内容。

源代码
感谢阅读

文章来源：https://dev.to/themodernweb/amazing-portfolio-website-using-html-css-and-js-l8f
Devto 翻译
PREV
如何创建 YouTube 克隆版。使用 HTML、CSS 和 JS 制作 YouTube 克隆版。视频教程代码 最后一件事 - 搜索框 你可能觉得有用的文章
NEXT
最佳 VSCode 扩展 🤩 最佳 VS Codes 扩展 🛠 2024 年每个开发人员都应该使用