使用React和Markdown的强大功能创建新一代简历

2023年10月18日 阅读时长3分钟

(opens new window)

使用React和Markdown创建新一代简历的框架。

---

🚨 即将推出的变化

主分支（v0.1）现已进入功能冻结状态。下一个版本正在markdown-support分支 (opens new window)中开发。了解更多关于这些变化的信息，请点击此处 (opens new window)。

动机

这是一个简历的起始/模板，让您可以使用React编写您的简历。

它具有以下功能：

1. ✍️ 只需编写一次，即可得到一个网站和PDF！
2. 📱 超级响应式和交互式（适用于移动设备）
3. 📈 实时数据获取，例如您的存储库的Github星数
4. 🌓 暗/亮 ht模式+所有您需要的动画
5. 🤖（待添加）GPT集成：让AI回答关于您的问题！
6. ...以及React提供的所有魔法！

概述

此存储库的实时部署 (opens new window)（具有上述所有功能，但不包括GPT集成）

您可以通过点击右上角的下载按钮下载此简历的PDF版本。请注意，最佳打印方式是在Chrome/Arc浏览器中以A4大小打印，如下所示。

在您下载的PDF文件中，右上角的按钮将是“查看实时简历”按钮，让您的读者转到您的网站（实时简历）。

我的简历 (opens new window)（带有GPT集成）

![屏幕截图](https://github.com/Crayon-ShinChan/mr-resume/raw/main/public/images/r 开始

fork / clone这个repo

进入您克隆的文件夹，运行开发服务器：

使用浏览器打开http://localhost:3000 (opens new window)查看结果。

您可以通过修改components / section文件夹中的文件来开始编辑简历中的部分。并通过更改文件/components/header.tsx和public/images/portrait.jpeg来更改导航栏中的照片。

了解更多

要了解有关Next.js的更多信息，请查看以下资源：

• Next.js文档 (opens new window) - 了解Next.js的功能和API。
• 学习Next.js (opens new window) - 一个互动的Next.js教程。

您可以查看Next.js的GitHub存储库 (opens new window) - 欢迎您的反馈和贡献！

在Vercel上部署

非常简单！无需代码！而且免费！

部署此应用程序（这是一个Next.js (opens new window)应用程序）的最简单方法是使用th 前往Vercel平台仪表板 (opens new window)，然后点击创建新项目。

然后您可以导入您的存储库。（您需要在克隆此存储库后分叉此存储库或创建自己的存储库）

然后您可以点击部署按钮来部署您的应用。

待办事项

• 更友好的文档
  • 了解此项目的完整结构
  • 如何使用API调用
  • 如何集成GPT
• PDF简历图像加载="eager"

GitHub

查看Github (opens new window)