Case Examine: Anatole Touvron’s Portfolio

Case Study: Anatole Touvron’s Portfolio

From our sponsor: Attempt Mailchimp immediately.

Like many builders, I’ve determined to redo my portfolio in the summertime of 2021. I wished to do every little thing from scratch, together with the design and growth, as a result of I preferred the concept of:

  • doing the entire venture alone
  • engaged on one thing totally different than coding
  • being 100% accountable for the web site
  • being free to do no matter I need

I do know that I wished to do one thing easy however environment friendly. I’ve tried many occasions to do one other portfolio however I’ve all the time felt caught in some unspecified time in the future and wished to wipe every little thing clear by remaking the design or the whole growth. I talked to many builders about this and I feel that everyone knows this sense of getting bored with a venture due to how lengthy it’s taking to complete. For the primary time, I’ve managed to by no means get this sense just by designing this complete venture in a single afternoon and creating it in two weeks.

With out going additional, I need to level out that previous to that I’ve studied @lhbizarro’s course on create an immersive web site from scratch and I’d not have been capable of create my portfolio this quick with out. It’s a true wealth of data that I now use frequently.

Going quick

Top-of-the-line suggestions that I can provide to any developer so as to not get bored with doing their portfolio is to go as quick as potential. If you recognize that you just get drained simply with a venture, I extremely recommend doing it when you will have the time after which rush it like loopy. This goes for the coding and for the design half.

Get impressed by web sites that you just like, discover colors that match your vibe, fonts that you just like, use your favorite design software and don’t overthink it.

Issues can all the time get higher however if you happen to don’t persist with what you’re doing you’ll by no means be capable to end it.

I’m actually proud and comfortable about my portfolio however I do know that it isn’t that inventive and that loopy in comparison with stuff you could see on-line. I’ve set the bar at a stage that I knew I might attain and I feel that it is a great way of being certain that you just’ll have a brand new web site that can make you progress and be ok with your self.

Textual content animations

For the totally different textual content animations I’ve selected to do one thing that I’ve been doing a very long time, which is animating traces for paragraphs and letters or phrases for titles with the assistance of the Intersection Observer API.

Utilizing it’s the best and optimum solution to do such animations because it solely triggers as soon as in your browser and means that you can have many spans translating with out making your consumer’s machine launch like a rocket.

You need to know that, the extra components there are to animate, the tougher it will likely be to have a clean expertise on each machine, which is why I used the least quantity of spans to do my animations.

To separate my textual content I all the time use GSAP’s SplitText as a result of it spoon-feeds you the least enjoyable a part of the work. It’s very easy to make use of and by no means disappoints.

How you can animate

There’s a number of methods of animating your divs or spans and I’ve determined to point out you two methods of doing it:

  • totally with JavaScript
  • CSS and JavaScript-based

Controlling an animation totally with JavaScript means that you can have code that’s simpler to learn and perceive as a result of every little thing shall be in the identical file. But it surely might a bit much less optimum since you’ll be utilizing JavaScript animation libraries.

Open the next instance to see the code:

With CSS your code can get a bit out of hand if you’re not organised. There’s much more lessons to handle. It’s as much as you what you like to make use of however I really feel prefer it’s essential to speak about each choices as a result of every can have their benefits and downsides relying in your wants.

The subsequent instance reveals do it with CSS + JS (open the Codesandbox):

Infinite slider

I’d like to point out you the HTML and CSS a part of the infinite slider on my portfolio. In case you’d like to grasp the WebGL half, I can advocate the next tutorial: Creating an Infinite Round Gallery utilizing WebGL with OGL and GLSL Shaders

The primary concept of an infinite slider is to duplicate the precise content material in an effort to by no means see the top of it.

You may see the instance right here (open the Codesandbox for a greater scroll expertise):

Principally, you wrap every little thing in a giant division that incorporates the doubled content material and once you’ve translated the equal of fifty% of the massive wrapper, you place every little thing again to its preliminary place. It’s extra like an phantasm and it’ll make extra sense once you have a look at this schematic drawing:

At this very second the massive wrapper snaps again to its preliminary place to imitate the impact of an infinite slider.

WebGL

Though I received’t clarify the WebGL half as a result of Luis already explains it in his tutorial, I do need to discuss in regards to the post-processing half with OGL as a result of I really like this course of and it gives a really highly effective manner of including interactions to your web site.

To do the post-processing, all you want is the next:

this.put up = new Put up(this.gl);
this.go = this.put up.addPass(
  fragment,
  uniforms: 
    uResolution: 
      worth: new Vec2(1, window.innerHeight / window.innerWidth)
    ,
    uMouse: 
      worth: new Vec2()
    ,
    uVelo: 
      worth: 0
    ,
    uAmount: 
      worth: 0
    
  
);

We go the mouse place, velocity and the time to the uniform. It’ll enable us to create a grain impact, and an RGB distortion based mostly on the mouse place. Yow will discover many shaders like this and I discover it actually cool to have it. And it’s not that tough to implement.

float circle(vec2 uv, vec2 disc_center, float disc_radius, float border_size) 
  uv -= disc_center;
  uv*= uResolution;
  float dist = sqrt(dot(uv, uv));
  return smoothstep(disc_radius+border_size, disc_radius-border_size, dist);


float random( vec2 p )

  vec2 K1 = vec2(
    23.14069263277926,
    2.665144142690225
  );
  return fract( cos( dot(p,K1) ) * 12345.6789 );


void principal() 
  vec2 newUV = vUv;

  float c = circle(newUV, uMouse, 0.0, 0.6);

  float r = texture2D(tMap, newUV.xy += c * (uVelo * .9)).x;
	float g = texture2D(tMap, newUV.xy += c * (uVelo * .925)).y;
	float b = texture2D(tMap, newUV.xy += c * (uVelo * .95)).z;

  vec4 newColor = vec4(r, g, b, 1.);

  newUV.y *= random(vec2(newUV.y, uAmount));
  newColor.rgb += random(newUV)* 0.10;

  gl_FragColor = newColor;

Yow will discover the entire implementation right here:

Conclusion

I hoped that you just preferred this case research and discovered just a few suggestions and methods! In case you have any questions you’ll be able to hit me up @anatoletouvron 🙂



Total
0
Shares
Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts