作品集 - freeCodeCamp.org

如何使用 HTML、CSS、JavaScript 和 Bootstrap5 创建作品集网站

Chengjun.L — Thu, 16 Jun 2022 08:00:00 +0000

原文：How to Create a Portfolio Website Using HTML, CSS, JavaScript, and Bootstrap 5，作者：Sampurna Chapagain

如果你是 Web 开发人员或 Web 设计师，那么拥有一个作品集网站对你来说至关重要。你可以在上面展示自己的信息，并且运用你的相关技能和经验展示你的最佳作品。

在这篇文章中，我们将讨论创建作品集网站的一些好处。然后，我将向你展示如何使用 HTML、CSS、JavaScript 和 Bootstrap5 为自己创建一个漂亮的响应式作品集网站。

拥有作品集网站的好处
Bootstrap 是什么
文件夹结构
如何给你的作品集添加导航菜单
如何给作品集添加主视觉
如何创建关于部分
如何创建服务部分
如何在页面滚动上向导航栏添加深色背景颜色
如何创建作品集部分
如何创建联系部分
如何创建页脚部分
最后润色
总结

拥有作品集网站的好处

拥有一个作品集网站有几个好处，包括：

它提供了一个平台来展示你的相关技能和经验
它显示了你的个性
它让招聘经理找到你，而不是你联系他们
人们可以在 Google 等搜索引擎中搜索到你

Bootstrap 是什么

Bootstrap 是一个流行的前端 CSS 框架，用于开发响应式和移动端友好的网站。 Bootstrap 的最新版本是第 5 版。你可以在此处找到 Bootstrap5 的官方文档。

文件夹结构

我们现在将开始创建作品集网站。

首先，让我们创建文件夹结构。你可以在 GitHub 上获取项目启动文件。此外，你可以访问此处查看该项目的 demo。

项目文件夹结构

文件夹结构由 index.html、style.css 和 script.js 文件和一个 images 文件夹组成。我们将在 style.css 文件中编写所有 CSS，在 script.js 文件中编写 JavaScript。

在 index.html 文件中，你可以看到带有 Bootstrap CDN 的 HTML 样板代码、font awesome 套件以及指向外部样式表和 JavaScript 的链接。

这里，script.js 文件是在加载完所有 HTML 代码后加载的。

如何给你的作品集添加导航菜单

现在，在我们的项目中添加一个导航菜单。它将帮助访问者找到他们正在寻找的相关信息。

我们将在 nav 元素中使用 Bootstrap 的 fixed-top 类来将导航栏保持在页面顶部。 navbar 也有一个 navbar-brand 类，我们将人名作为品牌保存。

导航栏具有以下功能：

它有六个链接：home（主页）、about（关于）、services（服务）、portfolio（作品集）、contact（联系）和 footer（页脚）
它有一个透明的背景，稍后我们将在页面滚动时添加深色背景
它可以在较小的设备上滚动

你可以在此处找到有关 Bootstrap5 导航栏功能的更多详细信息。

但是，导航栏在滚动时出现问题。它在整个页面中完全透明，这会导致可读性问题。我们将在完成 services 部分后解决此问题，以便你正确地理解该问题。

如何给作品集添加主视觉（Hero Header）

现在，我们将在中心添加一个带有一些文本的主视觉。主视觉是一个网页设计术语，指的是显示公司或个人主要目标的高质量全幅图像、具有代表性的图像或其他引人注目的元素。它有助于吸引用户访问你的网站。

 
    
        
            
            
                Hi, it's me Brad
                I am a professional freelancer in New York City

另外，让我们在 style.css 文件中添加上述代码的 CSS：

/* hero background image */
.bgimage {
    height:100vh;
    background: url('images/heroImage.jpeg');
    background-size:cover;
    position:relative;
}
/* text css above hero image*/
.hero_title {
    font-size: 4.5rem;
}
.hero_desc {
    font-size: 2rem;
}
.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

在这里我们可以看到该部分有一个名为 bgimage 的 id，它负责以全宽显示主视觉图像。它还借助上述 CSS 在图像上方的中心显示一些文本。

这是该网站到目前为止的导航栏和主视觉部分的外观：

带有导航栏的主视觉图像

如何创建关于部分

关于页面包含有关你和你的背景的重要信息。你的作品集网站的访问者可以通过你在此页面中提供的信息了解你。

我们将在行的左侧添加一个图像，在右侧我们将在本节中添加快速介绍。让我们使用下面的代码来演示它：


    
        
            About Me
            
                
                    
                

                
                     Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
                        
                    
                    
                        
                            
                                Name: David Parker
                                Age: 28
                                Occupation: Web Developer

                            
                        
                        
                            
                                Name: David Parker
                                Age: 28
                                Occupation: Web Developer

                            
                        
                    
                    
                         Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
                            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

让我们为左侧图像添加一些 CSS：

/* about section image css */
.imageAboutPage {
    width: 100%;
}

这将创建一个关于部分。你可以根据你的用例修改内容。我们添加了名为 mt-4 和 pt-4 的类以及容器类，它将顶部 margin 和顶部 padding 设置为 1.5 rem。

该行有两列。一个有 col-lg-4 类用于显示图像，它将占据左列，有 4 部分网格用于大屏幕。

下一列有一个 col-lg-8 类，它将占据右列，并带有 8 部分网格，用于更大的屏幕。

对于中小屏幕，它们会相互重叠，我们可以在下面的 GIF 文件中看到：

关于部分

如何创建服务部分

本部分有助于将网站访问者转化为潜在客户。你在这里展示自己可提供哪些特定的细分的服务。

让我们为此部分添加代码，并在下面进行描述：


    
        
            Services
            
                
                    
                        
                            
                            Website Development
                            Some quick example text to build on the card title and make up the bulk of the card's content.
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                            
                        
                      
                
                
                    
                        
                            
                            Website Design
                            Some quick example text to build on the card title and make up the bulk of the card's content.
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                            
                        
                      
                

                
                    
                        
                            
                            Website Deployment
                            Some quick example text to build on the card title and make up the bulk of the card's content.
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                            
                        
                      
                
            

            
                
                    
                        
                            
                            SEO
                            Some quick example text to build on the card title and make up the bulk of the card's content.
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                            
                        
                      
                

                
                    
                        
                            
                            DevOps
                            Some quick example text to build on the card title and make up the bulk of the card's content.
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                            
                        
                      
                

                
                    
                        
                            
                            QA
                            Some quick example text to build on the card title and make up the bulk of the card's content.
                                Some quick example text to build on the card title and make up the bulk of the card's content.

由于该网站面向 Web 开发人员和设计人员，因此我列出了 Web 开发人员或设计人员可能提供的一些服务。

我们使用 Bootstrap 卡片来显示服务。我们的服务部分有 2 行和 3 列。对于宽度大于等于 992px 的大屏，三张卡片连续显示。对于宽度小于 992px 的屏幕，一行中只会显示一张卡片。

你可以在此处找到有关 Bootstrap 断点的更多信息。

此外，每张卡片中都添加了字体以使它们看起来更好。

如果没有 CSS，服务部分将如下所示：

所以，让我们添加一些 CSS 来增加字体图标的字体大小和卡片高度，并在用户将鼠标悬停在卡片上时添加一些额外的颜色。

/* services section css */
.servicesText.card {
    height: 280px;
    cursor: pointer;
  }
.servicesIcon {
    font-size: 36px;
    text-align: center;
    width: 100%;
}
.card-title {
    text-align: center;
}
.card:hover .servicesIcon {
    color: #008000;
}
.servicesText:hover {
    border: 1px solid #008000;
}

这就是我们的服务部分现在的样子：

Services

如何在页面滚动上向导航栏添加深色背景颜色

如果你查看上面的 GIF，你会发现导航栏在整个页面中都是透明的，这会导致可读性问题。所以让我们努力解决这个问题。

我们将编写一些 JavaScript 和 CSS 来解决这个问题。我们将添加一个 navbarDark 类，以便在页面滚动时为导航栏显示深色背景色。

为此，我们需要转到 script.js 文件并添加以下代码：

// add class navbarDark on navbar scroll
const header = document.querySelector('.navbar');

window.onscroll = function() {
    var top = window.scrollY;
    if(top >=100) {
        header.classList.add('navbarDark');
    }
    else {
        header.classList.remove('navbarDark');
    }
}

现在，让我们分解上面的代码：

header 保存 nav 元素的值，querySelector 方法返回与 CSS 选择器匹配的第一个元素（在本例中为 .navbar）。
window.onscroll 在滚动事件发生时触发。
window.scrollY 返回文档垂直滚动的像素数，并将其值分配给名为 top 的变量。
如果 top 的值大于等于100，则在 header 中添加一个 navbarDark 类。

让我们快速为 navbarDark 类添加 CSS。为此，请转到你的 style.css 文件并添加以下代码：

/* display background color black on navbar scroll */
.navbarScroll.navbarDark {
    background-color: black;
}

这是导航栏现在的样子：

页面滚动时导航栏上的深色背景

如何创建作品集部分

这个部分包括你的最佳作品。人们可以看到你的能力，并且展示过去的出色工作肯定会吸引更多的潜在客户或招聘人员。因此，请仅在这个部分中添加你的最佳作品。

我们将使用 Bootstrap 卡片来展示作品集项目，将有 2 行，每行将有 3 列卡片。

这将是作品集部分的代码：


    
        
            Portfolio
            
                
                    
                        
                        
                            YouTube Clone
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                            
                                Link
                            
                        
                    
                

                
                    
                        
                        
                            Quiz App
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                            
                                Link
                            
                        
                    
                

                
                    
                        
                        
                            Product Landing Page
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                            
                                Link
                            
                        
                    
                
            
            

            
                
                    
                        
                        
                            Messaging Service
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                            
                                Link
                            
                        
                    
                

                
                    
                        
                        
                            Twitter Clone
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                            
                                Link
                            
                        
                    
                

                
                    
                        
                        
                            Blog App
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                            
                                Link

每张卡片都有图片、标题、描述和项目链接。对于断点宽度大于等于 992px 的大屏幕，连续显示三张卡片，但对于宽度小于 992px 的屏幕，仅连续显示一张卡片。

下面的 GIF 显示了作品集部分现在的样子：

作品集

如何创建联系部分

你应该在此部分中包含你的联系信息，以便访问者在他们想雇用你时可以与你联系。

我们的联系部分将在单行中包含 2 列：用于位置的谷歌地图和联系表格。

要嵌入 Google 地图，你需要执行以下步骤：

访问 https://www.embed-map.com
输入你的位置
单击生成 HTML 代码按钮，该按钮将提供你的 Google 地图 HTML 代码

我们的代码将如下所示，其中包含联系表格：


    
        
            Contact Me

            
                
                    
                    
                        
                            
                            
                        
                        https://www.embed-map.com

第一列将显示谷歌地图，下一列将显示联系表。

该表单有四个不同的字段：姓名、电子邮件、主题和项目详细信息。表单本身不提交请求。你需要将其与任何后端语言连接起来。或者，你可以简单地使用 Netlify 表单或 Formspree 表单。

这是联系人部分的样子：

Contact Section

如何创建页脚部分

现在我们来到了这篇文章的最后一部分，即页脚部分。我们已经在 index.html 文件中添加了指向字体 awesome CDN 的链接。

在页脚中，我们将通过 font awesome 图标添加指向社交媒体的链接。

如果没有 CSS，我们的页脚将如下所示：

页脚没有添加样式

因此，让我们使用以下代码为页脚添加一些样式：

/* social media icons styling */
.social-icons {
    font-size: 36px;
    cursor: pointer;
}
.fa-facebook:hover,.fa-instagram:hover,.fa-twitter:hover,.fa-linkedin:hover, .fa-twitch:hover {
    color: #008000;
}
.fab {
    color: #000000;
}
/* footer styling */
#footer {
    background-color: #808080;
    text-align: center;
}

图标现在显示在中心，带有悬停效果，我们可以在下面的 GIF 文件中看到。

页脚

最后润色

为了在所有部分之间添加一些间距，让我们添加更多样式：

/* spacing on all sections */
#about, #services, #portfolio, #contact {
    margin-top: 4rem;
    padding-top: 4rem;
}
#contact {
    padding-bottom: 4rem;
}

现在我们已经完成了完整的作品集网站的制作。

你可以在这里找到这个项目的完整源代码。

总结

这就是如何使用 HTML、CSS、JavaScript 和 Bootstrap5 创建一个完整的响应式作品集网站。

在这篇文章中，我们看到了 Web 开发者和设计师创建一个作品集网站的一些好处。我们把整个网站分为不同的部分，并在创建过程中单独讨论了每一个部分。

你可以根据自己的使用情况来定制这个网站。

希望这篇文章对你有帮助，祝你编程愉快！

你可以在 Twitter 上关注我，了解有关 Web 开发的更多内容。

如何使用 React 创建一个作品集网站

luojiyin — Fri, 04 Feb 2022 05:00:00 +0000

原文：How to Build a Portfolio Website with React，作者：Reed Barger

今天，你将为自己创建一个最重要的应用程序——你的作品集。

每个 React 开发者或者 Web 开发者通常需要向潜在的客户或者雇主展示自己能做什么。

在这篇文章里，我们将使用 React、Tailwind CSS、Netlify 等等行业标准工具创建一个作品集网站。

开始吧！

作品集是怎样的

这是你将要建立的最终版本。

它的作用是展示你自己、你做过什么项目、你在做这些项目时用了什么技能，还有一个联系表单，以便客户或者雇主联系上你。

我们将使用什么工具

我们将用 React 来创建应用程序的用户界面。它将允许我们通过可重复使用的组件来组成登录页面的每一部分，以及添加我们想要的功能，例如博客。
为了设计我们的应用程序，我们将使用 Tailwind CSS。Tailwind 允许我们通过组合类名（classnames）将多种样式轻松应用到 React 项目上，给应用程序一个专业的外观。
为了把我们的应用程序部署到网络上，我们将使用免费的 Netlify。通过 CDN 的帮助下，用户可以通过我们自己的的域名快速访问到我们的项目。

如何开始

你可以在这里下载我们项目的启动文件。

当你获取到代码，你要做的是把（解压好的）项目文件夹拖到代码编辑器中，然后在终端运行命令。

npm install

然后可以开始了！

我需要使用什么工具来构建作品集

从创建到部署应用程序，需要：

1、你的电脑安装 Node.js，你可以在 nodejs.org 下载安装程序。
2、在你的电脑安装 Git，你可以在 git-scm.com 下载。
3、我建议使用 VS Code 作为你的代码编辑器。你可以在 code.visualstudio.com 下载它。
4、一个在 Netlify.com 上的免费的 Netlify 账户。
5、一个免费的 GitHub 账号。

如何建立作品集的结构

使用 React 的好处是，我们可以将我们的应用程序扩展到任意多的页面，并添加大量的内容，这是非常容易的。

但是，由于我们只处理一个页面，所以可以在应用程序组件中非常快速地找到需要的不同组件。我们将在顶部放一个导航栏，通过上面的链接可以跳转到作品集的不同部分。

然后，我们将有一个“关于”部分，这里包含我们的项目介绍、客户推荐以及联系表单。

这种快速的规划使我们能够弄清楚组件怎样命名，以什么顺序命名。下一步，把它们全部添加到我们的 App.js 文件夹中（在 src 文件夹）：

// src/App.js

import React from "react";

export default function App() {
  return (
    
      
      
      
      
      
      
    
  );
}

如何创建组件

现在我们已经列出了所有这些组件，我们需要继续创建它们。

在源代码（src）文件夹中，我们将创建一个 components 文件夹，里面有我们需要的所有文件。

my-portfolio
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.js
    ├── data.js
    ├── index.css
    ├── index.js
    └── components
        ├── About.js
        ├── Contact.js
        ├── Navbar.js
        ├── Projects.js
        ├── Skills.js
        └── Testimonials.js

然后我们将创建每个 React 组件的基本结构，并使用 export default 从该文件导出：

// src/components/About.js

export default function About() {}

// repeat the same basic structure for all 6 components（在所有的 6 个组件中重复相同的结构）

最后在 App.js 中导入它：

// src/App.js

import React from "react";
import About from "./components/About";
import Contact from "./components/Contact";
import Navbar from "./components/Navbar";
import Projects from "./components/Projects";
import Skills from "./components/Skills";
import Testimonials from "./components/Testimonials";

export default function App() {
  return (
    
      
      
      
      
      
      
    
  );
}

请注意，总共应该有 6 个组件

Tailwind CSS 介绍

做完上面的，我们可以开始使用 Tailwind CSS 给我们的应用程序一个基本的外观。

使用 Tailwind CSS 的好处是，我们不必在 CSS 中手动编写任何样式，而是组合多个类（class）来创建我们想要的外观。

// src/App.js

import React from "react";
import About from "./components/About";
import Contact from "./components/Contact";
import Navbar from "./components/Navbar";
import Projects from "./components/Projects";
import Skills from "./components/Skills";
import Testimonials from "./components/Testimonials";

export default function App() {
  return (
    
      
      
      
      
      
      
    
  );
}

如何构建 `About` 组件

现在开始第一部分，即 about 部分，介绍我们的基本情况和擅长的技能。

它还将包含联系表单的链接，以及我们过去的项目。由于这些链接将指向同一页面的不同部分，我们能使用 "/#projects" 和 "/#contact"。

为了使这些链接能跳转到每个部分，我们把项目部分 id 的属性设置为 projects，把联系部分的 id 属性设置为 contact。

// src/components/About.js

import React from "react";

export default function About() {
  return (
    
      
        
          
            Hi, I'm Reed.
            
I love to build amazing
            apps.
          
          
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui
            laborum quasi, incidunt dolore iste nostrum cupiditate voluptas?
            Laborum, voluptas natus?
          
          
            
              Work With Me
            
            
              See My Past Work
            
          
        
        
          
        
      
    
  );
}

对于本部分右侧的图片，我使用的 public 文件夹中的一个 svg 文件（coding.svg）。

这个图片只是作为一个临时的占位符，我强烈建议你使用你自己的图片。

如何构建 `projects` 组件

我们的项目部分是由一个 section 元素组成，id为 prpjects。这将是包含所有项目的图片集。

// src/components/Projects.js

import { CodeIcon } from "@heroicons/react/solid";
import React from "react";
import { projects } from "../data";

export default function Projects() {
  return (
    
      
        
          
          
            Apps I've Built
          
          
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo
            facilis repellat ab cupiditate alias vero aliquid obcaecati quisquam
            fuga dolore.
          
        
        
          {projects.map((project) => (
            
              
                
                
                  
                    {project.subtitle}
                  
                  
                    {project.title}
                  
                  {project.description}
                
              
            
          ))}
        
      
    
  );
}

注意，我们还将使用库 @heroicons/react，以便将 SVG 图标写成 React 组件。

我们从同一个文件夹中的 data.js 文件导入一个项目数组。在那里，我们导出一个对象数组，每个对象包含项目的数据。

// src/data.js

export const projects = [
  {
    title: "React Reserve",
    subtitle: "MERN Stack",
    description:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolore rerum laborum iure enim sint nemo omnis voluptate exercitationem eius?",
    image: "./project-1.gif",
    link: "https://reactbootcamp.com",
  },
  {
    title: "React Tracks",
    subtitle: "React and Python",
    description:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolore rerum laborum iure enim sint nemo omnis voluptate exercitationem eius?",
    image: "./project-2.gif",
    link: "https://reedbarger.com",
  },
  {
    title: "DevChat",
    subtitle: "React and Firebase",
    description:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolore rerum laborum iure enim sint nemo omnis voluptate exercitationem eius?",
    image: "./project-3.gif",
    link: "https://jsbootcamp.com",
  },
  {
    title: "Epic Todo App",
    subtitle: "React Hooks",
    description:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolore rerum laborum iure enim sint nemo omnis voluptate exercitationem eius?",
    image: "./project-4.gif",
    link: "https://pythonbootcamp.com",
  },
];

如何构建 `Skills` 组件

我们在这部分填写自己会的技能和技术。

这将包含一个简单的清单，列出在我们熟悉的主要工具，可用于雇主或客户的项目中。

再一次，我们将从 data 文件夹导入一个数组。但是这个数组是由字符串组成，是我们所知道的技能，如 JavaScript、React 和 Node。

// src/components/Skills.js

import { BadgeCheckIcon, ChipIcon } from "@heroicons/react/solid";
import React from "react";
import { skills } from "../data";

export default function Skills() {
  return (
    
      
        
          
          
            Skills & Technologies
          
          
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi sit
            ipsa delectus eum quo voluptas aspernatur accusantium distinctio
            possimus est.
          
        
        
          {skills.map((skill) => (
            
              
                
                
                  {skill}
                
              
            
          ))}
        
      
    
  );
}

如何构建 `Testimonials` 组件

在 Testimonials 组件中，我们将列出一些过去的比较熟悉的客户的推荐信。

这些将由几个卡片组成，里面有推荐人和推荐人所在的公司。

我们将导入一个包含推荐信息的数组，里面的对象包含了评价、图片和公司。

// src/components/Testimonials

import React from "react";
import { TerminalIcon, UsersIcon } from "@heroicons/react/solid";
import { testimonials } from "../data";

export default function Testimonials() {
  return (
    
      
        
        
          Client Testimonials
        
        
          {testimonials.map((testimonial) => (
            
              
                
                {testimonial.quote}
                
                  
                  
                    
                      {testimonial.name}
                    
                    
                      {testimonial.company}
                    
                  
                
              
            
          ))}
        
      
    
  );
}

如何构建`Contact`组件

在登录页的尾部，我们将加入联系表单，以便潜在的雇主能联系到我们。

这个表格包含 3 个输入：姓名、电子邮件和输入信息。

为了接收这些表格所提交的信息，我们将使用 Netlify 表格工具以轻松保存这些信息。

// src/components/Contact.js

import React from "react";

export default function Contact() {
  return (
    
      
        
          
          
            
              
                ADDRESS
              
              
                97 Warren St. 

                New York, NY 10007
              
            
            
              
                EMAIL
              
              
                reedbarger@email.com
              
              
                PHONE
              
              123-456-7890
            
          
        
        
          
            Hire Me
          
          
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum
            suscipit officia aspernatur veritatis. Asperiores, aliquid?
          
          
            
              Name
            
            
          
          
            
              Email
            
            
          
          
            
              Message
            
                      </div>
          <button
            type="submit"
            className="text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">
            Submit
          </button>
        </form>
      </div>
    </section>
  );
}
</code></pre>
<h2 id="googlemaps">如何嵌入 <code>Google Maps</code> 位置</h2>
<p>在表格的左边，我们将一个 <code>Google Maps</code> 嵌入，显示我们的所在位置。</p>
<p>我们可以在一个在线工具（embed-map.com）的帮助下这样做。你所要做的事只是输入你的位置并点击<code>Generate HTML code</code>。</p>
<p>在给我们生成的代码中，不要复制所有的代码，只要复制 ifame 中的 <code>src</code> 属性，然后替换掉 <code>src</code> 的默认值。<br>
</p>
<p>向 Netlify 发送任何提交的表单数据，Netlify Forms 需要将从静态 HTML 中识别表单。因为我们的 React 应用是由 JavaScript 控制的，而不是普通的 HTML 组成，所以我们需要在 <code>public</code> 文件夹下的 index.html 文件中添加一个隐藏的表单。</p>
<pre><code class="language-html"><!-- public/index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- head content skipped -->
  </head>
  <body>

  <form name="contact" netlify netlify-honeypot="bot-field" hidden>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <textarea name="message">

我们需要隐藏这个表单，因为它不需要被用户看到，它只需要被Netlify看到。

如何从联系表单提交

完成上面这些，我们将回到 Contact.js。我们将使用 JavaScript 提交这个表单。

const [name, setName] = React.useState("");
const [email, setEmail] = React.useState("");
const [message, setMessage] = React.useState("");

我们将在 onChange 处理程序的帮助下，将用户在每个输入项的信息存储在 state。

// src/components/Contact.js

import React from "react";

export default function Contact() {
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [message, setMessage] = React.useState("");

  function encode(data) {
    return Object.keys(data)
      .map(
        (key) => encodeURIComponent(key) + "=" + encodeURIComponent(data[key])
      )
      .join("&");
  }

  function handleSubmit(e) {
    e.preventDefault();
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({ "form-name": "contact", name, email, message }),
    })
      .then(() => alert("Message sent!"))
      .catch((error) => alert(error));
  }

  return (
    
      
        
          
          
            
              
                ADDRESS
              
              
                97 Warren St. 

                New York, NY 10007
              
            
            
              
                EMAIL
              
              
                reedbarger@email.com
              
              
                PHONE
              
              123-456-7890
            
          
        
        
          
            Hire Me
          
          
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum
            suscipit officia aspernatur veritatis. Asperiores, aliquid?
          
          
            
              Name
            
             setName(e.target.value)}
            />
          
          
            
              Email
            
             setEmail(e.target.value)}
            />
          
          
            
              Message
            
             setMessage(e.target.value)}
            />
          </div>
          <button
            type="submit"
            className="text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">
            Submit
          </button>
        </form>
      </div>
    </section>
  );
}
</code></pre>
<p>正如你在上面看到的，我们正在用一个特殊的<code>encode</code>(编码)函数对表单数据进行编码。</p>
<h2 id="navbar">如何构建 <code>Navbar</code> 组件</h2>
<p>最后一步是构建我们的 <code>Navbar</code> 组件。</p>
<pre><code class="language-js">// src/components/Navbar.js

import { ArrowRightIcon } from "@heroicons/react/solid";
import React from "react";

export default function Navbar() {
  return (
    <header className="bg-gray-800 md:sticky top-0 z-10">
      <div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
        <a className="title-font font-medium text-white mb-4 md:mb-0">
          <a href="#about" className="ml-3 text-xl">
            Reed Barger
          </a>
        </a>
        <nav className="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-700	flex flex-wrap items-center text-base justify-center">
          <a href="#projects" className="mr-5 hover:text-white">
            Past Work
          </a>
          <a href="#skills" className="mr-5 hover:text-white">
            Skills
          </a>
          <a href="#testimonials" className="mr-5 hover:text-white">
            Testimonials
          </a>
        </nav>
        <a
          href="#contact"
          className="inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0">
          Hire Me
          <ArrowRightIcon className="w-4 h-4 ml-1" />
        </a>
      </div>
    </header>
  );
}
</code></pre>
<p>如何在较大的设备上将 <code>Navbar</code> 组件在页面的顶部显示？我们将使用 <code>md:sticky</code> 类添加到 <code>header</code> 元素。</p>
<h2 id="">如何部署作品集</h2>
<p>现在，为了使我们的作品集上线，我们需要把应用程序推送到 GitHub。</p>
<p>一旦你熟悉了这个流程，我们可以首先创建一个新的 GitHub 仓库。之后，我们将运行 <code>git add .</code>、<code>git commit -m "Deploy"</code>，创建 git 远程，然后 <code>git push -u orgin master</code>。</p>
<p>一旦我们的项目建立在 GitHub 上，我们就可以去 Netlify，选择 <code>Choose Site from Git</code>。然后选择 GitHub 作为持续部署，并选择我们刚刚推送代码的 GitHub 仓库。</p>
<p></p>
<p>之后，我们的项目将自动部署到网络上！</p>
<h2 id="">下一步是什么</h2>
<p>祝贺你，你现在可以通过一个在线的作品集应用程序向潜在雇主展示你的所有项目和技能了！</p>
<p>下一步要做的事设置一个自己的域名，最好用你的名字（例如 <a href="https://reedbarger.com/">reedbarger.com</a>）。</p>
<p>由于 Netlify 包含一个 DNS，你可以很容易在那里设置一个自己的域名。</p>
<p>可以考虑在你的 React 应用程序中添加一个博客，向潜在的雇主展示你更多的开发知识。</p>
<p>通过个人作品集表达你自己以及你作为开发者的热情所在，你将获得成功！</p>
<h2 id="react">获得学习 React 的方法</h2>
<p><strong><a href="http://bit.ly/join-react-bootcamp">The React Bootcamp</a></strong> 有你应该学习的 React 的所有知识，里面有视频、手册，还有特别的奖金。</p>
<p>数百位开发人员已经在这里掌握 React，找到他们梦想的工作，并掌握他们的未来</p>
<p><a href="http://bit.ly/join-react-bootcamp"></a><br>
<em>点击这里，当它开放时，你将得到通知</em></p>
<!--kg-card-end: markdown--> 
</article>
</main></body></html>

作品集 - freeCodeCamp.org

如何使用 HTML、CSS、JavaScript 和 Bootstrap5 创建作品集网站

目录

拥有作品集网站的好处

Bootstrap 是什么

文件夹结构

如何给你的作品集添加导航菜单

如何给作品集添加主视觉（Hero Header）

Hi, it's me Brad

如何创建关于部分

About Me

如何创建服务部分

Services

Website Development

Website Design

Website Deployment

SEO

DevOps

QA

如何在页面滚动上向导航栏添加深色背景颜色

如何创建作品集部分

Portfolio

YouTube Clone

Quiz App

Product Landing Page

Messaging Service

Twitter Clone

Blog App

如何创建联系部分

Contact Me

如何创建页脚部分

最后润色

总结

如何使用 React 创建一个作品集网站

作品集是怎样的

我们将使用什么工具

如何开始

我需要使用什么工具来构建作品集

如何建立作品集的结构

如何创建组件

Tailwind CSS 介绍

如何构建 About 组件

Hi, I'm Reed. I love to build amazing apps.

如何构建 projects 组件

Apps I've Built

{project.subtitle}

{project.title}

如何构建 Skills 组件

Skills & Technologies

如何构建 Testimonials 组件

Client Testimonials

如何构建Contact组件

ADDRESS

EMAIL

PHONE

Hire Me