Skip to content

onaib-faisal/Personal_Website

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Personal Website Template

Welcome to the repository for a cutting-edge personal website template. This project serves as a modern, responsive, and interactive web portfolio template for anyone looking to showcase their experience, skills, and projects. Developed using React, Three.js, and modern web technologies, it aims to provide a seamless user experience with an immersive 3D interface across all devices.

Features

Dynamic User Interface

  • DynamicBackground.js: Presents a fluid, interactive particle system (representing data nodes) that reacts to mouse movement.
  • HolographicCard.js: Centralized 3D holographic card displaying user information. Reacts to user interaction, rotating and reflecting light dynamically.
  • DarkModeToggle.js: Easily toggle between light and dark modes, ensuring a comfortable browsing experience.

Main Components

  • Homepage.js: Serves as the main landing page, integrating the DynamicBackground and HolographicCard among other features.
  • AboutMe.js: Presents information about the user, complete with a Timeline.js for showcasing the user's journey.
  • TechStack.js: Animated icons representing various technologies the user is proficient in.
  • Projects.js: A showcase of user projects. ProjectModel.js represents each project as a 3D model on a virtual desk. ProjectDetail.js offers a deeper look into each project.
  • ContactForm.js: Allows visitors to send messages or inquiries directly from the website.

Navigation and Layout

  • Navigation.js: Minimalistic icons that expand upon hovering, aiding in navigation throughout the site.
  • Header.js and Footer.js: Structured top and bottom sections for consistent navigation and additional information.

Additional Utilities

  • DownloadResume.js: Provides visitors with a downloadable resume or CV.

3D Integration

With the help of Three.js, this template integrates 3D models and animations, especially in the ProjectModel.js component, providing an engaging experience for visitors.

Getting Started

Prerequisites

  • Node.js and npm installed.

Installation

  1. Clone this repository:
    git clone https://github.com/your_username/personal-website-template.git
  2. Navigate to the project directory
    cd personal-website-template
  3. Install the required dependencies:
    npm install
  4. Start the development server:
    npm start
  5. Open your browser and navigate to 'http://localhost:3000'. The website template should be running!

Using as a Template

  1. Fork or clone this repository.
  2. Follow the installation steps mentioned above.
  3. Modify the data in the source files to reflect your own information, skills, projects, etc.
  4. Expand upon the basic structure, adding interactive features, animations, or any other enhancements you desire.
  5. Deploy to your preferred hosting platform.

Contributing

Contributions are welcome! If you find a bug or have suggestions, feel free to open an issue or submit a pull request.

License

This project is open-source and available under the MIT License.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published