About Me

Un portfolio fatto per essere ricordato.

Mattia Sinisi • HTML & CSS

Design consistente

Come vedrai nella pagina ci sono solo quattro colori di cui tre sono sulla scala del grigio mentre il quarto, l’arancione, è quello che risalta di più.

Questo colore non è stato scelto a caso, bensì per il fatto che nella mia foto profilo avevo un maglione dello stesso colore, facendo si che anche le mie foto rispettino il design della pagina.

Punti chiaveCon questa pagina voglio che sia

chiaro chi sono e cosa so fare.

La pagina deve essere ben organizzata e divisa in sezioni se vogliamo guidare l’attenzione del lettore.

Quindi è tutto diviso in riquadri contenenti:

● Presentazione● Capacità ● Tocco finale

L’elemento memorabile

Questo è, secondo me, il punto più importante della pagina, è ciò che viene ricordato.

Questa parte deve essere creativa e deve impressionare, anche se non è particolarmente complessa ricorda: è l’idea che conta.

Puoi vedere la pagina qui:https://snisni.it/about/me

https://github.com/sinisimattia/portfolio

start2impactRELOADED

Mattia Sinisi

Realizzato per il Master di Programmazione Web di start2impact.

Meno è di più.Il minimalismo sfruttato al meglio.

L’idea principale

Lo scopo del progetto era quello di reimmaginare

il sito di start2impact, la prima idea che mi venne

in mente fu quella di applicare uno stile minimalista per dare un senso di “lussuria” in più.

Le pagine, infatti, hanno i testi e le icone isolate

in piccoli riquadri con molto spazio vuoto

intorno a loro e la palette è composta da solo 4

colori.

Gli strumenti del mestiere.Cosa ho usato per realizzare il tutto.Sito statico

● HTML

● CSS

● JavaScript

● AngularJS

Blog

● PHP

● Wordpress

● mySQL

Elementi interattivi.Il pezzo forte.

Per rendere il sito più interessante ho aggiunto

uno Skill-Radar uguale a quello che già viene

utilizzato nelle pagine profilo utente per indicare

le capacità di uno studente.

Ho deciso di includerlo non solo come immagine

ma come elemento interattivo, per dare un’idea

migliore a chi non ha il suo profilo.

(I valori sono generati a random ogni 2 secondi)

Visitalo → /s2i-reloaded Codice → /start2impact-reloaded

Il meteo a portata di mano

Mattia Sinisi

Cos’è jsweather?

Lo scopo di “Just Some Weather” è quello di mostrare le condizioni meteorologiche di una città in tempo reale.

La qualità aggiunta dell’applicazione è la sua semplicità, sia visiva che di utilizzo.

Le informazioni essenziali sono poste in primo piano e, grazie al design semplice e minimale dell’interfaccia, sono chiare ed immediate.

Come funziona?

Quando l’utente inserisce la città nella barra di ricerca apposita vengono restituite tutte le informazioni sul meteo di quella città in quel momento.

Questo grazie ad una singola chiamata alle API di OpenWeatherMap.org, un servizio gratuito ed accessibile a tutti pensato per costruire questo tipo di applicazioni.

Powered by jQuery

L’applicazione è stata costruita con solo jQuery per effettuare le chiamate API e per assegnare i valori restituiti ai vari campi della tabella.

Per il resto è stato creato da zero con HTML e CSS senza framework aggiuntivi.

Dove si può usare?

jsweather è una web-app compatibile con la maggior parte dei browser, per usarla anche tu visita

https://snisni.it/progetti/jsweather

https://github.com/sinisimattia/jsweather

LollypopIl tema Wordpress per l’alta moda

Uno stile unicoLo scopo di Lollypop è quello di dare al tuo sito Wordpress uno stile POP Moderno, questo tema è pensato per coloro che vogliono aprire un negozio online di vestiti alla moda e che vogliono distinguersi dai loro competitori.

Le immagini, colori e caratteri sono ripresi dalle riviste di moda, in maniera tale da catturare l’attenzione di coloro che tengono al proprio look e che rimangono aggiornati sul mondo dello stile.

Tools per commerciantiOltre ad una lista di prodotti facile da navigare, questo tema offre la possibilità al commerciante di indicare la posizione del loro negozio tramite le API di Google Maps.

Grazie a questa feature i visitatori del sito avranno più possibilità di diventare clienti e visitare il negozio di persona.

Com’è stato realizzato?

● PHP● JS● HTML● CSS● WordpressEcco con cosa è stato costruito

Lollypop.

Vuoi integrarlo nel tuo sito?https://github.com/sinisimattia/lollypop

campfire.ioUn modo sicuro di chattare.

Mattia Sinisi

Cos’è?campfire è un’applicazione di

chat in tempo reale.

Gli utenti possono entrare con uno username personale, scegliere una stanza in base all’argomento di cui vogliono parlare ed iniziare la chat.

Come funziona?

Com’è stato creato?

SERVER

● NodeJS

● Express

● Socket.IO

CLIENT

● jQuery

● Flickity

● Socket.IO (Client)

Ci sono due applicazioni che comunicano fra loro, una sul server e l’altra gira sul browser dell’utente.

Punto di forzaQuello che distingue questa applicazione dalle altre è il totale rispetto della privacy.

Il tuo nome e i messaggi non sono conservati da nessuna parte, solo sulla schermata degli utenti connessi, se si dovesse uscire dalla stanza e poi rientrare sarebbe come entrare per la prima volta.

I tuoi messaggi sono impossibili da tracciare, perché non c’è nulla da tracciare.

L’interfaccia

Inizia a chattarehttps://campfireio.herokuapp.com

Rimani aggiornato → https://snisni.it/blog/campfire.io

Codice sorgente → https://github.com/sinisimattia/campfire.io

TrolleyLa tua agenda a portata di browser.

Mattia Sinisi https://github.com/sinisimattia/trolley

Come si usa?

Proprio come in un’altra applicazione dal nome stranamente simile, puoi creare dei task che andranno a finire in una di tre colonne.

Queste colonne rappresentano lo stato del task (da fare, in corso e fatto), il quale può essere cambiato facilmente trascinando il task nell’apposita colonna.

To do DOING DONE

TASKWash Car

Com’è stato realizzato?

L’applicazione client si interfaccia con quella server grazie ad una semplice API, i comandi a questa API sono mandati a seconda dello spostamento degli elementi fra le tre colonne e quando si crea un task.

PHPObject Oriented

mySQL

To do DOING DONE

TASKWash Car

Organizzati al meglio con Trolley.