GithubHelp home page GithubHelp logo

Hi there, i'm Elisa 👋!

Who I am

My name is Elisa Chiappini, i'm a Graphic Designer & Junior Full Stack Web Developer. In short: Determined and versatile, I am passionate about graphic design, web development and visual arts. Outside of work, I enjoy reading, sports and sewing. Pop and Minimal at appropriate times. I collect passport stamps, handmade bags and stickers from my travels. Seeking opportunities that combine my creative background and computer skills for innovative projects. Always looking for new knowledge.

Who I do

  • OCT 2020 - JUL2023: IED Istituto Europeo del Design in Milan, Graduation in Communication Visual Arts address Graphic Design
  • JAN 2022 - JUN 2022: Erasmus IED Madrid (Spain) - first contact with programming
  • SEP 2023 - MAR 2024: Master's degree with Boolean Academy Tech - Full Stack Web Developer course.

💻 Technical skills

  • Frontend Development:

    • HTML
    • CSS
    • SASS
    • Bootstrap
    • JavaScript
    • Vue.js
    • Vite

  • Backend Development:

    • PHP
    • MySQL
    • Laravel

  • Graphic Design Software:

    • Adobe Creative Suite
    • Illustrator
    • Photoshop
    • Indesign
    • Xd
    • After Effects
    • Premiere
    • Figma
    • Glyphs

Projects:

  • Comus - delivery food - Vue.js, Laravel Implementation of a web application for online food ordering and purchasing, developed on both the front-end and back-end. I worked with a team to implement interactive features with JavaScript, engaging both users and restaurant owners. The platform offers a dedicated area for restaurant registration, order management, and dish editing. On the front-end, we optimized the homepage display and dish selection for a better user experience. There is an online payment system with credit card validation and sending confirmation emails to users and restaurateurs.

  • Project Manager - Laravel & MySQL on Vite
    Implementation of a Portfolio site for displaying projects and related information using Laravel and MySQL. On the front-end side, we created a static layout with navbar, footer and a search field to filter projects, paginated according to a precise pattern. After locating the desired project, you can focus on the specific information and eventually return to the filtered projects area. On the back-end side, an administrative dashboard has been created for entering and editing information.

  • Boolzapp - Vue.js & Vite
    Implementation of a WhatsApp-like web application, with features for auto-reply, filtering and opening specific chats, and reading related conversations.

  • Boolflix - Vue.js & Vite
    Implementation of a Netflix-like web application, with implementation of API calls for displaying movie information, card format representation, and filtering system.

  • Spotify - Vue.js & Vite
    Realization of the visual known as Spotify and its responsive structure usable from both Desktop, Ipad, and iphone.

Thank you for visiting my GitHub profile! Contact me and let's collaborate together and create something beautiful together! Ecco qui i miei canali:

Elisa Chiappini's Projects

html-css-animation-filter icon html-css-animation-filter

Completamento di 13 esercizi che risolvono la rappresentazione di consegna tramite Css e che implicano l'utilizzo di animaizioni, transizioni e filtri.

html-css-boolando icon html-css-boolando

Progettazione di un sito ispirato al sito di Zalando come da screenshoot. Per ogni prodotto sono fornite 2 immagini: la prima sarà visualizzata all'apertura della pagina, la seconda sarà visualizzata al posto della prima, quando il cursore del mouse va in hover sulla card.

html-css-booleaner icon html-css-booleaner

Rappresentazione di un web-articole su una pagina html. Ho collegato il file css creato, copiato il folder delle immagini da inserire in progetto, utilizzati i class e id, attenzione alla corretta indentazione.

html-css-bootstrap-dashboard icon html-css-bootstrap-dashboard

Rappresentazinoe di layout responsive di una dashboard, ovvero il pannello di controllo di una ipotetica applicazione web, seguendo gli screenshot allegati. La richiesta è realizzarlo utilizzando Bootstrap 5.

html-css-float-cards icon html-css-float-cards

Rappresentazione di una pagina web sezione 'about' dove viene messo in evidenza il team di lavoro sottoforma di cards, utilizzando float, clearfix, photos, testo informazioni.

html-css-resp-wannabe icon html-css-resp-wannabe

Usando le CSS media queries, la repo ‘html-responsive-wannabe’ si trasforma in una versione navigabile e quando la larghezza dello schermo diventa: tablet: dai 768px in giù mobile: dai 480px in giù L'html e il css presenti non possono essere modificati, si possono aggiungere regole per modificare l'aspetto nelle due risoluzioni indicate dagli scree

html-css-spotifyweb icon html-css-spotifyweb

Rappresentazione come da screenshot della struttura Spotify, web app in modalità responsive. Le 4 versioni di layout hanno come riferimento le classi breakpoints di default: xs, sm, md, lg.

html-css-toboolist icon html-css-toboolist

Rappresentazione di una demo application con relativa css per la formattazione specifica.

html-css-zoom icon html-css-zoom

Rappresentazione di layout come da screenshot di riferimento Analizziamo sempre prima il layout e scriviamo dei commenti per individuare le macroaree.

htmlcss-discord icon htmlcss-discord

Rappresentazione di layout Discord Home come da screenshot cercando di essere il più fedeli possibili. Partendo da un layout a blocchi colorati e successivamente siamo passati al dettaglio, sezione per sezione.

htmlcss-dropbox icon htmlcss-dropbox

Rappresentazione di layout Dropbox come da screenshot, essendo il più fedeli possibili al riferimento assegnatoci. Analisi iniziale del layout, commenti e individuazione delle macro aree.

htmlcss-responsive-layout icon htmlcss-responsive-layout

Rappresentazione di una pagina di un sito vero in modalità responsive. Fasi di progetto: 1 Partire dalla realizzazione di una struttura base del nostro tema solo con i blocchi colorati, modalità debug layout; 2 Inserimento dei contenuti, immagini, testi e dettagli.

htmlcss-struttura-discord icon htmlcss-struttura-discord

appresentazione della struttura di un sito web reale "Discord". Obiettivo: tenere separati struttura, tramite la label in css di debug, e contenuto da inserire in un secondo momento.

js-array-carousel icon js-array-carousel

Dato un array contenente una lista di cinque immagini, creare un carosello.

js-biglietto-treno icon js-biglietto-treno

Scrivere un programma che chieda all’utente il numero km da percorrere, età passeggero. Sulla base di ciò calcolo il prezzo totale del biglietto di viaggio, secondo le seguenti regole: il prezzo €/km e con sconto per casi particolari, prezzo finale in forma umana.

js-biglietto-treno-form icon js-biglietto-treno-form

Programma di logica per richiesta utente di inserire il numero di chilometri da percorrere e numero età del passeggero per simulazione biglietto treno.

js-campominato-dom icon js-campominato-dom

About Consegna di progetto: riproduzione del gioco campominato con html, css, javascript. Prima fase: logica gioco.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.