vCard项目实战：零基础也能学会的前端开发案例-优快云博客

vCard项目实战：零基础也能学会的前端开发案例

【免费下载链接】vcard-personal-portfolio vCard is a fully responsive personal portfolio website, responsive for all devices. 项目地址: https://gitcode.com/gh_mirrors/vc/vcard-personal-portfolio

你还在为如何搭建个人作品集网站而烦恼吗？想快速掌握前端开发却不知从何入手？本文将带你从零开始，通过vCard项目实战，掌握HTML、CSS和JavaScript的核心应用，2小时内完成一个响应式个人作品集网站。读完本文，你将学会：如何解析项目结构、编写响应式布局、实现交互功能，以及部署上线的完整流程。

项目介绍与环境准备

vCard是一个完全响应式的个人作品集网站模板，支持所有设备显示。项目采用纯前端技术栈，无需后端支持，非常适合初学者学习。

项目结构解析

通过分析项目文件结构，我们可以清晰看到标准前端项目的组织方式：

vcard-personal-portfolio/
├── index.html         # 主页面HTML文件
├── assets/            # 静态资源文件夹
│   ├── css/           # 样式表文件夹
│   │   └── style.css  # 主样式表
│   ├── images/        # 图片资源文件夹
│   └── js/            # JavaScript文件夹
│       └── script.js  # 交互功能脚本
└── website-demo-image/ # 网站演示图片

快速开始

首先，克隆项目仓库到本地：

git clone https://gitcode.com/gh_mirrors/vc/vcard-personal-portfolio

项目不需要额外安装依赖，直接在浏览器中打开index.html即可运行。

HTML结构：页面骨架搭建

HTML是网页的骨架，vCard项目的index.html采用了语义化标签，使结构清晰易懂。

基础结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vCard - Personal Portfolio</title>
  <link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
  <main>
    <!-- 侧边栏 -->
    <aside class="sidebar" data-sidebar>...</aside>
    
    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 导航栏 -->
      <nav class="navbar">...</nav>
      
      <!-- 各页面内容 -->
      <article class="about active" data-page="about">...</article>
      <article class="resume" data-page="resume">...</article>
      <!-- 其他页面... -->
    </div>
  </main>
  
  <script src="./assets/js/script.js"></script>
</body>
</html>

关键模块解析

侧边栏(index.html第40-152行)：包含个人头像、联系方式和社交媒体链接
导航栏(index.html第168-194行)：实现不同页面间的切换
内容区域：使用<article>标签区分不同页面内容，通过data-page属性标识

CSS样式：打造响应式布局

vCard项目的样式主要定义在assets/css/style.css文件中，采用了变量、渐变和媒体查询等现代CSS特性。

自定义属性与渐变

:root {
  /* 颜色变量 */
  --jet: hsl(0, 0%, 22%);
  --onyx: hsl(240, 1%, 17%);
  --white-2: hsl(0, 0%, 98%);
  --orange-yellow-crayola: hsl(45, 100%, 72%);
  
  /* 渐变 */
  --bg-gradient-onyx: linear-gradient(
    to bottom right, 
    hsl(240, 1%, 25%) 3%, 
    hsl(0, 0%, 19%) 97%
  );
  
  /* 字体大小 */
  --fs-1: 24px;
  --fs-2: 18px;
  /* 其他变量... */
}

响应式设计实现

通过媒体查询实现不同屏幕尺寸的适配：

@media (min-width: 580px) {
  :root {
    --fs-1: 32px;
    --fs-2: 24px;
  }
  
  .clients-item { min-width: calc(33.33% - 10px); }
  .project-img, .blog-banner-box { height: auto; }
}

vCard在移动设备上同样有出色表现：

JavaScript交互：让页面动起来

assets/js/script.js实现了网站的核心交互功能，代码简洁高效，适合初学者学习。

侧边栏切换功能

// 侧边栏变量
const sidebar = document.querySelector("[data-sidebar]");
const sidebarBtn = document.querySelector("[data-sidebar-btn]");

// 侧边栏切换功能
sidebarBtn.addEventListener("click", function () { 
  sidebar.classList.toggle("active"); 
});

页面导航实现

// 页面导航变量
const navigationLinks = document.querySelectorAll("[data-nav-link]");
const pages = document.querySelectorAll("[data-page]");

// 为所有导航链接添加点击事件
for (let i = 0; i < navigationLinks.length; i++) {
  navigationLinks[i].addEventListener("click", function () {
    for (let i = 0; i < pages.length; i++) {
      if (this.innerHTML.toLowerCase() === pages[i].dataset.page) {
        pages[i].classList.add("active");
        navigationLinks[i].classList.add("active");
        window.scrollTo(0, 0);
      } else {
        pages[i].classList.remove("active");
        navigationLinks[i].classList.remove("active");
      }
    }
  });
}

作品筛选功能

项目展示部分实现了按类别筛选的功能：

const filterFunc = function (selectedValue) {
  for (let i = 0; i < filterItems.length; i++) {
    if (selectedValue === "all") {
      filterItems[i].classList.add("active");
    } else if (selectedValue === filterItems[i].dataset.category) {
      filterItems[i].classList.add("active");
    } else {
      filterItems[i].classList.remove("active");
    }
  }
}

实战练习：个性化你的作品集

掌握了vCard项目的基本结构后，我们来进行一些个性化修改，打造属于你自己的作品集网站。

修改个人信息

打开index.html文件，找到侧边栏信息区域（第42-60行）：

<div class="sidebar-info">
  <figure class="avatar-box">
    <img src="./assets/images/my-avatar.png" alt="Richard hanrick" width="80">
  </figure>
  <div class="info-content">
    <h1 class="name" title="Richard hanrick">Richard hanrick</h1>
    <p class="title">Web developer</p>
  </div>
  <!-- 更多内容... -->
</div>

替换头像图片：将你的头像图片命名为my-avatar.png，替换assets/images/my-avatar.png
修改姓名和职业：将Richard hanrick改为你的姓名，Web developer改为你的职业

添加项目案例

在index.html的作品展示区域（第771-880行），添加新的项目项：

<li class="project-item active" data-filter-item data-category="web development">
  <a href="#">
    <figure class="project-img">
      <div class="project-item-icon-box">
        <ion-icon name="eye-outline"></ion-icon>
      </div>
      <img src="./assets/images/project-9.png" alt="你的项目名称" loading="lazy">
    </figure>
    <h3 class="project-title">你的项目名称</h3>
    <p class="project-category">Web development</p>
  </a>
</li>

将项目截图添加到assets/images/文件夹

部署上线：让全世界看到你的作品

完成网站制作后，我们可以通过GitHub Pages或Netlify等平台免费部署上线。

使用GitHub Pages部署

将项目推送到你的GitHub仓库
进入仓库设置，找到GitHub Pages选项
选择主分支作为部署源，保存设置
几分钟后，你的网站将通过https://你的用户名.github.io/仓库名访问

总结与扩展学习

通过vCard项目实战，我们掌握了：

HTML语义化标签的应用
CSS变量、渐变和响应式设计
JavaScriptDOM操作和事件处理
项目结构组织和文件管理

进阶学习路径

深入CSS：学习CSS Grid和Flexbox布局，掌握更复杂的页面设计
JavaScript框架：尝试使用Vue或React重构项目，体验前端框架的优势
后端集成：学习Node.js和Express，为网站添加表单提交等后端功能

鼓励大家在此基础上继续探索和创新，打造更加个性化的作品集网站。如有任何问题，欢迎查阅项目的README.md或提交issue。

如果觉得本文对你有帮助，请点赞收藏，并关注获取更多前端实战教程。下期我们将学习如何为vCard添加暗黑模式和动画效果，敬请期待！

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考