nextjs resume
1.0.0
Un currículum construido especialmente con profesionales de software en mente. Impresione a su posible empleador con un sitio web de currículum hermoso e increíblemente rápido, o genere un PDF para correo electrónico e impresión.
Ver un ejemplo
Su currículum también puede generar una URL segura que mostrará información no accesible en la URL pública. La versión segura puede incluir información privada como correo electrónico, número de teléfono y dirección postal. Puede enviar el enlace privado a un empleador potencial o usarlo para generar un PDF más completo para usted.
¡El proyecto requiere solo unos pocos pasos para configurar su configuración personalizada, agregar contenido al CMS interno e implementar en Vercely o Netlify!
La forma más sencilla de comenzar es clonar e implementar en un solo paso. Posteriormente, puede editar el CMS y la plantilla para que coincidan con sus necesidades.
El proyecto está diseñado para implementarse en Netlify o Vercel. Puede hacer clic en uno de los siguientes botones para clonar el repositorio, establecer variables de entorno e implementar.
Para personalizar su currículum, clone el proyecto que acaba de crear en su máquina local y cd .
cd my-resume
npm i He probado el proyecto con bun , npm , pnpm e yarn y no he encontrado problemas notables. Para el desarrollo, el corredor de prueba predeterminado es bun .
Abra el proyecto en el editor favorito y abra la carpeta edit-me/config/ en la raíz donde puede editar el archivo resumeConfig.ts para satisfacer sus necesidades. El archivo de configuración contiene las siguientes constantes que se utilizarán en todo el proyecto (estos se escriben para proporcionar una comprobación adecuada de autocompletar y errores):
accentColor : AccentColor . El nombre de una paleta de acento de Radix UI Colors. Si usa un color estándar, el color de texto contrastante será blanco y si usa un color brillante, el color de texto contrastante será negro.neutralColor : NeutralColor . El nombre de una paleta neutral de Radix UI Grays.appTheme : 'system' | 'light' | 'dark' . Si appTheme está configurado en system , el sitio de Rehuumé se debe por defecto a la preferencia del sistema del usuario. Si se establece en light o dark la preferencia del usuario se anulará.imageTheme : 'light' | 'dark' . Su imagen OG Share e iconos de aplicaciones se generarán en una variante de luz o oscura.pdfTheme : 'light' | 'dark' . Su PDF se generará en una variante de luz o oscura. También encontrará links.ts que genera enlaces externos en la parte inferior del documento. Puede usar cualquier icono de iconos simples junto con estos enlaces.
El generador de currículum proporciona 19 paletas de colores acentos y 6 paletas de colores neutrales fuera de la caja. A continuación se presentan capturas de pantalla de algunas variaciones tanto en modo claro como en el modo oscuro.
| Modo de luz | Modo oscuro |
|---|---|
Azul/Mauva  | Azul/Mauva  |
Rubí/gris  | Rubí/gris  |
Menta/pizarra  | Menta/pizarra  |
Sus preferencias de acento, neutral y esquema de color también se aplican a la imagen OG generada.
| Modo de luz | Modo oscuro |
|---|---|
Azul/pizarra  | Azul/pizarra  |
A continuación, modifique los datos simulados de CMS que se incluyen en edit-me/content/ . Cada archivo de Markdown utiliza campos de materia frontal que se utilizan para agregar atributos al elemento. Estos atributos son seguros, por lo que el proyecto no se ejecutará si faltan campos requeridos o no son válidos. El resto del archivo de Markdown se representará como HTML para proporcionar una descripción del artículo.
Aunque los archivos simulados deben ser bastante explicativos, puede ver la configuración de ContentLayer para descripciones detalladas de campos requeridos y opcionales.
Independientemente de dónde se despliegue la aplicación, puede necesitar acceso a las siguientes variables de entorno:
PRIVATE_KEY (opcional): este es un código, determinado por el autor, que proporcionará acceso a la URL a una versión del currículum que incluye información privada. Recomendamos generar este código (por ejemplo, un UUID o usar un generador de contraseñas). Su proyecto se puede configurar para proporcionar una URL secreta que mostrará más información que la URL pública. Esto es útil si desea enviar un currículum completo a un empleador potencial, o si desea generar un PDF para su propio uso. En esta versión, puede incluir información personal como correo electrónico, número de teléfono y dirección que no desea visible para el público en general.
La URL privada solo funcionará si agregó una variable de entorno PRIVATE_KEY . Si funciona localmente, puede agregar esto en un archivo .env.local :
PRIVATE_KEY=your-private-key
Luego puede visitar https://your-url.com/private/your-private-key para ver la versión privada del currículum.
Para la integración de Markdown incorporada, tenga en cuenta que debe asegurarse de no comprometer la información privada a un repositorio público Git . Solo use esta función en un repositorio privado, e incluso entonces tenga en cuenta las preocupaciones de seguridad en torno a cometer información privada a cualquier repositorio de GIT.
Para agregar datos privados al CMS, simplemente agréguelos a la carpeta privateFields .
cms/privateFields/ . Agregue tantos campos de información de contacto privado como desee mostrar. Aparecerán en el orden en que están dispuestos en la carpeta, por lo que puede usar un prefijo de números para pedirlos.label : cadena requerida . La etiqueta del campo, como "correo electrónico" o "dirección". Esta URL privada es tan segura como las personas a las que le envía . Para invalidar una antigua URL privada, simplemente necesita cambiar la variable de entorno PRIVATE_KEY .
La plantilla está construida para ser receptiva, hermosa y accesible desde el principio. Admite temas automáticos de modo oscuro/ligero en la versión web y un excelente diseño de impresión de una sola página en la versión PDF. El proyecto admite un conjunto mínimo de configuraciones, como colores de acento, pero si es un desarrollador o diseñador front -end, puede abrir fácilmente el código fuente y personalizarlo como mejor le parezca.
Si realmente desea profundizar en la personalización, tiene el control total de la configuración de viento de cola en la carpeta raíz tailwind.config.ts .
Utilizamos la generación de imágenes Next.js para generar Dynamic Open Graph (Facebook/Twitter) Compartir imágenes e iconos de aplicaciones. Puede editar el diseño, los estilos y el texto de la imagen OG utilizando clases de viento de cola en src/app/api/og/route.tsx y el icono en src/app/icon.tsx .
Esta imagen Dynamic Compartir utilizará su configuración de accentColor personalizada, así como los datos del CMS.
Para sincronizar su currículum personal con la versión más reciente de este proyecto, puede hacer lo siguiente:
// 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 mainLuego resuelva cualquier conflicto de fusión y realice sus cambios deseados. Deberá mirar por encima del ChangeLog para ver lo que sucedió desde la última vez que retiró, y tenga en cuenta que los cambios aguas arriba podrían romper sus personalizaciones.
