Live demo

About

An eye-catching and aesthetically pleasing website, meticulously crafted for my portfolio, that showcases the experience I've gained from integrating HTML, Tailwind CSS, and JavaScript.

Feel free to explore the repository at your leisure to see the project in action and take it as testimony of my skills in producing premium digital experiences.

Stack used

1. HTML
2. Tailwind CSS
3. Javascript

Screenshots

Mobile	Desktop

Highlights

1. Fully responsive design
2. Loading animation
3. Smooth page transitions
4. Custom video player (About page)
5. Custom cursor
6. Horizontal scrolling (Desktop only)
7. Modular code (ES6 modules)

Fully responsive design

Tailwind CSS played a pivotal role in implementing responsive design as it provies developers with a straightforward approach to responsiveness ensuring that web designs adapts seamlessly to various screen sizes.

Adding to that, I've integrated responsive units (vw and vh) to make all elements contract or expand proportionally to the viewport width or height with minimal code.

Loading animation

For this feature, I made use of the browser's local storage to get the exact moment the user visits the website for the first time. This allowed to run a loading animation whenever the user visits a page after a 10 minutes session and run smooth page transitions as the user changes routes within that time interval. You can examine the relevant code snippet below for a closer look at the implementation:

const loading_params = () => {
  const user = localStorage.getItem("user");
  if (!user) {
    localStorage.setItem("user", JSON.stringify({ date: new Date() }));
    loadingAnimation();
    return true;
  }

  if (user) {
    const visit_time = new Date(JSON.parse(localStorage.getItem("user")).date);
    const now = new Date();
    const time_diff = new Date(now - visit_time);
    if (time_diff.getMinutes() > 9) {
      // Resetting the visit time
      localStorage.setItem("user", JSON.stringify({ date: now }));

      loadingAnimation();
      return true;
    }
  }
};

window.addEventListener("load", loading_params);

Smooth page transitions

As explained earlier, if a user changes routes within the 10 minutes interval, a clip-path animation will be triggered to smooth transition from one page to another.

// ...Loading animation code

if (time_diff.getMinutes() < 10) {
  pageTransition();
  return false;
}

Custom cursor

A circle that follows the mouse movements using the mousemove event. It goes something like this:

const cursor = document.getElementById("cursor");
document.addEventListener("mousemove", cursormove);

function cursorMove(e) {
  const { width, height } = cursor.getBoundingClientRect();
  cursor.style.left = e.clientX - width / 2;
  cursor.style.top = e.clientY - height / 2;
}

// I used gsap to achieve the same effect

Check the cursor.js file for an in-depth examination.

Custom video player

A video player encompassing most of modern functionalities such as:

1. Fast forward/rewind
2. Full screen mode
3. Captions
4. Volume slider
5. Timeline slider
6. Keyboard shortcuts
7. Playback speed
8. Picture in picture mode
9. A touch screen version

Check the video-controls.js file for a close examination.

NB: I did not include video quality controls as they suggest the need for streaming functionalities and a back-end. which falls outside the scope of this project.

Horizontal scrolling

I made this effect using ScrollTrigger, a gsap plugin for scroll based animations. ScrollTrigger links the transform translate property to the mouse wheel and allows elements to translate to the left as I scroll down the page and vice versa.

Modular code

import "./svg-animations.js";
import "../common/cursor.js";
import "../common/phonenav.js";
import "../common/header.js";

import { loadingAnimation } from "../common/loading.js";
import { pageTransition } from "../common/page_transition.js";

In order to make my code as clean as possible, I divided my codebase into multiple files using ES6 modules.

Notes

1. Currently, I've only included three pages: Home, about and contact. The main purpose of this project is to showcase my programming skills highlighted by the features I added to these pages and I see no need for adding more content as that would be redundant and uninteresting for the user.

2. Page transitions may not work properly since I had to make do with vanilla js and some third party library (barba.js) to achieve that effect. Therefore, smoothly changing routes in javascript without resorting to dom manipulation resulted in a sometimes unstable animation. (Especially on mobile devices).
   NextJs or any other framework supporting SSG would be better suited for this task.

3. If you want want to experiment with the code, clone the main branch. The master branch is full of bugs.

4. I did not design this website. I drew inspiration from another site I found while browsing the internet.

Contact me

If you have any suggestions or questions, you can email me at the address a.elbazzazi.outlook.com or you can use the contact form on my website.

Best regards!