Sito personale minimalista realizzato con Bootstrap 5 e pubblicato su GitHub Pages.
Layout a due colonne: card profilo a sinistra (cover, avatar, dropdown social) e progetti a destra (lista semantica e accessibile).
Screenshot placeholder — salva un'immagine in
assets/screenshot.jpge aggiorna il link qui sotto se vuoi mostrarla.
- UI pulita con card “soft” (
.neo-card) e spaziatura coerente. - A11y: skip link, alt descrittivi, icone decorative
aria-hidden, liste semantiche<dl>. - Dropdown Social “+” ancorato in alto a destra, stabile (non si sposta all’apertura).
- Progetti in
<dl>(termine+descrizione) con anchor e smooth scroll. - SEO base + Open Graph (preview social).
- CSP (Content Security Policy) restrittiva per maggiore sicurezza.
- Zero build: HTML/CSS/JS vanilla + Bootstrap via CDN.
.
├── index.html
├── assets/
│ ├── avatar.jpg
│ ├── cover.jpg
│ └── screenshot.jpg # opzionale
└── README.md
Puoi aggiungere
styles.cssoscripts.jsse preferisci estrarre lo stile/JS dall’HTML.
Non serve alcun build tool.
Apri semplicemente il file index.html nel browser:
- doppio click su
index.html, oppure - avvia un piccolo server statico (consigliato per test CSP):
# Python 3 python -m http.server 8000 # poi visita http://localhost:8000
- Crea un repository e carica i file (
index.html,assets/...). - Vai su Settings → Pages.
- Source: seleziona
Deploy from a branch. - Branch: scegli
maine la cartella/root. - Salva. L’URL sarà:
https://<username>.github.io/<nome-repo>/
- Aggiungi un file
CNAMEnella root con il tuo dominio:danieledemichele.it - In DNS crea un record CNAME verso
<username>.github.io. - Su Settings → Pages → Custom domain inserisci lo stesso dominio e abilita Enforce HTTPS.
Apri index.html e modifica:
- Titolo/SEO:
<title>,<meta name="description">,<meta name="keywords">. - Open Graph:
og:title,og:description,og:image,og:url,og:site_name.
- Sostituisci i file in
assets/e assicurati del peso ottimizzato (usa WebP/JPEG compressi).
Cerca il blocco <!-- Dropdown Social --> e aggiorna gli href:
<a class="dropdown-item" href="https://github.com/username" target="_blank" rel="noopener">...</a>Modifica la lista <dl> nella card destra:
<dt> <i class="bi ..."></i> <a href="#progetto-notion"> Titolo progetto </a></dt>
<dd class="small muted"> Breve descrizione… </dd>Le sezioni con gli id (#progetto-notion, ecc.) sono già predisposte più in basso.
Cerca:
Designed by Daniele De Michele © <span id="year"></span>e personalizza se serve.
In cima al <style>:
:root{
--card-bg:#ffffff;
--card-r:24px;
--shadow-soft: 0 10px 30px rgba(0,0,0,.08);
--border-soft: 1px solid rgba(0,0,0,.06);
--text-soft:#4b5563;
--content-pad:1.5rem;
}Modifica qui per cambiare velocemente look & feel.
-
lang="it"e testo non tutto in maiuscolo. - Skip link prima del
<main>. -
altsignificativo sull’avatar (es: “Ritratto di Daniele”). - Icone decorative con
aria-hidden="true". - Struttura semantica: header in card profilo,
<dl>per progetti. - Focus visibile e navigazione tastiera per il dropdown.
Suggerimento: esegui Lighthouse o WAVE per verificare contrasto e ruoli ARIA.
CSP impostata nel <head>:
<meta http-equiv="Content-Security-Policy"
content="default-src 'self';
img-src 'self' data:;
style-src 'self' https://cdn.jsdelivr.net 'unsafe-inline';
script-src 'self' https://cdn.jsdelivr.net;
font-src https://cdn.jsdelivr.net 'self';
connect-src 'self';
frame-ancestors 'self';">Se sposti CSS/JS in file esterni nel repo, puoi rimuovere 'unsafe-inline' e rendere la policy più rigida.
- Usa immagini WebP e dimensioni adatte; aggiungi
loading="lazy". - Facoltativo:
srcset/sizesper cover e avatar. - Aggiungi
sitemap.xmlerobots.txt(per Pages possono essere file statici). - Precarica Bootstrap (
<link rel="preload" as="style">) se serve ottimizzare il LCP.
- Validazione HTML: https://validator.w3.org/
- Lighthouse (Chrome DevTools): mira a 90+ su Performance/A11y/Best Practices/SEO.
- Dark mode (
prefers-color-scheme+ toggle). - Progetti da
projects.json+ template dinamici. - Sezione Blog/Note (Jekyll su Pages).
- Analytics privacy-first (Plausible/Umami) senza cookie banner.
- GitHub Actions: link-checker + report Lighthouse ad ogni push.
Se non specifichi altro, suggerisco MIT.
Crea un file LICENSE con:
MIT License
Copyright (c) 2025 Daniele De Michele
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
...
- Bootstrap 5.3 e Bootstrap Icons via CDN.
- Design e sviluppo: Daniele De Michele.
- Assistenza tecnica e A11y review: ChatGPT.
- LinkedIn: https://www.linkedin.com/in/username
- GitHub: https://github.com/username
- Email: daniele@danieledemichele.it