Portfolio Website

This is a responsive portfolio website built for Farhan Jawaid using HTML, CSS, JavaScript, and GSAP (GreenSock Animation Platform). The website showcases the portfolio, skills, experience, and projects of Farhan Jawaid. It is designed to be visually appealing, fully responsive, and interactive, providing a seamless user experience across different devices.

Live Demo

You can view the live website here: Live Demo Link

Features

• Responsive Design: The website adapts to different screen sizes, ensuring a smooth experience on desktops, tablets, and mobile devices.
• Dynamic Animations: GSAP is used for smooth transitions and animations, enhancing the user experience.
• Interactive Sections: Different sections like "About Me", "Skills", "Projects", and "Contact" are available to showcase [Friend's Name]'s work and background.
• Contact Form: A functional contact form is integrated for easy communication.
• Smooth Scroll: Smooth scrolling is implemented to improve navigation within the page.

Technologies Used

• HTML5: For structuring the web pages.
• CSS3: For styling, layout, and making the website responsive.
• JavaScript: For adding interactivity and animations.
• GSAP: For advanced animations and transitions.
• Live Hosting: The website is hosted live for public access. (Platform used: [Netlify, GitHub Pages, etc.])

Setup Instructions

To get a local copy up and running, follow these steps:

1. Clone the repository:

   git clone https://github.com/affancoder/farhanportfolio.git

2. Navigate to the project directory:

   cd portfolio-website

3. Open the index.html file: You can open it directly in your web browser.

4. Modify for personalization (Optional): If you want to make changes, update the following files:

   • index.html: Modify the text content and structure.
   • style.css: Customize the styles and colors.
   • main.js: Edit or add animations and interactions.

5. Run the project: You can open the index.html file in any browser to view the website locally.

GSAP Animations

GSAP is used to create engaging animations throughout the site. Some key animations include:

• Hero Section Animation: The elements of the hero section (like text, images) fade in with smooth transitions.
• Scroll Animations: Sections like "Projects", "About", and "Skills" animate into view as you scroll down.
• Button Hover Effects: Interactive buttons with subtle hover animations.

DEVELOPED BY MD AFFAN ASGHAR

• Computer Science Engineer
• Email: [email protected]
• @mr_affan15