介绍
你好。
这不是可以称为个人发展的东西,而是我试图创建一个类似自我介绍页面的东西。
我想把我自己的文章、个人发展和技术栈放在一些东西上,但是 Github 的自述文件很无聊,所以我决定这次去做。
屏幕数量只有4个,没什么大不了的,但源代码这次也向公众开放。
随意克隆和使用它。
人工制品
这是我创建的。
这是源代码
所有显示的数据、图标和图像都存储在存储库中
> git clone https://github.com/Hizuraky/Hizuraky-profile.git
> cd Hizuraky-profile
> yarn
> yarn dev
同样在本地开始。
每个屏幕
从去年开始,我就一直想用类似 Neumorphism 的设计来制作一些东西,所以这次我采用了它。
尝试实施暗模式。
对于PC版,我通常在暗模式下截取SP版的截图。
职业画面
我没有太多可写的。
技术堆栈列表屏幕
我没有太多可写的。即使这引起了一点怀疑
发表文章一览画面
实际上,我想从每个站点的 API 中自动获取并显示它,但我想快速创建它并将其公之于众,因此我对其进行了硬编码。
更新时,您必须将其添加到包含数据的文件中并手动提交。我什至懒得去检查我是否可以从 Qiita 或公司的技术博客中获取它。打扰一下
个人发展列表画面
我没有太多可写的。
使用的技术和服务
使用的技术和服务的形象是这样的。
盖茨比
它是 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 创建项目时,有一个选择 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