我用 React 和一些魔法创建了我的作品集🎉

简而言之：我用 React 重写了我的作品集，并添加了一些小技巧，让它看起来更加炫酷炫目。每次刷新页面，都会加载新的界面。

本文全部内容均基于此网站 - Dinesh Pandiyan | Full Stack Dev

几周前，我创建了Dev Landing Page，并写了一篇关于它的博客文章。不到一周，这个代码库就获得了超过150 个 Star，并在各种文章中被推荐。我想大家都很喜欢它。我以此为基础创建了我的作品集。

我并非 UI 专家，但最近迷上了响应式设计、动画、弹性盒子以及其他一些炫酷的 CSS 功能。所以，我想试试我的 UI 技能，并顺便打造我的作品集。在寻找灵感的过程中，我偶然发现了Ali Spittel 的文章《我如何重写我的作品集网站》。她的作品集看起来棒极了，让人惊叹不已。于是，我开始了一段旅程，想要打造一个能带来类似氛围和魔幻感的作品。

我想从头开始构建所有内容，不借助任何 UI 库/框架，但React除外，因为我喜欢 React 简化整个 Web 开发流程的方式。在构建我作品集的每一部分的过程中，我都乐在其中，同时也学到了很多新东西。我将列出我最喜欢的网站部分以及我从中学到的东西。

• 弹性盒布局
• 主题和 React 的上下文 API
• 响应式设计
• 视差背景
• 动画
• 浏览器特定代码

弹性盒布局

整个网站采用Flexbox布局。

Flexbox 让放置物品变得更容易

CSS Grid 和 Flexbox 最近成了热议话题。尽管 CSS Grid 的支持度还不是很好，但目前几乎所有主流浏览器都支持 Flexbox。所以我认为用 Flexbox 实现布局比 Grid 更安全。

弹性盒的核心在于容器和子元素。我在构建布局时参考了这份flex-cheatsheet，一切看起来都很简单。

Flexbox 的一个缺点是它的flex属性。我用过，

flex: 1 0 auto;

flex: auto;

flex: 1;

在网站的很多地方都试过了，但还是搞不清楚它的具体行为。大多数情况下，这只是一个反复试验的过程。我需要了解一下这些属性，也许很快我会写一篇关于它的文章。

主题和 React 的 Context API

在决定网站主题的时候，我一直在两个主题之间犹豫不决。今天我用的是其中一个，明天又用另一个主题替换我的 Sass 主题定义。结果，我选不出来，想两个都用。

然后一个疯狂的想法突然出现在我的脑海里——为什么不同时使用两者并交替使用呢？

我探索了使用 React 实现此目标的方法，最终选择了React 的 Context API。我们很容易就想用 Redux 来代替，但我已经用 Redux 工作太多了，想尝试一下不使用 Redux 的 React。Context API 的实现方式可能不太理想，但它帮我完成了工作，我很满意。我可能很快会用 React 16.3 的新 Context API 重写它。

经过一段时间的尝试，我最终得到了16 个很棒的主题- 10 个浅色主题和6 个深色主题。

在所有这些主题中，我最喜欢的 3 个主题之一将在网站加载时应用。当您点击魔术棒时，将应用 16 个主题中的 1 个。

试试看你能不能区分所有16个主题。相信我，这可没那么容易 : )

每次刷新页面，都会加载新的界面。不得不说，主题魔法是这个网站我最喜欢的功能✨

响应式设计

如果你知道如何正确使用 Sass，它将会是一个强大的工具。我最近开始探索Sass mixins，它帮助我轻松设计和重构响应式布局。

我已经想出了标准的、可重复使用的 SASS 断点混合宏。完整的混合宏代码可以在这里找到 - SASS 断点混合宏

使用这些混合器，编写媒体查询变得容易得多。

.content-grid {
    margin: 0 auto;
    width: calc(100% - 5rem);

    @include breakpoint-medium-up {
        width: calc(100% - 5rem);
    }

    @include breakpoint-large-up {
        width: calc(100% - 10rem);
    }

    @include breakpoint-xlarge-up {
        width: calc(100% - 20rem);
    }
}

视差背景

我看过不少带视差标签的帖子和 Codepen，但从未尝试过。我从其中一个 Codepen 中获得了灵感，最终创作了自己的版本——Parallax Star 背景。

这不完全是“视差”，但或多或​​少达到了目的并在背景中产生了降雪效果。

动画

我还为网站添加了一些动画。你会看到“滚动到下一页”的箭头会上下跳动。你还会发现，当你将鼠标悬停在社交图标 （GitHub、Twitter、LinkedIn 等）上时，它们也会跳动。

不知何故，弹跳似乎是我最喜欢的动画。“视差降雪”也是一部动画，但大部分都是灵感作品。

浏览器特定代码

在处理动画时，我发现Safari 不支持平滑滚动，而FireFox 在渲染雪花动画时也存在问题。因此，我需要针对特定​​浏览器的行为，最终创建了一个 React 组件，用于为特定浏览器渲染代码。

您可以在这里找到该组件的代码 -浏览器组件。我正在考虑编写详尽的测试用例，并在不久的将来开源该组件。

像这样使用组件非常简洁。

<Browser except firefox chrome mobile>
    <span>All the magic tricks in this site work best in <b>Chrome!</b></span>
</Browser>
<Browser only firefox>
    <span>Magic background is disabled in FireFox. Try in <b>Chrome!</b></span>
</Browser>

网站已启动并运行

我最近用 GatsbyJS 重写了我的投资组合 - Portfolio v3
我将这篇文章中提到的投资组合移到了这里 - Portfolio v2

源代码链接 - React Codebase

我仍在不断进行一些调整。作品集部分显然需要升级。不过大部分设计已经完成了。欢迎留言，分享您对网站的看法，以及哪些地方可以改进。

你太棒了！祝你今天过得愉快！✨