01

Soliman Al Halaby Creative Developer
0%12%27%42%69%81%100%

Portfolio 2021

Front-end developer
12/03/2022
Using
HTML
CSS
JS

My portfolio for the year 2021 was designed in html / css / js with Vite set up as a dev environment. It was my first personal project where I already had several challenges that I wanted to execute. I used GSAP to design the different animations.

Portfolio 2021 Hero Image

01 /

New portfolio, new idea

Challenge

Challenge

A radical change

My 2021 portfolio was an opportunity for me to take on several challenges and to push my limits. The first portfolio I made was several years ago only to discover React and not to showcase my front-end development skills. For this portfolio, it was different, I liked several feature ideas and I wanted to implement them.

First of all I wanted a portfolio in dark mode because I liked it and I had been thinking about it for a while. I also wanted my portfolio to be as easy to use as possible and to access the information and my projects as easily as possible. I also saw the horizontal scroll on different sites and wanted to implement it on this one, using GSAP, it also allowed me to make some effects.

Fullwith image
Project Image
Project Image

02 /

The horizontal scroll

Gsap

Gsap

A base that I wanted to put in place

One of the features I wanted to implement on my site was horizontal scrolling. Moreover, I wanted to learn how to use GSAP so what better way than to learn with a goal. I was able to go deeper into this subject, by animating the different sections with scroll. For those who have the eye, I also added a skew according to the velocity of the scroll on the sections to bring more dynamism.

Linking the horizontal and vertical scroll (on the project page) was also another challenge I wanted to tackle and that I managed to implement. The different animations of the cursor, the fade-in, fade-out was also designed with the help of GSAP. The about page was totally designed using mostly CSS animations and attribute data to link the content according to the hovered section in JS.

Fullwith image
Project Image
Project Image
Fullwith image
Project Image
Project Image
Fullwith image

More projects

Soliman Al Halaby©
All rights reserved

Designed by

Contact

Download
my resume

Arrow up
Learn more