Portfolio Website

Welcome to my portfolio website! This ReactJS-based application showcases my skills, projects, and information about me.

Table of Contents

• Portfolio Website
  • Table of Contents
  • Introduction
  • App Level Functionalities
  • Detail Page Explanation
    • Home Page
    • About Me Page
    • Projects Page
    • Resume Page
    • Contact Page
  • How to Run Locally
  • Contributing
  • Roadmap
  • Credits
  • License

Introduction

This portfolio website is built using ReactJS, featuring a clean and responsive design. It includes several key features to enhance user experience, such as a dynamic light/dark theme, a unique loader, and seamless navigation through various sections.

App Level Functionalities

• Light/Dark Theme:

  • The application supports a dynamic light/dark theme.
  • The default theme is based on the user's system theme and persists across reloads.
  • Users can manually switch between light and dark themes, overriding the system theme.

• Loader:

  • A custom-designed loader provides a visually appealing experience during page loading.

• Navigation:

  • The navigation bar facilitates easy access to different sections: Home, About Me, Projects, and Contact.
  • A footer includes links to various profiles: Github, Gitlab, LinkedIn, Leetcode, YouTube, and a dedicated Resume page.

Detail Page Explanation

Home Page

• Displays a personalized greeting, name, and roles with a typewriter effect.
• Includes an image of the system setup, a plant, and a coffee, enhancing the user's connection to the developer.

About Me Page

• Three concise paragraphs introducing myself.
• A section detailing my tech stack, work experience, education, and completed courses.

Projects Page

• Lists projects with images and overlays that provide project details on hover.
• Clicking on a project navigates to a detailed project page with project title, description, GIF, technical insights, live link, credentials, and Github repo link.

Resume Page

• A brief description of myself with links to the contact page and options to view or download my resume.
• Includes an image of my resume.

Contact Page

• A one-liner allowing users to directly email me.
• A form for users to provide their name, email, and a message.
  • Utilizes a third-party service to validate email addresses.
  • Sends an email to the developer upon successful submission, and simultaneously, the user will receive an autogenerated email.
  • Provides appropriate notifications for success, invalid email, or service unavailability.

How to Run Locally

1. Clone the repository: git clone https://github.com/Jiavuddin/sj-portfolio.git
2. Navigate to the project directory: cd sj-portfolio
3. Install dependencies: npm install
4. Start the development server: npm start
5. Open your browser and visit http://localhost:3000 to view the application.

Contributing

If you want to contribute to this project, follow these steps:

1. Fork the repository.
2. Create a new branch for your feature: git checkout -b feature-name
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin feature-name
5. Submit a pull request.

Roadmap

As the portfolio evolves, here are some potential future enhancements:

• Open Source Contributions:

  • Explore opportunities for contributing to open-source projects.
  • Showcase contributions and involvement in the wider developer community.

• Freelance Work:

  • Consider taking on freelance projects to diversify the portfolio.
  • Highlight freelance work and collaborations with clients.

These additions aim to provide a broader perspective on my skills and experiences, reflecting a commitment to continuous learning and engagement with the wider tech community.

Credits

• The website design was inspired by CodeWonders, with a unique implementation developed for this project.

License

This project is licensed under the MIT License.