Skills

• HTML5
  
  
• CSS3
  
  
• Javascript
  
  
• Vue.js
  
  
• Tailwind CSS
  
  
• Adobe
  Photoshop
• Adobe
  Illustrator
• Adobe
  XD
• Visual Studio
  Code
• Elementor
  
  
• Responsive
  design
• UI/UX
  design
• REST
  APIs
• Version
  Control
• googling
  
  

Work and Projects

Ink To Pixels

Responsive web design for a game developer company's homepage - and for their first game's website.

Home | Game | Screenshot

Click to read more

About the company

Ink To Pixels is an independent game development company that needed a redesign of their WordPress website before launching their first commercial game, System Under Surveillance.

My contributions

I created a brand-new design for the company's homepage and their game's subpage.

I adjusted the design based on continuous feedback from the company.

I implemented the final, responsive web design using the company's tool of choice – Elementor. This will allow the Ink To Pixels team to effortlessly update the website's content and make adjustments to its design.

D'Ambrosio

Developed a visual identity for the company and optimised their SoMe presence.

Visual identity | Social Media

Click to read more

About the company

D'Ambrosio is a family business that imports wine from a unique volcanic area in Southern Italy. They offer experiences such as wine tasting in Denmark and authentic guided tours in Southern Italy.

My contributions

With an aim to achieve a consistent look and feel, I developed a visual identity including:

• refreshed logo
• brand colors
• typography

In order to optimise social media presence, I gave suggestions regarding:

• the company's SoMe page description
• profile picture and cover picture
• emoticons and hashtags to be used when creating content

For future use in the company, I created:

• "Visual identity guidelines" to ensure brand consistency
• templates for Power Point presentations
• templates for social media posts and stories

Furthermore, during our collaboration:

• I created SoMe content in form of text, graphics and photography for Facebook and Instagram.
• I assisted the company in developing and executing a successful SoMe marketing campaign for the company's first webinar with virtual wine tasting.

ClassicReads

A bookstore using serverless function and payment API for a secure payment.

Live site | GitHub

Click to read more

Main features and technologies

VUE.JS

• I used Vue CLI to create the SPA.
• The app has reusable Vue components (ProductCard.vue).

PAYMENT

• Back-end: serverless function via Netlify Functions.
• API: QuickPay API by QuickPay payment service provider.

The two of them work together as follows:

1. When the user presses "Pay now", a unique order id is created, which - together with the purchase data - gets sent in a request to the serverless function.
2. The function sends the order data together with the API key in an initial request to the payment API. The API returns a transaction ID.
3. The transaction ID is then sent by the serverless function in a subsequent request together with the total amount to pay.
4. Finally, a payment link is returned by the API to the front-end via the serverless function, and is used to display the secure payment window in an iframe.

AXIOS

• a promise-based http client.

ADD-TO-CART FUNCTIONALITY

FURTHER NOTES

I'm using a tabs-like behaviour to simulate navigation between the Main page view and the Cart view - whilst keeping the web app an SPA. This also ensures state persistence when "navigating" between views - without using Vuex or storing data in cookies.

RainCheck

Small SPA that displays real-time weather based on user location or on search input.

Live site | GitHub

Click to read more

Main technologies

VUE.JS

• I used Vue CLI to create the SPA.
• If you think it's overkill for an app this small, you're totally right. I simply wanted to practice using the Vue CLI.

REST API

The app uses two API services:

• a weather API by openweathermap to access current weather data for any searchable city,
• and ipdata's IP Geolocation API to detect the user's location. This data is then used to request and display local weather data on pageload ("mounted" lifecycle hook).

FETCH API

• Native API for Vue.js.
• I used it to access APIs instead of installing external libraries (such as Axios).

FURTHER NOTES

The app's background-styling changes depending on the time of the day. I created different gradients to represent light conditions in the morning, during the day, in evening and at night. The app applies these styles based on the local time on the user's device.

Contact

Shoot me a mail at .

Find me also on LinkedIn.