Portfolio professionale moderno per Andrea Bravaccino - AI Developer & Salesforce Architect.
- Design Moderno: Interface pulita e professionale con animazioni fluide
- Chatbot AI: Integrato con Google Gemini per rispondere a domande sui progetti e competenze
- Responsive: Ottimizzato per tutti i dispositivi
- Performance: Ottimizzato per Cloudflare Pages con caricamento veloce
- SEO Friendly: Meta tag ottimizzati per i motori di ricerca
- Frontend: HTML5, CSS3, JavaScript (Vanilla)
- Framework CSS: Bootstrap 5
- Animazioni: CSS Animations + Intersection Observer API
- Backend: Cloudflare Pages Functions
- AI: Google Gemini API
- Hosting: Cloudflare Pages
- Collega il tuo repository GitHub a Cloudflare Pages
- Imposta build command:
none(sito statico) - Imposta output directory:
/(file nella root) - Deploy!
Nel dashboard di Cloudflare Pages:
- Vai alla sezione Settings del tuo progetto
- Trova la sezione Environment variables
- Aggiungi la seguente variabile:
GEMINI_API_KEY=your_google_gemini_api_key_here
- Vai su Google AI Studio
- Crea un nuovo progetto o seleziona uno esistente
- Genera una nuova API key
- Copia la chiave e aggiungila alle variabili d'ambiente di Cloudflare
Il chatbot utilizza Google Gemini AI ed è configurato con informazioni dettagliate su:
- Competenze tecniche: AI, LLM, Salesforce, Python, TypeScript
- Progetti personali: Ariel, MemoGenius, Outlook Summarizer, Bulk API Tool
- Esperienza lavorativa: Engineering Group, Indra, Enigen Italia
- Certificazioni: Tutte le certificazioni Salesforce Architect
- Contatti: Email, telefono, LinkedIn
my-website/
├── index.html # Pagina principale
├── portfolio.css # Stili custom
├── portfolio.js # JavaScript principale
├── functions/
│ ├── _middleware.js # Middleware Cloudflare
│ └── api/
│ └── chat.js # Endpoint chatbot
├── css/ # Librerie CSS
├── js/ # Librerie JavaScript
├── fonts/ # Font Icons
└── img/ # Immagini
Modifica le variabili CSS in portfolio.css:
:root {
--primary-color: #667eea;
--secondary-color: #764ba2;
--accent-color: #f093fb;
/* ... altri colori */
}Le animazioni sono basate su:
- CSS Animations per effetti base
- Intersection Observer per animazioni on-scroll
- Cubic-bezier per transizioni fluide
Per aggiornare le informazioni:
- Modifica
index.htmlper contenuti visibili - Aggiorna
functions/api/chat.jsper il contesto del chatbot
Per testare localmente:
- Installa Wrangler CLI
npm install -g wrangler- Avvia il server di sviluppo:
wrangler pages dev .Il sito è ottimizzato per:
- Desktop: Design completo con tutte le animazioni
- Tablet: Layout adattato con animazioni ridotte
- Mobile: Interface compatta e touch-friendly
- Lazy Loading: Immagini caricate on-demand
- CSS Minificato: File ottimizzati per la produzione
- Caching: Headers ottimizzati per Cloudflare
- Preloader: Caricamento smooth della pagina
- Email: andreabravaccino@gmail.com
- LinkedIn: linkedin.com/in/andreabravaccino
- GitHub: github.com/andrea9293
Questo progetto è rilasciato sotto licenza MIT. Vedi il file LICENSE per i dettagli.
Sviluppato con ❤️ da Andrea Bravaccino • Hosted on ☁️ Cloudflare Pages