Descarga codefolio - descarga de código fuente codefolio

codefolio

Otras categorias

1.0.0

Descargar

Portafolio de códigos

Demostración en vivo | Implementación | Acerca de | Características | Contribución

Una aplicación web lista para implementar para mostrar su cartera de codificación.

Acerca de

Codefolio es una aplicación web de cartera Jamstack para programadores. Está creado con Nuxt.js y aprovecha el módulo @nuxt/content para utilizar los datos del usuario ubicados en el directorio /content y generar activos estáticos listos para producción.

Características

Todo el código está escrito teniendo en cuenta los módulos y la reutilización.

La característica principal de esta aplicación es que admite la implementación estática. La codificación de portafolios no requiere tantos cambios, por lo que un sitio estático es una mejor opción que un SPA normal o una aplicación Full-Stack.

Interfaz de usuario

La interfaz de usuario de Codefolio está diseñada teniendo en cuenta la facilidad de uso. Es completamente responsivo y utiliza un enfoque centrado en los dispositivos móviles.

El diseño se basa en el patrón 7-1 Sass y aprovecha Bootstrap 5 parcialmente cargado para el diseño y las utilidades.

El directorio activos/aprite/svg contiene archivos de iconos svg individuales. Puede usar estos íconos (o colocar sus propios íconos svg en este directorio) para hacer referencia al nombre del ícono en el componente <icon> vue.

Contenido

Codefolio admite datos de usuario personalizados. Además de los datos personales, los usuarios también pueden personalizar otras cosas interesantes, como enlaces externos y la URL del botón de reanudar en la barra de navegación superior.

Guía de contenido

Los generadores de sitios estáticos toman datos de usuario sin procesar (generalmente en formato Markdown o JSON) para generar HTML listo para producción, por lo que necesitará esta guía como referencia mientras agrega su contenido a Codefolio.

Así es como se ve la estructura de la carpeta de contenido.

 content
|	navbar.json
|	about.md
|	social-icons.json
|	user.json
|
└───projects
		project1.json
		project2.json
		project3.json
		/* so on... */

Veamos para qué sirve cada archivo o carpeta.

barra de navegación.json

Este archivo se utiliza para datos opcionales relacionados con la barra de navegación superior.

Propiedad	Tipo	Descripción
currículumUrl	`string`	Reanudar URL del archivo para el botón de reanudar de la barra de navegación.
Enlaces externos	`array`	Una matriz que contiene objetos para generar enlaces externos en la barra de navegación superior. Cada objeto de enlace externo debe tener propiedades de cadena `text` y `url` para funcionar correctamente.

acerca de.md

Este archivo de rebajas se utiliza para la página Acerca de.

iconos-sociales.json

Este archivo se utiliza para generar íconos sociales en la página Acerca de.

Propiedad	Tipo	Descripción
iconos	`array`	Una matriz que contiene objetos para generar íconos sociales en la página de contacto. Cada objeto debe tener propiedades `name` y `url` (cadenas). La propiedad `name` debe tener un archivo svg coincidente en el directorio /assets/sprite/svg/ . La mayoría de los íconos sociales ya están disponibles, pero siéntete libre de agregar tus íconos svg personalizados. En el modo de desarrollo, puede visitar la ruta `/_icons` para enumerar todos los íconos disponibles.

usuario.json

Este archivo se utiliza para los detalles de usuario necesarios para la página de inicio.

Propiedad	Tipo	Descripción
nombre completo	`string`	Nombre de usuario.
acerca de	`string`	Un poco sobre el usuario.
imagen	`string`	Una URL de imagen válida que comienza en http o un nombre (incluida la extensión) de una imagen que se coloca en el directorio de `assets/images` . Recorte la imagen a `500x500` para obtener mejores resultados.
título	`string`	Puesto o rol del usuario.

contacto.json

Este archivo se utiliza para generar la página de contacto.

Propiedad	Tipo	Descripción
formaAcción	`string`	Acción de formulario personalizado para el formulario de contacto. Consulte formulariospree.io.
ubicación	`string`	Cadena de ubicación del usuario.
correo electrónico	`string`	Dirección de correo electrónico del usuario.
teléfono	`string`	Número de teléfono del usuario.

proyectos

Esta carpeta contiene todos los proyectos como archivos individuales en formato json . Cada archivo en esta carpeta representará un proyecto diferente.

La siguiente tabla contiene el formato de cada archivo en la carpeta de proyectos.

Propiedad	Tipo	Descripción
identificación	`integer`	Un identificador único para el pedido.
título	`string`	Nombre del proyecto.
descripción	`string`	Detalles sobre el proyecto.
imagen	`string`	Una URL de imagen válida que comienza en http o un nombre (incluida la extensión) de una imagen que se coloca en el directorio de `assets/images` .
campo de golf	`object`	Un objeto que contiene enlaces externos del proyecto. Puede tener propiedades opcionales `liveDemo` , `videoDemo` y `sourceCode` para las URL.
tecnologías	`array`	Una matriz que contiene todas las tecnologías (cadenas) utilizadas en el proyecto.

Nota: Cree nuevos archivos para agregar más proyectos y asígneles el nombre del proyecto.

Consulte los archivos ficticios existentes en la carpeta de contenido como referencia.

SEO

Metaetiquetas

Nuxt.js proporciona formas eficientes de optimizar su sitio para los motores de búsqueda. Consulte la guía SEO de Nuxt.js para obtener más detalles.

Mapas del sitio

Este proyecto utiliza @nuxtjs/sitemap para generar automáticamente el archivo sitemap.xml. Consulte su guía de configuración si necesita más información.

Despliegue

Después de personalizar el contenido según sus necesidades, debe implementar la aplicación en producción.

Implementación manual

Veamos cómo generar archivos de compilación.

Comience clonando el repositorio en su máquina local usando git (o descárguelo manualmente)

 git clone https://github.com/0xaliraza/codefolio

Luego, navegue hasta el directorio raíz del repositorio e instale las dependencias.

 npm install

Generar archivos de compilación

 npm run generate

En este punto, tendrá una carpeta ./build que contiene todos los archivos listos para producción para su implementación. Puede implementar estos archivos en algún servidor de alojamiento o CDN.

Si desea ver la aplicación ejecutada localmente

 npm run dev

CI/CD

Necesita experiencia previa en github/codificación para implementar esto usando acciones de github o alguna otra plataforma CI/CD.

Este es un repositorio de plantillas, por lo que puede hacer clic en el botón "Usar esta plantilla" en la parte superior derecha para clonar este repositorio. Personalice los archivos de contenido según sus necesidades y diríjase a la pestaña de acciones para agregar los flujos de trabajo necesarios. Puede reutilizar archivos ci.yml y cd.yml existentes.

Consulte las acciones de github para obtener más información.

Contribución

No dudes en crear una solicitud de extracción o un problema si necesitas cambiar o solucionar algo. O simplemente puede contactarme directamente usando los enlaces a continuación.