Ecco una demo live del portfolio da developer<\/a> che costruirete con Next.js.<\/p>\n \u00c8 possibile accedere al repository GitHub del progetto<\/a> se si desidera dare un’occhiata pi\u00f9 da vicino, oppure si pu\u00f2 utilizzare questo template di progetto di portfolio di avvio<\/a> selezionando Use this template<\/strong> > Create a new repository<\/strong>. Questo copier\u00e0 il codice iniziale in un nuovo repository. Il progetto iniziale contiene i codici di base, come gli stili, un link al CDN di Font Awesome, le immagini e la struttura di base.<\/p>\n Questo \u00e8 un tutorial di tipo “follow-along”. Sar\u00e0 pi\u00f9 facile capire il codice con:<\/p>\n Next.js<\/a> \u00e8 un framework di librerie JavaScript<\/a> open-source basato su React che pu\u00f2 essere utilizzato per un’ampia gamma di progetti di sviluppo web perch\u00e9 semplifica la creazione di applicazioni statiche e renderizzate lato server. Semplifica il processo sfruttando le migliori caratteristiche di React e ottimizzando le prestazioni di rendering per migliorare l’esperienza dell’utente. Alcuni dei casi d’uso pi\u00f9 comuni di Next.js sono:<\/p>\n Per configurare un ambiente di sviluppo per Next.js, prima di tutto installate Node.js<\/a> sul vostro computer, perch\u00e9 userete il comando Apparir\u00e0 un prompt che vi chieder\u00e0 di confermare alcune dipendenze aggiuntive. A questo punto potete eseguire Quando create un progetto Next.js utilizzando il comando A seconda della configurazione e delle caratteristiche specifiche, possono essere generati altri file e directory, ma queste sono le directory principali di un progetto Next.js di base.<\/p>\n Per questo tutorial, tutto ci\u00f2 che costruiremo apparir\u00e0 sulla pagina indice (il nostro sito web a una pagina) e includerete i componenti per le varie sezioni come hero, about, projects e altre.<\/p>\n Un portfolio \u00e8 tipicamente composto da componenti come questi:<\/p>\n I componenti Navbar e Footer devono apparire su tutte le pagine se il portfolio ha pi\u00f9 di una pagina. Questo pu\u00f2 essere ottenuto in Next.js definendo un layout.<\/p>\n In Next.js, uno dei modi per definire una struttura coerente per i componenti che appaiono su ogni pagina di un sito web \u00e8 stabilire un layout. Il layout di solito include elementi come l’intestazione, il menu di navigazione e il pi\u00e8 di pagina visualizzati in tutte le pagine del sito.<\/p>\n Iniziate creando una cartella components nella cartella src<\/strong> (sorgente) del vostro progetto Next.js. Successivamente, create i componenti Navbar e Footer che verranno utilizzati all’interno del componente Layout.<\/p>\n Ecco il componente Navbar in Navbar.jsx<\/strong>:<\/p>\n Ecco il componente Footer in Footer.jsx:<\/strong><\/p>\n Nota:<\/strong> affinch\u00e9 le icone di Font Awesome funzionino, dovete installare Font Awesome nel vostro progetto o utilizzare il suo CDN. Potete aggiungere il link del CDN al vostro file _document.js<\/strong> in questo modo:<\/p>\n Nota:<\/strong> se collegate una versione diversa di Font Awesome tramite il CDN, dovrete inserire l’hash Dopo aver creato tutti i componenti necessari per il layout, potete creare il componente Layout stesso e aggiungerlo alle vostre pagine avvolgendo il contenuto della pagina al suo interno.<\/p>\n Il componente Layout accetter\u00e0 un prop <code>children<\/code> che vi permetter\u00e0 di accedere al contenuto delle pagine Next.js.<\/p>\n A questo punto, avete creato con successo il componente Layout che contiene la barra di navigazione e il pi\u00e8 di pagina con i prop children posizionati correttamente. Ora potete aggiungere il componente Layout alle vostre pagine avvolgendovi il contenuto della pagina. Questo verr\u00e0 fatto nel file _app.js<\/strong>.<\/p>\n Avete quindi creato con successo un layout per il vostro portfolio da sviluppatrici o sviluppatori. Per questo portfolio, ci concentreremo maggiormente su Next.js e su come distribuire il vostro sito web su Kinsta. Potete quindi copiare gli stili nel file styles\/globals.css<\/a> del progetto. Se lanciate il sito web del portfolio in modalit\u00e0 dev, dovreste vedere il layout della vostra applicazione.<\/p>\n Ora \u00e8 il momento di dare al vostro sito web portfolio il contenuto appropriato.<\/p>\n Ora potete creare componenti individuali per ogni sezione del portfolio da developer. Tutti questi componenti saranno importati nella pagina indice del vostro progetto Next.js, in modo da essere visualizzati quando lancerete il progetto con Il componente Hero \u00e8 la prima sezione al di sotto della Navbar, il cui scopo principale \u00e8 quello di catturare l’attenzione dell’utente e dargli un’idea del sito web o dell’applicazione.<\/p>\n Nel codice qui sopra, noterete che il componente Next.js Image<\/a> viene utilizzato al posto del tag HTML Nel componente About, noterete anche che \u00e8 stato aggiunto un semplice paragrafo per parlare dello sviluppatore e alcune icone social di Font Awesome per aggiungere i link social.<\/p>\n Ecco come dovrebbe apparire il componente Hero:<\/p>\n Potete aggiungere altri contenuti al componente Hero, modificare gli stili nel file styles\/globals.css<\/strong> o addirittura ricreare questa sezione a modo vostro.<\/p>\n Il componente About ha lo scopo di fornire ai lettori o alle persone che visitano il vostro portfolio ulteriori informazioni su di voi, in quanti paragrafi desiderate. Se volete raccontare qualcosa di pi\u00f9 su di voi, potete creare una pagina dedicata “Chi sono” e aggiungere un pulsante in questa sezione per permettere agli utenti di saperne di pi\u00f9 su di voi.<\/p>\n Il codice qui sopra contiene due paragrafi di testo sullo sviluppatore insieme a un’immagine. Questo \u00e8 l’aspetto che dovrebbe avere la sezione About:<\/p>\n Potete sempre modificare gli stili per aggiungere altre immagini e molto altro.<\/p>\n Il componente delle competenze ha lo scopo di mostrare alcune delle tecnologie pi\u00f9 utilizzate dal developer o le tecnologie che ha utilizzato in passato.<\/p>\n Potete semplificare la manutenzione creando un array in un file esterno e poi importarlo nel componente delle competenze, in modo da poterlo scorrere invece di duplicare codice simile.<\/p>\n Nel codice qui sopra, viene creata una scheda per ogni competenza e ogni scheda conterr\u00e0 l’icona della tecnologia di font-awesome e il nome della tecnologia. Potete anche aggiungere altri stili e modificare il codice per renderlo pi\u00f9 attraente e unico.<\/p>\n Il componente progetti \u00e8 una delle sezioni pi\u00f9 importanti del portfolio di sviluppatrici e sviluppatori. I progetti forniscono una prova tangibile delle competenze e delle abilit\u00e0 di un developer e mostrano la sua capacit\u00e0 di applicare le proprie conoscenze ai problemi del mondo reale.<\/p>\n Ogni progetto includer\u00e0 una breve descrizione del progetto, un link al codice sorgente (qui utilizziamo i link di GitHub<\/a>) e qualsiasi altro dettaglio vogliate aggiungere.<\/p>\n Potete creare un array per contenere i dettagli di ogni progetto e poi importarlo nel vostro componente per evitare di codificarli.<\/p>\n Creiamo un file data.js<\/strong> per memorizzare l’array di dati del progetto. Potete memorizzare questo file nella cartella del componente o nella cartella pages\/api<\/strong>. Per questa demo, lo memorizzer\u00f2 nella cartella dei componenti. Questo array conterr\u00e0 un oggetto per ogni progetto e l’oggetto conterr\u00e0 il nome del progetto, la descrizione e il link GitHub.<\/p>\n A questo punto, potete creare un componente di progetto che utilizzi questi dati eseguendo un semplice loop. \u00c8 possibile utilizzare qualsiasi metodo di iterazione JavaScript, ma per questo tutorial potete utilizzare il metodo array JavaScript Nel codice qui sopra, avete evitato le ripetizioni eseguendo il looping attraverso l’array per inserire tutti i progetti nel componente Progetti, rendendo pi\u00f9 facile la manutenzione e l’aggiunta di altri progetti.<\/p>\n Uno dei motivi per creare un portfolio da developer \u00e8 che i vostri potenziali clienti potranno contattarvi. Ad esempio, potrebbero inviarvi un’e-mail, cosa che faciliteremo in questo componente Contatti.<\/p>\n Inserite il vostro indirizzo e-mail nel tag Ora avete creato con successo tutti i componenti per la vostra applicazione portfolio. Il prossimo passo sar\u00e0 quello di aggiungerli alla vostra pagina indice. Andate al file pages\/index.js<\/strong> – che viene creato di default – e sostituitene il codice con il seguente.<\/p>\n Quando eseguirete l’applicazione, noterete che \u00e8 stato creato un sito web di portfolio<\/a> completo. Infine, prima di distribuire l’applicazione, installiamo una dipendenza. Un vantaggio dell’utilizzo di Next.js \u00e8 rappresentato dalle numerose funzionalit\u00e0 che offre, come il routing basato su file, l’ottimizzazione delle immagini e molto altro ancora.<\/p>\n L’ottimizzazione delle immagini \u00e8 gestita dal componente Next.js Ora potete distribuire la vostra applicazione e le immagini funzioneranno correttamente con l’ottimizzazione completa offerta da Next.js.<\/p>\n Una volta soddisfatti del vostro portfolio con i vostri migliori lavori di sviluppo e le informazioni pi\u00f9 importanti, probabilmente vorrete condividerlo con gli altri, giusto? Vediamo come farlo utilizzando GitHub e la piattaforma di Hosting di Applicazioni Kinsta.<\/p>\n Esistono vari modi per inviare il codice a GitHub, ma per questo tutorial useremo Git. Git \u00e8 molto utilizzato nello sviluppo di software<\/a> perch\u00e9 offre un modo affidabile ed efficiente per gestire le modifiche al codice, collaborare ai progetti e mantenere la cronologia delle versioni.<\/p>\n Potete caricare il codice su GitHub seguendo i seguenti passaggi:<\/p>\n Per prima cosa, create un nuovo repository (come una cartella locale in cui salvare il codice). Potete farlo accedendo al vostro account GitHub, cliccando sul pulsante +<\/strong> nell’angolo in alto a destra dello schermo e selezionando Nuovo repository<\/strong> dal menu a tendina, come mostrato nell’immagine sottostante.<\/p>\n Il passo successivo consiste nell’assegnare un nome al repository, aggiungere una descrizione (facoltativa) e selezionare se il repository deve essere pubblico o privato. Poi cliccate su Crea repository<\/strong>. Ora potete inviare il vostro codice al nuovo repository GitHub.<\/p>\n Tutto ci\u00f2 che serve per eseguire il push del codice con Git \u00e8 l’URL del repository, che troverete nella pagina principale del repository, sotto il pulsante Clona o scarica<\/strong>, oppure nei passaggi che appaiono dopo la creazione di un repository.<\/p>\n Potete prepararvi a eseguire il push del codice aprendo il terminale o il prompt dei comandi e navigando nella directory che contiene il vostro progetto. Usate il seguente comando per inizializzare un repository Git locale:<\/p>\n Ora aggiungete il vostro codice al repository Git locale usando il seguente comando:<\/p>\n Il comando precedente aggiunge tutti i file della directory corrente e delle sue sottodirectory al nuovo repository Git. Ora potete effettuare il commit delle vostre modifiche utilizzando il seguente comando:<\/p>\n Nota:<\/strong> \u00e8 possibile sostituire “il mio primo commit” con un breve messaggio che descriva le modifiche apportate.<\/p>\n Infine, inviate il vostro codice a GitHub utilizzando i seguenti comandi:<\/p>\n Nota:<\/strong> assicuratevi di sostituire “[URL del repository]” con l’URL del vostro repository GitHub.<\/p>\n Una volta completati questi passaggi, il vostro codice verr\u00e0 inviato a GitHub e sar\u00e0 accessibile attraverso l’URL del repository. Ora potete distribuire il vostro repository su Kinsta.<\/p>\n La distribuzione su Kinsta avviene in pochi minuti. Iniziate dal cruscotto My Kinsta<\/a> per accedere o creare il vostro account.<\/p>\n Successivamente, autorizzerete Kinsta su GitHub<\/a> in questi rapidi passaggi:<\/p>\n Apparir\u00e0 una maschera attraverso la quale potrete selezionare il repository che desiderate distribuire.<\/p>\n Se avete pi\u00f9 branch nel vostro repository, potete selezionare quello che desiderate distribuire. Potete anche assegnare un nome a questa applicazione. Assicuratevi di selezionare un centro dati<\/a> tra quelli disponibili all’indirizzo 24, dopodich\u00e9 Kinsta rilever\u00e0 automaticamente un comando di avvio.<\/p>\n A questo punto, la vostra applicazione inizier\u00e0 ad essere distribuita. Entro pochi minuti, verr\u00e0 fornito un link per accedere alla versione distribuita della vostra applicazione. In questo caso si tratta di: https:\/\/kinsta-developer-portfolio-ir8w8.kinsta.app\/<\/strong><\/p>\n Nota:<\/strong> il deploy automatico \u00e8 stato abilitato, quindi Kinsta reinstalla automaticamente la vostra applicazione ogni volta che apportate delle modifiche alla vostra base di codice e la inviate a GitHub.<\/p>\n\n Ci sono diversi motivi per cui le sviluppatrici e gli sviluppatori dovrebbero prendere in considerazione l’utilizzo di Next.js per i loro progetti web. In primo luogo, offre prestazioni ottimizzate fin dall’inizio, grazie a funzioni come il pre-fetching e la suddivisione del codice che aiutano a ridurre i tempi di caricamento delle pagine. In secondo luogo, offre un’esperienza di sviluppo familiare agli sviluppatori React, supportando strumenti popolari come i componenti in stile e le ultime funzionalit\u00e0 di React.<\/p>\n Kinsta supporta diverse opzioni di distribuzione per Next.js, tra cui l’hosting tradizionale basato su server e le moderne piattaforme serverless. Questo permette ai developer di scegliere l’opzione di distribuzione pi\u00f9 adatta alle loro esigenze e di beneficiare delle ottimizzazioni delle prestazioni e di altri vantaggi del framework.<\/p>\n In questo tutorial avete imparato passo dopo passo come costruire un sito di portfolio responsive utilizzando Next.js e poi distribuirlo su Kinsta.<\/p>\n Potete provare gratuitamente l’Hosting di Applicazioni di Kinsta<\/a> e, se vi piace, optare per il nostro Piano Hobby<\/a> a partire da 7 dollari al mese<\/strong>.<\/p>\n Ora \u00e8 il momento di sfidare voi stessi: aggiungete altre funzionalit\u00e0 al vostro sito web-portfolio appena sviluppato! Ecco alcune idee per stimolare la vostra creativit\u00e0: aggiungete altre pagine con informazioni dettagliate, integrate un blog con MDX, implementate delle animazioni. Condividete i vostri progetti e le vostre esperienze nei commenti qui sotto!<\/p>\n","protected":false},"excerpt":{"rendered":" Il portfolio di un developer \u00e8 una raccolta di esempi di lavori e progetti che mettono in mostra le capacit\u00e0 e l’esperienza di uno sviluppatore. Un …<\/p>\n","protected":false},"author":287,"featured_media":66611,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[25918],"class_list":["post-66610","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-framework-javascript"],"yoast_head":"\nRequisiti\/Prequisiti<\/h2>\n
\n
Perch\u00e9 Next.js?<\/h2>\n
\n
\n
\n
Come Configurare l’Ambiente di Sviluppo di Next.js<\/h2>\n
npx<\/code> per eseguire i pacchetti npm senza doverli installare globalmente sul vostro sistema. Una volta fatto questo, \u00e8 possibile creare un progetto Next.js eseguendo il seguente comando:<\/p>\nnpx create-next-app@latest my-portfolio<\/code><\/pre>\nnpm run dev<\/code> per rendere disponibile la vostra applicazione su localhost:3000<\/strong>.<\/p>\n![\"Codice](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/nextjs-installation-with-options.jpg\")
npx<\/code>, viene creata automaticamente una struttura di cartelle con le seguenti directory principali:<\/p>\n\n
Come Costruire un Portfolio da Developer Responsive con Next.js<\/h2>\n
\n
Definire i Layout in 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> appropriato per quella versione.<\/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![\"Immagine](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/layout-component.jpg\")
Creare i Componenti del Portfolio<\/h3>\n
npm run dev<\/code>.<\/p>\nIl 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> per aggiungere l’immagine, perch\u00e9 consente l’ottimizzazione automatica delle immagini, il loro ridimensionamento e molto altro.<\/p>\n![\"Componente](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/hero-component.jpg\")
Il 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![\"Il](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/about-component.jpg\")
Il Componente Competenze<\/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>\nIl Componente Progetti<\/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> per eseguire un ciclo attraverso l’array di dati dopo averlo importato nel componente Progetti.<\/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>\nIl Componente Contatti<\/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> in modo che il pulsante avvii un’applicazione e-mail con un messaggio indirizzato a voi.<\/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>. Prima di distribuire in produzione un’applicazione che utilizza il componente Next.js Image, \u00e8 fortemente consigliato installare sharp<\/a>. Per farlo, accedete al vostro terminale, assicuratevi di essere nella directory del vostro progetto ed eseguite il seguente comando:<\/p>\nnpm i sharp<\/code><\/pre>\nCome Distribuire l’Applicazione Next.js su Kinsta<\/h2>\n
Inviare il Codice a GitHub<\/h3>\n
![\"Creazione](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/Create-a-new-repository-on-GitHub.jpg\")
![\"Accesso](\"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>\nDistribuire il Portfolio su Kinsta<\/h3>\n
\n
![\"Creare](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/host-application-on-kinsta.jpg\")
![\"Rilevamento](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/deploying_application_to_kinsta.gif\")
![\"Link](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/deployemnt-link-on-kinsta.jpg\")
Riepilogo<\/h2>\n