mellow-portfolio

byValentina Gaffi

Prompt ottimizzato Crea un sito web portfolio completo per un art director e graphic designer freelance specializzato in brand identity e visual design, art direction, editorial design, advertising, event & exhibit design, digital e web design. Ti fornisco un’immagine di riferimento:
analizzala e usala come guida per lo stile visivo, layout, spaziatura, tipografia e atmosfera generale, senza copiarla direttamente. Struttura generale • Single-page con smooth scroll. • Codice diviso in: ◦ index.html ◦ styles.css • HTML semantico. • Design responsive (mobile-first). • 3 layout diversi per i progetti con griglia a 2 o 1 colonna, immagini grandi, paragrafi testi Stile visivo • Utilizza come ispirazione del layout l’immagine che ti allego • Minimal, premium, editoriale. • Light mode. • Ampio uso di spazio bianco. • Griglie pulite e ritmo tipografico. • Tipografia simile a Montserrat / sans-serif moderno. • Colore testi #525052 • Colore fondi scuri #706c6f • Colore accent #791e19 • Colore rondini chiari #e8e5e5 Header / Navigazione • Logo testuale in alto a sinistra. • Menu responsive con: ◦ Progetti ◦ Chi sono ◦ Cosa faccio ◦ Lavora con me ◦ English • Header sticky con effetto leggero allo scroll. Hero section • Titolo:
"Clarity through design" • Sottotitolo “Dalle identità alle pubblicazioni, progetto sistemi visivi che danno struttura e coerenza alla comunicazione.” • Layout elegante, ispirato all’immagine. • Possibile uso di grande tipografia e spacing. Banner cookie • genera un banner cookie utile ed essenziale Sezione Progetti • Griglia responsive. • 17 immagini placeholder. • Ogni progetto include titolo placeholder. • Effetto hover creativo: ◦ overlay con titolo ◦ zoom leggero ◦ transizioni fluide Sezione “Chi sono” • Bio breve (placeholder realistico). • Layout editoriale (una o due colonne). • foto profilo Sezione “Cosa faccio” Servizi: • Brand Identity • Art Direction • Editorial Design • Advertising • Event & Exhibit Design • Digital & Web Design Sezione “Lavora con me” • Email placeholder. • Modulo contatto con Nome e cognome, indirizzo mail, messaggio, bottone invia • codice php per il modulo contatto Footer • Link: ◦ Instagram ◦ LinkedIn • Stile minimal. Requisiti tecnici • Solo HTML + CSS (no framework). • Codice pulito e commentato. • Smooth scrolling. • Transizioni moderne e leggere.