Il portfolio di un developer è una raccolta di esempi di lavori e progetti che mettono in mostra le capacità e l’esperienza di uno sviluppatore. Un portfolio solido vi distingue dagli altri candidati quando cercate lavoro. Non solo: un portfolio può anche essere uno strumento prezioso per fare rete, tenere traccia delle vostre conoscenze e affermarvi come esperti della materia.
In questo tutorial imparerete a creare un portfolio da developer utilizzando Next.js e a distribuirlo direttamente dal vostro repository GitHub sulla piattaforma di Hosting di Applicazioni di Kinsta, che offre un dominio .kinsta.app gratuito per permettervi di mettere in linea il vostro lavoro rapidamente.
Ecco una demo live del portfolio da developer che costruirete con Next.js.
È possibile accedere al repository GitHub del progetto se si desidera dare un’occhiata più da vicino, oppure si può utilizzare questo template di progetto di portfolio di avvio selezionando Use this template > Create a new repository. Questo copierà 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.
Requisiti/Prequisiti
Questo è un tutorial di tipo “follow-along”. Sarà più facile capire il codice con:
- Una conoscenza di base di HTML, CSS e JavaScript
- Un conoscenza di base di React e forse di Next.js
- Node.js e npm (Node Package Manager) o yarn installati sul computer
Perché Next.js?
Next.js è un framework di librerie JavaScript open-source basato su React che può essere utilizzato per un’ampia gamma di progetti di sviluppo web perché 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ù comuni di Next.js sono:
- Creazione di siti web statici: Next.js può creare siti web statici che sono veloci, facili da distribuire e richiedono una manutenzione minima, come il sito web del portfolio da developer che realizzeremo in questo tutorial.
- Creare siti web dinamici: Next.js permette di creare siti web dinamici che possono cambiare il contenuto in base alle interazioni degli utenti o all’acquisizione di dati sul lato server.
- Creare siti web di ecommerce: Next.js è adatto alla creazione di siti web di e-commerce che richiedono il rendering lato server per migliorare la SEO e le prestazioni.
- Creazione di applicazioni web progressive (PWA): Next.js supporta la creazione di PWA, applicazioni web che funzionano come applicazioni native e possono essere installate sul dispositivo dell’utente.
Come Configurare l’Ambiente di Sviluppo di Next.js
Per configurare un ambiente di sviluppo per Next.js, prima di tutto installate Node.js sul vostro computer, perché userete il comando npx per eseguire i pacchetti npm senza doverli installare globalmente sul vostro sistema. Una volta fatto questo, è possibile creare un progetto Next.js eseguendo il seguente comando:
npx create-next-app@latest my-portfolioApparirà un prompt che vi chiederà di confermare alcune dipendenze aggiuntive. A questo punto potete eseguire npm run dev per rendere disponibile la vostra applicazione su localhost:3000.
Quando create un progetto Next.js utilizzando il comando npx, viene creata automaticamente una struttura di cartelle con le seguenti directory principali:
- pages: Questa cartella contiene le pagine dell’applicazione, che vengono indirizzate automaticamente in base al loro nome. Ad esempio, pages/index.js sarà la pagina iniziale, mentre pages/about.js sarà la pagina informativa.
- public: Questa cartella contiene file statici che possono essere serviti direttamente, come immagini, font e altre risorse.
- components: Questa cartella è facoltativa e contiene componenti dell’interfaccia utente riutilizzabili che possono essere utilizzati in tutta l’applicazione.
- styles: Anche questa cartella è facoltativa e contiene gli stili globali che possono essere applicati a tutta l’applicazione.
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.
Per questo tutorial, tutto ciò che costruiremo apparirà sulla pagina indice (il nostro sito web a una pagina) e includerete i componenti per le varie sezioni come hero, about, projects e altre.
Come Costruire un Portfolio da Developer Responsive con Next.js
Un portfolio è tipicamente composto da componenti come questi:
- Componente Navbar
- Componente Hero
- Componente Informazioni
- Componente Competenze
- Componente Progetti
- Componente Contatti
- Componente piè di pagina
I componenti Navbar e Footer devono apparire su tutte le pagine se il portfolio ha più di una pagina. Questo può essere ottenuto in Next.js definendo un layout.
Definire i Layout in Next.js
In Next.js, uno dei modi per definire una struttura coerente per i componenti che appaiono su ogni pagina di un sito web è stabilire un layout. Il layout di solito include elementi come l’intestazione, il menu di navigazione e il piè di pagina visualizzati in tutte le pagine del sito.
Iniziate creando una cartella components nella cartella src (sorgente) del vostro progetto Next.js. Successivamente, create i componenti Navbar e Footer che verranno utilizzati all’interno del componente Layout.
Ecco il componente Navbar in Navbar.jsx:
// components/Navbar.jsx
import Link from "next/link";
const Navbar = () => {
return (
<div className="nav-container">
<div className="logo">
<Link href="/">
Joe's Portfolio
</Link>
</div>
<a href="" className="cta-btn">Resume</a>
</div>
)
}
export default Navbar;Ecco il componente Footer in Footer.jsx:
// components/Footer.jsx
const Footer = () => {
return (
<>
<hr/>
<div className="footer-container">
<p>
© {new Date().getFullYear()} Joel's Portfolio
</p>
<div className="social_icons">
<a
href="https://twitter.com/olawanle_joel"
aria-label="Twitter"
target="_blank"
rel="noopener noreferrer"
>
<i className="fa-brands fa-twitter"></i>
</a>
<a
href="https://github.com/olawanlejoel"
aria-label="GitHub"
target="_blank"
rel="noopener noreferrer"
>
<i className="fa-brands fa-github"></i>
</a>
<a
href="https://www.linkedin.com/in/olawanlejoel/"
aria-label="LinkedIn"
target="_blank"
rel="noopener noreferrer"
>
<i className="fa-brands fa-linkedin"></i>
</a>
</div>
</div>
</>
)
}
export default Footer;Nota: affinché 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 in questo modo:
// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
return (
<Html lang="en">
<Head>
<meta charSet="utf-8" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}Nota: se collegate una versione diversa di Font Awesome tramite il CDN, dovrete inserire l’hash integrity appropriato per quella versione.
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.
Il componente Layout accetterà un prop <code>children</code> che vi permetterà di accedere al contenuto delle pagine Next.js.
// components/Layout.jsx
import Navbar from './navbar';
import Footer from './footer';
const Layout = ({ children }) => {
return (
<>
<Navbar />
<main>{children}</main>
<Footer />
</>
)
}
export default Layout;A questo punto, avete creato con successo il componente Layout che contiene la barra di navigazione e il piè di pagina con i prop children posizionati correttamente. Ora potete aggiungere il componente Layout alle vostre pagine avvolgendovi il contenuto della pagina. Questo verrà fatto nel file _app.js.
// pages/_app.js
import '@/styles/globals.css';
import Layout from '../components/layout';
export default function App({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}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 del progetto. Se lanciate il sito web del portfolio in modalità dev, dovreste vedere il layout della vostra applicazione.
Ora è il momento di dare al vostro sito web portfolio il contenuto appropriato.
Creare i Componenti del Portfolio
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 npm run dev.
Il Componente Hero
Il componente Hero è la prima sezione al di sotto della Navbar, il cui scopo principale è quello di catturare l’attenzione dell’utente e dargli un’idea del sito web o dell’applicazione.
// components/Hero.jsx
import Image from "next/image";
const Hero = () => {
return (
<div className="hero-container">
<Image src='/images/profile.jpeg' className="profile-img" width={300} height={300} alt="Joe's personal headshot" />
<div className="hero-text">
<h1>Hey, I'm Joe 👋</h1>
<p>
I'm a software developer based in Lagos, Nigeria. I specialize in building (and occasionally designing)
exceptional websites, applications, and everything in between.
</p>
<div className="social-icons">
<a
href="https://twitter.com/olawanle_joel"
aria-label="Twitter"
target="_blank"
rel="noopener noreferrer"
>
<i className="fa-brands fa-twitter"></i>
</a>
<a
href="https://github.com/olawanlejoel"
aria-label="GitHub"
target="_blank"
rel="noopener noreferrer"
>
<i className="fa-brands fa-github"></i>
</a>
<a
href="https://www.linkedin.com/in/olawanlejoel/"
aria-label="LinkedIn"
target="_blank"
rel="noopener noreferrer"
>
<i className="fa-brands fa-linkedin"></i>
</a>
</div>
</div>
</div>
)
}
export default Hero;Nel codice qui sopra, noterete che il componente Next.js Image viene utilizzato al posto del tag HTML img per aggiungere l’immagine, perché consente l’ottimizzazione automatica delle immagini, il loro ridimensionamento e molto altro.
Nel componente About, noterete anche che è stato aggiunto un semplice paragrafo per parlare dello sviluppatore e alcune icone social di Font Awesome per aggiungere i link social.
Ecco come dovrebbe apparire il componente Hero:
Potete aggiungere altri contenuti al componente Hero, modificare gli stili nel file styles/globals.css o addirittura ricreare questa sezione a modo vostro.
Il Componente About
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ù 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ù su di voi.
// components/About.jsx
import Image from "next/image";
const About = () => {
return (
<div className="about-container">
<h2>About Me</h2>
<div className="flex-about">
<div className="about-text">
<p>
As a developer, I have always been passionate about creating elegant and effective solutions to
complex problems. I have a strong foundation in software development, with a focus on web
technologies such as HTML, CSS, and JavaScript. I enjoy working on both the front-end and
back-end of applications, and I am always looking for ways to optimize performance, improve user
experience, and ensure the highest level of code quality.
</p>
<p>Throughout my career, I have worked on a wide range of projects, from simple static websites to
complex enterprise-level applications. I am experienced in working with a variety of development
tools and frameworks, including React, Angular, Vue.js, Node.js, and Laravel. I am always eager
to learn and explore new technologies, and I am constantly seeking out opportunities to improve
my skills and knowledge.</p>
</div>
<div className="about-img">
<Image src='/images/about.jpeg' className="profile-img" width={300} height={500}/>
</div>
</div>
</div>
)
}
export default About;Il codice qui sopra contiene due paragrafi di testo sullo sviluppatore insieme a un’immagine. Questo è l’aspetto che dovrebbe avere la sezione About:
Potete sempre modificare gli stili per aggiungere altre immagini e molto altro.
Il Componente Competenze
Il componente delle competenze ha lo scopo di mostrare alcune delle tecnologie più utilizzate dal developer o le tecnologie che ha utilizzato in passato.
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.
// components/Skills.jsx
const Skills = () => {
return (
<div className="skills-container">
<h2>Skills</h2>
<div className="grid-skills">
<div className="skill-card html">
<i className="fa-brands fa-html5 html-icon"></i>
<p>HTML</p>
</div>
<div className="skill-card css">
<i className="fa-brands fa-css3-alt css-icon"></i>
<p>CSS</p>
</div>
<div className="skill-card js">
<i className="fa-brands fa-js-square js-icon"></i>
<p>JavaScript</p>
</div>
<div className="skill-card react">
<i className="fa-brands fa-react react-icon"></i>
<p>React</p>
</div>
<div className="skill-card node">
<i className="fa-brands fa-node-js node-icon"></i>
<p>Node</p>
</div>
<div className="skill-card python">
<i className="fa-brands fa-python python-icon"></i>
<p>Python</p>
</div>
</div>
</div>
)
}
export default Skills;Nel codice qui sopra, viene creata una scheda per ogni competenza e ogni scheda conterrà l’icona della tecnologia di font-awesome e il nome della tecnologia. Potete anche aggiungere altri stili e modificare il codice per renderlo più attraente e unico.
Il Componente Progetti
Il componente progetti è una delle sezioni più importanti del portfolio di sviluppatrici e sviluppatori. I progetti forniscono una prova tangibile delle competenze e delle abilità di un developer e mostrano la sua capacità di applicare le proprie conoscenze ai problemi del mondo reale.
Ogni progetto includerà una breve descrizione del progetto, un link al codice sorgente (qui utilizziamo i link di GitHub) e qualsiasi altro dettaglio vogliate aggiungere.
Potete creare un array per contenere i dettagli di ogni progetto e poi importarlo nel vostro componente per evitare di codificarli.
Creiamo un file data.js per memorizzare l’array di dati del progetto. Potete memorizzare questo file nella cartella del componente o nella cartella pages/api. Per questa demo, lo memorizzerò nella cartella dei componenti. Questo array conterrà un oggetto per ogni progetto e l’oggetto conterrà il nome del progetto, la descrizione e il link GitHub.
// components/data.js
export const projectData = [
{
id: 1,
title: 'Todo List App',
description:
'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.',
gitHubLink: 'https://github.com/olawanlejoel/Todo-List-App',
},
{
id: 2,
title: 'Books Library App',
description:
'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.',
gitHubLink: 'https://github.com/olawanlejoel/Book-Library',
},
{
id: 3,
title: 'Quotes Generator',
description:
'Helps you generate quotes from about 1600 quotes written by different authors . Quotes are automatically copied to your clipboards.',
gitHubLink: 'https://github.com/olawanlejoel/random-quote-generator',
},
{
id: 4,
title: 'Password Generator',
description:
'Helps you generates random passwords, you can select what you want your password to entail and also you can copy generated password to clipboard.',
gitHubLink: 'https://github.com/olawanlejoel/Password-Generator',
},
{
id: 5,
title: 'Twitter UI Clone',
description:
'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.',
gitHubLink: 'https://github.com/olawanlejoel/TwitterUI-clone',
},
];A questo punto, potete creare un componente di progetto che utilizzi questi dati eseguendo un semplice loop. È possibile utilizzare qualsiasi metodo di iterazione JavaScript, ma per questo tutorial potete utilizzare il metodo array JavaScript map() per eseguire un ciclo attraverso l’array di dati dopo averlo importato nel componente Progetti.
// components/Projects.jsx
import { projectData } from './data.js';
const Projects = () => {
return (
<div className="projects-container">
<h2>Projects</h2>
<div className="projects-grid">
{projectData && projectData.map((project) => (
<div className="project-card" key={project.id}>
<div className="project-header">
<i className="fa-regular fa-folder-open folder-icon"></i>
<div className="small-icons">
<a href={project.gitHubLink}><i className="fa-brands fa-github"></i></a>
</div>
</div>
<h3>{project.title}</h3>
<p>{project.description}</p>
</div>
))
}
</div>
</div>
)
}
export default Projects;Nel codice qui sopra, avete evitato le ripetizioni eseguendo il looping attraverso l’array per inserire tutti i progetti nel componente Progetti, rendendo più facile la manutenzione e l’aggiunta di altri progetti.
Il Componente Contatti
Uno dei motivi per creare un portfolio da developer è che i vostri potenziali clienti potranno contattarvi. Ad esempio, potrebbero inviarvi un’e-mail, cosa che faciliteremo in questo componente Contatti.
// components/Contact.jsx
const Contact = () => {
return (
<div className="contact-container">
<h2>Get In Touch</h2>
<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>
<a href="mailto:[email protected]" className='cta-btn'>Say Hello</a>
</div>
)
}
export default Contact;Inserite il vostro indirizzo e-mail nel tag a in modo che il pulsante avvii un’applicazione e-mail con un messaggio indirizzato a voi.
Ora avete creato con successo tutti i componenti per la vostra applicazione portfolio. Il prossimo passo sarà quello di aggiungerli alla vostra pagina indice. Andate al file pages/index.js – che viene creato di default – e sostituitene il codice con il seguente.
// pages/index.js
import Hero from '@/components/Hero';
import About from '@/components/About';
import Skills from '@/components/Skills';
import Projects from '@/components/Projects';
import Contact from '@/components/Contact';
import Head from 'next/head';
const Home = () => {
return (
<>
<Head>
<title>Joel's Portfolio</title>
<meta name="description" content="Joel's Portfolio" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<div>
<Hero />
<About />
<Skills />
<Projects />
<Contact />
</div>
</>
);
};
export default Home;Quando eseguirete l’applicazione, noterete che è stato creato un sito web di portfolio completo. Infine, prima di distribuire l’applicazione, installiamo una dipendenza. Un vantaggio dell’utilizzo di Next.js è rappresentato dalle numerose funzionalità che offre, come il routing basato su file, l’ottimizzazione delle immagini e molto altro ancora.
L’ottimizzazione delle immagini è gestita dal componente Next.js Image. Prima di distribuire in produzione un’applicazione che utilizza il componente Next.js Image, è fortemente consigliato installare sharp. Per farlo, accedete al vostro terminale, assicuratevi di essere nella directory del vostro progetto ed eseguite il seguente comando:
npm i sharpOra potete distribuire la vostra applicazione e le immagini funzioneranno correttamente con l’ottimizzazione completa offerta da Next.js.
Come Distribuire l’Applicazione Next.js su Kinsta
Una volta soddisfatti del vostro portfolio con i vostri migliori lavori di sviluppo e le informazioni più importanti, probabilmente vorrete condividerlo con gli altri, giusto? Vediamo come farlo utilizzando GitHub e la piattaforma di Hosting di Applicazioni Kinsta.
Inviare il Codice a GitHub
Esistono vari modi per inviare il codice a GitHub, ma per questo tutorial useremo Git. Git è molto utilizzato nello sviluppo di software perché offre un modo affidabile ed efficiente per gestire le modifiche al codice, collaborare ai progetti e mantenere la cronologia delle versioni.
Potete caricare il codice su GitHub seguendo i seguenti passaggi:
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 + nell’angolo in alto a destra dello schermo e selezionando Nuovo repository dal menu a tendina, come mostrato nell’immagine sottostante.
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. Ora potete inviare il vostro codice al nuovo repository GitHub.
Tutto ciò che serve per eseguire il push del codice con Git è l’URL del repository, che troverete nella pagina principale del repository, sotto il pulsante Clona o scarica, oppure nei passaggi che appaiono dopo la creazione di un repository.
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:
git initOra aggiungete il vostro codice al repository Git locale usando il seguente comando:
git add .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:
git commit -m "my first commit"Nota: è possibile sostituire “il mio primo commit” con un breve messaggio che descriva le modifiche apportate.
Infine, inviate il vostro codice a GitHub utilizzando i seguenti comandi:
git remote add origin [repository URL]
git push -u origin masterNota: assicuratevi di sostituire “[URL del repository]” con l’URL del vostro repository GitHub.
Una volta completati questi passaggi, il vostro codice verrà inviato a GitHub e sarà accessibile attraverso l’URL del repository. Ora potete distribuire il vostro repository su Kinsta.
Distribuire il Portfolio su Kinsta
La distribuzione su Kinsta avviene in pochi minuti. Iniziate dal cruscotto My Kinsta per accedere o creare il vostro account.
Successivamente, autorizzerete Kinsta su GitHub in questi rapidi passaggi:
- Cliccate su Applicazioni nella barra laterale sinistra
- Cliccate su Aggiungi servizio
- Dal menu a tendina, cliccate su Applicazione, poiché volete distribuire un’applicazione Next.js su Kinsta.
Apparirà una maschera attraverso la quale potrete selezionare il repository che desiderate distribuire.
Se avete più branch nel vostro repository, potete selezionare quello che desiderate distribuire. Potete anche assegnare un nome a questa applicazione. Assicuratevi di selezionare un centro dati tra quelli disponibili all’indirizzo 25, dopodiché Kinsta rileverà automaticamente un comando di avvio.
A questo punto, la vostra applicazione inizierà ad essere distribuita. Entro pochi minuti, verrà fornito un link per accedere alla versione distribuita della vostra applicazione. In questo caso si tratta di: https://kinsta-developer-portfolio-ir8w8.kinsta.app/
Nota: il deploy automatico è 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.
Riepilogo
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à di React.
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ù adatta alle loro esigenze e di beneficiare delle ottimizzazioni delle prestazioni e di altri vantaggi del framework.
In questo tutorial avete imparato passo dopo passo come costruire un sito di portfolio responsive utilizzando Next.js e poi distribuirlo su Kinsta.
Potete provare gratuitamente l’Hosting di Applicazioni di Kinsta e, se vi piace, optare per il nostro Piano Hobby a partire da 7 dollari al mese.
Ora è il momento di sfidare voi stessi: aggiungete altre funzionalità al vostro sito web-portfolio appena sviluppato! Ecco alcune idee per stimolare la vostra creatività: 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!
Lascia un commento