skills.paoloronco.it è un sito web personale sviluppato per presentare in modo chiaro, elegante e dinamico le mie competenze professionali.
Si tratta di un progetto focalizzato sull’essenzialità: un’interfaccia moderna, un design completamente scuro e un layout ottimizzato sia per dispositivi mobili che per desktop.
Il sito è già online e rappresenta un vero e proprio esercizio pratico di progettazione e sviluppo frontend.
Tecnologie e strumenti utilizzati
Per la realizzazione di questo progetto ho utilizzato principalmente:
- Next.js — framework React per siti web moderni e performanti.
- TypeScript — linguaggio tipizzato che migliora la qualità e la manutenibilità del codice.
- Tailwind CSS — sistema di utility classes per creare un design coerente e responsivo.
- Node.js e npm — strumenti indispensabili per la gestione delle dipendenze e l’ambiente di sviluppo.
Anche se ho fatto uso di Bolt AI per accelerare la fase iniziale di sviluppo, il progetto è stato per me un’importante occasione per consolidare conoscenze tecniche fondamentali:
- Comprendere la struttura di un progetto basato su Next.js.
- Imparare a configurare un ambiente di sviluppo con Node.js e npm.
- Migliorare nella scrittura di componenti React modulari con TypeScript.
- Lavorare con file di configurazione come
tsconfig.jsonenext.config.js. - Applicare concetti pratici di responsive design e ottimizzazione delle performance.
Questa esperienza non si è limitata a un semplice assemblaggio di codice: ho lavorato attivamente sulla struttura, l’organizzazione dei dati e la personalizzazione completa dell’interfaccia.
Esplora il progetto
Il sito è disponibile pubblicamente e può essere esplorato qui:
🔗 Sito ufficiale:👉 skills.paoloronco.it
Il codice sorgente completo è accessibile su GitHub:
🔗 Repository GitHub:
👉 github.com/paoloronco/skills-website/tree/main
Nel repository è possibile trovare tutta la struttura del progetto, inclusi componenti React, gestione dei dati e file di configurazione.
Struttura del sito
Il progetto Skills Website è costruito in modo modulare e facilmente estendibile.
Alcuni dei file chiave includono:
├── project/
│ ├── .gitignore
│ ├── .eslintrc.js (o .eslint.config.js)
│ ├── index.html
│ ├── package.json
│ ├── package-lock.json
│ ├── postcss.config.js
│ ├── tailwind.config.js
│ ├── tsconfig.app.json
│ ├── tsconfig.json
│ ├── tsconfig.node.json
│ ├── vite.config.ts
│ ├── src/
│ ├── main.tsx
│ ├── App.tsx
│ ├── index.css
│ ├── vite-env.d.ts
│ ├── components/
│ │ ├── Footer.tsx
│ │ ├── Header.tsx
│ │ ├── ScrollProgress.tsx
│ │ ├── SkillCard.tsx
│ │ ├── SkillCategory.tsx
│ │ └── SkillsShowcase.tsx
│ ├── data/
│ │ └── skills.ts
│ ├── types/
│ │ └── skill.ts
│ └── utils/
│ ├── categoryIcons.tsx
│ └── motionProxy.tsxQuesta struttura mi consente di aggiornare facilmente contenuti e design in futuro, senza intervenire su tutta la base del progetto.
Perché questo progetto è importante nel mio percorso
Skills Website rappresenta una sintesi tra design minimalista e solide basi tecniche.
Non si tratta solo di mostrare competenze in modo visivo: è anche un esercizio pratico di sviluppo frontend moderno, comprensione dei framework JavaScript di ultima generazione e gestione autonoma di un intero flusso di lavoro, dalla progettazione fino al deploy.
Questo progetto si integra nel mio portfolio come dimostrazione concreta della mia capacità di:
- Tradurre concetti astratti in prodotti web concreti.
- Adattarmi a nuove tecnologie e strumenti di sviluppo.
- Gestire un intero ciclo di vita del progetto, dall’idea iniziale alla pubblicazione online.