Un portfolio è un ottimo modo per mostrare le proprie competenze ai potenziali datori di lavoro. È particolarmente utile per gli sviluppatori principianti che potrebbero non avere alcuna esperienza professionale.

Tuttavia, un problema comune che si può incontrare quando si costruisce un portfolio è sapere cosa includervi.

La semplice pagina web che hai costruito per un corso è sufficiente per essere inserita nel tuo sito web? Devi includere solo i progetti per cui sei stato pagato o puoi includere anche le cose più piccole? Esiste un numero "giusto" di progetti da inserire?

Lo scopo di questo articolo è quello di fornire alcune linee guida su come popolare il tuo portfolio di sviluppatore frontend, attraverso progetti di esempio.

Ecco un breve riepilogo dei progetti che tratteremo in questo articolo:

1. Un sito web portfolio
2. Un sito web clone
3. Un'applicazione web CRUD
4. Un sito web collegato a un'API
5. Un sito web dal punteggio perfetto

Nota: questo non significa che devi costruire tutti questi progetti. Questo elenco serve solo a fornire idee sul tipo di progetti che si possono realizzare.

Inoltre, questi progetti sono rivolti a sviluppatori principianti che hanno acquisito le basi dello sviluppo frontend e sono alla ricerca di progetti leggermente più avanzati.

1. Creare un Sito Web Portfolio

Se hai costruito il tuo sito web portfolio da solo, puoi includerlo nell'elenco dei progetti. Se si tende a cambiare regolarmente il design del portfolio, è possibile includere anche le versioni precedenti.

Quando includi un progetto nel tuo portfolio, non solo metti in mostra le tue capacità, ma spieghi anche la mentalità che sta dietro al progetto. E questo è un aspetto che di solito interessa ai potenziali datori di lavoro.

Per gli sviluppatori frontend, spiegare come si è arrivati al layout scelto è importante quanto avere un design esteticamente accattivante.

Puoi andare oltre e descrivere le misure adottate per garantire che il tuo sito web segua le migliori pratiche di sviluppo. Ad esempio, potresti condividere il modo in cui ti sei concentrato sul miglioramento della SEO e delle prestazioni del tuo sito.

Risorse ed esempi: Questo articolo di Laurence Bradford fornisce ulteriori informazioni sulla struttura di un portfolio e include esempi di fantastici portfolio di sviluppatori web da cui trarre ispirazione.

Tecnologia consigliata: per i principianti, consiglio di usare HTML, CSS e JavaScript vanilla per costruire un portfolio, soprattutto se è la prima volta.

2. Creare un Sito Web Clone

La capacità di convertire accuratamente un progetto in una pagina web completamente funzionale è un'abilità che ogni sviluppatore frontend dovrebbe possedere.

Per farlo, è necessario avere un occhio di riguardo per il layout e i colori. Dovrete inoltre possedere conoscenze basate sull'esperienza, come ad esempio conoscere la migliore proprietà di visualizzazione CSS da abbinare a un layout o essere in grado di eseguire il rendering di un'animazione secondo le specifiche.

Nella maggior parte delle aziende, gli sviluppatori frontend sono responsabili della traduzione di mockup e prototipi in pagine web, quindi è utile che il portfolio mostri le tue competenze "design-to-code". Costruire un sito web clone è un buon modo per farlo.

Ci sono due modi per costruire un sito web clone:

In primo luogo, è possibile ricreare un sito web esistente. Una sfida comune per gli sviluppatori junior è clonare la homepage di Google.

Questo metodo è particolarmente utile per comprendere le applicazioni reali delle scelte di stile nei siti web più diffusi. È possibile ispezionare gli elementi della pagina e cercare di capire i metodi utilizzati per il box-model, il posizionamento e la visualizzazione.

In secondo luogo, è possibile ricreare un progetto da zero. Per un progetto più impegnativo, si possono consultare i design su Dribble o Behance e cercare di tradurre il design in codice.

Per rendere questo metodo più adatto ai principianti, provate a ricreare una pagina o una funzione semplice, come un form di login o un'applicazione meteo.

Tecnologia consigliata: la clonazione del design di un sito web non richiede alcuna funzionalità, quindi solo HTML e CSS vanno bene. Si può anche utilizzare questo tempo per familiarizzare con un framework CSS o un preprocessore come SASS.

Nota: tutti i progetti caricati su queste piattaforme sono protetti da copyright dei rispettivi proprietari, pertanto non è consentito utilizzarli per scopi commerciali. Tuttavia, se invii un'e-mail o lasci un commento chiedendo il permesso di ricreare il disegno per scopi non commerciali, il creatore potrebbe essere disposto a lasciarti ricreare i suoi progetti gratuitamente.

È inoltre importante specificare nel proprio portfolio che il progetto è un lavoro clonato o una ricreazione di un design altrui.

3. Un'applicazione web CRUD

L'esecuzione di operazioni CRUD (Create-Read-Update-Delete) è una caratteristica molto comune per la maggior parte dei siti web (come blog, e-commerce, dashboard e così via), quindi è un'operazione che bisogna essere abituati a costruire come sviluppatori front-end.

Un'applicazione CRUD basilare può essere una lista di cose da fare (To-Do List) o una pagina web di appunti (Notes). La presenza di uno di questi progetti sul tuo sito web dimostra la tua abilità nella manipolazione delle strutture di dati. È anche una buona occasione per mostrare il tuo lavoro con un framework frontend.

L'articolo di Tania Rascia su come lavorare con il local storage è un'utile introduzione per imparare a creare applicazioni web CRUD con JavaScript vanilla. Oppure, se vuoi un articolo più specifico su un framework, dai un'occhiata all'articolo della stessa autrice su come creare un'applicazione Crud con gli hook di React.

Tecnologia consigliata: le applicazioni CRUD richiedono l'uso di componenti riutilizzabili, quindi è una buona idea costruirle usando un framework come React o Vue, a seconda della tua familiarità.

Sito di esempio: App CRUD con i React Hook

4. Un sito web collegato ad un'API

Molti progetti su larga scala richiedono una sorta di comunicazione con un server backend e la visualizzazione dei dati recuperati da tale server. Nella maggior parte dei casi, ciò richiede l'uso di un interfaccia di programmazione delle applicazioni, in inglese Application Programming Interface (API).

Un'API è... Mi piace pensarla come un bibliotecario digitale. Immaginate di avere dei libri conservati in una biblioteca e di doverli utilizzare per una relazione.

Quindi, si va dal bibliotecario e si chiede di prendere in prestito un libro. È necessario indicare al bibliotecario alcune parole chiave (diciamo il nome del libro e il nome dell'autore) e avere la giusta autorizzazione (in questo caso, la tessera della biblioteca) per ottenere il libro.

Ora sostituisci "biblioteca" con "server", "libri" con "dati", "relazione" con "sito web" e "bibliotecario" con "API".

Le API consentono agli sviluppatori frontend di raccogliere, modificare e cancellare dati da un database backend. La creazione di un sito che utilizza un'API per visualizzare i dati è un ottimo progetto da includere nel tuo portfolio.

Siti di esempio: si può scegliere di creare un sito per la visualizzazione di dati (ad esempio, un sito web che si connette a un'API meteo e visualizza il tempo corrente) oppure, per un progetto più impegnativo, si può impostare un'API RESTful ed eseguire le operazioni sul proprio sito web.

5. Un sito web dal punteggio perfetto

Un sito web con punteggio perfetto è un sito web che ottiene un punteggio del 100% in tutte le categorie del rapporto di verifica di Chrome Lighthouse. La creazione di un sito web che soddisfa tutte le caratteristiche richieste dimostra la tua abilità nel seguire le best practice e nel garantire progetti di alta qualità.

Per sapere come ottimizzare il tuo sito web in termini di prestazioni e accessibilità per ottenere un punteggio Lighthouse perfetto, puoi leggere l'articolo Come ho costruito il mio sito web Portfolio dal punteggio perfetto.

Conclusione

Ecco quindi i 5 progetti che puoi includere nel tuo portfolio frontend. Inoltre, questi non devono essere tutti progetti separati. Potresti creare un sito web clone dal punteggio perfetto o un'applicazione CRUD che utilizza un'API per richiamare dati da un file JSON.

Ora puoi andare avanti e creare. Happy coding :)

Se questo articolo ti è stato utile o se hai delle domande, puoi farmelo sapere su Twitter.

Oggi creerai una delle app più importanti che puoi costruire per te stesso: il tuo portfolio da sviluppatore.

Ogni sviluppatore React o sviluppatore web in generale, deve essere in grado di mostrare ciò che può fare a qualsiasi potenziale cliente o datore di lavoro.

Questo è esattamente ciò che costruiremo in questa guida, con l'aiuto di una serie di strumenti standard del settore, tra cui React, Tailwind CSS e Netlify.

Iniziamo!

Come sarà il Portfolio?

Questa è la versione finale del portfolio che creerai.

Conterrà informazioni su di te, quali progetti hai realizzato, quali abilità hai utilizzato per realizzare quei progetti e includerà un modulo di contatto per i clienti o i datori di lavoro per contattarti.

Quali strumenti utilizzeremo?

• Useremo React per creare l'interfaccia utente dell'app. Ci consentirà di comporre ogni parte della nostra landing page attraverso componenti riutilizzabili ed estendere la nostra app se vogliamo aggiungere funzionalità aggiuntive, come un blog.
• Per definire lo stile della nostra applicazione, utilizzeremo Tailwind CSS. Per dare alla nostra app un aspetto professionale, Tailwind ci consentirà di applicare facilmente più stili combinando i nomi delle classi sui nostri elementi React.
• Per pubblicare la nostra app sul web, utilizzeremo il servizio gratuito Netlify. Servirà il nostro progetto su un dominio personalizzato per gli utenti molto rapidamente con l'aiuto di una CDN (rete di distribuzione dei contenuti).

Come iniziare

Puoi scaricare i file di partenza per il nostro progetto qui.

Quando prendi il codice, tutto ciò che dovrai fare è trascinare la cartella del progetto (decompresso) nell'editor di codice ed eseguire il comando:

npm install

E sei a posto!

Di quali strumenti ho bisogno per costruire il mio portfolio?

Per eseguire l'intero processo di creazione della nostra app dall'inizio alla distribuzione, dovrai disporre di quanto segue:

1. Node.js installato sul tuo computer. Puoi scaricarlo su nodejs.org.
2. Git installato sul tuo computer. Puoi scaricarlo su git-scm.com.
3. Consiglierei di utilizzare VS Code come editor di codice. Puoi scaricarlo su code.visualstudio.com.
4. Un account Netlify gratuito su netlify.com.
5. Un account GitHub gratuito su github.com.

Come costruire la struttura del Portfolio

Il vantaggio dell'utilizzo di React è che potremmo espandere la nostra app a tutte le pagine che vogliamo, molto semplicemente, e aggiungere molti contenuti aggiuntivi.

Tuttavia, poiché stiamo lavorando solo con una pagina, all'interno del nostro componente app possiamo immaginare  molto rapidamente i diversi componenti di cui avremo bisogno. Avremo una barra di navigazione in cima con tutti i collegamenti per passare alle diverse sezioni del nostro portfolio.

Successivamente, includeremo una sezione informazioni, una sezione per i nostri progetti, testimonianze e infine il nostro modulo di contatto.

Questa rapida pianificazione ci consente di capire come devono essere nominati i nostri componenti e in quale ordine. Possiamo andare avanti e aggiungerli tutti al nostro file App.js (in src):

// src/App.js

import React from "react";

export default function App() {
  return (
    <main>
      <Navbar />
      <About />
      <Projects />
      <Skills />
      <Testimonials />
      <Contact />
    </main>
  );
}

Come creare i nostri componenti

Ora che abbiamo elencato tutti questi componenti, dobbiamo andare avanti e crearli.

All'interno della nostra cartella di origine (src), creeremo una cartella chiamata components con tutti i file di cui abbiamo bisogno:

my-portfolio
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.js
    ├── data.js
    ├── index.css
    ├── index.js
    └── components
        ├── About.js
        ├── Contact.js
        ├── Navbar.js
        ├── Projects.js
        ├── Skills.js
        └── Testimonials.js

Quindi creeremo la struttura di base di ogni componente React e la esporteremo da quel file con export default:

// src/components/About.js

export default function About() {}

// ripetere la stessa struttura di base per tutti e 6 i componenti

E infine assicurati di importarlo di nuovo in App.js:

// src/App.js

import React from "react";
import About from "./components/About";
import Contact from "./components/Contact";
import Navbar from "./components/Navbar";
import Projects from "./components/Projects";
import Skills from "./components/Skills";
import Testimonials from "./components/Testimonials";

export default function App() {
  return (
    <main>
      <Navbar />
      <About />
      <Projects />
      <Skills />
      <Testimonials />
      <Contact />
    </main>
  );
}

Nota che ci dovrebbero essere sei componenti in totale.

Introduzione a Tailwind CSS

Una volta fatto, possiamo cominciare a lavorare con Tailwind CSS, in modo da iniziare a dare alla nostra app un aspetto di base.

Il vantaggio dell'utilizzo di Tailwind CSS è che non è necessario scrivere manualmente alcuno stile in un foglio di stile CSS. Tutto quello che dobbiamo fare è combinare più classi per creare l'aspetto che vogliamo.

Ad esempio, per dare al nostro portfolio uno sfondo scuro con testo grigio applicato a tutti i nostri componenti figlio, puoi aggiungere le seguenti classi al nostro elemento main:

// src/App.js

import React from "react";
import About from "./components/About";
import Contact from "./components/Contact";
import Navbar from "./components/Navbar";
import Projects from "./components/Projects";
import Skills from "./components/Skills";
import Testimonials from "./components/Testimonials";

export default function App() {
  return (
    <main className="text-gray-400 bg-gray-900 body-font">
      <Navbar />
      <About />
      <Projects />
      <Skills />
      <Testimonials />
      <Contact />
    </main>
  );
}

Come costruire il componente About

Iniziamo dalla nostra prima sezione, la sezione About. Questo consisterà in un'introduzione di base a noi stessi e alle competenze in cui siamo specializzati.

Includerà anche alcuni collegamenti al modulo di contatto e ai nostri progetti passati. Poiché questi collegamenti saranno in parti diverse della stessa pagina, possiamo utilizzare gli hash: "/#projects" e "/#contact".

Per far funzionare questi collegamenti e per poter saltare a ciascuna sezione, imposteremo l'attributo id della sezione progetti su "projects" e quelli della sezione contatti su "contact".

// src/components/About.js

import React from "react";

export default function About() {
  return (
    <section id="about">
      <div className="container mx-auto flex px-10 py-20 md:flex-row flex-col items-center">
        <div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
          <h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">
            Hi, I'm Reed.
            <br className="hidden lg:inline-block" />I love to build amazing
            apps.
          </h1>
          <p className="mb-8 leading-relaxed">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui
            laborum quasi, incidunt dolore iste nostrum cupiditate voluptas?
            Laborum, voluptas natus?
          </p>
          <div className="flex justify-center">
            <a
              href="#contact"
              className="inline-flex text-white bg-green-500 border-0 py-2 px-6 focus:outline-none hover:bg-green-600 rounded text-lg">
              Work With Me
            </a>
            <a
              href="#projects"
              className="ml-4 inline-flex text-gray-400 bg-gray-800 border-0 py-2 px-6 focus:outline-none hover:bg-gray-700 hover:text-white rounded text-lg">
              See My Past Work
            </a>
          </div>
        </div>
        <div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
          <img
            className="object-cover object-center rounded"
            alt="hero"
            src="./coding.svg"
          />
        </div>
      </div>
    </section>
  );
}

Per l'immagine sul lato destro della sezione, sto usando un file svg dalla cartella public, coding.svg.

Questa immagine funge semplicemente da segnaposto temporaneo. Consiglio vivamente di utilizzare un'immagine reale di te stesso.

Come costruire il componente Projects

La nostra sezione progetti sarà composta da un elemento section con una id di "projects". Questo conterrà una galleria di tutti i progetti che abbiamo creato, che includerà immagini.

Avrà il titolo del progetto, insieme alle tecnologie che abbiamo utilizzato per realizzarlo, e un collegamento ad esso (se è distribuito).

// src/components/Projects.js

import { CodeIcon } from "@heroicons/react/solid";
import React from "react";
import { projects } from "../data";

export default function Projects() {
  return (
    <section id="projects" className="text-gray-400 bg-gray-900 body-font">
      <div className="container px-5 py-10 mx-auto text-center lg:px-40">
        <div className="flex flex-col w-full mb-20">
          <CodeIcon className="mx-auto inline-block w-10 mb-4" />
          <h1 className="sm:text-4xl text-3xl font-medium title-font mb-4 text-white">
            Apps I've Built
          </h1>
          <p className="lg:w-2/3 mx-auto leading-relaxed text-base">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo
            facilis repellat ab cupiditate alias vero aliquid obcaecati quisquam
            fuga dolore.
          </p>
        </div>
        <div className="flex flex-wrap -m-4">
          {projects.map((project) => (
            <a
              href={project.link}
              key={project.image}
              className="sm:w-1/2 w-100 p-4">
              <div className="flex relative">
                <img
                  alt="gallery"
                  className="absolute inset-0 w-full h-full object-cover object-center"
                  src={project.image}
                />
                <div className="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
                  <h2 className="tracking-widest text-sm title-font font-medium text-green-400 mb-1">
                    {project.subtitle}
                  </h2>
                  <h1 className="title-font text-lg font-medium text-white mb-3">
                    {project.title}
                  </h1>
                  <p className="leading-relaxed">{project.description}</p>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

Nota che useremo anche la libreria @heroicons/react per poter scrivere alcune icone SVG come componenti di React.

Stiamo importando una serie di progetti da un file data.js nella stessa cartella. Lì stiamo esportando una serie di oggetti che includono ciascuno i dati di un singolo progetto:

// src/data.js

export const projects = [
  {
    title: "React Reserve",
    subtitle: "MERN Stack",
    description:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolore rerum laborum iure enim sint nemo omnis voluptate exercitationem eius?",
    image: "./project-1.gif",
    link: "https://reactbootcamp.com",
  },
  {
    title: "React Tracks",
    subtitle: "React and Python",
    description:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolore rerum laborum iure enim sint nemo omnis voluptate exercitationem eius?",
    image: "./project-2.gif",
    link: "https://reedbarger.com",
  },
  {
    title: "DevChat",
    subtitle: "React and Firebase",
    description:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolore rerum laborum iure enim sint nemo omnis voluptate exercitationem eius?",
    image: "./project-3.gif",
    link: "https://jsbootcamp.com",
  },
  {
    title: "Epic Todo App",
    subtitle: "React Hooks",
    description:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolore rerum laborum iure enim sint nemo omnis voluptate exercitationem eius?",
    image: "./project-4.gif",
    link: "https://pythonbootcamp.com",
  },
];

Come costruire il componente delle Skills

Compiliamo la sezione per tutte le competenze e le tecnologie che conosciamo.

Questo consisterà in un semplice elenco di tutti i principali strumenti con cui abbiamo familiarità e che possiamo utilizzare nei progetti dei nostri datori di lavoro o clienti.

Ancora una volta, importeremo un array dalla nostra cartella dati. Ma questo array è costituito da un numero di stringhe che rappresentano ciascuna delle abilità che conosciamo come JavaScript, React e Node:

// src/components/Skills.js

import { BadgeCheckIcon, ChipIcon } from "@heroicons/react/solid";
import React from "react";
import { skills } from "../data";

export default function Skills() {
  return (
    <section id="skills">
      <div className="container px-5 py-10 mx-auto">
        <div className="text-center mb-20">
          <ChipIcon className="w-10 inline-block mb-4" />
          <h1 className="sm:text-4xl text-3xl font-medium title-font text-white mb-4">
            Skills &amp; Technologies
          </h1>
          <p className="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi sit
            ipsa delectus eum quo voluptas aspernatur accusantium distinctio
            possimus est.
          </p>
        </div>
        <div className="flex flex-wrap lg:w-4/5 sm:mx-auto sm:mb-2 -mx-2">
          {skills.map((skill) => (
            <div key={skill} className="p-2 sm:w-1/2 w-full">
              <div className="bg-gray-800 rounded flex p-4 h-full items-center">
                <BadgeCheckIcon className="text-green-400 w-6 h-6 flex-shrink-0 mr-4" />
                <span className="title-font font-medium text-white">
                  {skill}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Come costruire il componente Testimonials

Nella componente Testimonials, elencheremo un paio di testimonianze, magari di clienti passati o di persone che hanno familiarità con il nostro lavoro.

Questi consisteranno in un paio di cards che mostreranno la testimonianza stessa, come anche da chi proviene e l'azienda da cui proviene questa persona.

Stiamo anche importando una array di testimonianze con una serie di oggetti che presentano la citazione, l'immagine, il nome e l'azienda.

// src/components/Testimonials

import React from "react";
import { TerminalIcon, UsersIcon } from "@heroicons/react/solid";
import { testimonials } from "../data";

export default function Testimonials() {
  return (
    <section id="testimonials">
      <div className="container px-5 py-10 mx-auto text-center">
        <UsersIcon className="w-10 inline-block mb-4" />
        <h1 className="sm:text-4xl text-3xl font-medium title-font text-white mb-12">
          Client Testimonials
        </h1>
        <div className="flex flex-wrap m-4">
          {testimonials.map((testimonial) => (
            <div className="p-4 md:w-1/2 w-full">
              <div className="h-full bg-gray-800 bg-opacity-40 p-8 rounded">
                <TerminalIcon className="block w-8 text-gray-500 mb-4" />
                <p className="leading-relaxed mb-6">{testimonial.quote}</p>
                <div className="inline-flex items-center">
                  <img
                    alt="testimonial"
                    src={testimonial.image}
                    className="w-12 rounded-full flex-shrink-0 object-cover object-center"
                  />
                  <span className="flex-grow flex flex-col pl-4">
                    <span className="title-font font-medium text-white">
                      {testimonial.name}
                    </span>
                    <span className="text-gray-500 text-sm uppercase">
                      {testimonial.company}
                    </span>
                  </span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Come costruire il componente Contact

Alla fine della nostra landing page, includeremo il nostro modulo di contatto per consentire ai potenziali datori di lavoro di contattarci.

Questo modulo avrà 3 campi di inserimento: un nome, un'e-mail e un campo per scrivere il messaggio.

Per gestire questi invii di moduli, utilizzeremo lo strumento Netlify Forms per occuparci molto facilmente del salvataggio di quei messaggi.

// src/components/Contact.js

import React from "react";

export default function Contact() {
  return (
    <section id="contact" className="relative">
      <div className="container px-5 py-10 mx-auto flex sm:flex-nowrap flex-wrap">
        <div className="lg:w-2/3 md:w-1/2 bg-gray-900 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative">
          <iframe
            width="100%"
            height="100%"
            title="map"
            className="absolute inset-0"
            frameBorder={0}
            marginHeight={0}
            marginWidth={0}
            style={{ filter: "opacity(0.7)" }}
            src="https://www.google.com/maps/embed/v1/place?q=97+warren+st+new+york+city&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"
          />
          <div className="bg-gray-900 relative flex flex-wrap py-6 rounded shadow-md">
            <div className="lg:w-1/2 px-6">
              <h2 className="title-font font-semibold text-white tracking-widest text-xs">
                ADDRESS
              </h2>
              <p className="mt-1">
                97 Warren St. <br />
                New York, NY 10007
              </p>
            </div>
            <div className="lg:w-1/2 px-6 mt-4 lg:mt-0">
              <h2 className="title-font font-semibold text-white tracking-widest text-xs">
                EMAIL
              </h2>
              <a className="text-indigo-400 leading-relaxed">
                reedbarger@email.com
              </a>
              <h2 className="title-font font-semibold text-white tracking-widest text-xs mt-4">
                PHONE
              </h2>
              <p className="leading-relaxed">123-456-7890</p>
            </div>
          </div>
        </div>
        <form
          netlify
          name="contact"
          className="lg:w-1/3 md:w-1/2 flex flex-col md:ml-auto w-full md:py-8 mt-8 md:mt-0">
          <h2 className="text-white sm:text-4xl text-3xl mb-1 font-medium title-font">
            Hire Me
          </h2>
          <p className="leading-relaxed mb-5">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum
            suscipit officia aspernatur veritatis. Asperiores, aliquid?
          </p>
          <div className="relative mb-4">
            <label htmlFor="name" className="leading-7 text-sm text-gray-400">
              Name
            </label>
            <input
              type="text"
              id="name"
              name="name"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
            />
          </div>
          <div className="relative mb-4">
            <label htmlFor="email" className="leading-7 text-sm text-gray-400">
              Email
            </label>
            <input
              type="email"
              id="email"
              name="email"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
            />
          </div>
          <div className="relative mb-4">
            <label
              htmlFor="message"
              className="leading-7 text-sm text-gray-400">
              Message
            </label>
            <textarea
              id="message"
              name="message"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"
            />
          </div>
          <button
            type="submit"
            className="text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">
            Submit
          </button>
        </form>
      </div>
    </section>
  );
}

Come incorporare una posizione di Google Maps

A sinistra del modulo includeremo una mappa di Google incorporata in Google Maps di dove ci troviamo.

Possiamo farlo con l'aiuto di uno strumento online: embed-map.com. Tutto quello che devi fare è inserire la tua posizione e premere "Generate HTML code".

Nel riga che ci viene fornita, non copiare tutto il codice, solo l'attributo src dell'elemento iframe. Sostituiremo quel valore con il valore src predefinito che abbiamo nel nostro iframe.

Per inviare i dati dei moduli a Netlify, Netlify Forms deve riconoscere un modulo come HTML statico. Poiché la nostra app React è controllata da JavaScript e non è costituita da comune HTML, è necessario aggiungere un modulo nascosto al nostro file index.html nella cartella pubblica.

<!-- public/index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- contenuto di head saltato -->
  </head>
  <body>

  <form name="contact" netlify netlify-honeypot="bot-field" hidden>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <textarea name="message"></textarea>
  </form>
  
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

Abbiamo bisogno di nascondere questo modulo, perché non è necessario che venga visualizzato dall'utente ma solo da Netlify.

Gli daremo l'attributo hidden e  l'attributo name che corrisponde al modulo JSX in Contact.js. Dobbiamo anche assegnargli l'attributo netlify in modo che Netlify Forms lo riconosca. Infine, dobbiamo includere tutti gli stessi campi di input del nostro modulo JSX:  name, email, message.

Come inviare il modulo di contatto

Una volta fatto, torneremo a Contact.js. Useremo JavaScript per inviare questo modulo.

Prima di tutto, creeremo uno stato dedicato per ciascuno dei valori digitati nel modulo per name, email, message:

const [name, setName] = React.useState("");
const [email, setEmail] = React.useState("");
const [message, setMessage] = React.useState("");

Memorizziamo ciò che l'utente digita in ciascuno degli input nello stato con l'aiuto dell'handler  onChange.

Per gestire l'invio del modulo, aggiungeremo il prop onSubmit ad esso. La funzione che verrà chiamata, handleSubmit, effettuerà una richiesta di post all'endpoint "/" con tutti i nostri dati del modulo.

Imposteremo le intestazioni della richiesta per indicare che stiamo inviando i dati del modulo. Per il corpo della richiesta, includeremo il nome del modulo e tutti i dati del modulo tramite le variabili di stato  name, email e message.

// src/components/Contact.js

import React from "react";

export default function Contact() {
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [message, setMessage] = React.useState("");

  function encode(data) {
    return Object.keys(data)
      .map(
        (key) => encodeURIComponent(key) + "=" + encodeURIComponent(data[key])
      )
      .join("&");
  }

  function handleSubmit(e) {
    e.preventDefault();
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({ "form-name": "contact", name, email, message }),
    })
      .then(() => alert("Message sent!"))
      .catch((error) => alert(error));
  }

  return (
    <section id="contact" className="relative">
      <div className="container px-5 py-10 mx-auto flex sm:flex-nowrap flex-wrap">
        <div className="lg:w-2/3 md:w-1/2 bg-gray-900 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative">
          <iframe
            width="100%"
            height="100%"
            title="map"
            className="absolute inset-0"
            frameBorder={0}
            marginHeight={0}
            marginWidth={0}
            style={{ filter: "opacity(0.7)" }}
            src="https://www.google.com/maps/embed/v1/place?q=97+warren+st+new+york+city&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"
          />
          <div className="bg-gray-900 relative flex flex-wrap py-6 rounded shadow-md">
            <div className="lg:w-1/2 px-6">
              <h2 className="title-font font-semibold text-white tracking-widest text-xs">
                ADDRESS
              </h2>
              <p className="mt-1">
                97 Warren St. <br />
                New York, NY 10007
              </p>
            </div>
            <div className="lg:w-1/2 px-6 mt-4 lg:mt-0">
              <h2 className="title-font font-semibold text-white tracking-widest text-xs">
                EMAIL
              </h2>
              <a className="text-indigo-400 leading-relaxed">
                reedbarger@email.com
              </a>
              <h2 className="title-font font-semibold text-white tracking-widest text-xs mt-4">
                PHONE
              </h2>
              <p className="leading-relaxed">123-456-7890</p>
            </div>
          </div>
        </div>
        <form
          netlify
          name="contact"
          onSubmit={handleSubmit}
          className="lg:w-1/3 md:w-1/2 flex flex-col md:ml-auto w-full md:py-8 mt-8 md:mt-0">
          <h2 className="text-white sm:text-4xl text-3xl mb-1 font-medium title-font">
            Hire Me
          </h2>
          <p className="leading-relaxed mb-5">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum
            suscipit officia aspernatur veritatis. Asperiores, aliquid?
          </p>
          <div className="relative mb-4">
            <label htmlFor="name" className="leading-7 text-sm text-gray-400">
              Name
            </label>
            <input
              type="text"
              id="name"
              name="name"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
              onChange={(e) => setName(e.target.value)}
            />
          </div>
          <div className="relative mb-4">
            <label htmlFor="email" className="leading-7 text-sm text-gray-400">
              Email
            </label>
            <input
              type="email"
              id="email"
              name="email"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
              onChange={(e) => setEmail(e.target.value)}
            />
          </div>
          <div className="relative mb-4">
            <label
              htmlFor="message"
              className="leading-7 text-sm text-gray-400">
              Message
            </label>
            <textarea
              id="message"
              name="message"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"
              onChange={(e) => setMessage(e.target.value)}
            />
          </div>
          <button
            type="submit"
            className="text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">
            Submit
          </button>
        </form>
      </div>
    </section>
  );
}

Come puoi vedere sopra, stiamo codificando i dati del modulo con una funzione speciale encode che vedi qui.

Se il messaggio viene inviato correttamente, visualizzeremo un avviso che dice "Message sent". Altrimenti, se si verifica un errore, avviseremo l'utente di tale situazione.

Come costruire il componente Navbar

L'ultimo passaggio è creare il nostro componente Navbar.

Vogliamo che questa barra di navigazione rimanga in cima alla nostra app su dispositivi di grandi dimensioni e non sia ferma sullo schermo su dispositivi mobili.

Inoltre, vogliamo includere collegamenti a ciascuna delle nostre sezioni importanti per il nostro progetto come capacità, testimonianze e il nostro modulo di contatto:

// src/components/Navbar.js

import { ArrowRightIcon } from "@heroicons/react/solid";
import React from "react";

export default function Navbar() {
  return (
    <header className="bg-gray-800 md:sticky top-0 z-10">
      <div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
        <a className="title-font font-medium text-white mb-4 md:mb-0">
          <a href="#about" className="ml-3 text-xl">
            Reed Barger
          </a>
        </a>
        <nav className="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-700	flex flex-wrap items-center text-base justify-center">
          <a href="#projects" className="mr-5 hover:text-white">
            Past Work
          </a>
          <a href="#skills" className="mr-5 hover:text-white">
            Skills
          </a>
          <a href="#testimonials" className="mr-5 hover:text-white">
            Testimonials
          </a>
        </nav>
        <a
          href="#contact"
          className="inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0">
          Hire Me
          <ArrowRightIcon className="w-4 h-4 ml-1" />
        </a>
      </div>
    </header>
  );
}

In che modo questo componente rimane in cima alla pagina su un dispositivo più grande? Con l'aiuto della classe md:sticky sul nostro elemento header.

Questa classe significa che avrà la regola di stile position: sticky; applicata a partire da un punto di interruzione di medie dimensioni (768px).

Come distribuire il tuo Portfolio

Ora per rendere attivo il nostro portfolio, dobbiamo trasferire la nostra applicazione su GitHub.

Se non hai familiarità con Git e GitHub, sarebbe necessario un po' di tempo solo per imparare a come inviare il tuo codice al tuo account GitHub per la prima volta. È un'abilità essenziale che qualsiasi sviluppatore deve conoscere.

Dopo aver acquisito familiarità con questo processo, possiamo prima creare un nuovo repository Github. Successivamente, eseguiremo git add ., git commit -m "Deploy", creando il nostro git remoto e quindi git push -u origin master.

Una volta che il nostro progetto è su GitHub, possiamo andare su Netlify e selezionare l'opzione "Choose Site from Git". Quindi sceglieremo GitHub per la nostra distribuzione continua e selezioneremo il repository GitHub in cui abbiamo appena inviato il nostro codice.

Dopodiché, il nostro progetto verrà pubblicato automaticamente sul web!

Cosa viene dopo

Congratulazioni! Ora hai un'app  portfolio live sul Web che mostra tutti i tuoi progetti e le tue abilità ai potenziali datori di lavoro.

Il prossimo passo da fare sarebbe impostare un dominio personalizzato, preferibilmente con il tuo nome (es. reedbarger.com ). Poiché Netlify include un DNS, puoi facilmente configurare un dominio personalizzato con loro.

Cerca di aggiungere un blog alla tua app React per mostrare ancora di più la tua conoscenza da sviluppatore ai potenziali datori di lavoro.

Rendi il tuo portfolio personale un'espressione di te stesso e di ciò che ti appassiona come sviluppatore e avrai successo!

Vuoi il modo n. 1 per imparare React?

Il Bootcamp React prende tutto ciò che dovresti sapere sull'apprendimento di React e lo raggruppa in un unico pacchetto completo, inclusi video, cheatsheet e bonus speciali.

Ottieni le informazioni privilegiate che centinaia di sviluppatori hanno già utilizzato per padroneggiare React, per trovare il lavoro dei loro sogni e assumere il controllo del loro futuro:

Clicca qui per essere avvisato quando apre.

Se sei uno sviluppatore web o un web designer, è essenziale per te avere un sito web portfolio. Ti consente di fornire informazioni su di te e mostrare il tuo miglior lavoro con le tue competenze ed esperienze pertinenti.

In questo post del blog, discuterò alcuni dei vantaggi nella creazione di un sito Web portfolio. Quindi ti mostrerò come creare un bellissimo e responsivo sito Web portfolio per te stesso utilizzando HTML, CSS, JavaScript e Bootstrap versione 5.

Sommario

• Vantaggi di avere un sito web portfolio
• Cos'è Bootstrap ?
• Struttura delle cartelle
• Come aggiungere un menu di navigazione al tuo portfolio
• Come aggiungere un'intestazione Hero al portfolio
• Come creare la sezione Informazioni
• Come realizzare la sezione Servizi
• Come aggiungere un colore di sfondo scuro alla barra di navigazione durante lo scorrimento della pagina
• Come costruire la sezione Portfolio
• Come costruire la sezione contatti
• Come costruire la sezione del piè di pagina
• Tocchi finali
• Conclusione

Vantaggi di avere un sito Web portfolio

Avere un sito Web portfolio ha diversi vantaggi, tra cui:

• fornisce una vetrina per mostrare le tue abilità ed esperienze più rilevanti
• mostra la tua personalità
• consente ai responsabili delle assunzioni di trovare te invece di contattarli tu
• sei facilmente ricercabile su motori di ricerca come Google

Cos'è Bootstrap?

Bootstrap è un popolare framework CSS front-end che viene utilizzato per sviluppare siti Web reattivi e ottimizzati per i dispositivi mobili. L'ultima versione di Bootstrap è la versione 5. Puoi trovare la documentazione ufficiale di Bootstrap 5 qui .

Struttura delle cartelle

Inizieremo ora a lavorare sulla creazione del sito Web del portfolio.

Innanzitutto, creiamo la struttura delle cartelle. Puoi ottenere i file di avvio del progetto su GitHub . Inoltre, puoi cliccare qui per vedere la demo dal vivo di questo progetto.

La struttura delle cartelle è composta dai file index.html, style.css e script.js e da una cartella images. Scriveremo tutto il CSS nel file style.css e il JavaScript nel file script.js .

Nel file index.html, puoi vedere il codice standard HTML con il CDN di Bootstrap , font awesome kit e il collegamento ai file esterni CSS e JavaScript.

Qui, il file script.js viene caricato dopo aver caricato tutto il codice HTML.

Come aggiungere un menu di navigazione al tuo portfolio

Ora, lavoriamo per aggiungere un menu di navigazione nel nostro progetto. Aiuterà i visitatori a trovare le informazioni pertinenti che stanno cercando.

Useremo la classe fixed-top di Bootstrap nell'elemento nav per mantenere la barra di navigazione nella parte superiore della pagina. La barra di navigazione ha anche una classe navbar-brand in cui manteniamo il nome della persona come marchio.

<nav class="navbar navbar-expand-lg fixed-top navbarScroll">
        <div class="container">
            <a class="navbar-brand" href="#">Brad</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#home">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#about">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#services">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#portfolio">Portfolio</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">Contact</a>
                    </li>
                </ul>
                
            </div>
        </div>
    </nav>

La barra di navigazione ha le seguenti caratteristiche:

• Ha sei collegamenti: home, about, services, portfolio, contact e footer
• Ha uno sfondo trasparente. Aggiungeremo uno sfondo scuro sullo scorrimento della pagina in un secondo momento.
• Si può aprire e chiudere su dispositivi più piccoli

Puoi trovare maggiori dettagli sulle funzionalità della barra di navigazione di Bootstrap 5 qui .

Tuttavia, la barra di navigazione ha un problema durante lo scorrimento. È completamente trasparente in tutta la pagina cosa che causa problemi di leggibilità. Risolveremo questo problema dopo aver completato la sezione Servizi per farti comprendere correttamente il problema.

Come aggiungere un'intestazione Hero al portafoglio

Ora aggiungeremo un'immagine hero con del testo al centro. Un'immagine hero è un termine di web design che si riferisce a un'immagine a larghezza intera di alta qualità che mostra gli obiettivi principali dell'azienda o dell'individuo, un'immagine rappresentativa, una foto o altri elementi accattivanti. Aiuta ad attirare utenti sul tuo sito.

 <!-- main banner -->
    <section class="bgimage" id="home">
        <div class="container-fluid">
            <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hero-text">
                <h2 class="hero_title">Hi, it's me Brad</h2>
                <p class="hero_desc">I am a professional freelancer in New York City</p>
            </div>
            </div>
        </div>
    </section>

Inoltre, aggiungiamo il CSS per il codice sopra nel file style.css:

/* hero background image */
.bgimage {
    height:100vh;
    background: url('images/heroImage.jpeg');
    background-size:cover;
    position:relative;
}
/* text css above hero image*/
.hero_title {
    font-size: 4.5rem;
}
.hero_desc {
    font-size: 2rem;
}
.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

Qui possiamo vedere che la sezione ha un id chiamato bgimage che è responsabile della visualizzazione dell'immagine hero di sfondo a tutta larghezza. Visualizza anche del testo al centro, sopra l'immagine di sfondo con l'aiuto del CSS di sopra.

Ecco come appare il sito finora con la barra di navigazione e la sezione hero:

Come creare la sezione Informazioni

La pagina Informazioni contiene informazioni importanti su di te e sul tuo background. I visitatori del tuo sito portfolio possono conoscerti attraverso le informazioni che fornisci in questa pagina.

Aggiungeremo un'immagine sul lato sinistro della riga e sul lato destro aggiungeremo la nostra rapida introduzione a questa sezione. Dimostriamolo usando il codice qui sotto:

<!-- about section-->
    <section id="about">
        <div class="container mt-4 pt-4">
            <h1 class="text-center">About Me</h1>
            <div class="row mt-4">
                <div class="col-lg-4">
                    <img src="images/about.jpeg" class= "imageAboutPage" alt="">
                </div>

                <div class="col-lg-8">
                    <p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
                        
                    </p>
                    <div class="row mt-3">
                        <div class="col-md-6">
                            <ul>
                                <li>Name: David Parker</li>
                                <li>Age: 28</li>
                                <li>Occupation: Web Developer</li>

                            </ul>
                        </div>
                        <div class="col-md-6">
                            <ul>
                                <li>Name: David Parker</li>
                                <li>Age: 28</li>
                                <li>Occupation: Web Developer</li>

                            </ul>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
                            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
                        </p>
                    </div>
                </div>
            </div>
    </section>

Aggiungiamo alcuni CSS per l'immagine sul lato sinistro:

/* about section image css */
.imageAboutPage {
    width: 100%;
}

Questo creerà una sezione about. Puoi modificare il contenuto in base ai tuoi casi d'uso. Abbiamo aggiunto le classi denominate mt-4 e pt-4 con classe container che imposterà sia il margine superiore che il padding superiore su 1.5 rem.

La riga ha due colonne. Una ha la classe col-lg-4 per visualizzare l'immagine che occuperà la colonna di sinistra con una griglia in 4 parti per schermi di grandi dimensioni.

All'altra colonna viene assegnata una classe col-lg-8 che occuperà la colonna di destra con una griglia a 8 parti per schermi più grandi. Per schermi medi e piccoli si sovrapporranno tra loro come possiamo vedere nel file GIF sottostante:

Come realizzare la sezione servizi

Questa sezione aiuta a trasformare i visitatori del sito Web in potenziali clienti. Qui è dove spieghi quali servizi specifici offri e in quale nicchia essi si posizionano.

Aggiungiamo il codice per questa sezione e lo descriviamo di seguito:

<!-- services section-->
    <section id="services">
        <div class="container">
            <h1 class="text-center">Services</h1>
            <div class="row">
                <div class="col-lg-4 mt-4">
                    <div class="card servicesText">
                        <div class="card-body">
                            <i class="fas servicesIcon fa-clock"></i>
                            <h4 class="card-title mt-3">Website Development</h4>
                            <p class="card-text mt-3">Some quick example text to build on the card title and make up the bulk of the card's content.
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                            </p>
                        </div>
                    </div>  
                </div>
                <div class="col-lg-4 mt-4">
                    <div class="card servicesText">
                        <div class="card-body">
                            <i class='fas servicesIcon fa-layer-group'></i>
                            <h4 class="card-title mt-3">Website Design</h4>
                            <p class="card-text mt-3">Some quick example text to build on the card title and make up the bulk of the card's content.
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                            </p>
                        </div>
                    </div>  
                </div>

                <div class="col-lg-4 mt-4">
                    <div class="card servicesText">
                        <div class="card-body">
                            <i class='far servicesIcon fa-check-circle'></i>
                            <h4 class="card-title mt-3">Website Deployment</h4>
                            <p class="card-text mt-3">Some quick example text to build on the card title and make up the bulk of the card's content.
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                            </p>
                        </div>
                    </div>  
                </div>
            </div>

            <div class="row">
                <div class="col-lg-4 mt-4">
                    <div class="card servicesText">
                        <div class="card-body">
                            <i class='fas servicesIcon fa-search'></i>
                            <h4 class="card-title mt-3">SEO</h4>
                            <p class="card-text mt-3">Some quick example text to build on the card title and make up the bulk of the card's content.
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                            </p>
                        </div>
                    </div>  
                </div>

                <div class="col-lg-4 mt-4">
                    <div class="card servicesText">
                        <div class="card-body">
                            <i class='fas servicesIcon fa-shield-alt'></i>
                            <h4 class="card-title mt-3">DevOps</h4>
                            <p class="card-text mt-3">Some quick example text to build on the card title and make up the bulk of the card's content.
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                            </p>
                        </div>
                    </div>  
                </div>

                <div class="col-lg-4 mt-4">
                    <div class="card servicesText">
                        <div class="card-body">
                            <i class='fas servicesIcon fa-wrench'></i>
                            <h4 class="card-title mt-3">QA</h4>
                            <p class="card-text mt-3">Some quick example text to build on the card title and make up the bulk of the card's content.
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                            </p>
                        </div>
                    </div>  
                </div>
            </div>
        </div>
    </section>

Poiché questo sito Web è rivolto a sviluppatori e Web designer, ho incluso alcuni dei servizi che uno sviluppatore o un Web designer potrebbe offrire.

Abbiamo utilizzato le schede bootstrap per visualizzare i servizi. La nostra sezione servizi ha 2 righe e 3 colonne ciascuna. Per schermi di grandi dimensioni con una larghezza maggiore o uguale a 992px, vengono visualizzate tre schede per riga. Per gli schermi di larghezza inferiore a 992px, viene visualizzata solo una scheda per riga.

Puoi trovare ulteriori informazioni sui punti di interruzione bootstrap qui .

Inoltre, ci sono dei caratteri aggiunti in ogni scheda per farli sembrare migliori.

Senza CSS, la sezione dei servizi sarebbe simile a questa:

Quindi, aggiungiamo un po' di CSS per aumentare la dimensione del carattere, la dimensione dell'icona, l'altezza della scheda e aggiungere un po' di colore extra quando un utente passa con il mouse su una scheda.

/* services section css */
.servicesText.card {
    height: 280px;
    cursor: pointer;
  }
.servicesIcon {
    font-size: 36px;
    text-align: center;
    width: 100%;
}
.card-title {
    text-align: center;
}
.card:hover .servicesIcon {
    color: #008000;
}
.servicesText:hover {
    border: 1px solid #008000;
}

Ecco come appare ora la nostra sezione servizi:

Come aggiungere un colore di sfondo scuro alla barra di navigazione durante lo scorrimento della pagina

Se esamini correttamente la gif sopra, vedrai che la barra di navigazione è trasparente in tutta la pagina, il che causa problemi di leggibilità. Quindi lavoriamo per risolvere questo problema.

Scriveremo alcuni script JavaScript e CSS per risolvere questo problema. Aggiungeremo una classe navbarDark per mostrare un colore di sfondo scuro per la barra di navigazione sullo scorrimento della pagina.

Per questo dobbiamo andare al file script.js e aggiungere il seguente codice:

// add class navbarDark on navbar scroll
const header = document.querySelector('.navbar');

window.onscroll = function() {
    var top = window.scrollY;
    if(top >=100) {
        header.classList.add('navbarDark');
    }
    else {
        header.classList.remove('navbarDark');
    }
}

Ora, analizziamo il codice sopra:

• header contiene il valore dell'elemento nav poiché il metodo querySelector restituisce il primo elemento che corrisponde al selettore CSS (che in questo caso è .navbar).
• window.onscroll si attiva quando si verifica l'evento di scorrimento.
• window.scrollY restituisce il numero di pixel di scorrimento verticale del documento e il suo valore viene assegnato a una variabile denominata top.
• Se il valore di top è maggiore o uguale a 100, aggiunge una classe  navbarDark a header.

Aggiungiamo rapidamente il CSS per la classenavbarDark. Per questo, vai al tuo file style.css e aggiungi il seguente codice:

/* display background color black on navbar scroll */
.navbarScroll.navbarDark {
    background-color: black;
}

Ecco come ora apparirà la barra di navigazione:

Come costruire la sezione Portfolio

Questa sezione include il tuo lavoro migliore. Le persone possono vedere cosa sei in grado di fare e mostrare un buon lavoro eseguito in passato attirerà sicuramente più potenziali clienti o reclutatori. Quindi aggiungi solo il tuo lavoro migliore in questa sezione.

Utilizzeremo le schede Bootstrap per visualizzare i progetti di portfolio. Ci saranno 2 righe e ogni riga avrà 3 colonne di schede.

Questo sarà il codice per la sezione portfolio:

<!-- portfolio section-->
    <section id="portfolio">
        <div class="container mt-3">
            <h1 class="text-center">Portfolio</h1>
            <div class="row">
                <div class="col-lg-4 mt-4">
                    <div class="card">
                        <img class="card-img-top" src="images/portfolioImage1.jpg" alt="Card image" style="width:100%">
                        <div class="card-body">
                            <h4 class="card-title">YouTube Clone</h4>
                            <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="text-center">
                                <a href="#" class="btn btn-success">Link</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 mt-4">
                    <div class="card portfolioContent">
                        <img class="card-img-top" src="images/portfolioImage4.jpg" alt="Card image" style="width:100%">
                        <div class="card-body">
                            <h4 class="card-title">Quiz App</h4>
                            <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="text-center">
                                <a href="#" class="btn btn-success">Link</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 mt-4">
                    <div class="card portfolioContent">
                        <img class="card-img-top" src="images/portfolioImage3.jpg" alt="Card image" style="width:100%">
                        <div class="card-body">
                            <h4 class="card-title">Product Landing Page</h4>
                            <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="text-center">
                                <a href="#" class="btn btn-success">Link</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-lg-4 mt-4">
                    <div class="card portfolioContent">
                        <img class="card-img-top" src="images/portfolioImage4.jpg" alt="Card image" style="width:100%">
                        <div class="card-body">
                            <h4 class="card-title">Messaging Service</h4>
                            <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="text-center">
                                <a href="#" class="btn btn-success">Link</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 mt-4">
                    <div class="card portfolioContent">
                        <img class="card-img-top" src="images/portfolioImage1.jpg" alt="Card image" style="width:100%">
                        <div class="card-body">
                            <h4 class="card-title">Twitter Clone</h4>
                            <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="text-center">
                                <a href="#" class="btn btn-success">Link</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 mt-4">
                    <div class="card portfolioContent">
                        <img class="card-img-top" src="images/portfolioImage4.jpg" alt="Card image" style="width:100%">
                        <div class="card-body">
                            <h4 class="card-title">Blog App</h4>
                            <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="text-center">
                                <a href="#" class="btn btn-success">Link</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </section>

Ogni scheda ha un'immagine, un titolo, una descrizione e un collegamento ai progetti. Vengono visualizzate tre schede per riga per schermi di grandi dimensioni con punti di interruzione in larghezza ≥ 992 px , ma per schermi di larghezza < 992 px viene visualizzata solo una singola scheda per riga.

La GIF qui sotto mostra come appare ora la sezione portfolio:

Come costruire la sezione contatti

Dovresti includere le tue informazioni di contatto in questa sezione in modo che i visitatori possano contattarti se vogliono assumerti.

La nostra sezione contatti includerà 2 colonne in un'unica riga: Google maps per la posizione e un modulo di contatto.

Per incorporare la mappa di Google, devi seguire questi passaggi:

• vai su https://www.embed-map.com
• inserisci la tua posizione
• fai clic sul pulsante Genera codice HTML che fornirà il codice HTML di Google Map

Il nostro codice sarà simile a questo con il modulo di contatto incluso:

<!-- contact section-->
    <section id="contact">
        <div class="container mt-3 contactContent">
            <h1 class="text-center">Contact Me</h1>

            <div class="row mt-4">
                <div class="col-lg-6">
                    <!-- to edit google map goto https://www.embed-map.com type your location, generate html code and copy the html  -->
                    <div style="max-width:100%;overflow:hidden;color:red;width:500px;height:500px;">
                        <div id="embedmap-canvas" style="height:100%; width:100%;max-width:100%;">
                            <iframe style="height:100%;width:100%;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=new+york&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8">
                            </iframe>
                        </div>
                        <a class="googlemaps-html" href="https://www.embed-map.com" id="get-data-forembedmap">https://www.embed-map.com</a>
                        <style>#embedmap-canvas img{max-width:none!important;background:none!important;font-size: inherit;font-weight:inherit;}
                        </style>
                    </div>
                </div>

                <div class="col-lg-6">
                    <!-- form fields -->
                    <form>
                        <input type="text" class="form-control form-control-lg" placeholder="Name">
                        <input type="email" class="form-control mt-3" placeholder="Email">
                        <input type="text" class="form-control mt-3" placeholder="Subject">
                        <div class="mb-3 mt-3">
                            <textarea class="form-control" rows="5" id="comment" name="text" placeholder="Project Details"></textarea>
                        </div>
                    </form>
                    <button type="button" class="btn btn-success mt-3">Contact Me</button>
                    
                </div>

            </div>
        </div>
    </section>

La prima colonna visualizzerà la mappa di Google e la successiva visualizzerà il modulo di contatto.

Il modulo di contatto ha quattro diversi campi: nome, e-mail, oggetto e dettagli del progetto. Il modulo non invia la richiesta in autonomia. Dovrai collegarlo a un qualsiasi codice di back-end. Oppure per questo puoi semplicemente usare Netlify Form o Formspree .

Ecco come apparirà la sezione contatti:

Come costruire la sezione del piè di pagina

Ora siamo arrivati ​​all'ultima sezione di questo post, che è la sezione del piè di pagina. Abbiamo già aggiunto un collegamento CDN al font Awesome nel file index.html.

Nel footer, aggiungeremo collegamenti ai nostri social media tramite icone e caratteri awesome.

 <!-- footer section-->
    <footer id="footer">
        <div class="container-fluid">
            <!-- social media icons -->
            <div class="social-icons mt-4">
                <a href="https://www.facebook.com/" target="_blank"><i class="fab fa-facebook"></i></a>
                <a href="https://www.instagram.com/" target="_blank"><i class="fab fa-instagram"></i></a>
                <a href="https://www.twitter.com/" target="_blank"><i class="fab fa-twitter"></i></a>
                <a href="https://www.linkedin.com/" target="_blank"><i class="fab fa-linkedin"></i></a>
                <a href="https://www.twitch.tv/" target="_blank"><i class="fab fa-twitch"></i></a>
            </div>
        </div>
    </footer>

Senza il CSS, il nostro footer sarà simile a questo:

Quindi aggiungiamo uno stile al piè di pagina con questo codice:

/* social media icons styling */
.social-icons {
    font-size: 36px;
    cursor: pointer;
}
.fa-facebook:hover,.fa-instagram:hover,.fa-twitter:hover,.fa-linkedin:hover, .fa-twitch:hover {
    color: #008000;
}
.fab {
    color: #000000;
}
/* footer styling */
#footer {
    background-color: #808080;
    text-align: center;
}

Le icone sono ora visualizzate al centro con un effetto al passaggio del mouse che possiamo vedere nel file GIF sottostante.

Tocchi finali

Per aggiungere un po' di spazio tra tutte le sezioni, aggiungiamo un po' di stile in più:

/* spacing on all sections */
#about, #services, #portfolio, #contact {
    margin-top: 4rem;
    padding-top: 4rem;
}
#contact {
    padding-bottom: 4rem;
}

Ora abbiamo finito di creare il nostro sito Web portfolio.

Puoi trovare il codice sorgente completo di questo progetto qui .

Conclusione

Ecco come puoi creare un sito Web portfolio completo e responsivo utilizzando HTML, CSS, JavaScript e Bootstrap 5 .

In questo post abbiamo visto alcuni dei vantaggi nella creazione di un sito Web portfolio per sviluppatori Web e designer. Abbiamo diviso l'intero sito Web in diverse sezioni e di ognuna ne abbiamo discusso individualmente mentre lo costruivamo.

Puoi personalizzare questo sito Web in base ai tuoi casi d'uso.

Spero che tu abbia trovato utile questo post.

Buona codifica!

Puoi trovarmi su Twitter per contenuti quotidiani sullo sviluppo Web.