ArmanKhanTech / Portfolio

My 3D personal portfolio website.

Portfolio

My 3D personal portfolio website.
Explore the docs »

Visit · Report a Bug · Request new Feature

Table of Contents

1. About the Project
   • Built with
2. Getting Started
   • Prerequisites
   • Setup
   • Customization
3. Roadmap
4. Contributing
5. License
6. Contact
7. Acknowledgements

About the Project

A 3D personal portfolio website is an immersive and interactive online exhibition of your skills and accomplishments. It goes beyond the static text and images of traditional portfolios by utilizing the power of 3D graphics and animation to wow viewers and leave a lasting impression.

Built with

• 
• 
• 

Getting Started

Follow the below instructions to get started.

Prerequisites

1. NPM v.10.5.0

2. Email.js Account

Setup

1. Clone this repository

   git clone https://github.com/ArmanKhanTech/Portfolio.git

2. Install dependancies

   npm install

3. Create a .env file in the root directory

   touch .env

4. Add the following variables in .env file

   VITE_APP_EMAILJS_SERVICE_ID=service_id_emailjs
   VITE_APP_EMAILJS_TEMPLATE_ID=template_id_emailjs
   VITE_APP_EMAILJS_PUBLIC_KEY=public_key_emailjs

5. Run the project

   npm run dev

6. Open http://localhost:5173 to view it in the browser.

Customization

1. Change the initials (icon) in src/components/Navbar.js to your initials (line 79 & 88)

   <header className='header'>
       <button 
         className='text-3xl orange-gradient-text font-bold font-sans rounded-xl border px-2 py-2.5'
         onClick={toggleMenu}>
         Your Initials
       </button>
   </header>

   and

   <NavLink to='/'>
     <button className='text-3xl orange-gradient-text font-bold font-sans rounded-xl border px-2 py-2.5'>
       Your Initials
     </button>
   </NavLink>

2. Change the name in src/components/HomeInfo.js to your name (line 35 & 90)

   <div className='text-4xl font-bold orange-gradient-text'>
     <h1>Hello,</h1>
     <h1>I am {Your Name} & I do</h1>
   </div>

   and

   <div className='text-6xl font-bold orange-gradient-text'>
     <h1>Hello,</h1>
     <h1>I am {Your Name} & I do</h1>
   </div>

3. Change the skills, projects, education & services in src\constanst\index.js according to your requirements :

   a. Assets (icons or images) can be added in src\assets\ folder

   b. Update the index.js of respective folders in src\assets\ whenever making any changes in it

   c. Also, change the favicon.ico in src\assets\ folder accrodingly

   d. Add expriences & testimonals sections in About.jsx if you want

   e. Kindly make sure to modify all the respective import statements whenever making in changes in src\constanst\index.js

4. Also, update the title & description in index.html

5. Change the link to your resume in src\components\HomeInfo.js (line 64 & 121)

   <div className='my-3'>
     <a href='resume_link' target='_blank' rel='noreferrer'>
       <button className='px-3 py-1.5 font-semibold text-xl text-white transition duration-500 ease-in-out transform bg-gradient-to-r from-orange-400 to-red-600 rounded-md hover:scale-110'>
         Resume
       </button>
     </a>
   </div>

   and

   <div className='mt-5'>
     <a href='resume_link' target='_blank' rel='noreferrer'>
       <button className='px-3 py-1.5 font-semibold text-2xl text-white transition duration-500 ease-in-out transform bg-gradient-to-r from-orange-400 to-red-600 rounded-md hover:scale-110'>
         Resume
       </button>
     </a>
   </div>

Roadmap

• Home Page
• Welcome Page
• About Page
• Service Page
• Contact Page
• Project Page

See the open issues for a full list of proposed features (and known issues)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".

Don't forget to give the project a star!

Thanks again!

License

Distributed under the MIT License. See LICENSE.txt for more information.

Contact

Arman Khan - [e-mail]

Project Link - https://github.com/ArmanKhanTech/Portfolio

Acknowledgements

• JS Mystery
• 3D Model (Home Page)
• 3D Model (Contact Page)