000 / 100

Jean Piron

A portfolio site intended to show creative work of all kinds: photos, paintings, writing...

jean

Type

Website

My Roles

Designer & Developer

Year

2023

Context

Sereno Creatives project

Duration

1 months part time & ongoing

Stack

vue

nuxt

three

scss

Brief

Design and develop a unique portfolio to highlight the work of Jean Piron, a creative artist spanning several mediums.

Objectives

1

Make the site as inexpensive as possible.

2

Make it manageable without a CMS.

3

Highlight Jean's creative work.

4

Allow Jean to administer it alone.

Design approach

Jean wanted to try his hand at web design in more detail. It's not his job but he was able to do it. He therefore wanted to supervise the layouts, content, and overall UX flow of the site. So I had the role of supervisor and designer on the UI and graphics part where I came to give him a hand with his ideas. I brought the technical part to the models by supporting certain ideas such as scrollytelling or even animated backgrounds.

Jeanpiron

Developement approach

I chose to go with Nuxt 3 and the content module, designed to administer a website with just markdown files. It is easy to use and can be connected to Nuxt Studio, a free online editor for personal use. I first started by creating the Design System from scratch with a declarative approach. The idea was to create a class like 'txt_subtitle', 'margin_top_4' etc. I wanted to let Jean freely customize his website.

Jeanpiron

Animated background - WebGL

I used Three.js to give a modern touch to the background. This was mentioned during the design phase but was not tested so I experimented gradually with multiples shapes, colors... I wanted the artistic direction to have another dimension but I didn't want to just have 3D for the sake of having 3D.

Jean Piron

Animations & Smoothing

I used Gsap with Scroll, SplitType and Lenis SmoothScroll. I wanted to propose a clean and smooth experience in addition to great content wrote by Jean.

Jean Piron
Jean Piron