Samer Arkab Personal Website

Visit my personal website!

This website is a personal project developed to showcase my work and skills as a Software Engineer. The website is built with HTML, CSS, and JavaScript. It uses Bootstrap for responsive design and visual components.

Table of Contents

1. Installation
2. Usage
3. Features
4. Support

Installation

The website doesn't need a specific installation procedure as it's a simple static site. You just need to clone this repository and open the index.html file in a web browser.

1. Clone the repository:

   git clone https://github.com/SamerArkab/personal-website.git
   

2. Navigate to the repository folder:

   cd personal-website
   

3. Open the index.html file in your preferred web browser.

Usage

The website is divided into several sections, each dedicated to a specific purpose. You can navigate between the different sections using the navigation bar at the top.

• Introduction: A brief overview about me and my professional background.
• Projects: This section showcases some of my previous projects with brief descriptions and links to the respective GitHub repositories for more detailed information.
• Contact Information: This section contains my contact information, including my email and LinkedIn profile, and offers the ability to download my CV.

Features

• Scroll-Spy: The website uses Bootstrap's Scrollspy feature to highlight the navigation links based on the scroll position.
• Animation: The website features various animations that are triggered based on the user's interaction or scroll position. These animations are implemented using CSS and JavaScript.
• Responsive Design: The website is designed to be responsive and adapts its layout based on the viewport size.

The JavaScript code for this website is organized as follows:

• Global variables are declared at the beginning for elements that are interacted with in the script.
• Event listeners are added to various elements to trigger specific behaviors based on user interactions or window events.
• Clicking on the question mark triggers a rotation animation for a mushroom image and changes its position. Mouseover and mouseleave events on the question mark also trigger different visual effects.
• A scroll event listener is used to dynamically update the animation properties of the Mario image and other elements based on the scroll position.
• The website features a 'back-to-top' button that appears when the user scrolls down. Clicking on it brings the user back to the top of the page.