介绍

你好。
这不是可以称为个人发展的东西,而是我试图创建一个类似自我介绍页面的东西。

我想把我自己的文章、个人发展和技术栈放在一些东西上,但是 Github 的自述文件很无聊,所以我决定这次去做。

屏幕数量只有4个,没什么大不了的,但源代码这次也向公众开放。
随意克隆和使用它。

人工制品

这是我创建的。

这是源代码

所有显示的数据、图标和图像都存储在存储库中

> git clone https://github.com/Hizuraky/Hizuraky-profile.git
> cd Hizuraky-profile
> yarn
> yarn dev

同样在本地开始。

每个屏幕

从去年开始,我就一直想用类似 Neumorphism 的设计来制作一些东西,所以这次我采用了它。
尝试实施暗模式。
对于PC版,我通常在暗模式下截取SP版的截图。

职业画面

我没有太多可写的。
【個人開発】自己紹介ページ作ってみた。ソースコード公開【Gatsby/React】【個人開発】自己紹介ページ作ってみた。ソースコード公開【Gatsby/React】

技术堆栈列表屏幕

我没有太多可写的。即使这引起了一点怀疑
【個人開発】自己紹介ページ作ってみた。ソースコード公開【Gatsby/React】【個人開発】自己紹介ページ作ってみた。ソースコード公開【Gatsby/React】

发表文章一览画面

实际上,我想从每个站点的 API 中自动获取并显示它,但我想快速创建它并将其公之于众,因此我对其进行了硬编码。
更新时,您必须将其添加到包含数据的文件中并手动提交。
我什至懒得去检查我是否可以从 Qiita 或公司的技术博客中获取它。打扰一下
【個人開発】自己紹介ページ作ってみた。ソースコード公開【Gatsby/React】【個人開発】自己紹介ページ作ってみた。ソースコード公開【Gatsby/React】

个人发展列表画面

我没有太多可写的。
【個人開発】自己紹介ページ作ってみた。ソースコード公開【Gatsby/React】【個人開発】自己紹介ページ作ってみた。ソースコード公開【Gatsby/React】

使用的技术和服务

使用的技术和服务的形象是这样的。
【個人開発】自己紹介ページ作ってみた。ソースコード公開【Gatsby/React】

盖茨比

它是 React 的框架。
我选择的原因是我认为这次SSG会很好+我想使用我以前从未使用过的技术。
我尝试使用 Nextjs 和 Gatsby 进行开发,但如果我使用 Nextjs 进行开发,我会选择 Nextjs。

盖茨比 vs Next.js

两者都有以下共同点。

  • 用于 React 的 Jamstack 框架
  • SSG 兼容

我认为最大的区别是:

  • Next.js -> SSR 支持
  • 盖茨比 -> 独特的插件

但是,光看这个很难决定哪个最好,但是当我使用它时,我觉得盖茨比在细节上很不方便。
例如,

  • 除了tsconfig.json,指定导入根目录还需要安装和设置插件。
  • 要将通用布局应用到每个屏幕,您需要使用插件或在每个屏幕上导入它。 (官方文档里写到只能这么做。)另外,即使安装了插件,tailwind在插件指定的目录下也不起作用。

我认为 Gatsbyjs 适合在短时间内构建一些东西,因为你可以使用 GraphQL 并在启动后立即使用现有的主题,但在其他情况下,我选择了 Next.js,我觉得它更好。
(如果你看 npm 趋势,Next.js 更受欢迎。)
【個人開発】自己紹介ページ作ってみた。ソースコード公開【Gatsby/React】

网络化

用于托管。
我选择它的原因是因为当我使用 Gatsby 创建项目时,有一个选择 Netlify 作为部署目标 + 我以前从未使用过它。

自由人

这是freenom,我每次都使用。
freenom 提供免费的自定义域。

通过发展

这一次,我的想法是用“Neumorphism Chic Design”创建一个“快速”和“自我介绍页面”。
工作内容和时间

工作 所需的时间 评论
1 设计创作 5个小时 只有 PC 版本是使用 Figma 创建的。
2 技术选择 1小时 盖茨比文档阅读时间
3 发展 10个小时 -
4 部署 1小时 Github + Netlify + freenom 集成

我想是这样的。
我的设计还是很差。这需要时间,我不能做任何我满意的事情。
我从来没有学过什么,所以这很自然,但我总是跟着我的感觉走。

考虑到我能够在上述时间内用我从未使用过的东西做到这一点,这是及格分数吗?

我现在没有什么想做的,所以我想抛开个人发展,在公司的技术博客上写文章。

如果您也可以检查一下,我将不胜感激。


原创声明:本文系作者授权爱码网发表,未经许可,不得转载;

原文地址:https://www.likecs.com/show-308628222.html

相关文章:

  • 2021-06-20
  • 2021-08-19
  • 2021-12-15
  • 2021-11-27
  • 2021-05-28
  • 2021-12-26
  • 2021-05-25
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-11-17
  • 2021-07-20
  • 2021-09-27
  • 2021-08-12
  • 2022-01-09
相关资源
相似解决方案