Newest version of My CV (11)

After my Academic high school studies and the surprised that my website is being in the top searchs! So, I should have to update my cv to be more efficient And I had a lot of ideas to implement. So far my website - CV - has gone through three radical changes:

• React Stage (Unfortunately, there is no source to display this version. It can be later)
• First Next Stage
• Second Next Stage 1.0 (Current version)

What's new?

From the First Next Stage to the Current version there is a multiple things I have done:

• A smooth slider. Really it was very difficult, Because I tried to make a slider I have seen in another website. I have put all my sections in the slider except the Portfolio in a separate page
  • It was difficult to adjust the full height of the Slider Container. But I did
  • The slider very smooth in use due to the auto-focus of the container I have made
  • You can use the wheel of the mouse or the touch screen swipes

Due to the slider that I wanted to do the screen being very small to display each section content So:

• I decided to do a 3D double-face card to display a two face each face has a data. It's only two but it's enough for my case
  • There is a smooth animation with swipes that has done.

After reaching the end of the section of the slider the body has scrolled down to let you see my projects!

• A nice marquee to display my projects is the best idea to get intro to get into my projects. (Go down to see more 👇)
• You can click on the portfolio title to pick up you to the portfolio page or click on any project in the marquee and it also pick up you to the portfolio page with focus on the project you clicked and scroll into it
• you can edit the project if you were Ram "me" by click on edit project on the top of the project description

Challenges

There are several challenges that was a very helpful for me

Home Slider

The home sider was a very unique feature. The slider was too much to interactivity, which made me think of a solution to the problem, which is that I want to reduce the number of client components.
So I used wrapper and children of the wrapper.
SliderWrapper: is the wrapper of the sections that wrapped the slider and Init the slider sections SliderItem is the Wrapper of each section
Both SliderWrapper and SliderItem are the Client components that handle all the interactivity and logic of the slider

How does the slider works?

Anywhere I want I put SliderWrapper and Pass with the needed props. Mmmm the needed props sure contain activeItem that indicates the current slider item that may push me to put the state of the slider in the top level I mentioned before "Anywhere" But I get the solution: I put the state in SliderWrapper and used cloneElement from React to pass the activeElement prop

The Projects Marquee

In the projects marquee I was facing two problems

• The Speed of the marquee
• Smoothness of the animation

Handling Speed Marquee

Through calculations, I came up with a *mathematical equation that guarantees smoothness and stability of the marquee speed with the addition or deletion of dozens of projects. Let's clarify

I made a manual experience and I got that every 300 pixels take 6 seconds Therefore, Speed of the animation = 348px/6sec = 58 px/sec Therefore, Speed = Length/Time In our case the length would be the width of the container of the marquee and the time is the animation duration Now we can get the duration of the animation from 58=Width/Time, T = Width/58 Now The equation has the unknown Width. The dilemma now is to reduce or even lack of JavaScript client code. So I decided to calculate the width manually to get the width of the marquee container before reaching the client browser

• There is a gap between each card with 16 pixels gap
• Each card is 100 pixels
• There is no margins for the container

By this information I could calculate the marquee container even if it isn't rendered. By adding the gaps and the number of cards we get the final width equation: Width = 100 * cardsNo. + (16 * cardsNo) -1 We came up with all necessary things to solve Speed problem and fix a speed of 58px/sec But we still have one problem

Smoothness of the animation

Basically, The Smoothness of the animation is the main target of the animation. If the animation isn't smooth so no need for animation The animation seemed to be crash after all the projects end So we solve this problem by start the all animation from the first of the screen

The MD for the previous Version 👇👇👇

---

Updated version of My CV (10) 🙏

This is the version number 10 of my CV, since ten is a special number So I decided to convert my whole website to Next js 13.4 After officially declaring it be stable

Features

There are many features come with the latest version of Next.js 13.4 🔥 I built a dashboard to control my CV, the website includes:

• Message system (Send and receive)
• Database for:
  • My Projects
  • My PDF CV to download
  • Clients number
  • Messages recieve (On dashboard)
  • Message send (On Contact page)
• Authorization (For my dashboard)

IMAGINE all these stuff without even a single API route! Only Server Actions

No uses of built-in Image component because I hate it 😠

Server packages

• Firebase Admin SDK
• bcrypt
• jsonwebtoken

Client packages

• framer-motion
• react-avatar
• react-icons
• react-toastify
• swiper
• typewriter-effect
• use-detect-keyboard-open