My 3D personal portfolio website.
Explore the docs »
Visit
·
Report a Bug
·
Request new Feature
Table of Contents
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.
Follow the below instructions to get started.
-
NPM v.10.5.0
-
Email.js Account
-
Clone this repository
git clone https://github.com/ArmanKhanTech/Portfolio.git
-
Install dependancies
npm install
-
Create a
.env
file in the root directorytouch .env
-
Add the following variables in
.env
fileVITE_APP_EMAILJS_SERVICE_ID=service_id_emailjs VITE_APP_EMAILJS_TEMPLATE_ID=template_id_emailjs VITE_APP_EMAILJS_PUBLIC_KEY=public_key_emailjs
-
Run the project
npm run dev
-
Open http://localhost:5173 to view it in the browser.
-
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>
-
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>
-
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\
folderb. Update the
index.js
of respective folders insrc\assets\
whenever making any changes in itc. Also, change the
favicon.ico
insrc\assets\
folder accrodinglyd. Add expriences & testimonals sections in
About.jsx
if you wante. Kindly make sure to modify all the respective import statements whenever making in changes in
src\constanst\index.js
-
Also, update the title & description in
index.html
-
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>
- 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)
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!
Distributed under the MIT License. See LICENSE.txt
for more information.
Arman Khan - ak2341776@gmail.com
Project Link - https://github.com/ArmanKhanTech/Portfolio