yannisabel.com

multiple screens of different sizes showing yannisabel.com website
  • Date icon
    Date: Sep 07, 2015
  • Question mark icon
    Description: Development of a portfolio website
  • Label icon
    Type: Webdesign, Frontend Development
  • Tools icon
    Tools: Visual Studio Code, React, Gatsby, Sass, Webpack

This is the website you are currently on and is developed with React.

Look backward

Since I work I have a portfolio. When I was Graphic Designer I had an online portfolio and a book with my principle work printed on glossy paper.
When I started working on the web area it was obvious for me to create my own portfolio. It was my first website online I did for my first web training.
I really like to take screenshots of my old projects. When I look backward I realize what I have accomplished. It’s very important for me to do that because it helps me to be proud of my work.

Here a little preview of the evolution of my portfolio through the years

graphyzart.fr was my first website online. It was in 2013
graphyzart.fr became a blog on visual art and I created a new one for my portfolio in 2015 on yannisabel.com

Note: graphyzart.fr doesn’t exist anymore. After several years I took the decision to shut down it to have more time for my personal hobbies (music, drawing, writing…).

The thing that makes me laugh is my color scheme. Since I started working on my personal website I always keep my blue and orange colors. Currently I know the hexadecimal code by heart.
I also switched from dark theme to light theme and simplified the UI. The first one was in between skeuomorphism and flat design and the second totally flat (even the shadows).
Both used only HTML, CSS and jQuery.

The current website

First of all I asked myself why I wanted a portfolio. What will be the purpose of it?

I just wanted to share my experiences, my work and introduce myself. As simply as that.

Orchestra Design System

Because it’s my personal website I created a methodology to create my Design System with more flexibility. I’m a musician since I was a kid so it was natural for me to think about a music correlation. There is a certain hierarchy in music that can be similar to an interface.

Inspired by the Atomic Design methodology, I started working on Orchestra a brand new Design System that bring all I needed in my interface.
The first thing was to divide my components in a new hierarchy :

  • instruments: Gathered all components properties tools needed to create the interface
  • symbols: Gathered all the smallest components that cannot be splitted in multiple parts without loosing their functionnality
  • scores: Gathered some symbols to create a more complex component
  • masterpieces: This is the result of all elements working together (similar to the final pages)

In music the instruments are the tools we need to play music. But an instrument had no purpose if it doesn’t play notes with rules like rythm, tempo, harmony and so on. In another part those rules means nothing without instruments. That’s why in Orchestra instruments are useless without symbols, and all symbols are played by instruments.
The scores are all symbols together creating the melody. Without symbols all scores would be unreadable.
All scores create the masterpiece that the orchestra can play. There are different type of orchestra depending on the masterpiece itself. The type and the number of musicians will adapt to the masterpiece. For instance, sometimes there is a choir section and sometimes there is not. Same for each section of the orchestra.

This kind of adaptation and modularity was exactly what I wanted for the creation of my Design System so I call it Orchestra.

I already used Atomic Design on some projects and sometimes it feels like it’s not the right way for any project.

In his book about the Atomic Design Brad Frost says:

“Atomic design” as a buzzword encapsulates the concepts of modular design and development, which becomes a useful shorthand for convincing stakeholders and talking with colleagues. But atomic design is not rigid dogma. Ultimately, whatever taxonomy you choose to work with should help you and your organization communicate more effectively in order to craft an amazing UI design system.

— Brad Frost, Atomic Design, chapter 2 Atomic Design Methodology

Exactly what I always thought of modular design, thanks Brad to be such an inspiration!

My design was already there I just needed to put name on things, and even if I work alone on my own website, that showed me some mistakes on my interface. I never used the same spaces everywhere, I was not using elements the right way and so on.

I recreate some of my components to make it more reusable with variations.

Some of my symbols can take multiple modifiers to adapt themselves to their environment or their purpose.
The modifiers are: the model, the state and the color

This part was largely inspired by Emma Bostian’s work on a React button.

Adapted to a component class here is what it looks like:

jsx
1// Naming convention
2// ${name-of-the-component}-${first-letter-of-the-type-of-modifier}--${name-of-the-modifier}
3
4// example of classes generated inside the button component with the modifier passed as props
5getButtonClasses() {
6 const { model, state, color } = this.props
7 const buttonClasses = [
8 'button', // general class for the element
9 `button-m--${model}`, // class with model modifier
10 `button-s--${state}`, // class with state modifier
11 `button-c--${color}`, // class with color modifier
12 ]
13
14 return buttonClasses.join(' ')
15}
16
17// In an external js file I have a list of modifiers that I can use on my component
18export const ButtonModels = Object.freeze({
19 default: 'default',
20 round: 'round',
21})
22
23export const ButtonStates = Object.freeze({
24 base: 'base',
25 raised: 'raised',
26 less: 'less',
27 ghost: 'ghost',
28})
29
30export const ButtonColors = Object.freeze({
31 blue: 'blue',
32 orange: 'orange',
33 white: 'white',
34 none: 'none',
35})

Thanks to React, each component can be exported anywhere in a completely independent way. A great way to make my components reusable.

I will probably wrote something more complete on Orchestra Design System soon.

Start creating

After naming things I created wireframes for all my pages on Figma following my own guidelines.

On the design side, big fan of the Material Design I was strongly inspired by it, but because it’s my own design and my own website I didn’t follow their guidelines.

For example the choice to raise a button on click is not logical for me. So I reversed the impact of the click or touch (for touch devices). My raised buttons seems to be pushed when pressed and go back when released.
More natural and it creates a better interaction with the user.

There is an example:

Click on each button to see the sensitivity of button-s--raised

Lately I decided to let my portfolio entirely in English, because it’s way more maintainable and I always work in english. I also discovered that almost all people coming on my website came from different countries around the world and just a few from France.
I often communicate with developers, designers, speakers and so on, who came from all over the world and so I ended up finding it obvious to leave the french.

Technical part

yannisabel.com was written with React, a javascript library that helps to create interfaces with ease with a logic of components that can be updated independantly. In the old way it was difficult to update certain element at a certain moment and sometimes it was not really interactive because we had to refresh a page to update a component.

With all the new javascript frameworks and libraries (it’s been a while now) it’s common now to have a lot of interaction and a lot of updated components without any refresh. Pretty cool and it comes with increased speed. The only problem is the fact that all the html is generated by javascript. So the accessibility and the referencing are put in the trash.
Fortunately, some tools was created to develop applications without loosing anything. For React one of the most famous is Gatsby. So I use it for my website to be able to generate all my pages in plain html while keeping all the advantages of a great javascript library.

One of the things that I like with Gatsby is the easy way to work with Markdown files. This content was written in an .md file with MDX capabilities (I can import my react components in the file if I want. That’s how I imported my raised buttons example).

Gatsby works with GraphQL and with all the features of Gatsby we can optimize all type of assets we want for each page.
For example we can write a query that get a specific image with a max-width of 700px and cropped in the center and get all images generated for responsive purpose (images generally used in the srcset attribute).

Here the query for the example above:

jsx
1query MyQuery {
2 file(relativePath: {eq: "name-of-the-image.jpg"}) {
3 relativePath
4 childImageSharp {
5 fluid(maxWidth: 700, cropFocus: CENTER) {
6 src
7 srcSet
8 }
9 }
10 }
11}

So Gatsby is also a good tool to automate many things and it helps to optimize resources. It’s my first time with GraphQL but not my last.

Conclusion

Now my portfolio seems to be related to me personaly and I think it’s the best way to think about a product. It has to be related to its purpose.
It’s also pretty optimised for the web, it’s fast and beautiful.

My plan for this website is to add a blog section where I will post things about Design Systems and Frontend development.