├── src ├── hoc │ ├── index.js │ └── SectionWrapper.jsx ├── assets │ ├── web.png │ ├── github.png │ ├── herobg.png │ ├── image.webp │ ├── logo.png │ ├── mobile.png │ ├── proj1.webp │ ├── backend.png │ ├── carrent.png │ ├── creator.png │ ├── tech │ │ ├── aws.png │ │ ├── css.png │ │ ├── git.png │ │ ├── mui.png │ │ ├── docker.png │ │ ├── figma.png │ │ ├── framer.png │ │ ├── gsap.png │ │ ├── html.png │ │ ├── mysql.png │ │ ├── nodejs.png │ │ ├── redux.png │ │ ├── express.png │ │ ├── mongodb.png │ │ ├── reactjs.png │ │ ├── tailwind.png │ │ ├── javascript.png │ │ ├── postgresql.png │ │ ├── typescript.png │ │ └── threejs.svg │ ├── Tars Ken.webp │ ├── gearXpert.png │ ├── project3.webp │ ├── company │ │ ├── meta.png │ │ ├── tesla.png │ │ ├── shopify.png │ │ ├── tekisky.png │ │ └── starbucks.png │ ├── third testimonial.webp │ ├── menu.svg │ ├── close.svg │ └── index.js ├── components │ ├── canvas │ │ ├── index.js │ │ ├── Earth.jsx │ │ ├── Stars.jsx │ │ └── Computers.jsx │ ├── index.js │ ├── Loader.jsx │ ├── Footer.jsx │ ├── Tech.jsx │ ├── Hero.jsx │ ├── Experience.jsx │ ├── Feedbacks.jsx │ ├── About.jsx │ ├── Navbar.jsx │ ├── Contact.jsx │ └── Works.jsx ├── main.jsx ├── styles.js ├── App.jsx ├── utils │ └── motion.js ├── constants │ └── index.js └── index.css ├── public ├── planet │ ├── scene.bin │ ├── textures │ │ ├── Clouds_baseColor.png │ │ └── Planet_baseColor.png │ ├── license.txt │ └── scene.gltf └── desktop_pc │ ├── scene.bin │ ├── textures │ ├── Material_baseColor.jpeg │ ├── Tasten_2_baseColor.jpeg │ ├── Material.002_baseColor.png │ ├── Material.074_baseColor.png │ ├── Material.023_baseColor.jpeg │ ├── Material.024_baseColor.jpeg │ ├── Material.074_0_baseColor.png │ ├── Material.074_11_baseColor.png │ ├── 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_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_33_baseColor.png │ ├── Material.074_35_baseColor.png │ ├── 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_10_baseColor.jpeg │ ├── Material.074_12_baseColor.jpeg │ ├── Material.074_25_baseColor.jpeg │ ├── Material.074_32_baseColor.jpeg │ ├── Material.074_34_baseColor.jpeg │ ├── Material.074_36_baseColor.jpeg │ ├── Material.074_39_baseColor.jpeg │ └── Material_metallicRoughness.png │ └── license.txt ├── postcss.config.cjs ├── vite.config.js ├── .gitignore ├── index.html ├── tailwind.config.cjs └── package.json /src/hoc/index.js: -------------------------------------------------------------------------------- 1 | import SectionWrapper from "./SectionWrapper"; 2 | 3 | export { SectionWrapper }; 4 | -------------------------------------------------------------------------------- /src/assets/web.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/web.png -------------------------------------------------------------------------------- /src/assets/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/github.png -------------------------------------------------------------------------------- /src/assets/herobg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/herobg.png -------------------------------------------------------------------------------- /src/assets/image.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/image.webp -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/mobile.png -------------------------------------------------------------------------------- /src/assets/proj1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/proj1.webp -------------------------------------------------------------------------------- /public/planet/scene.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/public/planet/scene.bin -------------------------------------------------------------------------------- /src/assets/backend.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/backend.png -------------------------------------------------------------------------------- /src/assets/carrent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/carrent.png -------------------------------------------------------------------------------- /src/assets/creator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/creator.png -------------------------------------------------------------------------------- /src/assets/tech/aws.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/tech/aws.png -------------------------------------------------------------------------------- /src/assets/tech/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/tech/css.png -------------------------------------------------------------------------------- /src/assets/tech/git.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/tech/git.png -------------------------------------------------------------------------------- /src/assets/tech/mui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/tech/mui.png -------------------------------------------------------------------------------- /src/assets/Tars Ken.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/Tars Ken.webp -------------------------------------------------------------------------------- /src/assets/gearXpert.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/gearXpert.png -------------------------------------------------------------------------------- /src/assets/project3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/project3.webp -------------------------------------------------------------------------------- /src/assets/tech/docker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/tech/docker.png -------------------------------------------------------------------------------- /src/assets/tech/figma.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/tech/figma.png -------------------------------------------------------------------------------- /src/assets/tech/framer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/tech/framer.png -------------------------------------------------------------------------------- /src/assets/tech/gsap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/tech/gsap.png -------------------------------------------------------------------------------- /src/assets/tech/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/tech/html.png -------------------------------------------------------------------------------- /src/assets/tech/mysql.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/tech/mysql.png -------------------------------------------------------------------------------- /src/assets/tech/nodejs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/tech/nodejs.png -------------------------------------------------------------------------------- /src/assets/tech/redux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/tech/redux.png -------------------------------------------------------------------------------- /public/desktop_pc/scene.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/public/desktop_pc/scene.bin -------------------------------------------------------------------------------- /src/assets/company/meta.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/company/meta.png -------------------------------------------------------------------------------- /src/assets/company/tesla.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/company/tesla.png -------------------------------------------------------------------------------- /src/assets/tech/express.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/tech/express.png -------------------------------------------------------------------------------- /src/assets/tech/mongodb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/tech/mongodb.png -------------------------------------------------------------------------------- /src/assets/tech/reactjs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/tech/reactjs.png -------------------------------------------------------------------------------- /src/assets/tech/tailwind.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/tech/tailwind.png -------------------------------------------------------------------------------- /postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | } 6 | } -------------------------------------------------------------------------------- /src/assets/company/shopify.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/company/shopify.png -------------------------------------------------------------------------------- /src/assets/company/tekisky.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/company/tekisky.png -------------------------------------------------------------------------------- /src/assets/tech/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/tech/javascript.png -------------------------------------------------------------------------------- /src/assets/tech/postgresql.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/tech/postgresql.png -------------------------------------------------------------------------------- /src/assets/tech/typescript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/tech/typescript.png -------------------------------------------------------------------------------- /src/assets/company/starbucks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/company/starbucks.png -------------------------------------------------------------------------------- /src/assets/third testimonial.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/src/assets/third testimonial.webp -------------------------------------------------------------------------------- /public/planet/textures/Clouds_baseColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/public/planet/textures/Clouds_baseColor.png -------------------------------------------------------------------------------- /public/planet/textures/Planet_baseColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/public/planet/textures/Planet_baseColor.png -------------------------------------------------------------------------------- /public/desktop_pc/textures/Material_baseColor.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/public/desktop_pc/textures/Material_baseColor.jpeg -------------------------------------------------------------------------------- /public/desktop_pc/textures/Tasten_2_baseColor.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/public/desktop_pc/textures/Tasten_2_baseColor.jpeg -------------------------------------------------------------------------------- /public/desktop_pc/textures/Material.002_baseColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/public/desktop_pc/textures/Material.002_baseColor.png -------------------------------------------------------------------------------- /public/desktop_pc/textures/Material.074_baseColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/public/desktop_pc/textures/Material.074_baseColor.png -------------------------------------------------------------------------------- /public/desktop_pc/textures/Material.023_baseColor.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/public/desktop_pc/textures/Material.023_baseColor.jpeg -------------------------------------------------------------------------------- /public/desktop_pc/textures/Material.024_baseColor.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/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/HEAD/public/desktop_pc/textures/Material.074_0_baseColor.png -------------------------------------------------------------------------------- /public/desktop_pc/textures/Material.074_11_baseColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/public/desktop_pc/textures/Material.074_11_baseColor.png -------------------------------------------------------------------------------- /public/desktop_pc/textures/Material.074_13_baseColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/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/HEAD/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/HEAD/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/HEAD/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/HEAD/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/HEAD/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/HEAD/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/HEAD/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/HEAD/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/HEAD/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/HEAD/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/HEAD/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/HEAD/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/HEAD/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/HEAD/public/desktop_pc/textures/Material.074_24_emissive.png -------------------------------------------------------------------------------- /public/desktop_pc/textures/Material.074_26_baseColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/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/HEAD/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/HEAD/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/HEAD/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/HEAD/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/HEAD/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/HEAD/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/HEAD/public/desktop_pc/textures/Material.074_31_baseColor.png -------------------------------------------------------------------------------- /public/desktop_pc/textures/Material.074_33_baseColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/public/desktop_pc/textures/Material.074_33_baseColor.png -------------------------------------------------------------------------------- /public/desktop_pc/textures/Material.074_35_baseColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/public/desktop_pc/textures/Material.074_35_baseColor.png -------------------------------------------------------------------------------- /public/desktop_pc/textures/Material.074_3_baseColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/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/HEAD/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/HEAD/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/HEAD/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/HEAD/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/HEAD/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/HEAD/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/HEAD/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/HEAD/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/HEAD/public/desktop_pc/textures/Material.074_9_emissive.png -------------------------------------------------------------------------------- /public/desktop_pc/textures/Material.074_10_baseColor.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/public/desktop_pc/textures/Material.074_10_baseColor.jpeg -------------------------------------------------------------------------------- /public/desktop_pc/textures/Material.074_12_baseColor.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/public/desktop_pc/textures/Material.074_12_baseColor.jpeg -------------------------------------------------------------------------------- /public/desktop_pc/textures/Material.074_25_baseColor.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/public/desktop_pc/textures/Material.074_25_baseColor.jpeg -------------------------------------------------------------------------------- /public/desktop_pc/textures/Material.074_32_baseColor.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/public/desktop_pc/textures/Material.074_32_baseColor.jpeg -------------------------------------------------------------------------------- /public/desktop_pc/textures/Material.074_34_baseColor.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/public/desktop_pc/textures/Material.074_34_baseColor.jpeg -------------------------------------------------------------------------------- /public/desktop_pc/textures/Material.074_36_baseColor.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/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/HEAD/public/desktop_pc/textures/Material.074_39_baseColor.jpeg -------------------------------------------------------------------------------- /public/desktop_pc/textures/Material_metallicRoughness.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huzaifahmedz/Huzaif-Ahmed-Portfolio/HEAD/public/desktop_pc/textures/Material_metallicRoughness.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/components/canvas/index.js: -------------------------------------------------------------------------------- 1 | import EarthCanvas from "./Earth"; 2 | import ComputersCanvas from "./Computers"; 3 | import StarsCanvas from "./Stars"; 4 | 5 | export { EarthCanvas, ComputersCanvas, StarsCanvas }; 6 | -------------------------------------------------------------------------------- /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 | 10 | 11 | ); 12 | -------------------------------------------------------------------------------- /.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 | 5 | 6 | 7 | Huzaif's Portfolio 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | import { EarthCanvas, ComputersCanvas, StarsCanvas } from './canvas'; 2 | import Hero from "./Hero"; 3 | import Navbar from "./Navbar"; 4 | import About from "./About"; 5 | import Tech from "./Tech"; 6 | import Experience from "./Experience"; 7 | import Works from "./Works"; 8 | import Feedbacks from "./Feedbacks"; 9 | import Contact from "./Contact"; 10 | import CanvasLoader from "./Loader"; 11 | 12 | 13 | export { 14 | Hero, 15 | Navbar, 16 | About, 17 | Tech, 18 | Experience, 19 | Works, 20 | Feedbacks, 21 | Contact, 22 | CanvasLoader, 23 | EarthCanvas, 24 | ComputersCanvas, 25 | StarsCanvas 26 | }; 27 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/) -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/hoc/SectionWrapper.jsx: -------------------------------------------------------------------------------- 1 | import { motion } from "framer-motion"; 2 | 3 | import { styles } from "../styles"; 4 | import { staggerContainer } from "../utils/motion"; 5 | 6 | const StarWrapper = (Component, idName) => 7 | function HOC() { 8 | return ( 9 | 16 | 17 |   18 | 19 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | export default StarWrapper; 26 | -------------------------------------------------------------------------------- /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/) -------------------------------------------------------------------------------- /src/components/Loader.jsx: -------------------------------------------------------------------------------- 1 | import { Html, useProgress } from "@react-three/drei"; 2 | 3 | const CanvasLoader = () => { 4 | const { progress } = useProgress(); 5 | return ( 6 | 16 | 17 |

25 | {progress.toFixed(2)}% 26 |

27 | 28 | ); 29 | }; 30 | 31 | export default CanvasLoader; 32 | -------------------------------------------------------------------------------- /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 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 |
25 |
26 | 27 | ); 28 | } 29 | 30 | export default App; 31 | -------------------------------------------------------------------------------- /src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { FaInstagram, FaXTwitter, FaLinkedin } from "react-icons/fa6"; 3 | 4 | const Footer = () => { 5 | return ( 6 | 25 | ); 26 | }; 27 | 28 | export default Footer; -------------------------------------------------------------------------------- /src/assets/menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | 12 | ); 13 | }; 14 | 15 | const EarthCanvas = () => { 16 | return ( 17 | 29 | }> 30 | 36 | 37 | 38 | 39 | 40 | 41 | ); 42 | }; 43 | 44 | export default EarthCanvas; 45 | -------------------------------------------------------------------------------- /src/assets/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /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 | 25 | 26 | 27 | ); 28 | }; 29 | 30 | const StarsCanvas = () => { 31 | return ( 32 |
33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
41 | ); 42 | }; 43 | 44 | export default StarsCanvas; 45 | -------------------------------------------------------------------------------- /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 | {technology.name} 46 |
47 | ))} 48 |
49 |
50 | ); 51 | }; 52 | 53 | export default SectionWrapper(Tech, ""); 54 | -------------------------------------------------------------------------------- /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/components/Hero.jsx: -------------------------------------------------------------------------------- 1 | import { motion } from "framer-motion"; 2 | 3 | import { styles } from "../styles"; 4 | import { ComputersCanvas } from "./canvas"; 5 | 6 | const Hero = () => { 7 | 8 | 9 | return ( 10 |
11 |
14 |
15 |
16 |
17 |
18 | 19 |
20 |

21 | Hi, I'm Huzaif 22 |

23 |

24 | I develop modern, user
25 | interfaces and web applications 26 |

27 |
28 |
29 | 30 | 31 | 32 | 33 | 34 | 51 |
52 | ); 53 | }; 54 | 55 | export default Hero; 56 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/components/canvas/Computers.jsx: -------------------------------------------------------------------------------- 1 | import React, { Suspense, useEffect, useState } 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 Computers = () => { 8 | const computer = useGLTF("./desktop_pc/scene.gltf"); 9 | 10 | return ( 11 | 12 | 13 | 21 | 22 | 28 | 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 | }> 59 | 64 | 65 | 66 | 67 | 68 | ) 69 | ); 70 | }; 71 | 72 | export default ComputersCanvas; 73 | -------------------------------------------------------------------------------- /src/assets/tech/threejs.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /src/components/Experience.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | VerticalTimeline, 4 | VerticalTimelineElement, 5 | } from "react-vertical-timeline-component"; 6 | import { motion } from "framer-motion"; 7 | 8 | import "react-vertical-timeline-component/style.min.css"; 9 | 10 | import { styles } from "../styles"; 11 | import { experiences } from "../constants"; 12 | import { SectionWrapper } from "../hoc"; 13 | import { textVariant } from "../utils/motion"; 14 | 15 | const ExperienceCard = ({ experience }) => { 16 | return ( 17 | 27 | {experience.company_name} 32 | 33 | } 34 | > 35 |
36 |

{experience.title}

37 |

41 | {experience.company_name} 42 |

43 |
44 | 45 | 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 | 78 | ))} 79 | 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 | {`feedback_by-${name}`} 65 |
66 |
67 |
68 | ); 69 | }; 70 | 71 | const Feedbacks = () => { 72 | return ( 73 |
74 |
75 |
76 |

What others say

77 |

Testimonials.

78 |
79 |
80 |
83 | {testimonials.map((testimonial, index) => ( 84 | 85 | ))} 86 |
87 |
88 | ); 89 | }; 90 | 91 | export default SectionWrapper(Feedbacks, ""); 92 | -------------------------------------------------------------------------------- /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 | web-development 44 |

{title}

45 |
46 |
47 | 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 |
73 | 74 |

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 | 83 | ))} 84 |
85 | 86 | ); 87 | }; 88 | 89 | export default SectionWrapper(About, "about"); 90 | -------------------------------------------------------------------------------- /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 | 99 | ); 100 | }; 101 | 102 | export default Navbar; 103 | -------------------------------------------------------------------------------- /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 |
83 | 94 | 105 |