nextjs resume
1.0.0
Резюме, построенное, особенно с учетом профессионалов программного обеспечения. Позвоните на своего потенциального работодателя красивым и невероятно быстрым веб -сайтом резюме или создайте PDF для электронной почты и печати.
См. Пример
Ваше резюме также может генерировать безопасный URL, который будет отображать информацию, недоступную для публичного URL. Безопасная версия может включать личную информацию, такую как электронная почта, номер телефона и почтовый адрес. Вы можете отправить частную ссылку на потенциального работодателя или использовать ее для создания более полного PDF для себя.
Проект требует всего несколько шагов для настройки пользовательской конфигурации, добавления контента во внутреннюю CMS и развернуть в Vercel или NetLify!
Самый простой способ начать - клонировать и развернуть за один шаг. После этого вы можете отредактировать CMS и шаблон, чтобы соответствовать вашим потребностям.
Проект предназначен для развертывания в NetLify или Vercel. Вы можете нажать одну из следующих кнопок, чтобы клонировать репо, установить переменные среды и развернуть.
Чтобы настроить свое резюме, клонируйте только что созданный вами проект, который вы только что создали для своей местной машины и cd .
cd my-resume
npm i Я протестировал проект с помощью bun , npm , pnpm и yarn и не сталкивался с какими -либо заметными проблемами. Для разработки тестовый бегун по умолчанию на bun .
Откройте проект в любимом редакторе и откройте папку edit-me/config/ в корне, где вы можете редактировать файл resumeConfig.ts , чтобы удовлетворить ваши потребности. Файл конфигурации содержит следующие константы, которые будут использоваться на протяжении всего проекта (они вводятся для обеспечения соответствующего автозаполнения и проверки ошибок):
accentColor : AccentColor . Название палитра акцентов из цветов Radix UI. При использовании стандартного цвета, контрастный цвет текста будет белым, а при использовании яркого цвета контрастный цвет текста будет черным.neutralColor : NeutralColor . Название нейтральной палитры из Radix UI Grays.appTheme : 'system' | 'light' | 'dark' . Если appTheme будет установлен на system , сайт Résumé по умолчанию по умолчанию в системе пользователя. При установке на light или dark предпочтение пользователя будет отменено.imageTheme : 'light' | 'dark' . Ваш OG Share Image и значки приложений будут генерироваться либо в свете, либо в темном варианте.pdfTheme : 'light' | 'dark' . Ваш PDF будет генерироваться либо в свете, либо в темном варианте. Вы также найдете links.ts , которые генерируют внешние ссылки в нижней части документа. Вы можете использовать любой значок из простых значков наряду с этими ссылками.
Генератор Résumé обеспечивает 19 цветовых палитр акцентов и 6 нейтральных цветовых палитре вне коробки. Ниже приведены скриншоты из нескольких вариантов как в свете, так и в темной режиме.
| Легкий режим | Темный режим |
|---|---|
Синий/лиловый  | Синий/лиловый  |
Руби/серый  | Руби/серый  |
Монетный двор/сланец  | Монетный двор/сланец  |
Ваши настройки акцента, нейтральной и цветовой схемы также применяются к сгенерированному изображению OG.
| Легкий режим | Темный режим |
|---|---|
Синий/сланец  | Синий/сланец  |
Далее измените макет CMS, которые включены в edit-me/content/ . Каждый файл разметки использует поля фронтальной материи, которые используются для добавления атрибутов в элемент. Эти атрибуты безопасны типа, поэтому проект не будет работать, если поля необходимых не хватает или недействительны. Остальная часть файла Markdown будет отображаться как HTML для предоставления описания элемента.
Хотя фиктивные файлы должны быть довольно эксплуатационными, вы можете просмотреть конфигуратор ContentLayer для подробного описания необходимых и дополнительных полей.
Независимо от того, где приложение развернуто, оно может потребоваться доступ к следующим переменным среды:
PRIVATE_KEY (необязательно): это код, определяемый автором, который обеспечит URL -доступ к версии резюме, которая включает частную информацию. Мы рекомендуем генерировать этот код (например, uuid или использование генератора паролей). Ваш проект может быть настроен для предоставления секретного URL, который будет отображать больше информации, чем публичный URL. Это полезно, если вы хотите отправить полное резюме потенциальному работодателю, или если вы хотите создать PDF для собственного использования. В этой версии вы можете включить личную информацию, такую как электронную почту, номер телефона и адрес, который вы не хотите, чтобы увидеть широкую публику.
Частный URL будет работать только в том случае, если вы добавите переменную среды PRIVATE_KEY . Если работать локально, вы можете добавить это в файл .env.local :
PRIVATE_KEY=your-private-key
Затем вы можете посетить https://your-url.com/private/your-private-key , чтобы увидеть частную версию резюме.
Для встроенной интеграции Marckdown обратите внимание, что вы должны быть уверены, что не выносите личную информацию в публичную репо . Используйте эту функцию только в частном репо, и даже тогда, пожалуйста, имейте в виду проблемы безопасности, связанные с проведением частной информации в любую git Repo.
Чтобы добавить личные данные в CMS, просто добавьте их в папку privateFields .
cms/privateFields/ . Добавьте столько личной контактной информации, сколько хотите отобразить. Они появятся в порядке, которые они расположены в папке, поэтому вы можете использовать номер для их заказа.label : Требуемая строка . Метка поля, такая как «электронная почта» или «адрес». Этот частный URL -адрес является только безопасным, как и люди, на которые вы его отправляете . Чтобы аннулировать старый частный URL, вам просто нужно изменить переменную среды PRIVATE_KEY .
Шаблон построен, чтобы быть отзывчивым, красивым и доступным прямо из коробки. Он поддерживает автоматическое мнение темного/светового режима в веб-версии и отличный одностраничный макет печати в версии PDF. Проект поддерживает минимальный набор конфигураций, таких как акцентные цвета, но если вы являетесь фронтальным разработчиком или дизайнером, вы можете легко открыть исходный код и настроить его, как вы считаете подходящим.
Если вы действительно хотите углубиться в настройку, у вас есть полное управление конфигурацией Tailwind в корневой папке tailwind.config.ts .
Мы используем Generation Generation Image Next.js для генерации динамического открытого графа (Facebook/Twitter) обмениваться изображениями и значками приложений. Вы можете редактировать макет, стили и текст изображения OG, используя классы Tailwind в src/app/api/og/route.tsx и значок в src/app/icon.tsx .
Это динамическое общее изображение будет использовать вашу пользовательскую настройку accentColor , а также данные из CMS.
Чтобы синхронизировать ваше личное резюме с новой версией этого проекта, вы можете сделать следующее:
// add the original repo as a git remote
git remote add upstream [email protected]:colinhemphill/nextjs-resume.git
// pull changes from upstream
git pull upstream mainЗатем решите любые конфликты слияния и сделайте желаемые изменения. Вам нужно будет просмотреть изменение изменений, чтобы увидеть, что произошло с тех пор, как вы в последний раз вытащили, и обратите внимание, что изменения вверх по течению могут сломать ваши настройки!
