Aqu\u00ed tienes una demostraci\u00f3n en vivo del portafolio de desarrollador<\/a> que construir\u00e1s con Next.js.<\/p>\n Puedes acceder al repositorio GitHub de este proyecto<\/a> si quieres echarle un vistazo m\u00e1s de cerca, o puedes usar esta plantilla de proyecto de inicio de portfolio<\/a> seleccionando Usar esta plantilla<\/strong> > Crear un nuevo repositorio<\/strong> \u2014 esto copiar\u00e1 el c\u00f3digo de inicio en un nuevo repositorio. El proyecto de inicio contiene c\u00f3digos b\u00e1sicos como los estilos, un enlace Font Awesome CDN, im\u00e1genes y estructura b\u00e1sica.<\/p>\n Este es un tutorial del tipo \u00abs\u00edgueme\u00bb. Te ser\u00e1 m\u00e1s f\u00e1cil codificar si tienes:<\/p>\n Next.js<\/a> es un framework de bibliotecas JavaScript<\/a> de c\u00f3digo abierto basado en React que puede utilizarse para una amplia gama de proyectos de desarrollo web, ya que simplifica la creaci\u00f3n de aplicaciones est\u00e1ticas y renderizadas del lado del servidor. Agiliza el proceso aprovechando las mejores caracter\u00edsticas de React y optimizando el rendimiento del renderizado para mejorar la experiencia del usuario. Algunos de los casos de uso m\u00e1s comunes de Next.js son:<\/p>\n Para configurar un entorno de desarrollo para Next.js, primero instala Node.js<\/a> en tu ordenador, porque utilizar\u00e1s el comando Aparecer\u00e1 un aviso pidi\u00e9ndote que confirmes algunas dependencias adicionales. A continuaci\u00f3n, puedes ejecutar Cuando se crea un proyecto Next.js utilizando el comando Tambi\u00e9n pueden generarse otros directorios y archivos en funci\u00f3n de la configuraci\u00f3n y las caracter\u00edsticas espec\u00edficas, pero estos son los directorios principales de un proyecto Next.js b\u00e1sico.<\/p>\n Para este tutorial, todo lo que construyamos aparecer\u00e1 en la p\u00e1gina \u00edndice (nuestro sitio web de una sola p\u00e1gina), e incluir\u00e1s componentes para varias secciones como el h\u00e9roe, acerca de, proyectos y otras.<\/p>\n Un portafolio suele constar de componentes como estos:<\/p>\n Se espera que los componentes Barra de navegaci\u00f3n y Pie de p\u00e1gina aparezcan en todas las p\u00e1ginas si el c tiene m\u00e1s de una p\u00e1gina. Esto se puede conseguir en Next.js definiendo un dise\u00f1o.<\/p>\n En Next.js, un dise\u00f1o es una forma de definir una estructura coherente para los componentes que aparecen en cada p\u00e1gina de un sitio web. El dise\u00f1o suele incluir elementos como una cabecera, un men\u00fa de navegaci\u00f3n y un pie de p\u00e1gina que aparecen en todas las p\u00e1ginas del sitio.<\/p>\n Empieza creando una carpeta de componentes en el directorio src<\/strong> (source) de tu proyecto Next.js. A continuaci\u00f3n, crea los componentes Navbar y Footer que se utilizar\u00e1n dentro del componente Layout.<\/p>\n Aqu\u00ed tienes el componente Navbar en Navbar.jsx<\/strong>:<\/p>\n Aqu\u00ed est\u00e1 el componente Footer en Footer.jsx:<\/strong><\/p>\n Nota:<\/strong> Para que los iconos de Font Awesome funcionen, debes instalar Font Awesome en tu proyecto o utilizar su CDN. Puedes a\u00f1adir el enlace CDN a tu archivo _document.js<\/strong> de la siguiente manera:<\/p>\n Nota:<\/strong> Si enlazas una versi\u00f3n diferente de Font Awesome a trav\u00e9s de la CDN, tendr\u00e1s que cambiar por encima el hash Despu\u00e9s de crear todos los componentes necesarios para tu dise\u00f1o, puedes crear el propio componente Layout y a\u00f1adir este componente a tus p\u00e1ginas envolviendo el contenido de tu p\u00e1gina dentro de \u00e9l.<\/p>\n El componente Layout aceptar\u00e1 una propiedad <code>children<\/code>, que te permitir\u00e1 acceder al contenido de tus p\u00e1ginas Next.js.<\/p>\n Llegados a este punto, ya has creado con \u00e9xito el componente Layout, que contiene la barra de navegaci\u00f3n y el pie de p\u00e1gina junto con los accesorios children colocados correctamente. Ahora puedes a\u00f1adir el componente Layout a tus p\u00e1ginas envolviendo el contenido de la p\u00e1gina en \u00e9l. Esto se har\u00e1 en el archivo _app.js<\/strong>.<\/p>\n Ya has conseguido crear un dise\u00f1o para tu portafolio de desarrollador. Para este portafolio, nos centramos m\u00e1s en Next.js y en c\u00f3mo desplegar tu sitio web en Kinsta. As\u00ed que puedes copiar los estilos del archivo styles\/globals.css<\/a> en tu propio proyecto. Si inicias el sitio web de tu portafolio en modo dev, ahora deber\u00edas ver el dise\u00f1o de tu aplicaci\u00f3n.<\/p>\n Ahora es el momento de dotar a tu sitio web de portafolio del contenido adecuado.<\/p>\n Ahora puedes crear componentes individuales para cada secci\u00f3n de tu portafolio de desarrollador. Todos estos componentes se importar\u00e1n a la p\u00e1gina \u00edndice de tu proyecto Next.js, para que puedan mostrarse cuando lances tu proyecto con El componente Hero es la primera secci\u00f3n debajo de la Barra de Navegaci\u00f3n, cuyo objetivo principal es captar la atenci\u00f3n del usuario y darle una idea de lo que trata el sitio web o la aplicaci\u00f3n.<\/p>\n En el c\u00f3digo anterior, observar\u00e1s que se utiliza el componente Next.js Image<\/a> en lugar de la etiqueta HTML En el componente Acerca de, tambi\u00e9n observar\u00e1s que se ha a\u00f1adido un p\u00e1rrafo sencillo para decir algo sobre el desarrollador junto con algunos iconos sociales de Font Awesome para a\u00f1adir enlaces sociales.<\/p>\n Este es el aspecto que deber\u00eda tener el componente Hero:<\/p>\n Puedes a\u00f1adir m\u00e1s contenido al componente Hero, modificar los estilos en el archivo styles\/globals.css<\/strong> o incluso recrear esta secci\u00f3n a tu manera.<\/p>\n El componente About est\u00e1 pensado para dar a los lectores o a las personas que visiten tu portafolio m\u00e1s informaci\u00f3n sobre ti en tantos p\u00e1rrafos como quieras. Si quieres contar m\u00e1s cosas sobre ti, puedes crear una p\u00e1gina dedicada \u00abSobre m\u00ed\u00bb y a\u00f1adir un bot\u00f3n en esta secci\u00f3n para leer m\u00e1s sobre ti.<\/p>\n El c\u00f3digo anterior contiene dos p\u00e1rrafos de texto sobre el promotor y una imagen del mismo. Este es el aspecto que se espera que tenga la secci\u00f3n \u00abAbout Me\u00bb:<\/p>\n Siempre puedes modificar los estilos para a\u00f1adir m\u00e1s im\u00e1genes y muchas cosas m\u00e1s.<\/p>\n El componente de Skills est\u00e1 pensado para mostrar algunas de las tecnolog\u00edas m\u00e1s utilizadas por el desarrollador o las tecnolog\u00edas que el desarrollador ha utilizado en el pasado.<\/p>\n Puedes hacer que esto sea m\u00e1s f\u00e1cil de mantener creando una matriz en un archivo externo y luego import\u00e1ndola al componente de habilidades, de modo que puedas hacer un bucle en lugar de duplicar c\u00f3digo similar.<\/p>\n En el c\u00f3digo anterior, se crea una tarjeta para cada habilidad, y cada tarjeta contendr\u00e1 el icono de la tecnolog\u00eda de font-awesome y el nombre de la tecnolog\u00eda. Tambi\u00e9n puedes a\u00f1adir m\u00e1s estilos y retocar el c\u00f3digo para hacerlo m\u00e1s atractivo y \u00fanico.<\/p>\n El componente de Projects es una de las secciones importantes del portafolio de un desarrollador. Los proyectos proporcionan pruebas tangibles de las habilidades y capacidades de un desarrollador y muestran su capacidad para aplicar sus conocimientos a problemas del mundo real.<\/p>\n Cada proyecto incluir\u00e1 una breve descripci\u00f3n del mismo, un enlace a su c\u00f3digo fuente (aqu\u00ed utilizamos enlaces de GitHub<\/a>) y cualquier otro detalle que desees a\u00f1adir.<\/p>\n Puedes crear una matriz que contenga los detalles de cada proyecto e importarla a tu componente para evitar codificarlos.<\/p>\n Vamos a crear un archivo data.js<\/strong> para almacenar la matriz de datos del proyecto. Puedes guardar este archivo en la carpeta del componente o en la carpeta pages\/api<\/strong>. Para esta demo, lo almacenar\u00e9 en la carpeta components. Esta matriz contendr\u00e1 un objeto para cada proyecto, y el objeto contendr\u00e1 el nombre del proyecto, la descripci\u00f3n y el enlace de GitHub.<\/p>\n Ahora puedes crear un componente de proyecto para utilizar estos datos haciendo un bucle f\u00e1cilmente. Puedes utilizar cualquier m\u00e9todo de iteraci\u00f3n de JavaScript, pero para este tutorial, puedes utilizar el m\u00e9todo de matriz JavaScript En el c\u00f3digo anterior, has evitado con \u00e9xito la repetici\u00f3n mediante el bucle a trav\u00e9s de la matriz para dar salida a todos los proyectos en el componente Projects, lo que facilita el mantenimiento y la adici\u00f3n de m\u00e1s proyectos.<\/p>\n Una de las razones para crear un portafolio de desarrollador es que los clientes potenciales puedan ponerse en contacto contigo. Una forma ser\u00eda que la gente te enviara un correo electr\u00f3nico, que es lo que facilitaremos en este componente Contact.<\/p>\n Coloca tu direcci\u00f3n de correo electr\u00f3nico en la etiqueta Ya has creado con \u00e9xito todos los componentes para tu aplicaci\u00f3n de portafolio. El siguiente paso ser\u00eda a\u00f1adirlos a tu p\u00e1gina de \u00edndice. Navega hasta el archivo pages\/index.js<\/strong> -que se crea por defecto- y sustituye su c\u00f3digo por el siguiente.<\/p>\n Cuando ejecutes ahora tu aplicaci\u00f3n, observar\u00e1s que se ha creado un sitio web<\/a> de portafolio completo. Por \u00faltimo, antes de desplegar tu aplicaci\u00f3n, vamos a instalar una dependencia. Una de las ventajas de utilizar Next.js es la gran cantidad de funciones que aporta, como el enrutamiento basado en archivos, la optimizaci\u00f3n de im\u00e1genes y muchas m\u00e1s.<\/p>\n La optimizaci\u00f3n de im\u00e1genes se gestiona con el componente Next.js Ahora puedes desplegar tu aplicaci\u00f3n, y las im\u00e1genes funcionar\u00e1n correctamente con toda la optimizaci\u00f3n que proporciona Next.js.<\/p>\n Una vez que est\u00e9s contento con tu portafolio mostrando tus mejores trabajos de desarrollo e informaci\u00f3n clave, es probable que quieras compartirlo con los dem\u00e1s, \u00bfverdad? Veamos c\u00f3mo hacerlo utilizando GitHub y la plataforma de Alojamiento de Aplicaciones de Kinsta.<\/p>\n Hay varias formas de enviar c\u00f3digos a GitHub, pero vamos a utilizar Git para este tutorial. Git es ampliamente utilizado en el desarrollo de software<\/a> porque proporciona una forma fiable y eficiente de gestionar los cambios de c\u00f3digo, colaborar en proyectos y mantener el historial de versiones.<\/p>\n Puedes subir tu c\u00f3digo a GitHub siguiendo estos pasos:<\/p>\n Primero, crea un nuevo repositorio (igual que una carpeta local para almacenar tu c\u00f3digo). Puedes hacerlo accediendo a tu cuenta de GitHub, haciendo clic en el bot\u00f3n +<\/strong> de la esquina superior derecha de la pantalla y seleccionando Nuevo repositorio<\/strong>\u00a0en el men\u00fa desplegable, como se ve en la imagen siguiente.<\/p>\n El siguiente paso ser\u00eda dar un nombre a tu repositorio, a\u00f1adir una descripci\u00f3n (opcional) y seleccionar si quieres que tu repositorio sea p\u00fablico o privado. A continuaci\u00f3n, haz clic en Crear repositorio<\/strong>. Ya puedes enviar tu c\u00f3digo al nuevo repositorio de GitHub.<\/p>\n Todo lo que se necesita para empujar tu c\u00f3digo con Git es la URL del repositorio, que puedes encontrar en la p\u00e1gina principal del repositorio, bajo el bot\u00f3n Clonar o descargar<\/strong>, o en los pasos que aparecen despu\u00e9s de crear un repositorio.<\/p>\n Puedes prepararte para env\u00edar tu c\u00f3digo abriendo tu terminal o s\u00edmbolo del sistema y navegando hasta el directorio que contiene tu proyecto. Utiliza el siguiente comando para inicializar un repositorio Git local:<\/p>\n Ahora a\u00f1ade tu c\u00f3digo al repositorio Git local utilizando el siguiente comando:<\/p>\n El comando anterior a\u00f1ade todos los archivos del directorio actual y sus subdirectorios al nuevo repositorio Git. Ahora puedes confirmar tus cambios utilizando el siguiente comando:<\/p>\n Nota:<\/strong> Puedes sustituir \u00abmi primera confirmaci\u00f3n\u00bb por tu propio mensaje breve que describa los cambios realizados.<\/p>\n Por \u00faltimo, env\u00eda tu c\u00f3digo a GitHub utilizando los siguientes comandos:<\/p>\n Nota:<\/strong> Aseg\u00farate de sustituir \u00ab[URL del repositorio]\u00bb por la URL de tu propio repositorio de GitHub.<\/p>\n Una vez que hayas completado estos pasos, tu c\u00f3digo ser\u00e1 enviado a GitHub y accesible a trav\u00e9s de la URL de tu repositorio. Ahora puedes desplegar tu repositorio en Kinsta.<\/p>\n El despliegue en Kinsta se realiza en cuesti\u00f3n de minutos. Comienza en el panel de control MyKinsta<\/a> para iniciar sesi\u00f3n o crear tu cuenta.<\/p>\n A continuaci\u00f3n, autorizar\u00e1s a Kinsta en GitHub<\/a> en estos r\u00e1pidos pasos:<\/p>\n Aparecer\u00e1 un modal a trav\u00e9s del cual podr\u00e1s seleccionar el repositorio que deseas desplegar.<\/p>\n Si tienes varias ramas en tu repositorio, puedes seleccionar la que deseas desplegar. Tambi\u00e9n puedes asignar un nombre a esta aplicaci\u00f3n. Aseg\u00farate de seleccionar una ubicaci\u00f3n de centro de datos<\/a> entre las disponibles en 24, y entonces Kinsta detectar\u00e1 autom\u00e1ticamente un comando de inicio.<\/p>\n En este momento, tu aplicaci\u00f3n comenzar\u00e1 a desplegarse. En unos minutos, se proporcionar\u00e1 un enlace para acceder a la versi\u00f3n desplegada de tu aplicaci\u00f3n. En este caso, es: https:\/\/kinsta-developer-portfolio-ir8w8.kinsta.app\/<\/strong><\/p>\n Nota:<\/strong> Se ha activado el despliegue autom\u00e1tico, por lo que Kinsta vuelve a desplegar autom\u00e1ticamente tu aplicaci\u00f3n cada vez que realizas cambios en tu c\u00f3digo base y lo env\u00edas a GitHub.<\/p>\n\n Hay varias razones por las que los desarrolladores deber\u00edan considerar el uso de Next.js para sus proyectos web. En primer lugar, proporciona un rendimiento optimizado desde el primer momento, con funciones como la precarga y la divisi\u00f3n del c\u00f3digo que ayudan a reducir los tiempos de carga de las p\u00e1ginas. En segundo lugar, proporciona una experiencia de desarrollo familiar para los desarrolladores de React, ya que admite herramientas populares como los componentes con estilo y las \u00faltimas funciones de React.<\/p>\n Kinsta admite varias opciones de despliegue para Next.js, incluido el alojamiento tradicional basado en servidor y las modernas plataformas sin servidor. Esto permite a los desarrolladores elegir la opci\u00f3n de despliegue que mejor se adapte a sus necesidades, al tiempo que se benefician de las optimizaciones de rendimiento del framework y de otras ventajas.<\/p>\n En este tutorial, has aprendido paso a paso c\u00f3mo construir un sitio de portafolio responsivo utilizando Next.js y luego desplegarlo en Kinsta.<\/p>\n Puedes probar gratis el Alojamiento de Aplicaciones de Kinsta<\/a>\u00a0y, si te gusta, optar por nuestro plan Nivel Hobby<\/a> a partir de 7 d\u00f3lares\/mes<\/strong>.<\/p>\n Ahora te toca a ti desafiarte a ti mismo: \u00a1a\u00f1ade m\u00e1s funciones a tu sitio web de portafolio reci\u00e9n desarrollado! Aqu\u00ed tienes algunas ideas para que fluya tu creatividad: a\u00f1ade m\u00e1s p\u00e1ginas con informaci\u00f3n detallada, integra un blog con MDX, implementa alguna animaci\u00f3n. Comparte tus proyectos y experiencias en los comentarios de abajo<\/p>\n","protected":false},"excerpt":{"rendered":" El portafolio de un desarrollador es una colecci\u00f3n de muestras de trabajo y proyectos que muestran tus habilidades y experiencia. Un portafolio s\u00f3lido te diferencia de …<\/p>\n","protected":false},"author":287,"featured_media":63785,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1296],"class_list":["post-63784","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-frameworks-javascript"],"yoast_head":"\nRequisitos<\/h2>\n
\n
\u00bfPor Qu\u00e9 Next.js?<\/h2>\n
\n
\n
\n
C\u00f3mo Configurar Tu Entorno de Desarrollo de Next.js<\/h2>\n
npx<\/code> para ejecutar paquetes npm sin tener que instalarlos globalmente en tu sistema. Una vez hecho esto, ya puedes crear un proyecto Next.js ejecutando el siguiente comando:<\/p>\nnpx create-next-app@latest my-portfolio<\/code><\/pre>\nnpm run dev<\/code> para que tu aplicaci\u00f3n est\u00e9 disponible en localhost:3000<\/strong>.<\/p>\n![\"Crear](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/nextjs-installation-with-options.jpg\")
npx<\/code>, se crea autom\u00e1ticamente una estructura de carpetas con los siguientes directorios principales:<\/p>\n\n
C\u00f3mo Crear un Portafolio Responsivo para Desarrolladores con Next.js<\/h2>\n
\n
Definir dise\u00f1os en Next.js<\/h3>\n
\/\/ components\/Navbar.jsx\n\nimport Link from \"next\/link\";\n\nconst Navbar = () => {\n return (\n <div className=\"nav-container\">\n <div className=\"logo\">\n <Link href=\"\/\">\n Joe's Portfolio\n <\/Link>\n <\/div>\n <a href=\"\" className=\"cta-btn\">Resume<\/a>\n <\/div>\n )\n}\n\nexport default Navbar;<\/code><\/pre>\n\/\/ components\/Footer.jsx\n\nconst Footer = () => {\n return (\n <>\n <hr\/>\n <div className=\"footer-container\">\n <p>\n © {new Date().getFullYear()} Joel's Portfolio\n <\/p>\n <div className=\"social_icons\">\n <a\n href=\"https:\/\/twitter.com\/olawanle_joel\"\n aria-label=\"Twitter\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <i className=\"fa-brands fa-twitter\"><\/i>\n <\/a>\n <a\n href=\"https:\/\/github.com\/olawanlejoel\"\n aria-label=\"GitHub\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <i className=\"fa-brands fa-github\"><\/i>\n <\/a>\n <a\n href=\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\"\n aria-label=\"LinkedIn\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <i className=\"fa-brands fa-linkedin\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n <\/>\n )\n}\n\nexport default Footer;<\/code><\/pre>\n\/\/ pages\/_document.js\n\nimport { Html, Head, Main, NextScript } from 'next\/document';\n\nexport default function Document() {\n return (\n <Html lang=\"en\">\n <Head>\n <meta charSet=\"utf-8\" \/>\n <link\n rel=\"stylesheet\"\n href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.2.1\/css\/all.min.css\"\n integrity=\"sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf\/nwasF0nqhPay5w\/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==\"\n crossorigin=\"anonymous\"\n referrerpolicy=\"no-referrer\"\n \/>\n <\/Head>\n <body>\n <Main \/>\n <NextScript \/>\n <\/body>\n <\/Html>\n );\n}<\/code><\/pre>\nintegrity<\/code> apropiado para esa versi\u00f3n.<\/p>\n\/\/ components\/Layout.jsx\n\nimport Navbar from '.\/navbar';\nimport Footer from '.\/footer';\n\nconst Layout = ({ children }) => {\n return (\n <>\n <Navbar \/>\n <main>{children}<\/main>\n <Footer \/>\n <\/>\n )\n}\n\nexport default Layout;<\/code><\/pre>\n\/\/ pages\/_app.js\n\nimport '@\/styles\/globals.css';\nimport Layout from '..\/components\/layout';\n\nexport default function App({ Component, pageProps }) {\n return (\n <Layout>\n <Component {...pageProps} \/>\n <\/Layout>\n );\n}<\/code><\/pre>\n![\"Componente](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/layout-component.jpg\")
Crear componentes de portafolio<\/h3>\n
npm run dev<\/code>.<\/p>\nEl componente Hero<\/h4>\n
\/\/ components\/Hero.jsx\n\nimport Image from \"next\/image\";\n\nconst Hero = () => {\n return (\n <div className=\"hero-container\">\n <Image src='\/images\/profile.jpeg' className=\"profile-img\" width={300} height={300} alt=\"Joe's personal headshot\" \/>\n <div className=\"hero-text\">\n <h1>Hey, I'm Joe \ud83d\udc4b<\/h1>\n <p>\n I'm a software developer based in Lagos, Nigeria. I specialize in building (and occasionally designing)\n exceptional websites, applications, and everything in between.\n <\/p>\n <div className=\"social-icons\">\n <a\n href=\"https:\/\/twitter.com\/olawanle_joel\"\n aria-label=\"Twitter\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <i className=\"fa-brands fa-twitter\"><\/i>\n <\/a>\n <a\n href=\"https:\/\/github.com\/olawanlejoel\"\n aria-label=\"GitHub\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <i className=\"fa-brands fa-github\"><\/i>\n <\/a>\n <a\n href=\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\"\n aria-label=\"LinkedIn\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <i className=\"fa-brands fa-linkedin\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n )\n}\n\nexport default Hero;<\/code><\/pre>\nimg<\/code> para a\u00f1adir la imagen, ya que permite la optimizaci\u00f3n autom\u00e1tica de la imagen, el cambio de tama\u00f1o y muchas cosas m\u00e1s.<\/p>\n![\"Componente](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/hero-component.jpg\")
El componente About<\/h4>\n
\/\/ components\/About.jsx\n\nimport Image from \"next\/image\";\n\nconst About = () => {\n return (\n <div className=\"about-container\">\n <h2>About Me<\/h2>\n <div className=\"flex-about\">\n <div className=\"about-text\">\n <p>\n As a developer, I have always been passionate about creating elegant and effective solutions to\n complex problems. I have a strong foundation in software development, with a focus on web\n technologies such as HTML, CSS, and JavaScript. I enjoy working on both the front-end and\n back-end of applications, and I am always looking for ways to optimize performance, improve user\n experience, and ensure the highest level of code quality.\n <\/p>\n <p>Throughout my career, I have worked on a wide range of projects, from simple static websites to\n complex enterprise-level applications. I am experienced in working with a variety of development\n tools and frameworks, including React, Angular, Vue.js, Node.js, and Laravel. I am always eager\n to learn and explore new technologies, and I am constantly seeking out opportunities to improve\n my skills and knowledge.<\/p>\n <\/div>\n <div className=\"about-img\">\n <Image src='\/images\/about.jpeg' className=\"profile-img\" width={300} height={500}\/>\n <\/div>\n <\/div>\n <\/div>\n )\n}\n\nexport default About;<\/code><\/pre>\n![\"Componente](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/about-component.jpg\")
El componente Skills<\/h4>\n
![\"Componente](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/skills-component.jpg\")
\/\/ components\/Skills.jsx\n\nconst Skills = () => {\n return (\n <div className=\"skills-container\">\n <h2>Skills<\/h2>\n <div className=\"grid-skills\">\n <div className=\"skill-card html\">\n <i className=\"fa-brands fa-html5 html-icon\"><\/i>\n <p>HTML<\/p>\n <\/div>\n <div className=\"skill-card css\">\n <i className=\"fa-brands fa-css3-alt css-icon\"><\/i>\n <p>CSS<\/p>\n <\/div>\n <div className=\"skill-card js\">\n <i className=\"fa-brands fa-js-square js-icon\"><\/i>\n <p>JavaScript<\/p>\n <\/div>\n <div className=\"skill-card react\">\n <i className=\"fa-brands fa-react react-icon\"><\/i>\n <p>React<\/p>\n <\/div>\n <div className=\"skill-card node\">\n <i className=\"fa-brands fa-node-js node-icon\"><\/i>\n <p>Node<\/p>\n <\/div>\n <div className=\"skill-card python\">\n <i className=\"fa-brands fa-python python-icon\"><\/i>\n <p>Python<\/p>\n <\/div>\n <\/div>\n <\/div>\n )\n}\n\nexport default Skills;<\/code><\/pre>\nEl componente Projects<\/h4>\n
![\"Componente](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/projects-component.jpg\")
\/\/ components\/data.js\n\nexport const projectData = [\n {\n id: 1,\n title: 'Todo List App',\n description:\n 'A simple Todo List App built with JavaScript. All datas are stored in localstorage. It helps users check list out their plans and tick as they do them.',\n gitHubLink: 'https:\/\/github.com\/olawanlejoel\/Todo-List-App',\n },\n {\n id: 2,\n title: 'Books Library App',\n description:\n 'A simple Book Library App built with JavaScript. It helps readers have a good list of books they are either currently reading or have finished reading.',\n gitHubLink: 'https:\/\/github.com\/olawanlejoel\/Book-Library',\n },\n {\n id: 3,\n title: 'Quotes Generator',\n description:\n 'Helps you generate quotes from about 1600 quotes written by different authors . Quotes are automatically copied to your clipboards.',\n gitHubLink: 'https:\/\/github.com\/olawanlejoel\/random-quote-generator',\n },\n {\n id: 4,\n title: 'Password Generator',\n description:\n 'Helps you generates random passwords, you can select what you want your password to entail and also you can copy generated password to clipboard.',\n gitHubLink: 'https:\/\/github.com\/olawanlejoel\/Password-Generator',\n },\n {\n id: 5,\n title: 'Twitter UI Clone',\n description:\n 'Simple Twitter UI clone built with TailwindCSS and Vue Js. This covers only the homepage of Twitter UI. This is cool to get started with TailwindCSS as it helps understand basic concepts.',\n gitHubLink: 'https:\/\/github.com\/olawanlejoel\/TwitterUI-clone',\n },\n];<\/code><\/pre>\nmap()<\/code> para recorrer en bucle la matriz de datos despu\u00e9s de importarla al componente Projects.<\/p>\n\/\/ components\/Projects.jsx\n\nimport { projectData } from '.\/data.js';\n\nconst Projects = () => {\n return (\n <div className=\"projects-container\">\n <h2>Projects<\/h2>\n <div className=\"projects-grid\">\n {projectData && projectData.map((project) => (\n <div className=\"project-card\" key={project.id}>\n <div className=\"project-header\">\n <i className=\"fa-regular fa-folder-open folder-icon\"><\/i>\n <div className=\"small-icons\">\n <a href={project.gitHubLink}><i className=\"fa-brands fa-github\"><\/i><\/a>\n <\/div>\n <\/div>\n <h3>{project.title}<\/h3>\n <p>{project.description}<\/p>\n <\/div>\n ))\n }\n <\/div>\n <\/div>\n )\n}\n\nexport default Projects;<\/code><\/pre>\nEl componente Contact<\/h4>\n
\/\/ components\/Contact.jsx\n\nconst Contact = () => {\n return (\n <div className=\"contact-container\">\n <h2>Get In Touch<\/h2>\n <p>If you want us to work together, have any questions or want me to speak at your event, my inbox is always open. Whether I just want to say hi, I'll try my best to get back to you! Cheers!<\/p>\n <a href=\"mailto:example@kinsta.com\" className='cta-btn'>Say Hello<\/a>\n <\/div>\n )\n}\n\nexport default Contact;<\/code><\/pre>\na<\/code> para que el bot\u00f3n lance una aplicaci\u00f3n de correo electr\u00f3nico con un mensaje dirigido a ti.<\/p>\n![\"Componente](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/contact-component.jpg\")
\/\/ pages\/index.js\n\nimport Hero from '@\/components\/Hero';\nimport About from '@\/components\/About';\nimport Skills from '@\/components\/Skills';\nimport Projects from '@\/components\/Projects';\nimport Contact from '@\/components\/Contact';\n\nimport Head from 'next\/head';\n\nconst Home = () => {\n return (\n <>\n <Head>\n <title>Joel's Portfolio<\/title>\n <meta name=\"description\" content=\"Joel's Portfolio\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n <link rel=\"icon\" href=\"\/favicon.ico\" \/>\n <\/Head>\n <div>\n <Hero \/>\n <About \/>\n <Skills \/>\n <Projects \/>\n <Contact \/>\n <\/div>\n <\/>\n );\n};\n\nexport default Home;<\/code><\/pre>\nImage<\/code>. Antes de desplegar una aplicaci\u00f3n en producci\u00f3n que utilice el componente Imagen de Next.js, se recomienda encarecidamente que instales sharp<\/a>. Puedes hacerlo navegando a tu terminal, asegur\u00e1ndote de que est\u00e1s en el directorio de tu proyecto, y ejecutando el siguiente comando:<\/p>\nnpm i sharp<\/code><\/pre>\nC\u00f3mo Desplegar la aplicaci\u00f3n Next.js en Kinsta<\/h2>\n
Env\u00eda tu c\u00f3digo a GitHub<\/h3>\n
![\"Crea](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/Create-a-new-repository-on-GitHub.jpg\")
![\"Accede](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/how-to-get-repository-URL.jpg\")
git init<\/code><\/pre>\ngit add .<\/code><\/pre>\ngit commit -m \"my first commit\"<\/code><\/pre>\n\ngit remote add origin [repository URL]\ngit push -u origin master<\/code><\/pre>\nDespliega tu Portafolio en Kinsta<\/h3>\n
\n
![\"Crea](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/host-application-on-kinsta.jpg\")
![\"Detectar](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/deploying_application_to_kinsta.gif\")
![\"Enlace](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/deployemnt-link-on-kinsta.jpg\")
Resumen<\/h2>\n