我在 Youtube 上找 React 项目开发教程时意外看到 Portfolio 这个概念，它是用来展示自己技能和作品的地方，可以在求职过程中向潜在雇主展示自己的能力和经验。开发这样一个项目能够让我每天保持敲代码和 Coming up with new idea 的习惯，感觉每天会很充实。在此我将记录搭建过程中的点点滴滴。

Harris Wong's Portfolio

https://harriswong.top

技术点

将会在此记录一些不错的、我不会但最后解决了的技术点。

将用户键入文本传入邮件应用里时不显示回车

在URL里，文本内容需要编码才能显示回车和空格等效果，在本项目里，我使用的是 encodeURIComponent() 方法。

具体如下，我将 textarea 里获取到的文本内容进行编码

const changeBody = (event) => setBody(encodeURIComponent(event.target.value));

回到顶部按钮的逻辑实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function BackToTop() {
  const [showScroll, setShowScroll] = useState(false);
  const [scale, setScale] = useState(0);

  // 监听页面滚动事件，如果滚动高度大于 500，则显示返回顶部按钮
  const checkScrollTop = () => {
    if (!showScroll && window.pageYOffset > 500) {
      setShowScroll(true);
    } else if (showScroll && window.pageYOffset <= 500) {
      setShowScroll(false);
    }
  };

  useEffect(() => {
    window.addEventListener("scroll", checkScrollTop);
    return () => {
      window.removeEventListener("scroll", checkScrollTop);
    };
  }, [showScroll]);

  return (
    <>
      {/* 返回顶部按钮 */}
      {
        <button
          className="hw__backtotop"
          onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
        >
          <BsTriangleFill />
        </button>
      }
    </>
  );
}

点击导航链接滚动到指定位置时固定导航栏可能会遮盖板块上方内容

当点击导航栏上的链接滚动到指定的位置时，如果固定导航栏，则可能会遮盖页面上方的内容。

我的做法是给每个区域加上 padding-top，值为导航栏高度。

页面滚动到对应地方执行 animated.css 动画

我将这部分逻辑写成了一个自定义 Hook，需要的组件直接调用就好。

useScroll.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import { useEffect } from "react";

const useScroll = (elementClass, animation) => {
  useEffect(() => {
    const handleScroll = () => {
      const element = document.querySelectorAll(`.${elementClass}`);
      if (element[0]) {
        const elementPosition =
          element[0].getBoundingClientRect().top + window.scrollY;
        const windowBottom = window.scrollY + window.innerHeight;
        if (windowBottom > elementPosition) {
          element.forEach(ele => {
            ele.classList.add('animate__animated', animation);
          });
          window.removeEventListener("scroll", handleScroll)
        }
      }
    };
    // 初始化时触发一次，否则就需要鼠标划动后才能触发
    handleScroll();

    window.addEventListener("scroll", handleScroll);

    return () => window.removeEventListener("scroll", handleScroll);
  });
};

export default useScroll;

Note：第一个 window.removeEventListener("scroll", handleScroll) 是动画执行完毕后移除滚动监听器，第二个是组件卸载后移除滚动监听器。第一个不写的话，动画执行后会持续随着你滚动页面而调用 handleScroll() 方法，第二个不写暂时不知。

<component>.jsx，调用方法如下：

1
2
3
4
5
6
const Component = () => {
  useScroll('classname', 'animate__zoomIn')
  return (
    ...
  );
};

开发日志

Portfolio 网站开发日志

2023/04/10

2023/03/29

  • 【美化】更换了一些颜色，让网站更 colorful

2023/03/11

  • 【新增】Projects 板块项目分类 Tabs
  • 【优化】项目描述超过一定高度显示滚动条

2023/03/10

  • 【优化】深色模式下一些板块亮度调暗 filter: brightness(0.9)
  • 【新增】Skills 技能列表在光标 hover 后用胶囊形式显示所有技能

2023/03/09

  • 【优化】About 内容划入动画设置 delay 以营造一个接一个显示的效果。
  • 【优化】useScroll Hook，以适配不同尺寸的屏幕，屏幕大的话，Skills 进度条可以直接显示动画，屏幕小，Skills 进度条可以等页面划到了再执行动画。（只需要初始化时先执行一次检验是否在视窗内的函数即可）

2023/03/07

  • 【新增】Skills 板块的 Figma 技能
  • 【新增】Projects 板块里的项目描述和跳转链接

2023/03/06

  • 【更新】网站文案
  • 【新增】给 Section 组件加入板块描述

2023/03/05

2023/03/04

  • 【新增】网站 Logo 和 ICO 图标（Brand Mark）

2023/03/01

2023/02/28

  • 【优化】当光标悬浮在 Skills 板块里技能块上时暂停左移动画
  • 【更新】网站标题
  • 【功能】Navbar 板块 Logo 部分加返回顶部功能及动画

2023/02/27

  • 【新增】用波浪线分隔指定板块（haikei）
  • 【修复】Sidebar 里点击导航链接同时要关闭 Sidebar
  • 【修复】点击导航链接滚动到指定板块时，固定导航栏遮盖了板块上方内容

2023/02/26

  • 【美化】继续加入主题色插画
  • 【新增】About 板块里的 Blog、GitHub 按钮

2023/02/25

  • 【美化】加入主题色插画以丰富网站视觉效果

2023/02/24

  • 【移动端】菜单栏全屏划入划出效果

2023/02/22

  • 【移动端】网站所有板块尺寸适配

2023/02/21

  • 【移动端】导航栏 Navbar 板块

2023/02/20

  • 【新增】返回顶部按钮 BackToTop

2023/02/19

  • 【新增】联系 Contact 板块

2023/02/18

  • 【新增】项目 Projects 板块

2023/02/17

  • 【新增】经历 Experiences 板块

2023/02/16

  • 【新增】Skills 技能进度条

2023/02/15

  • 【新增】6点-18点自动为浅色模式，否则为深色模式
  • 【新增】页尾 Footer 板块

2023/02/13

  • 【新增】技能 Skills 板块

2023/02/11

  • 【新增】深浅切换功能

2023/02/09

  • 【新增】关于 About 板块

2023/02/08

  • 项目初始化
  • 【新增】导航栏 Navbar 板块

网站文案

以下文案收集于其它 Portfolio 类型网站，可供参考。

About

  • I am a passionate frontend developer based in London, UK. My specialities are React JS and Tailwind CSS, and I love building apps that are delightful to use.

  • I'm a frontend developer based out of London, UK. I love building apps that solve real-world problems, and that are delightful to use. My specialities include TypeScript, React JS, Tailwind CSS, and Styled Components.

  • My background is in teaching and marketing. I have a bachelors degree in English from Kings College. When I'm not coding, I take care of my five adorable cats.

  • I'm a web developer and designer based out of London, UK. I love building apps that solve real-world problems, and that are delightful to use. My specialities include TypeScript, React JS, Tailwind CSS, and Styled Components.

    My background is in teaching and marketing, and I have a bachelors degree in English from Kings College. I also have five adorable cats.

  • A Front-End Developer based in London, UK

  • Hey! My name is Denise. I am a web & font designer based in Utah

    I have been working as a freelance designer and front-end developer since 2007. I’ve always been someone who has both a creative and a logical side. When I discovered web design in college, I realized it would be the perfect fit. I could use my creative side to design and my logical side to code. As a bonus, being both designer and developer allows me to make sure no detail is lost in translation.

  • Since beginning my journey as a freelance designer over 11 years ago, I've done remote work for agencies, consulted for startups, and collaborated with talented people to create digital products for both business and consumer use. I'm quietly confident, naturally curious, and perpetually working on improving my chops one design problem at a time.

  • Hello! My name is Brittany and I enjoy creating things that live on the internet. My interest in web development started back in 2012 when I decided to try editing custom Tumblr themes — turns out hacking together a custom reblog button taught me a lot about HTML & CSS!

Projects

  • All my projects include links to the code and live version. Click the button to learn more about each one.

  • A selection of my range of work

  • Here are a few past design projects I've worked on.

  • I'm a bit of a digital product junky. Over the years, I've used hundreds of web and mobile apps in different industries and verticals. Eventually, I decided that it would be a fun challenge to try designing and building my own.

  • I love working with small businesses

    I specialize in creating sites for individuals and small businesses. You shouldn’t have to settle for cheap solutions or generic templates. I provide custom designs at afforable prices. Frequently your website is the first impression your customers will get, so make sure it’s a good one. Since my time is split between a few different things, I’m not able to take on every project I’d like to, but I'm always looking for fun work. Take a look at my portfolio below, if you think I’d be a good match [send me an email](mailto:[email protected]?subject=DeniseChandler.com Contact Form).

project item

  • Quiz App: Quizzical is a simple quiz app that lets you select alternatives and then gives you a score. It's built with functional React components.
  • Personal Dashboard: A Chrome Extension that gives you an overview over the current time, how the weather is like and how Dogecoin is performing. Interacts with multiple APIs using async JS.
  • Password Generator: An app that generates random passwords based on a few user inputs, e.g. length, types of characters, etc. Built with HTML, CSS, and vanilla JavaScript.
  • Personal Dashboard: A Chrome extension to help you focus and stay up-to-date.
    • HTML
    • CSS
    • JavaScript
    • React

Contact

  • Please reach out if you have any questions! I'm happy to jump on a video call to brainstorm projects and ideas. Send me an email at __ or call me directly at __
  • Are you looking for a fast-performing and user-friendly website to represent your product or business? or looking for any kind of consultation? or want to ask questions? or have some advice for me or just want to say "Hi 👋" in any case feel free to Let me know. I will do my best to respond back. 😊 The quickest way to reach out to me is via an email.

灵感来源