Jean Piron
A portfolio site intended to show creative work of all kinds: photos, paintings, writing...
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.
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.
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.
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.
