https://github.com/affancoder/farhanportfolio
Portfolio Website & Design | Developed by MD Affan Asghar
https://github.com/affancoder/farhanportfolio
animation css gsap html javascript live-hosted-link
Last synced: 4 months ago
JSON representation
Portfolio Website & Design | Developed by MD Affan Asghar
- Host: GitHub
- URL: https://github.com/affancoder/farhanportfolio
- Owner: affancoder
- Created: 2024-10-13T11:22:17.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-17T05:32:58.000Z (about 1 year ago)
- Last Synced: 2025-01-28T15:41:19.288Z (about 1 year ago)
- Topics: animation, css, gsap, html, javascript, live-hosted-link
- Language: HTML
- Homepage: https://affancoder.github.io/farhanportfolio/
- Size: 1.5 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://affancoder.github.io/farhanportfolio/)**
## 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**:
```bash
git clone https://github.com/affancoder/farhanportfolio.git
```
2. **Navigate to the project directory**:
```bash
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: affanasgar8@gmail.com
- @mr_affan15