我在 Youtube 上找 React 项目开发教程时意外看到 Portfolio 这个概念，它是用来展示自己技能和作品的地方，可以在求职过程中向潜在雇主展示自己的能力和经验。开发这样一个项目能够让我每天保持敲代码和 Coming up with new idea 的习惯，感觉每天会很充实。在此我将记录搭建过程中的点点滴滴。
Harris Wong's Portfolio Website
H1开发日志
网站开发日志
2024/09/10 - 2024/09/12
- style: About页面 - 增大字体，头衔幻灯片滚动风格，社交按钮从文字改图标风格，个人图片新设计
- refactor: 把所有页面内容信息整合到一个对象变量里，方便统一集中管理内容
- fix(mobile)：移动端UI顺带着优化
2024/07/22
- feat: 加入工作板块，从教育板块中抽象出时间轴组件
2024/01/06
- feat: 给项目卡片加上技术栈标签
2023/04/10
- style: 控制台输出字符画
2023/03/29
- style: 更换了一些颜色，让网站更 colorful
2023/03/11
- feat: Projects 板块项目分类 Tabs
- perf: 项目描述超过一定高度显示滚动条
2023/03/10
- perf: 深色模式下一些板块亮度调暗 filter: brightness(0.9)
- feat: Skills 技能列表在光标 hover 后用胶囊形式显示所有技能
2023/03/09
- perf: About 内容划入动画设置 delay 以营造一个接一个显示的效果。
- perf: useScroll Hook，以适配不同尺寸的屏幕，屏幕大的话，Skills 进度条可以直接显示动画，屏幕小，Skills 进度条可以等页面划到了再执行动画。（只需要初始化时先执行一次检验是否在视窗内的函数即可）
2023/03/07
- feat: Skills 板块的 Figma 技能
- feat: Projects 板块里的项目描述和跳转链接
2023/03/06
- chore: 网站文案
- feat: 给 Section 组件加入板块描述
2023/03/05
- perf: 图片懒加载 - React-lazyload（解决安装时的 Bug）
- style: 部分区域使用浏览器自带字体 Georgia
2023/03/04
- feat: 网站 Logo 和 ICO 图标（Brand Mark）
2023/03/01
- style: 组件划入动画（animated.css）
2023/02/28
- perf: 当光标悬浮在 Skills 板块里技能块上时暂停左移动画
- chore: 网站标题
- feat: Navbar 板块 Logo 部分加返回顶部功能及动画
2023/02/27
- feat: 用波浪线分隔指定板块（haikei）
- fix: Sidebar 里点击导航链接同时要关闭 Sidebar
- fix: 点击导航链接滚动到指定板块时，固定导航栏遮盖了板块上方内容
2023/02/26
- style: 继续加入主题色插画
- feat: About 板块里的 Blog、GitHub 按钮
2023/02/25
- style: 加入主题色插画以丰富网站视觉效果
2023/02/24
- feat(mobile): 菜单栏全屏划入划出效果
2023/02/22
- feat(mobile): 网站所有板块尺寸适配
2023/02/21
- feat(mobile): 导航栏 Navbar 板块
2023/02/20
- feat: 返回顶部按钮 BackToTop
2023/02/19
- feat: 联系 Contact 板块
2023/02/18
- feat: 项目 Projects 板块
2023/02/17
- feat: 经历 Experiences 板块
2023/02/16
- feat: Skills 技能进度条
2023/02/15
- feat: 6 点-18 点自动为浅色模式，否则为深色模式
- feat: 页尾 Footer 板块
2023/02/13
- feat: 技能 Skills 板块
2023/02/11
- feat: 深浅切换功能
2023/02/09
- feat: 关于 About 板块
2023/02/08
- 项目初始化
- feat: 导航栏 Navbar 板块
H1技术点
将会在此记录一些不错的、我不会但最后解决了的技术点。
H2将用户键入文本传入邮件应用里时不显示回车
在 URL 里，文本内容需要编码才能显示回车和空格等效果，在本项目里，我使用的是 encodeURIComponent() 方法。
具体如下，我将 textarea 里获取到的文本内容进行编码
const changeBody = (event) => setBody(encodeURIComponent(event.target.value));
H2回到顶部按钮的逻辑实现
jsx
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>
}
</>
);
}H2Anchor滚动到指定位置时Fixed导航栏会遮盖板块一部分
场景：当点击导航栏上的链接滚动到指定的位置时，如果固定导航栏，则可能会遮盖页面上方的内容。
我的做法是给每个区域加上 scroll-margin-top: calc(var(--height-navbar) + 1rem);。
注意：对应盒子不能有
overflow: hidden;样式，否则会影响 scroll 效果。
H2页面滚动到对应地方执行 animated.css 动画
我将这部分逻辑写成了一个自定义 Hook，需要的组件直接调用就好。
useScroll.jsx
jsx
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，调用方法如下：
jsx
const Component = () => {
useScroll('classname', 'animate__zoomIn')
return (
...
);
};H2Scrolling Text in the About page
ScrollingText.jsx
jsx
const ScrollingText = ({texts, className}) => {
const [current, setCurrent] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setCurrent(prev => prev < texts.length - 1 ? prev + 1 : 0);
}, 1800);
return () => clearInterval(interval);
});
return (
<div className={`scroll-container ${className}`}>
{texts.map((text, index) => (
<span key={index} className={`text-item${index === current ? " show" : ""}${index === (current - 1 < 0 ? texts.length - 1 : current - 1) ? " prev" : ""}`}>
{text}
</span>
))}
</div>
);
};ScrollingText.css
css
.scroll-container {
position: relative;
height: 60px;
overflow: hidden;
}
.text-item {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
height: 60px;
font-size: 3rem;
font-weight: bold;
transform: translateY(100%);
}
.text-item:nth-child(1) {
color: var(--color-theme);
}
.text-item:nth-child(2) {
color: var(--color-theme2);
}
.text-item:nth-child(3) {
color: rgb(218, 77, 26);
}
.text-item:nth-child(4) {
color: #a22fd4;
}
.text-item.prev {
transform: translateY(-100%);
transition: .5s ease-in-out;
}
.text-item.show {
transform: translateY(0);
transition: .5s ease-in-out;
}H1网站文案
以下文案收集于其它 Portfolio 类型网站，可供参考。
H2About
-
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!
H2Projects
-
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).
H3project 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
H2Contact
- 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.
