Creare un portfolio personale con Gatsby e Markdown

Link copiato negli appunti

Un portfolio online è una risorsa fondamentale per mostrare il proprio lavoro e le proprie capacità, soprattutto per i professionisti del settore tecnologico e creativo. Creare un portfolio può sembrare un compito arduo ma con gli strumenti giusti, come Gatsby e Markdown, è possibile realizzarlo in modo semplice e veloce.

Gatsby è un framework basato su React che permette di costruire siti web statici performanti e dinamici. Markdown, d'altra parte, è un linguaggio di markup leggero che viene comunemente usato per scrivere contenuti in modo semplice e leggibile. In questa guida, vedremo come utilizzare Gatsby per creare un portfolio personale e come Markdown può semplificare la gestione dei contenuti.

Prerequisiti per il progetto

Prima di iniziare, assicurati di avere i seguenti prerequisiti:

Node.js Node.js
Npm o Yarn
Conoscenza base di React e JavaScript
Editor di testo Visual Studio Code

Installazione di Gatsby

Per prima cosa, dobbiamo installare Gatsby. Esso fornisce un comando di avvio rapido che semplifica la creazione di nuovi progetti. Per fare ciò, apri il terminale e digita il seguente comando:

npm install -g gatsby-cli

Creare il Progetto Gatsby

Ora che abbiamo il CLI di Gatsby installato, possiamo creare il nostro progetto. Vai nella cartella in cui desideri creare il progetto ed esegui il comando:

gatsby new portfolio-personale https://github.com/gatsbyjs/gatsby-starter-blog
cd portfolio-personale

Il comando gatsby new crea un nuovo progetto basato su uno starter template. In questo caso, stiamo usando il template gatsby-starter-blog, che è ideale per un sito che utilizza Markdown per la gestione dei contenuti. Dopo aver creato il progetto, entra nella cartella del progetto con il comando cd.

Strutturare il portfolio

Con il progetto di base creato, ora possiamo adattarlo alle nostre necessità per un portfolio personale. La struttura di un portfolio tipico include alcune sezioni come: Chi sono, Progetti, Competenze, Contatti.

Personalizzare la pagina principale

Il template di base di Gatsby crea automaticamente una pagina iniziale che può essere modificata per adattarsi alla tua identità. Vai nel file src/pages/index.js e sostituisci il contenuto con il seguente:

import React from "react";
import { Link } from "gatsby";
import { rhythm } from "../utils/typography";

const IndexPage = () => {
    return (
        <div>
            <h1>Benvenuto nel mio Portfolio</h1>
            <p>Mi chiamo [Tuo Nome] e sono un [La tua professione].</p>
            <p>
                Su questo sito troverai una selezione dei miei progetti più recenti,
                oltre a una panoramica delle mie competenze.
            </p>
            <p>
                <Link to="/about">Chi Sono</Link> | <Link to="/contact">Contattami</Link>
            </p>
        </div>
    );
};
export default IndexPage;

In questo esempio, abbiamo aggiunto una breve introduzione a te stesso, linkato le pagine "Chi Sono" e "Contattami" e preparato una struttura base per il portfolio.

Creare una pagina "Chi Sono"

Per aggiungere una pagina "Chi Sono" crea un nuovo file in src/pages/about.js e aggiungi il contenuto seguente:

import React from "react";
import { Link } from "gatsby";

const AboutPage = () => {
    return (
        <div>
            <h1>Chi Sono</h1>
            <p>Mi chiamo [Tuo Nome], e sono un appassionato di tecnologia e sviluppo software.</p>
            <p>
                Ho esperienza con tecnologie come React, Node.js e TypeScript. Mi piace
                lavorare su progetti innovativi e imparare nuove tecnologie. Quando non
                sono impegnato con il codice, mi piace [aggiungi interessi personali].
            </p>
            <p>
                <Link to="/">Torna alla home</Link>
            </p>
        </div>
    );
};
export default AboutPage;

In questa pagina puoi scrivere una breve biografia di te stesso, le tue passioni, e le tue esperienze lavorative. La bellezza di usare Gatsby è che puoi facilmente modificare e aggiungere nuove pagine.

Creare una pagina "Contatti"

Ora creiamo una pagina per consentire ai visitatori di mettersi in contatto con te. Crea il file src/pages/contact.js e aggiungi il contenuto seguente:

import React from "react";
import { Link } from "gatsby";

const ContactPage = () => {
    return (
        <div>
            <h1>Contattami</h1>
            <p>Se desideri collaborare o avere maggiori informazioni su di me, non esitare a contattarmi!</p>
            <form name="contact" method="POST" data-netlify="true">
                <label htmlFor="name">Nome</label>
                <input type="text" name="name" id="name" required />
                <label htmlFor="email">Email</label>
                <input type="email" name="email" id="email" required />

                <label htmlFor="message">Messaggio</label>
                <textarea name="message" id="message" rows="5" required></textarea>
                <button type="submit">Invia</button>
            </form>
            <p>
                <Link to="/">Torna alla home</Link>
            </p>
        </div>
    );
};

export default ContactPage;

In questa pagina, abbiamo aggiunto un semplice modulo di contatto che può essere utilizzato per inviare messaggi tramite email.

Utilizzare Markdown per i contenuti

Una delle funzionalità più potenti di Gatsby è la sua integrazione con Markdown per la gestione dei contenuti. Invece di scrivere direttamente nei file di React possiamo utilizzare file .md (Markdown) per aggiungere contenuti al nostro sito, come progetti, articoli, o competenze.

Aggiungere un progetto

Crea una cartella chiamata content/projects nella root del progetto. All'interno di essa crea un file chiamato progetto1.md con il contenuto seguente:

---
title: "Progetto 1"
date: "2023-03-01"
description: "Un'applicazione web sviluppata in React"
---

Descrizione del progetto:
In questo progetto, ho sviluppato una piattaforma di gestione delle attività utilizzando React. Ho implementato una serie di funzionalità come la gestione dello stato con Redux e l'autenticazione con Firebase.

Ora, possiamo fare in modo che Gatsby carichi questi file Markdown e li visualizzi sulla pagina del portfolio. Per farlo, dovremo configurare i plugin di Gatsby per gestire i file .md.

Installare i plugin Markdown

Installa i seguenti plugin per gestire i contenuti Markdown:

npm install gatsby-source-filesystem gatsby-transformer-remark

Nel file gatsby-config.js, configura i plugin:

module.exports = {
    siteMetadata: {
        title: `Portfolio Personale`,
        description: `Un portfolio personale creato con Gatsby`,
        author: `@gatsbyjs`,
    },
    plugins: [
        `gatsby-plugin-react-helmet`,
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `projects`,
                path: `${__dirname}/content/projects`,
            },
        },
        `gatsby-transformer-remark`,
    ],
};

Questa configurazione permette a Gatsby di leggere i file Markdown dalla cartella content/projects e trasformarli in contenuti visualizzabili nel nostro sito.

Visualizzare i progetti nel portfolio

Infine, possiamo recuperare e visualizzare i progetti nella pagina principale del portfolio. In src/pages/index.js aggiungi il seguente codice per caricare e mostrare i progetti:

import React from "react";
import { graphql } from "gatsby";
import { Link } from "gatsby";

const IndexPage = ({ data }) => {
    const projects = data.allMarkdownRemark.nodes;
    return (
        <div>
            <h1>Benvenuto nel mio Portfolio</h1>
            <h2>I miei Progetti</h2>
            <ul>
                {projects.map(project => (
                    <li key={project.id}>
                        <Link to={`/projects/${project.frontmatter.title}`}>
                            {project.frontmatter.title}
                        </Link>
                    </li>
                ))}
            </ul>
        </div>
    );
};

export const query = graphql`
    query {
        allMarkdownRemark(filter: { fileAbsolutePath: { regex: "/projects/" } }) {
            nodes {
                id
                frontmatter {
                    title
                    date
                }
                fields {
                    slug
                }
            }
        }
    }
`;
export default IndexPage;

Questo codice recupera i dati dai file Markdown e li visualizza come un elenco di progetti. Ogni progetto sarà un link che porta alla pagina di dettaglio del progetto.

Conclusioni

In questa guida, abbiamo creato un portfolio personale utilizzando Gatsby e Markdown. Abbiamo visto come:

Creare un nuovo progetto Gatsby.
Strutturare il sito con pagine come "Chi Sono", "Progetti" e "Contatti".
Utilizzare i file Markdown per gestire i contenuti dei progetti.
Configurare i plugin di Gatsby per leggere i file Markdown e visualizzarli nel nostro sito.

Gatsby, combinato con Markdown, offre un modo molto efficiente e flessibile per creare e gestire un portfolio online. Puoi personalizzare ulteriormente il sito aggiungendo altre funzionalità come una sezione blog, un sistema di commenti o l'integrazione con i social media.

Indice lezioni