I first designed the outlines of the website on 

, my all time favorite tool for designing a website―or anything, really.

Then came the time to choose what technology to build the website with. The easier and more traditional option would have been to go with yet another WordPress website, using a custom theme built from scratch, specifically for the needs of Maxence.

 CMS instead, as I really wanted to experiment with it. I integrated it with the popular and robust 

As a website would be boring without any animations, I used a combination of the 

This website essentially being a gallery of 

, it is paramount that they should be presented with maximum fidelity, while not sacrificing performance and bandwidth by using raw images.

This is why we're making use of Sanity’s great image builder tool, in conjunction with Next.js’ image component, in order to optimize images for every device, while maintaining high quality and fidelity.

Design and development of Maxence Fléty’s personal portfolio.

Working on a photograph’s website was a great experience. It enabled me to be creative in the design process, and try out new technologies I wouldn't have used otherwise.

It was great to tinker image delivery, and find the sweet-spot between speed, and image fidelity.

, as his pics are truly beautiful, and carry a lot of meaning.

Maxence Fléty

I was tasked with designing and developing Maxence’s website.

The goal was to design a simple website, that would reflect Maxence’s artistic approach of photography, as well as his core values.

This way, all the attention would go to his photographs, and nothing else.

The website would eventually need some kind of CMS to enable Maxence to easily manage its projects on his own.

 is an independent, creative and versatile photographer from France.

After graduating from the prestigious Parisian school “Louis-Lumière” with a master in photography, Maxence is now focusing on helping small and larges businesses alike with tailored solutions.

Maxence is passionate about wilderness and mountain sports, like cycling and skying ; activities that enable him to explore and capture the singular, beautiful, and breathtaking landscapes of his natal region : the 

After graduating, Maxence needed a website to showcase his creative works, as well as an online presence to cement is professional activity as an 

Before building the website, all the agency developers, including myself, gathered and discussed the different technologies to use, and how we would split the work load between each of us.

After deciding which component(s)/page(s) everyone had to build, we set up a Git repository to easily collaborate and manage code history.

After that, we each worked on our assigned chunk of the website and committing the changed regularly to the GitHub repo, so that other people could keep track of what had been completed, and what remained to be built.

I personally took care of the markup and styling of the landing page, as well as the error page.
I also took care of implementing the mouse follower and the page transition with 

Design and development of the Pikoom student agency's website.

I really enjoyed working on this website for multiple reasons. The first one being that it truly meant something to me to be able to design and eventually build a website that would represent our whole student agency.

In addition, this project allowed me to express and develop my creativity during the design process, and I had the freedom to experiment with different things including colors, gradients, layouts, etc.

Finally, I really liked to be able to use an interesting JavaScript library (

) to build cool page transition, as well as a custom mouse follower.

Pikoom

In this project, I basically had two tasks: design and build the website.

First, I designed a low fidelity version of what I imagined the website should look like, along with other designers.

Once our Figma prototypes were somewhat polished, we set up an agency meeting to vote for one of the designs to be used.

In the end, my design was selected by the majority of the members.

The next step was naturally to build the website.

This website was designed and built for the Pikoom Student Agency, as part of an academic year-long project.

This ”Student Agency“ was made out of 30 students with various and complimentary skills, from design, though communication to programming.

I was a member of this agency myself, along with 3 other developers that helped me built this 

As an agency, we were required to be present on the internet. The first step was to open social media accounts (Instagram, Twitter, LinkedIn, etc.).

But we also needed a website to present the agency: our values, our goals, our members as well as all the projects we had been working on throughout the year.

So, the very first step was obviously to define the structure of the database before anything else.

In order to do this, and since the point of this project was not to build a 1 to 1 clone of Instagram, I was told to build the database based on the pages found in the Figma mock-up files.

After a quick analysis, I was able to get a good picture of the different tables that I'd have to later create in Adonis JS to make it all work.

The next step was subsequently to create the database in the Adonis project using migrations.

Once the database built, I moved on to define the 

, a way to tell Adonis JS what will be stored in the database tables, as well as the relationship between different fields, to greatly simplify the data workflow later on.

Then, I started to build the controllers for each table of the database, for each of the HTTP GET, POST, PUT and DELETE methods.

Once this fairly tedious step completed, I moved on to set up the routes of the API that would later be used by the front-end part of the app to get the required data. As I was linking the controllers to the routes, I also tested them one by one with 

Eventually, after long hours of tedious but somewhat comprehensive manual testing, I managed to end up with a back-end that was working as I wanted it to, and decided to call it a day.

It was now time to hook the existing React front-end to the freshly created Adonis JS API, using the 

 for routing and authentication redirection.

A "clone" of a very popular image/video sharing platform built with 

I loved to work on this project, just because it was my first real back-end centered project (which happened to also be using TypeScript!).

I learnt a lot about databases, API design and TypeScript along the way, and, even though I found it pretty hard to find the information I was looking for on the Adonis JS documentation, it also forced me to dig, sometimes very deep, into a framework's documentation to find what I was looking for, and learnt a lot of cool things while I was doing so.

Corpstagram

The goal was nothing less than to plan and build the back-end of a popular image and video sharing platform like Instagram, and hook it up to a React front-end.

Sounds pretty straightforward and fairly easy, right?

Well, that's what I thought when I first read the brief of this project.

Turns out that such an app is actually pretty complex, as one have to think about combining multiple different pieces together to get the intended result.

I got to work on this project during my development training program while working at the 

.
The digital corps is an on-campus digital agency composed of many talented student of Ball State University, who each specialize in one of the multiple fields of the digital life, including graphic design, communication, audiovisuals, development or UI/UX design.

When a student gets hired at the Corps, they are given a training program that enables them to learn all the skills they need to get started working on projects, which ultimately leads to real-world experience on industry technologies, techniques and skills that they will have to apply later in their professional career. 

As a member of the development team, I followed a training program which covered various aspects of modern web development, with an emphasis on 

, and JavaScript/TypeScript oriented frameworks, like 

This project was the very last one of all the training program, and combined multiple aspects of web development (React, APIs, database design, authentication, data handling, ...)  into one single app.

Maxence Fléty

Who?

Why?

What?

How?

Key Takeaways

Project Gallery