My Portfolio Website

Welcome to my personal portfolio website! This project showcases my skills, experience, projects, and more. I built it using modern web technologies, with a focus on creating an engaging, aesthetically pleasing, and responsive experience for visitors.

• Live at: awaiskhanniazi.netlify.app
• GitHub Repository: my-portfolio-website

🌟 Overview

This portfolio website is a one-stop showcase of my skills, projects, honors, experience, and more. The site is designed to offer an interactive experience, allowing potential clients or employers to get a comprehensive view of my professional background and technical capabilities.

The website is highly responsive, offering an optimized user experience across all devices.

✨ Features

• Responsive Design: Works well on all devices, including desktops, tablets, and mobiles.
• Modern User Interface: Uses Next.js and Tailwind CSS for an elegant, consistent look and feel.
• Dynamic Sections:
  • Profile: Displays an overview of who I am and my professional focus.
  • Skills: Categorized skills (Frontend, Backend, Languages, Tools) with animations.
  • Projects: List of my key projects with GitHub and live links.
  • Honors: Certifications and awards, displayed with hover effects and animation.
  • Experience: Detailed professional experience, including company logos and links.
  • Contact Form: Visitors can contact me directly by filling out a form or via social media links.
  • CV Downloads: Easy access to download my CVs.
  • Footer: Developed with love and coffee ☕❤️

🚀 Technologies Used

• Frontend:

  • React.js
  • Next.js
  • Tailwind CSS

• Animations:

  • Framer Motion for animations
  • react-icons for icons

• Form Handling:

  • Formspree to handle contact form submissions.

• Deployment:

  • Netlify for live deployment

🔧 Installation & Setup

To run this project locally, follow these steps:

Prerequisites

Make sure you have the following installed:

• Node.js (v14 or higher)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/askhan963/my-portfolio-website.git
   cd my-portfolio-website

2. Install dependencies:

   npm install
   # or
   yarn install

3. Run the development server:

   npm run dev
   # or
   yarn dev

   Open http://localhost:3000 in your browser to see the site.

4. Build the project for production:

   npm run build
   # or
   yarn build

5. Start the production server:

   npm start
   # or
   yarn start

📁 Project Structure

• /components: Contains reusable UI components such as Navbar, Footer, Skills, etc.
• /pages: Contains all the pages of the website like index.js, projects.js, contact.js, etc.
• /public: Contains public assets like images and PDFs (including CVs and logos).
• /styles: Contains global CSS and other style-related files.

✉️ Contact

If you’d like to get in touch, feel free to send a message through the contact form on the website or connect with me on social media:

• LinkedIn
• Twitter
• GitHub

📜 License

This project is licensed under the MIT License. See the LICENSE file for more details.

❤️ Acknowledgments

• Icons: react-icons
• Animations: Framer Motion
• Deployment: Netlify

---

Developed with ❤️ and ☕ by Muhammad Awais Khan