My portfolio website with React

Check live: https://dev-is.me

Table of Contents

• Tech
• What have I learned?

Tech

• React
  • Hooks
  • Redux
  • Router
• Prop-types
• Styled Components
• React Spring
• Three.js @React-three-fiber
• Formik
• Openpgp
• Google Recaptcha v2
• Google Analytics
• Cloudflare
• Eslint
• Prettier

What I have learned?

My component for properly sizing images

Example of use my image component: example

Just set width in % and meta.json and watch the magic!

• image has a correct placeholder - no content reflow
• after mount, correct image size was downloaded
• support for legacy browsers - alt format
• Image component

How lock scroll, e.q. on mobile menu

It's simple. Checkout: MobileMenu

Create a standardized theme

My theme

How correctly set css breakpoints - great article

Optimal way to load fonts

1. Preconnect to the font file origin.

2. Preload the font stylesheet asynchronously with low priority.

3. Asynchronously load the font stylesheet and font file after the content has been rendered with JavaScript.

   Checkout: index.html

Optimizing Techniques

1. Prevent rerender - gain performance with React.memo().
2. Lazy loading - serve once needed avoiding wait time to see content.
3. Reduce Media size.
4. Install modules instead of global imports - reduce bundle size.
5. Alias exports for only used modules. three-exports

Creating backend for contact form

I created the backend using AWS, then tried Google Lambda.

That's not for me as I can't sleep without a ddos ​​cost protection switch.

For now I am using the EmajlJS service.

Manifest - logo / favicon isn't obvious

Useful tools:

realfavicongenerator

maskable.app

• Mobile First is great approach
• configure eslint + prettier
• lighthouse is a great tool - i fixed all the problems and learn a lot