├── .gitignore
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.cjs
├── public
├── desktop_pc
│ ├── license.txt
│ ├── scene.bin
│ ├── scene.gltf
│ └── textures
│ │ ├── Material.002_baseColor.png
│ │ ├── Material.023_baseColor.jpeg
│ │ ├── Material.024_baseColor.jpeg
│ │ ├── Material.074_0_baseColor.png
│ │ ├── Material.074_10_baseColor.jpeg
│ │ ├── Material.074_11_baseColor.png
│ │ ├── Material.074_12_baseColor.jpeg
│ │ ├── Material.074_13_baseColor.png
│ │ ├── Material.074_14_baseColor.png
│ │ ├── Material.074_15_baseColor.png
│ │ ├── Material.074_16_baseColor.png
│ │ ├── Material.074_17_baseColor.png
│ │ ├── Material.074_18_baseColor.png
│ │ ├── Material.074_18_emissive.png
│ │ ├── Material.074_19_baseColor.png
│ │ ├── Material.074_1_baseColor.jpeg
│ │ ├── Material.074_20_baseColor.png
│ │ ├── Material.074_21_baseColor.png
│ │ ├── Material.074_22_baseColor.png
│ │ ├── Material.074_23_baseColor.png
│ │ ├── Material.074_24_baseColor.png
│ │ ├── Material.074_24_emissive.png
│ │ ├── Material.074_25_baseColor.jpeg
│ │ ├── Material.074_26_baseColor.png
│ │ ├── Material.074_27_baseColor.png
│ │ ├── Material.074_27_emissive.png
│ │ ├── Material.074_28_baseColor.png
│ │ ├── Material.074_29_baseColor.png
│ │ ├── Material.074_2_baseColor.jpeg
│ │ ├── Material.074_30_baseColor.png
│ │ ├── Material.074_31_baseColor.png
│ │ ├── Material.074_32_baseColor.jpeg
│ │ ├── Material.074_33_baseColor.png
│ │ ├── Material.074_34_baseColor.jpeg
│ │ ├── Material.074_35_baseColor.png
│ │ ├── Material.074_36_baseColor.jpeg
│ │ ├── Material.074_39_baseColor.jpeg
│ │ ├── Material.074_3_baseColor.png
│ │ ├── Material.074_40_baseColor.png
│ │ ├── Material.074_4_baseColor.png
│ │ ├── Material.074_4_emissive.png
│ │ ├── Material.074_5_baseColor.png
│ │ ├── Material.074_6_baseColor.png
│ │ ├── Material.074_7_baseColor.png
│ │ ├── Material.074_8_baseColor.png
│ │ ├── Material.074_9_baseColor.png
│ │ ├── Material.074_9_emissive.png
│ │ ├── Material.074_baseColor.png
│ │ ├── Material_baseColor.jpeg
│ │ ├── Material_metallicRoughness.png
│ │ └── Tasten_2_baseColor.jpeg
└── planet
│ ├── license.txt
│ ├── scene.bin
│ ├── scene.gltf
│ └── textures
│ ├── Clouds_baseColor.png
│ └── Planet_baseColor.png
├── src
├── App.jsx
├── assets
│ ├── Tars Ken.webp
│ ├── backend.png
│ ├── carrent.png
│ ├── close.svg
│ ├── company
│ │ ├── meta.png
│ │ ├── shopify.png
│ │ ├── starbucks.png
│ │ ├── tekisky.png
│ │ └── tesla.png
│ ├── creator.png
│ ├── gearXpert.png
│ ├── github.png
│ ├── herobg.png
│ ├── image.webp
│ ├── index.js
│ ├── logo.png
│ ├── menu.svg
│ ├── mobile.png
│ ├── proj1.webp
│ ├── project3.webp
│ ├── tech
│ │ ├── aws.png
│ │ ├── css.png
│ │ ├── docker.png
│ │ ├── express.png
│ │ ├── figma.png
│ │ ├── framer.png
│ │ ├── git.png
│ │ ├── gsap.png
│ │ ├── html.png
│ │ ├── javascript.png
│ │ ├── mongodb.png
│ │ ├── mui.png
│ │ ├── mysql.png
│ │ ├── nodejs.png
│ │ ├── postgresql.png
│ │ ├── reactjs.png
│ │ ├── redux.png
│ │ ├── tailwind.png
│ │ ├── threejs.svg
│ │ └── typescript.png
│ ├── third testimonial.webp
│ └── web.png
├── components
│ ├── About.jsx
│ ├── Contact.jsx
│ ├── Experience.jsx
│ ├── Feedbacks.jsx
│ ├── Footer.jsx
│ ├── Hero.jsx
│ ├── Loader.jsx
│ ├── Navbar.jsx
│ ├── Tech.jsx
│ ├── Works.jsx
│ ├── canvas
│ │ ├── Computers.jsx
│ │ ├── Earth.jsx
│ │ ├── Stars.jsx
│ │ └── index.js
│ └── index.js
├── constants
│ └── index.js
├── hoc
│ ├── SectionWrapper.jsx
│ └── index.js
├── index.css
├── main.jsx
├── styles.js
└── utils
│ └── motion.js
├── tailwind.config.cjs
└── vite.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
26 | .env
27 |
28 | # vscode
29 | .vscode
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Huzaif's Portfolio
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "3dfolio",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "preview": "vite preview"
10 | },
11 | "dependencies": {
12 | "@emailjs/browser": "^3.10.0",
13 | "@gsap/react": "^2.1.2",
14 | "@heroicons/react": "^2.2.0",
15 | "@react-three/drei": "^9.56.24",
16 | "@react-three/fiber": "^8.11.1",
17 | "email-js": "^2.0.3",
18 | "framer-motion": "^9.0.7",
19 | "gsap": "^3.12.7",
20 | "maath": "^0.5.2",
21 | "react": "^18.2.0",
22 | "react-dom": "^18.2.0",
23 | "react-icons": "^5.4.0",
24 | "react-router-dom": "^6.8.1",
25 | "react-tilt": "^1.0.2",
26 | "react-vertical-timeline-component": "^3.6.0",
27 | "three": "^0.172.0",
28 | "vanilla-tilt": "^1.8.1"
29 | },
30 | "devDependencies": {
31 | "@types/react": "^18.0.27",
32 | "@types/react-dom": "^18.0.10",
33 | "@vitejs/plugin-react": "^3.1.0",
34 | "autoprefixer": "^10.4.13",
35 | "postcss": "^8.4.21",
36 | "tailwindcss": "^3.2.6",
37 | "vite": "^4.1.0"
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/postcss.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | }
6 | }
--------------------------------------------------------------------------------
/public/desktop_pc/license.txt:
--------------------------------------------------------------------------------
1 | Model Information:
2 | * title: Gaming Desktop PC
3 | * source: https://sketchfab.com/3d-models/gaming-desktop-pc-d1d8282c9916438091f11aeb28787b66
4 | * author: Yolala1232 (https://sketchfab.com/Yolala1232)
5 |
6 | Model License:
7 | * license type: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
8 | * requirements: Author must be credited. Commercial use is allowed.
9 |
10 | If you use this 3D model in your project be sure to copy paste this credit wherever you share it:
11 | This work is based on "Gaming Desktop PC" (https://sketchfab.com/3d-models/gaming-desktop-pc-d1d8282c9916438091f11aeb28787b66) by Yolala1232 (https://sketchfab.com/Yolala1232) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
--------------------------------------------------------------------------------
/public/desktop_pc/scene.bin:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/scene.bin
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.002_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.002_baseColor.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.023_baseColor.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.023_baseColor.jpeg
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.024_baseColor.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.024_baseColor.jpeg
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_0_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_0_baseColor.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_10_baseColor.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_10_baseColor.jpeg
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_11_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_11_baseColor.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_12_baseColor.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_12_baseColor.jpeg
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_13_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_13_baseColor.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_14_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_14_baseColor.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_15_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_15_baseColor.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_16_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_16_baseColor.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_17_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_17_baseColor.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_18_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_18_baseColor.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_18_emissive.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_18_emissive.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_19_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_19_baseColor.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_1_baseColor.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_1_baseColor.jpeg
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_20_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_20_baseColor.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_21_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_21_baseColor.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_22_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_22_baseColor.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_23_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_23_baseColor.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_24_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_24_baseColor.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_24_emissive.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_24_emissive.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_25_baseColor.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_25_baseColor.jpeg
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_26_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_26_baseColor.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_27_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_27_baseColor.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_27_emissive.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_27_emissive.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_28_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_28_baseColor.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_29_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_29_baseColor.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_2_baseColor.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_2_baseColor.jpeg
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_30_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_30_baseColor.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_31_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_31_baseColor.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_32_baseColor.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_32_baseColor.jpeg
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_33_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_33_baseColor.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_34_baseColor.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_34_baseColor.jpeg
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_35_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_35_baseColor.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_36_baseColor.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_36_baseColor.jpeg
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_39_baseColor.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_39_baseColor.jpeg
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_3_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_3_baseColor.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_40_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_40_baseColor.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_4_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_4_baseColor.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_4_emissive.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_4_emissive.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_5_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_5_baseColor.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_6_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_6_baseColor.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_7_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_7_baseColor.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_8_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_8_baseColor.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_9_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_9_baseColor.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_9_emissive.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_9_emissive.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material.074_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material.074_baseColor.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material_baseColor.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material_baseColor.jpeg
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Material_metallicRoughness.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Material_metallicRoughness.png
--------------------------------------------------------------------------------
/public/desktop_pc/textures/Tasten_2_baseColor.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/desktop_pc/textures/Tasten_2_baseColor.jpeg
--------------------------------------------------------------------------------
/public/planet/license.txt:
--------------------------------------------------------------------------------
1 | Model Information:
2 | * title: Stylized planet
3 | * source: https://sketchfab.com/3d-models/stylized-planet-789725db86f547fc9163b00f302c3e70
4 | * author: cmzw (https://sketchfab.com/cmzw)
5 |
6 | Model License:
7 | * license type: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
8 | * requirements: Author must be credited. Commercial use is allowed.
9 |
10 | If you use this 3D model in your project be sure to copy paste this credit wherever you share it:
11 | This work is based on "Stylized planet" (https://sketchfab.com/3d-models/stylized-planet-789725db86f547fc9163b00f302c3e70) by cmzw (https://sketchfab.com/cmzw) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
--------------------------------------------------------------------------------
/public/planet/scene.bin:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/planet/scene.bin
--------------------------------------------------------------------------------
/public/planet/scene.gltf:
--------------------------------------------------------------------------------
1 | {
2 | "accessors": [
3 | {
4 | "bufferView": 2,
5 | "componentType": 5126,
6 | "count": 26495,
7 | "max": [
8 | 0.8758764863014221,
9 | 0.8545469045639038,
10 | 0.8728971481323242
11 | ],
12 | "min": [
13 | -0.8763356804847717,
14 | -0.8634992837905884,
15 | -0.8758782148361206
16 | ],
17 | "type": "VEC3"
18 | },
19 | {
20 | "bufferView": 2,
21 | "byteOffset": 317940,
22 | "componentType": 5126,
23 | "count": 26495,
24 | "max": [
25 | 1.0,
26 | 0.9999911785125732,
27 | 0.9991646409034729
28 | ],
29 | "min": [
30 | -1.0,
31 | -0.9999968409538269,
32 | -0.9999611377716064
33 | ],
34 | "type": "VEC3"
35 | },
36 | {
37 | "bufferView": 1,
38 | "componentType": 5126,
39 | "count": 26495,
40 | "max": [
41 | 1.0,
42 | 1.0
43 | ],
44 | "min": [
45 | 0.0,
46 | 0.0
47 | ],
48 | "type": "VEC2"
49 | },
50 | {
51 | "bufferView": 0,
52 | "componentType": 5125,
53 | "count": 103014,
54 | "type": "SCALAR"
55 | },
56 | {
57 | "bufferView": 2,
58 | "byteOffset": 635880,
59 | "componentType": 5126,
60 | "count": 6596,
61 | "max": [
62 | 0.6551179885864258,
63 | 0.6613333821296692,
64 | 0.6618664860725403
65 | ],
66 | "min": [
67 | -0.6606217622756958,
68 | -0.6490849852561951,
69 | -0.6526646018028259
70 | ],
71 | "type": "VEC3"
72 | },
73 | {
74 | "bufferView": 2,
75 | "byteOffset": 715032,
76 | "componentType": 5126,
77 | "count": 6596,
78 | "max": [
79 | 0.999987006187439,
80 | 0.9998384118080139,
81 | 0.9999796748161316
82 | ],
83 | "min": [
84 | -0.9995425939559937,
85 | -0.999676525592804,
86 | -0.9994800686836243
87 | ],
88 | "type": "VEC3"
89 | },
90 | {
91 | "bufferView": 1,
92 | "byteOffset": 211960,
93 | "componentType": 5126,
94 | "count": 6596,
95 | "max": [
96 | 1.0,
97 | 1.0
98 | ],
99 | "min": [
100 | 0.0,
101 | 0.0
102 | ],
103 | "type": "VEC2"
104 | },
105 | {
106 | "bufferView": 0,
107 | "byteOffset": 412056,
108 | "componentType": 5125,
109 | "count": 39042,
110 | "type": "SCALAR"
111 | },
112 | {
113 | "bufferView": 3,
114 | "componentType": 5126,
115 | "count": 451,
116 | "max": [
117 | 15.0
118 | ],
119 | "min": [
120 | 0.0
121 | ],
122 | "type": "SCALAR"
123 | },
124 | {
125 | "bufferView": 5,
126 | "componentType": 5126,
127 | "count": 451,
128 | "max": [
129 | 0.20017318427562714,
130 | 0.979751706123352,
131 | 0.2001722753047943,
132 | 0.9797602891921997
133 | ],
134 | "min": [
135 | -0.018710684031248093,
136 | -0.9797568917274475,
137 | -0.1991616040468216,
138 | 0.0026621678844094276
139 | ],
140 | "type": "VEC4"
141 | },
142 | {
143 | "bufferView": 3,
144 | "byteOffset": 1804,
145 | "componentType": 5126,
146 | "count": 125,
147 | "max": [
148 | 15.0
149 | ],
150 | "min": [
151 | 0.0
152 | ],
153 | "type": "SCALAR"
154 | },
155 | {
156 | "bufferView": 4,
157 | "componentType": 5126,
158 | "count": 125,
159 | "max": [
160 | 1.0000001192092896,
161 | 1.0,
162 | 1.0000001192092896
163 | ],
164 | "min": [
165 | 0.9999998807907104,
166 | 1.0,
167 | 0.9999998807907104
168 | ],
169 | "type": "VEC3"
170 | },
171 | {
172 | "bufferView": 3,
173 | "byteOffset": 2304,
174 | "componentType": 5126,
175 | "count": 451,
176 | "max": [
177 | 15.0
178 | ],
179 | "min": [
180 | 0.0
181 | ],
182 | "type": "SCALAR"
183 | },
184 | {
185 | "bufferView": 5,
186 | "byteOffset": 7216,
187 | "componentType": 5126,
188 | "count": 451,
189 | "max": [
190 | 0.20017318427562714,
191 | 0.979751706123352,
192 | 0.2001722753047943,
193 | 0.9797602891921997
194 | ],
195 | "min": [
196 | -0.018710684031248093,
197 | -0.9797568917274475,
198 | -0.1991616040468216,
199 | 0.0026621678844094276
200 | ],
201 | "type": "VEC4"
202 | },
203 | {
204 | "bufferView": 3,
205 | "byteOffset": 4108,
206 | "componentType": 5126,
207 | "count": 125,
208 | "max": [
209 | 15.0
210 | ],
211 | "min": [
212 | 0.0
213 | ],
214 | "type": "SCALAR"
215 | },
216 | {
217 | "bufferView": 4,
218 | "byteOffset": 1500,
219 | "componentType": 5126,
220 | "count": 125,
221 | "max": [
222 | 1.0000001192092896,
223 | 1.0,
224 | 1.0000001192092896
225 | ],
226 | "min": [
227 | 0.9999998807907104,
228 | 1.0,
229 | 0.9999998807907104
230 | ],
231 | "type": "VEC3"
232 | }
233 | ],
234 | "animations": [
235 | {
236 | "channels": [
237 | {
238 | "sampler": 0,
239 | "target": {
240 | "node": 3,
241 | "path": "rotation"
242 | }
243 | },
244 | {
245 | "sampler": 1,
246 | "target": {
247 | "node": 3,
248 | "path": "scale"
249 | }
250 | },
251 | {
252 | "sampler": 2,
253 | "target": {
254 | "node": 5,
255 | "path": "rotation"
256 | }
257 | },
258 | {
259 | "sampler": 3,
260 | "target": {
261 | "node": 5,
262 | "path": "scale"
263 | }
264 | }
265 | ],
266 | "name": "Animation",
267 | "samplers": [
268 | {
269 | "input": 8,
270 | "interpolation": "LINEAR",
271 | "output": 9
272 | },
273 | {
274 | "input": 10,
275 | "interpolation": "LINEAR",
276 | "output": 11
277 | },
278 | {
279 | "input": 12,
280 | "interpolation": "LINEAR",
281 | "output": 13
282 | },
283 | {
284 | "input": 14,
285 | "interpolation": "LINEAR",
286 | "output": 15
287 | }
288 | ]
289 | }
290 | ],
291 | "asset": {
292 | "extras": {
293 | "author": "cmzw (https://sketchfab.com/cmzw)",
294 | "license": "CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)",
295 | "source": "https://sketchfab.com/3d-models/stylized-planet-789725db86f547fc9163b00f302c3e70",
296 | "title": "Stylized planet"
297 | },
298 | "generator": "Sketchfab-14.10.0",
299 | "version": "2.0"
300 | },
301 | "bufferViews": [
302 | {
303 | "buffer": 0,
304 | "byteLength": 568224,
305 | "name": "floatBufferViews",
306 | "target": 34963
307 | },
308 | {
309 | "buffer": 0,
310 | "byteLength": 264728,
311 | "byteOffset": 568224,
312 | "byteStride": 8,
313 | "name": "floatBufferViews",
314 | "target": 34962
315 | },
316 | {
317 | "buffer": 0,
318 | "byteLength": 794184,
319 | "byteOffset": 832952,
320 | "byteStride": 12,
321 | "name": "floatBufferViews",
322 | "target": 34962
323 | },
324 | {
325 | "buffer": 0,
326 | "byteLength": 4608,
327 | "byteOffset": 1627136,
328 | "name": "floatBufferViews"
329 | },
330 | {
331 | "buffer": 0,
332 | "byteLength": 3000,
333 | "byteOffset": 1631744,
334 | "byteStride": 12,
335 | "name": "floatBufferViews"
336 | },
337 | {
338 | "buffer": 0,
339 | "byteLength": 14432,
340 | "byteOffset": 1634744,
341 | "byteStride": 16,
342 | "name": "floatBufferViews"
343 | }
344 | ],
345 | "buffers": [
346 | {
347 | "byteLength": 1649176,
348 | "uri": "scene.bin"
349 | }
350 | ],
351 | "extensionsUsed": [
352 | "KHR_materials_unlit"
353 | ],
354 | "images": [
355 | {
356 | "uri": "textures/Clouds_baseColor.png"
357 | },
358 | {
359 | "uri": "textures/Planet_baseColor.png"
360 | }
361 | ],
362 | "materials": [
363 | {
364 | "doubleSided": true,
365 | "emissiveTexture": {
366 | "index": 0
367 | },
368 | "extensions": {
369 | "KHR_materials_unlit": {}
370 | },
371 | "name": "Clouds",
372 | "pbrMetallicRoughness": {
373 | "baseColorTexture": {
374 | "index": 0
375 | },
376 | "metallicFactor": 0.0
377 | }
378 | },
379 | {
380 | "emissiveFactor": [
381 | 0.23391156271636818,
382 | 0.23391156271636818,
383 | 0.23391156271636818
384 | ],
385 | "emissiveTexture": {
386 | "index": 1
387 | },
388 | "extensions": {
389 | "KHR_materials_unlit": {}
390 | },
391 | "name": "Planet",
392 | "pbrMetallicRoughness": {
393 | "baseColorTexture": {
394 | "index": 1
395 | },
396 | "metallicFactor": 0.0
397 | }
398 | }
399 | ],
400 | "meshes": [
401 | {
402 | "name": "Object_0",
403 | "primitives": [
404 | {
405 | "attributes": {
406 | "NORMAL": 1,
407 | "POSITION": 0,
408 | "TEXCOORD_0": 2
409 | },
410 | "indices": 3,
411 | "material": 0,
412 | "mode": 4
413 | }
414 | ]
415 | },
416 | {
417 | "name": "Object_1",
418 | "primitives": [
419 | {
420 | "attributes": {
421 | "NORMAL": 5,
422 | "POSITION": 4,
423 | "TEXCOORD_0": 6
424 | },
425 | "indices": 7,
426 | "material": 1,
427 | "mode": 4
428 | }
429 | ]
430 | }
431 | ],
432 | "nodes": [
433 | {
434 | "children": [
435 | 1
436 | ],
437 | "matrix": [
438 | 0.9979661703109741,
439 | 0.06371438503265381,
440 | 0.001990502001717701,
441 | 0.0,
442 | 0.0,
443 | 0.031225780025124772,
444 | -0.9995123744010925,
445 | 0.0,
446 | -0.06374546885490417,
447 | 0.9974795579910278,
448 | 0.031162271276116593,
449 | 0.0,
450 | 0.0,
451 | 0.0,
452 | 0.0,
453 | 1.0
454 | ],
455 | "name": "Sketchfab_model"
456 | },
457 | {
458 | "children": [
459 | 2
460 | ],
461 | "name": "root"
462 | },
463 | {
464 | "children": [
465 | 3,
466 | 5
467 | ],
468 | "matrix": [
469 | 1.0,
470 | 0.0,
471 | 0.0,
472 | 0.0,
473 | 0.0,
474 | 2.220446049250313e-16,
475 | 1.0,
476 | 0.0,
477 | 0.0,
478 | -1.0,
479 | 2.220446049250313e-16,
480 | 0.0,
481 | 0.0,
482 | 0.0,
483 | 0.0,
484 | 1.0
485 | ],
486 | "name": "GLTF_SceneRootNode"
487 | },
488 | {
489 | "children": [
490 | 4
491 | ],
492 | "name": "Clouds_1"
493 | },
494 | {
495 | "mesh": 0,
496 | "name": "Object_4"
497 | },
498 | {
499 | "children": [
500 | 6
501 | ],
502 | "name": "Planet_2"
503 | },
504 | {
505 | "mesh": 1,
506 | "name": "Object_6"
507 | }
508 | ],
509 | "samplers": [
510 | {
511 | "magFilter": 9729,
512 | "minFilter": 9987,
513 | "wrapS": 10497,
514 | "wrapT": 10497
515 | }
516 | ],
517 | "scene": 0,
518 | "scenes": [
519 | {
520 | "name": "Sketchfab_Scene",
521 | "nodes": [
522 | 0
523 | ]
524 | }
525 | ],
526 | "textures": [
527 | {
528 | "sampler": 0,
529 | "source": 0
530 | },
531 | {
532 | "sampler": 0,
533 | "source": 1
534 | }
535 | ]
536 | }
537 |
--------------------------------------------------------------------------------
/public/planet/textures/Clouds_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/planet/textures/Clouds_baseColor.png
--------------------------------------------------------------------------------
/public/planet/textures/Planet_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/public/planet/textures/Planet_baseColor.png
--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
1 | import { BrowserRouter } from "react-router-dom";
2 |
3 | import { About, Contact, Experience, Feedbacks, Hero, Navbar, Tech, Works, StarsCanvas } from "./components";
4 | import Footer from "./components/Footer";
5 |
6 | const App = () => {
7 | return (
8 |
9 |
10 |
11 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
25 |
27 | );
28 | }
29 |
30 | export default App;
31 |
--------------------------------------------------------------------------------
/src/assets/Tars Ken.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/Tars Ken.webp
--------------------------------------------------------------------------------
/src/assets/backend.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/backend.png
--------------------------------------------------------------------------------
/src/assets/carrent.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/carrent.png
--------------------------------------------------------------------------------
/src/assets/close.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/assets/company/meta.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/company/meta.png
--------------------------------------------------------------------------------
/src/assets/company/shopify.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/company/shopify.png
--------------------------------------------------------------------------------
/src/assets/company/starbucks.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/company/starbucks.png
--------------------------------------------------------------------------------
/src/assets/company/tekisky.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/company/tekisky.png
--------------------------------------------------------------------------------
/src/assets/company/tesla.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/company/tesla.png
--------------------------------------------------------------------------------
/src/assets/creator.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/creator.png
--------------------------------------------------------------------------------
/src/assets/gearXpert.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/gearXpert.png
--------------------------------------------------------------------------------
/src/assets/github.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/github.png
--------------------------------------------------------------------------------
/src/assets/herobg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/herobg.png
--------------------------------------------------------------------------------
/src/assets/image.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/image.webp
--------------------------------------------------------------------------------
/src/assets/index.js:
--------------------------------------------------------------------------------
1 | import logo from "./logo.png";
2 | import backend from "./backend.png";
3 | import creator from "./creator.png";
4 | import mobile from "./mobile.png";
5 | import web from "./web.png";
6 | import github from "./github.png";
7 | import menu from "./menu.svg";
8 | import close from "./close.svg";
9 | import gsap from './tech/gsap.png'
10 | import framer from './tech/framer.png';
11 | import css from "./tech/css.png";
12 | import figma from "./tech/figma.png";
13 | import gearXpert from './gearXpert.png';
14 | import project3 from './project3.webp';
15 | import project2 from './proj1.webp'
16 | import mysql from './tech/mysql.png';
17 | import express from './tech/express.png';
18 | import aws from './tech/aws.png';
19 | import mui from './tech/mui.png'
20 | import git from "./tech/git.png";
21 | import html from "./tech/html.png";
22 | import javascript from "./tech/javascript.png";
23 | import mongodb from "./tech/mongodb.png";
24 | import nodejs from "./tech/nodejs.png";
25 | import reactjs from "./tech/reactjs.png";
26 | import redux from "./tech/redux.png";
27 | import tailwind from "./tech/tailwind.png";
28 | import threejs from "./tech/threejs.svg";
29 | import firstTestimonial from './Tars Ken.webp';
30 | import secondTestimonial from './image.webp';
31 | import thirdTestimonial from './third testimonial.webp'
32 |
33 | export {
34 | logo,
35 | backend,
36 | creator,
37 | mobile,
38 | web,
39 | github,
40 | menu,
41 | close,
42 | css,
43 | gearXpert,
44 | project2,
45 | project3,
46 | mysql,
47 | express,
48 | aws,
49 | mui,
50 | firstTestimonial,
51 | secondTestimonial,
52 | thirdTestimonial,
53 | gsap,
54 | framer,
55 | figma,
56 | git,
57 | html,
58 | javascript,
59 | mongodb,
60 | nodejs,
61 | reactjs,
62 | redux,
63 | tailwind,
64 | threejs,
65 |
66 | };
67 |
--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/logo.png
--------------------------------------------------------------------------------
/src/assets/menu.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/assets/mobile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/mobile.png
--------------------------------------------------------------------------------
/src/assets/proj1.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/proj1.webp
--------------------------------------------------------------------------------
/src/assets/project3.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/project3.webp
--------------------------------------------------------------------------------
/src/assets/tech/aws.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/tech/aws.png
--------------------------------------------------------------------------------
/src/assets/tech/css.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/tech/css.png
--------------------------------------------------------------------------------
/src/assets/tech/docker.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/tech/docker.png
--------------------------------------------------------------------------------
/src/assets/tech/express.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/tech/express.png
--------------------------------------------------------------------------------
/src/assets/tech/figma.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/tech/figma.png
--------------------------------------------------------------------------------
/src/assets/tech/framer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/tech/framer.png
--------------------------------------------------------------------------------
/src/assets/tech/git.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/tech/git.png
--------------------------------------------------------------------------------
/src/assets/tech/gsap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/tech/gsap.png
--------------------------------------------------------------------------------
/src/assets/tech/html.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/tech/html.png
--------------------------------------------------------------------------------
/src/assets/tech/javascript.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/tech/javascript.png
--------------------------------------------------------------------------------
/src/assets/tech/mongodb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/tech/mongodb.png
--------------------------------------------------------------------------------
/src/assets/tech/mui.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/tech/mui.png
--------------------------------------------------------------------------------
/src/assets/tech/mysql.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/tech/mysql.png
--------------------------------------------------------------------------------
/src/assets/tech/nodejs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/tech/nodejs.png
--------------------------------------------------------------------------------
/src/assets/tech/postgresql.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/tech/postgresql.png
--------------------------------------------------------------------------------
/src/assets/tech/reactjs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/tech/reactjs.png
--------------------------------------------------------------------------------
/src/assets/tech/redux.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/tech/redux.png
--------------------------------------------------------------------------------
/src/assets/tech/tailwind.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/tech/tailwind.png
--------------------------------------------------------------------------------
/src/assets/tech/threejs.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
9 |
11 |
41 |
42 |
--------------------------------------------------------------------------------
/src/assets/tech/typescript.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/tech/typescript.png
--------------------------------------------------------------------------------
/src/assets/third testimonial.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/third testimonial.webp
--------------------------------------------------------------------------------
/src/assets/web.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/b64b59906f8eee97ccd1d177a218f08fa46e08fb/src/assets/web.png
--------------------------------------------------------------------------------
/src/components/About.jsx:
--------------------------------------------------------------------------------
1 | import React, { useRef, useEffect } from "react";
2 | import { Tilt } from "react-tilt";
3 | import gsap from "gsap";
4 | import { ScrollTrigger } from "gsap/ScrollTrigger";
5 |
6 | import { styles } from "../styles";
7 | import { services } from "../constants";
8 | import { SectionWrapper } from "../hoc";
9 |
10 | gsap.registerPlugin(ScrollTrigger);
11 |
12 | const useGsap = (elementRef, animation, delay = 0) => {
13 | useEffect(() => {
14 | if (elementRef.current) {
15 | gsap.fromTo(
16 | elementRef.current,
17 | animation.from,
18 | {
19 | ...animation.to,
20 | delay,
21 | scrollTrigger: {
22 | trigger: elementRef.current,
23 | start: "top 85%",
24 | toggleActions: "play none none reverse",
25 | },
26 | }
27 | );
28 | }
29 | }, [elementRef, animation, delay]);
30 | };
31 |
32 | const ServiceCard = ({ index, title, icon }) => {
33 | const cardRef = useRef(null);
34 | useGsap(cardRef, {
35 | from: { opacity: 0, y: 100, scale: 0.8 },
36 | to: { opacity: 1, y: 0, scale: 1, duration: 1, ease: "power3.out" },
37 | }, index * 0.2);
38 |
39 | return (
40 |
41 |
42 |
43 |
44 |
{title}
45 |
46 |
48 | );
49 | };
50 |
51 | const About = () => {
52 | const headingRef = useRef(null);
53 | const paragraphRef = useRef(null);
54 |
55 | // Heading Animation
56 | useGsap(headingRef, {
57 | from: { opacity: 0, x: -50 },
58 | to: { opacity: 1, x: 0, duration: 1, ease: "power2.out" },
59 | });
60 |
61 | // Paragraph Animation
62 | useGsap(paragraphRef, {
63 | from: { opacity: 0, y: 50 },
64 | to: { opacity: 1, y: 0, duration: 1.2, ease: "power3.out" },
65 | }, 0.3);
66 |
67 | return (
68 | <>
69 |
70 |
Introduction
71 |
Overview.
72 |
75 | I'm a skilled software developer with experience in JavaScript, and expertise in frameworks
76 | like React, Node.js, and Three.js. I'm a quick learner and collaborate closely with clients to create efficient,
77 | scalable, and user-friendly solutions that solve real-world problems. Let's work together to bring your ideas to life!
78 |
79 |
80 |
81 | {services.map((service, index) => (
82 |
85 |
86 | );
87 | };
88 |
89 | export default SectionWrapper(About, "about");
90 |
--------------------------------------------------------------------------------
/src/components/Contact.jsx:
--------------------------------------------------------------------------------
1 | import React, { useRef, useState } from "react";
2 | import { motion } from "framer-motion";
3 | import emailjs from "@emailjs/browser";
4 |
5 | import { styles } from "../styles";
6 | import { EarthCanvas } from "./canvas";
7 | import { SectionWrapper } from "../hoc";
8 | import { slideIn } from "../utils/motion";
9 |
10 | const Contact = () => {
11 | const formRef = useRef();
12 | const [form, setForm] = useState({
13 | name: "",
14 | email: "",
15 | message: "",
16 | });
17 |
18 | const [loading, setLoading] = useState(false);
19 |
20 | const handleChange = (e) => {
21 | const { target } = e;
22 | const { name, value } = target;
23 |
24 | setForm({
25 | ...form,
26 | [name]: value,
27 | });
28 | };
29 |
30 | const handleSubmit = (e) => {
31 | e.preventDefault();
32 | setLoading(true);
33 |
34 | emailjs
35 | .send(
36 | import.meta.env.VITE_APP_EMAILJS_SERVICE_ID,
37 | import.meta.env.VITE_APP_EMAILJS_TEMPLATE_ID,
38 | {
39 | from_name: form.name,
40 | to_name: "Huzaif Ahmed",
41 | from_email: form.email,
42 | to_email: "dev.huzaif@gmail.com",
43 | message: form.message,
44 | },
45 | import.meta.env.VITE_APP_EMAILJS_PUBLIC_KEY
46 | )
47 | .then(
48 | () => {
49 | setLoading(false);
50 | alert("Thank you. I will get back to you as soon as possible.");
51 |
52 | setForm({
53 | name: "",
54 | email: "",
55 | message: "",
56 | });
57 | },
58 | (error) => {
59 | setLoading(false);
60 | console.error(error);
61 |
62 | alert("Ahh, something went wrong. Please try again.");
63 | }
64 | );
65 | };
66 |
67 | return (
68 |
71 |
75 | Get in touch
76 | Contact.
77 |
78 |
124 |
125 |
126 |
130 |
132 |
27 |
36 |
{experience.title}
37 |
41 | {experience.company_name}
42 |
43 |
46 | {experience.points.map((point, index) => (
47 |
51 | {point}
52 |
53 | ))}
54 |
55 |
56 | );
57 | };
58 |
59 | const Experience = () => {
60 | return (
61 | <>
62 |
63 |
64 | What I have done so far
65 |
66 |
67 | Work Experience.
68 |
69 |
70 |
71 |
72 |
73 | {experiences.map((experience, index) => (
74 |
80 |
81 |
82 | );
83 | };
84 |
85 | export default SectionWrapper(Experience, "work");
86 |
--------------------------------------------------------------------------------
/src/components/Feedbacks.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 | import { gsap } from "gsap";
3 | import { ScrollTrigger } from "gsap/ScrollTrigger";
4 |
5 | import { styles } from "../styles";
6 | import { SectionWrapper } from "../hoc";
7 | import { testimonials } from "../constants";
8 |
9 | // Register ScrollTrigger plugin
10 | gsap.registerPlugin(ScrollTrigger);
11 |
12 | const FeedbackCard = ({ index, testimonial, name, designation, company, image }) => {
13 | // Use a `ref` to apply GSAP animations
14 | const cardRef = React.useRef(null);
15 |
16 | useEffect(() => {
17 | const el = cardRef.current;
18 |
19 | // Add the ScrollTrigger animation with GSAP
20 | gsap.fromTo(
21 | el,
22 | {
23 | opacity: 0,
24 | y: 100, // Initial position off-screen
25 | },
26 | {
27 | opacity: 1,
28 | y: 0,
29 | scrollTrigger: {
30 | trigger: el,
31 | start: "top bottom", // Trigger when the top of the element reaches the bottom of the viewport
32 | end: "top center", // End the animation when the top reaches the center
33 | scrub: true, // Link the animation progress to the scroll position
34 | markers: false, // Set to true if you want to see the markers for debugging
35 | },
36 | }
37 | );
38 | }, []);
39 |
40 | return (
41 |
45 |
"
46 |
47 |
48 |
{testimonial}
49 |
50 |
51 |
52 |
53 | @ {name}
54 |
55 |
56 | {designation} of {company}
57 |
58 |
59 |
60 |
65 |
66 |
67 |
74 |
75 |
76 |
What others say
77 |
Testimonials.
78 |
79 |
80 |
83 | {testimonials.map((testimonial, index) => (
84 |
87 |
11 |
14 |
18 |
19 |
20 |
21 | Hi, I'm Huzaif
22 |
23 |
24 | I develop modern, user
27 |
28 |
52 | );
53 | };
54 |
55 | export default Hero;
56 |
--------------------------------------------------------------------------------
/src/components/Loader.jsx:
--------------------------------------------------------------------------------
1 | import { Html, useProgress } from "@react-three/drei";
2 |
3 | const CanvasLoader = () => {
4 | const { progress } = useProgress();
5 | return (
6 |
16 |
25 | {progress.toFixed(2)}%
26 |
27 |
28 | );
29 | };
30 |
31 | export default CanvasLoader;
32 |
--------------------------------------------------------------------------------
/src/components/Navbar.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import { Link } from "react-router-dom";
3 |
4 | import { styles } from "../styles";
5 | import { navLinks } from "../constants";
6 | import { logo, menu, close } from "../assets";
7 |
8 | const Navbar = () => {
9 | const [active, setActive] = useState("");
10 | const [toggle, setToggle] = useState(false);
11 | const [scrolled, setScrolled] = useState(false);
12 |
13 | useEffect(() => {
14 | const handleScroll = () => {
15 | const scrollTop = window.scrollY;
16 | if (scrollTop > 100) {
17 | setScrolled(true);
18 | } else {
19 | setScrolled(false);
20 | }
21 | };
22 |
23 | window.addEventListener("scroll", handleScroll);
24 |
25 | return () => window.removeEventListener("scroll", handleScroll);
26 | }, []);
27 |
28 | return (
29 |
36 |
37 |
{
41 | setActive("");
42 | window.scrollTo(0, 0);
43 | }}
44 | >
45 |
46 |
47 | Huzaif
48 | | Devxora
49 |
50 |
51 |
52 |
53 | {navLinks.map((nav) => (
54 | setActive(nav.title)}
60 | >
61 | {nav.title}
62 |
63 | ))}
64 |
65 |
66 |
67 |
setToggle(!toggle)}
72 | />
73 |
74 |
79 |
80 | {navLinks.map((nav) => (
81 | {
87 | setToggle(!toggle);
88 | setActive(nav.title);
89 | }}
90 | >
91 | {nav.title}
92 |
93 | ))}
94 |
95 |
96 |
97 |
99 | );
100 | };
101 |
102 | export default Navbar;
103 |
--------------------------------------------------------------------------------
/src/components/Tech.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 | import { SectionWrapper } from "../hoc";
3 | import { technologies } from "../constants";
4 | import { gsap } from "gsap";
5 | import { ScrollTrigger } from "gsap/ScrollTrigger";
6 |
7 | gsap.registerPlugin(ScrollTrigger);
8 |
9 | const Tech = () => {
10 | useEffect(() => {
11 | gsap.fromTo(
12 | ".tech-icon",
13 | {
14 | opacity: 0,
15 | y: 80
16 | },
17 | {
18 |
19 |
20 |
21 |
22 | opacity: 1,
23 | y: 0,
24 | duration: 2.5,
25 | stagger: 0.1,
26 | scrollTrigger: {
27 | trigger: ".tech-icons-wrapper",
28 | start: "top 80%",
29 | end: "bottom 70%",
30 | scrub: true,
31 | },
32 | }
33 | );
34 | }, []);
35 |
36 | return (
37 |
38 |
39 | {technologies.map((technology) => (
40 |
41 |
46 |
47 | ))}
48 |
50 | );
51 | };
52 |
53 | export default SectionWrapper(Tech, "");
54 |
--------------------------------------------------------------------------------
/src/components/Works.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef } from "react";
2 | import { Tilt } from "react-tilt";
3 | import { gsap } from "gsap";
4 | import { ScrollTrigger } from "gsap/ScrollTrigger";
5 |
6 | import { styles } from "../styles";
7 | import { github } from "../assets";
8 | import { SectionWrapper } from "../hoc";
9 | import { projects } from "../constants";
10 |
11 | // Register ScrollTrigger plugin
12 | gsap.registerPlugin(ScrollTrigger);
13 |
14 | const ProjectCard = ({
15 | index,
16 | name,
17 | description,
18 | tags,
19 | image,
20 | source_code_link,
21 | }) => {
22 | const cardRef = useRef(null);
23 |
24 | useEffect(() => {
25 | const el = cardRef.current;
26 |
27 | // ScrollTrigger for animating project cards with stagger
28 | gsap.fromTo(
29 | el,
30 | {
31 | opacity: 0,
32 | y: 100, // Start off-screen
33 | },
34 | {
35 | opacity: 1,
36 | y: 0,
37 | scrollTrigger: {
38 | trigger: el,
39 | start: "top bottom", // Trigger when the top of the element hits the bottom of the viewport
40 | end: "top center", // End when the top reaches the center of the viewport
41 | scrub: true, // Smoothly sync scroll and animation
42 | markers: false, // Set to `true` to see debug markers
43 | },
44 | }
45 | );
46 | }, []);
47 |
48 | return (
49 |
50 |
58 |
59 |
64 |
65 |
66 |
window.open(source_code_link, "_blank")}
68 | className="black-gradient w-10 h-10 rounded-full flex justify-center items-center cursor-pointer"
69 | >
70 |
75 |
76 |
77 |
80 |
{name}
81 |
{description}
82 |
85 | {tags.map((tag) => (
86 |
90 | #{tag.name}
91 |
92 | ))}
93 |
95 |
126 |
My work
127 |
Projects.
128 |
131 |
132 | Following projects showcase my skills and experience through real-world examples of my work. Each project is briefly described with links to code repositories and live demos. It reflects my ability to solve complex problems, work with different technologies, and manage projects effectively.
133 |
134 |
137 | {projects.map((project, index) => (
138 |
141 | ))}
142 |
12 |
29 | );
30 | };
31 |
32 | const ComputersCanvas = () => {
33 | const [isMobile, setIsMobile] = useState(window.innerWidth <= 500);
34 |
35 | useEffect(() => {
36 | const mediaQuery = window.matchMedia("(max-width: 500px)");
37 |
38 | const handleMediaQueryChange = (event) => {
39 | setIsMobile(event.matches);
40 | };
41 |
42 | mediaQuery.addEventListener("change", handleMediaQueryChange);
43 |
44 | return () => {
45 | mediaQuery.removeEventListener("change", handleMediaQueryChange);
46 | };
47 | }, []);
48 |
49 | return (
50 | !isMobile && ( // Hide on mobile screens
51 |
58 |
68 | )
69 | );
70 | };
71 |
72 | export default ComputersCanvas;
73 |
--------------------------------------------------------------------------------
/src/components/canvas/Earth.jsx:
--------------------------------------------------------------------------------
1 | import React, { Suspense } from "react";
2 | import { Canvas } from "@react-three/fiber";
3 | import { OrbitControls, Preload, useGLTF } from "@react-three/drei";
4 |
5 | import CanvasLoader from "../Loader";
6 |
7 | const Earth = () => {
8 | const earth = useGLTF("./planet/scene.gltf");
9 |
10 | return (
11 |
29 |
41 | );
42 | };
43 |
44 | export default EarthCanvas;
45 |
--------------------------------------------------------------------------------
/src/components/canvas/Stars.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useRef, Suspense } from "react";
2 | import { Canvas, useFrame } from "@react-three/fiber";
3 | import { Points, PointMaterial, Preload } from "@react-three/drei";
4 | import * as random from "maath/random/dist/maath-random.esm";
5 |
6 | const Stars = (props) => {
7 | const ref = useRef();
8 | const [sphere] = useState(() => random.inSphere(new Float32Array(5000), { radius: 1.2 }));
9 |
10 | useFrame((state, delta) => {
11 | ref.current.rotation.x -= delta / 10;
12 | ref.current.rotation.y -= delta / 15;
13 | });
14 |
15 | return (
16 |
17 |
18 |
26 |
27 | );
28 | };
29 |
30 | const StarsCanvas = () => {
31 | return (
32 |
33 |
34 |
35 |
37 |
38 |
40 |
16 |
17 |
18 |
19 |
20 |
22 | );
23 | };
24 |
25 | export default StarWrapper;
26 |
--------------------------------------------------------------------------------
/src/hoc/index.js:
--------------------------------------------------------------------------------
1 | import SectionWrapper from "./SectionWrapper";
2 |
3 | export { SectionWrapper };
4 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
2 |
3 | @tailwind base;
4 | @tailwind components;
5 | @tailwind utilities;
6 |
7 | * {
8 | margin: 0;
9 | padding: 0;
10 | box-sizing: border-box;
11 | font-family: "Poppins", sans-serif;
12 | scroll-behavior: smooth;
13 | color-scheme: dark;
14 |
15 |
16 | }
17 |
18 |
19 |
20 | .hash-span {
21 | margin-top: -100px;
22 | padding-bottom: 100px;
23 | display: block;
24 | }
25 |
26 | .black-gradient {
27 | background: #000000; /* fallback for old browsers */
28 | background: -webkit-linear-gradient(
29 | to right,
30 | #434343,
31 | #000000
32 | ); /* Chrome 10-25, Safari 5.1-6 */
33 | background: linear-gradient(
34 | to right,
35 | #434343,
36 | #000000
37 | ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
38 | }
39 |
40 | .violet-gradient {
41 | background: #804dee;
42 | background: linear-gradient(-90deg, #804dee 0%, rgba(60, 51, 80, 0) 100%);
43 | background: -webkit-linear-gradient(
44 | -90deg,
45 | #804dee 0%,
46 | rgba(60, 51, 80, 0) 100%
47 | );
48 | }
49 |
50 | .green-pink-gradient {
51 | background: "#00cea8";
52 | background: linear-gradient(90.13deg, #00cea8 1.9%, #bf61ff 97.5%);
53 | background: -webkit-linear-gradient(-90.13deg, #00cea8 1.9%, #bf61ff 97.5%);
54 | }
55 |
56 | .orange-text-gradient {
57 | background: #f12711; /* fallback for old browsers */
58 | background: -webkit-linear-gradient(
59 | to top,
60 | #f12711,
61 | #f5af19
62 | ); /* Chrome 10-25, Safari 5.1-6 */
63 | background: linear-gradient(
64 | to top,
65 | #f12711,
66 | #f5af19
67 | ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
68 | -webkit-background-clip: text;
69 | -webkit-text-fill-color: transparent;
70 | }
71 |
72 | .green-text-gradient {
73 | background: #11998e; /* fallback for old browsers */
74 | background: -webkit-linear-gradient(
75 | to top,
76 | #11998e,
77 | #38ef7d
78 | ); /* Chrome 10-25, Safari 5.1-6 */
79 | background: linear-gradient(
80 | to top,
81 | #11998e,
82 | #38ef7d
83 | ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
84 | -webkit-background-clip: text;
85 | -webkit-text-fill-color: transparent;
86 | }
87 |
88 | .blue-text-gradient {
89 | /* background: -webkit-linear-gradient(#eee, #333); */
90 | background: #56ccf2; /* fallback for old browsers */
91 | background: -webkit-linear-gradient(
92 | to top,
93 | #2f80ed,
94 | #56ccf2
95 | ); /* Chrome 10-25, Safari 5.1-6 */
96 | background: linear-gradient(
97 | to top,
98 | #2f80ed,
99 | #56ccf2
100 | ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
101 | -webkit-background-clip: text;
102 | -webkit-text-fill-color: transparent;
103 | }
104 |
105 | .pink-text-gradient {
106 | background: #ec008c; /* fallback for old browsers */
107 | background: -webkit-linear-gradient(
108 | to top,
109 | #ec008c,
110 | #fc6767
111 | ); /* Chrome 10-25, Safari 5.1-6 */
112 | background: linear-gradient(
113 | to top,
114 | #ec008c,
115 | #fc6767
116 | ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
117 | -webkit-background-clip: text;
118 | -webkit-text-fill-color: transparent;
119 | }
120 |
121 | /* canvas- styles */
122 | .canvas-loader {
123 | font-size: 10px;
124 | width: 1em;
125 | height: 1em;
126 | border-radius: 50%;
127 | position: relative;
128 | text-indent: -9999em;
129 | animation: mulShdSpin 1.1s infinite ease;
130 | transform: translateZ(0);
131 | }
132 |
133 | @keyframes mulShdSpin {
134 | 0%,
135 | 100% {
136 | box-shadow: 0em -2.6em 0em 0em #ffffff,
137 | 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
138 | 2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
139 | 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
140 | 0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
141 | -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
142 | -2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
143 | -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
144 | }
145 | 12.5% {
146 | box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
147 | 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
148 | 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
149 | 0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
150 | -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
151 | -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
152 | -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
153 | }
154 | 25% {
155 | box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
156 | 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff,
157 | 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
158 | 0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
159 | -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
160 | -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
161 | -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
162 | }
163 | 37.5% {
164 | box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
165 | 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
166 | 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff,
167 | 0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
168 | -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
169 | -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
170 | -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
171 | }
172 | 50% {
173 | box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
174 | 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
175 | 2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
176 | 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff,
177 | -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
178 | -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
179 | -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
180 | }
181 | 62.5% {
182 | box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
183 | 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
184 | 2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
185 | 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
186 | 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff,
187 | -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
188 | -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
189 | }
190 | 75% {
191 | box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
192 | 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
193 | 2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
194 | 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
195 | 0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
196 | -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff,
197 | -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
198 | }
199 | 87.5% {
200 | box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
201 | 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
202 | 2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
203 | 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
204 | 0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
205 | -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
206 | -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
207 | }
208 | }
209 |
--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom/client";
3 |
4 | import App from "./App";
5 | import "./index.css";
6 |
7 | ReactDOM.createRoot(document.getElementById("root")).render(
8 |
9 |
11 | );
12 |
--------------------------------------------------------------------------------
/src/styles.js:
--------------------------------------------------------------------------------
1 | const styles = {
2 | paddingX: "sm:px-16 px-6",
3 | paddingY: "sm:py-16 py-6",
4 | padding: "sm:px-16 px-6 sm:py-16 py-10",
5 |
6 | heroHeadText:
7 | "font-black text-white lg:text-[80px] sm:text-[60px] xs:text-[50px] text-[40px] lg:leading-[98px] mt-2",
8 | heroSubText:
9 | "text-[#dfd9ff] font-medium lg:text-[30px] sm:text-[26px] xs:text-[20px] text-[16px] lg:leading-[40px]",
10 |
11 | sectionHeadText:
12 | "text-white font-black md:text-[60px] sm:text-[50px] xs:text-[40px] text-[30px]",
13 | sectionSubText:
14 | "sm:text-[18px] text-[14px] text-secondary uppercase tracking-wider",
15 | };
16 |
17 | export { styles };
18 |
--------------------------------------------------------------------------------
/src/utils/motion.js:
--------------------------------------------------------------------------------
1 | export const textVariant = (delay) => {
2 | return {
3 | hidden: {
4 | y: -50,
5 | opacity: 0,
6 | },
7 | show: {
8 | y: 0,
9 | opacity: 1,
10 | transition: {
11 | type: "spring",
12 | duration: 1.25,
13 | delay: delay,
14 | },
15 | },
16 | };
17 | };
18 |
19 | export const fadeIn = (direction, type, delay, duration) => {
20 | return {
21 | hidden: {
22 | x: direction === "left" ? 100 : direction === "right" ? -100 : 0,
23 | y: direction === "up" ? 100 : direction === "down" ? -100 : 0,
24 | opacity: 0,
25 | },
26 | show: {
27 | x: 0,
28 | y: 0,
29 | opacity: 1,
30 | transition: {
31 | type: type,
32 | delay: delay,
33 | duration: duration,
34 | ease: "easeOut",
35 | },
36 | },
37 | };
38 | };
39 |
40 | export const zoomIn = (delay, duration) => {
41 | return {
42 | hidden: {
43 | scale: 0,
44 | opacity: 0,
45 | },
46 | show: {
47 | scale: 1,
48 | opacity: 1,
49 | transition: {
50 | type: "tween",
51 | delay: delay,
52 | duration: duration,
53 | ease: "easeOut",
54 | },
55 | },
56 | };
57 | };
58 |
59 | export const slideIn = (direction, type, delay, duration) => {
60 | return {
61 | hidden: {
62 | x: direction === "left" ? "-100%" : direction === "right" ? "100%" : 0,
63 | y: direction === "up" ? "100%" : direction === "down" ? "100%" : 0,
64 | },
65 | show: {
66 | x: 0,
67 | y: 0,
68 | transition: {
69 | type: type,
70 | delay: delay,
71 | duration: duration,
72 | ease: "easeOut",
73 | },
74 | },
75 | };
76 | };
77 |
78 | export const staggerContainer = (staggerChildren, delayChildren) => {
79 | return {
80 | hidden: {},
81 | show: {
82 | transition: {
83 | staggerChildren: staggerChildren,
84 | delayChildren: delayChildren || 0,
85 | },
86 | },
87 | };
88 | };
89 |
--------------------------------------------------------------------------------
/tailwind.config.cjs:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: ["./src/**/*.{js,jsx}"],
4 | mode: "jit",
5 | theme: {
6 | extend: {
7 | colors: {
8 | primary: "#050816",
9 | secondary: "#aaa6c3",
10 | tertiary: "#151030",
11 | "black-100": "#100d25",
12 | "black-200": "#090325",
13 | "white-100": "#f3f3f3",
14 | },
15 | boxShadow: {
16 | card: "0px 35px 120px -15px #211e35",
17 | },
18 | screens: {
19 | xs: "450px",
20 | },
21 | backgroundImage: {
22 | "hero-pattern": "url('/src/assets/herobg.png')",
23 | },
24 | },
25 | },
26 | plugins: [],
27 | };
28 |
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
44 |