├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── manifest.json └── index.html ├── src ├── Assets │ ├── 4.png │ ├── about.jpg │ ├── noise.gif │ ├── image.jpeg │ ├── project1.jpg │ ├── project2.jpg │ ├── project3.jpg │ ├── project4.jpg │ ├── project5.jpg │ ├── project6.jpg │ ├── project7.jpg │ ├── project8.jpg │ ├── project9.jpg │ ├── menu.svg │ ├── arrow down.svg │ ├── arrow.svg │ ├── curve.svg │ ├── another.svg │ ├── asterik.svg │ ├── asterik2.svg │ ├── font.css │ ├── flower.svg │ ├── Red_asterisk.svg │ └── flower2.svg ├── setupTests.js ├── App.test.js ├── ScrollToTop │ └── ScrollToTop.js ├── index.css ├── reportWebVitals.js ├── GetInTouch │ ├── GetInTouch.js │ └── GetInTouch.css ├── index.js ├── Contact │ ├── Contact.css │ └── Contact.js ├── Header │ ├── Header.js │ └── Header.css ├── App.css ├── logo.svg ├── Footer │ ├── Footer.css │ └── Footer.js ├── Projects │ ├── Projects.css │ └── Projects.js ├── App.js ├── About │ ├── About.css │ └── About.js └── Home │ ├── Home.css │ └── Home.js ├── .gitignore ├── package.json └── README.md /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taimoorshahzada/Responsive-Portfolio-Website-with-Preloader-and-Custom-Cursor-using-React.js-and-GSAP/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taimoorshahzada/Responsive-Portfolio-Website-with-Preloader-and-Custom-Cursor-using-React.js-and-GSAP/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taimoorshahzada/Responsive-Portfolio-Website-with-Preloader-and-Custom-Cursor-using-React.js-and-GSAP/HEAD/public/logo512.png -------------------------------------------------------------------------------- /src/Assets/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taimoorshahzada/Responsive-Portfolio-Website-with-Preloader-and-Custom-Cursor-using-React.js-and-GSAP/HEAD/src/Assets/4.png -------------------------------------------------------------------------------- /src/Assets/about.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taimoorshahzada/Responsive-Portfolio-Website-with-Preloader-and-Custom-Cursor-using-React.js-and-GSAP/HEAD/src/Assets/about.jpg -------------------------------------------------------------------------------- /src/Assets/noise.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taimoorshahzada/Responsive-Portfolio-Website-with-Preloader-and-Custom-Cursor-using-React.js-and-GSAP/HEAD/src/Assets/noise.gif -------------------------------------------------------------------------------- /src/Assets/image.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taimoorshahzada/Responsive-Portfolio-Website-with-Preloader-and-Custom-Cursor-using-React.js-and-GSAP/HEAD/src/Assets/image.jpeg -------------------------------------------------------------------------------- /src/Assets/project1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taimoorshahzada/Responsive-Portfolio-Website-with-Preloader-and-Custom-Cursor-using-React.js-and-GSAP/HEAD/src/Assets/project1.jpg -------------------------------------------------------------------------------- /src/Assets/project2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taimoorshahzada/Responsive-Portfolio-Website-with-Preloader-and-Custom-Cursor-using-React.js-and-GSAP/HEAD/src/Assets/project2.jpg -------------------------------------------------------------------------------- /src/Assets/project3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taimoorshahzada/Responsive-Portfolio-Website-with-Preloader-and-Custom-Cursor-using-React.js-and-GSAP/HEAD/src/Assets/project3.jpg -------------------------------------------------------------------------------- /src/Assets/project4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taimoorshahzada/Responsive-Portfolio-Website-with-Preloader-and-Custom-Cursor-using-React.js-and-GSAP/HEAD/src/Assets/project4.jpg -------------------------------------------------------------------------------- /src/Assets/project5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taimoorshahzada/Responsive-Portfolio-Website-with-Preloader-and-Custom-Cursor-using-React.js-and-GSAP/HEAD/src/Assets/project5.jpg -------------------------------------------------------------------------------- /src/Assets/project6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taimoorshahzada/Responsive-Portfolio-Website-with-Preloader-and-Custom-Cursor-using-React.js-and-GSAP/HEAD/src/Assets/project6.jpg -------------------------------------------------------------------------------- /src/Assets/project7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taimoorshahzada/Responsive-Portfolio-Website-with-Preloader-and-Custom-Cursor-using-React.js-and-GSAP/HEAD/src/Assets/project7.jpg -------------------------------------------------------------------------------- /src/Assets/project8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taimoorshahzada/Responsive-Portfolio-Website-with-Preloader-and-Custom-Cursor-using-React.js-and-GSAP/HEAD/src/Assets/project8.jpg -------------------------------------------------------------------------------- /src/Assets/project9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taimoorshahzada/Responsive-Portfolio-Website-with-Preloader-and-Custom-Cursor-using-React.js-and-GSAP/HEAD/src/Assets/project9.jpg -------------------------------------------------------------------------------- /src/Assets/menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Assets/arrow down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/Assets/arrow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/ScrollToTop/ScrollToTop.js: -------------------------------------------------------------------------------- 1 | import { useEffect } from "react"; 2 | import { useLocation } from "react-router-dom"; 3 | 4 | export default function ScrollToTop(){ 5 | const {pathname} = useLocation(); 6 | useEffect(() => { 7 | window.scrollTo(0,0); 8 | }, [pathname]); 9 | 10 | return null; 11 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/Assets/curve.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/Assets/another.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/GetInTouch/GetInTouch.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './GetInTouch.css' 3 | import flower2 from '../Assets/flower2.svg' 4 | function GetInTouch() { 5 | return ( 6 |
7 |
8 |

GET IN TOUCH

9 |

If you have any general project or enquiry feel free and contact us - available now!

10 | 11 |
12 |
13 | ) 14 | } 15 | 16 | export default GetInTouch 17 | -------------------------------------------------------------------------------- /src/Assets/asterik.svg: -------------------------------------------------------------------------------- 1 | icon-asterisk-small 2 | 3 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/Assets/asterik2.svg: -------------------------------------------------------------------------------- 1 | icon-asterisk-small 2 | 3 | -------------------------------------------------------------------------------- /src/Assets/font.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap'); 2 | @font-face {font-family: "Ogg"; src: url("//db.onlinewebfonts.com/t/2596224269750e00c3ad5356299a3b9f.eot"); src: url("//db.onlinewebfonts.com/t/2596224269750e00c3ad5356299a3b9f.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/2596224269750e00c3ad5356299a3b9f.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/2596224269750e00c3ad5356299a3b9f.woff") format("woff"), url("//db.onlinewebfonts.com/t/2596224269750e00c3ad5356299a3b9f.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/2596224269750e00c3ad5356299a3b9f.svg#Ogg") format("svg"); } 3 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "personal-portfolio", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.1", 7 | "@testing-library/react": "^12.1.2", 8 | "@testing-library/user-event": "^13.5.0", 9 | "gsap": "^3.9.1", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-router-dom": "^5.3.0", 13 | "react-scripts": "5.0.0", 14 | "web-vitals": "^2.1.2" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test", 20 | "eject": "react-scripts eject" 21 | }, 22 | "eslintConfig": { 23 | "extends": [ 24 | "react-app", 25 | "react-app/jest" 26 | ] 27 | }, 28 | "browserslist": { 29 | "production": [ 30 | ">0.2%", 31 | "not dead", 32 | "not op_mini all" 33 | ], 34 | "development": [ 35 | "last 1 chrome version", 36 | "last 1 firefox version", 37 | "last 1 safari version" 38 | ] 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/Assets/flower.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Contact/Contact.css: -------------------------------------------------------------------------------- 1 | .contact-page-container{ 2 | display: flex; 3 | align-items: center; 4 | justify-content: flex-start; 5 | margin-top: 150px; 6 | height: fit-content; 7 | flex-wrap: wrap; 8 | width: 80%; 9 | margin: 0% 10%; 10 | } 11 | .contact-page-container h1{ 12 | word-spacing: 10px; 13 | letter-spacing: 80%; 14 | font-size: 200px; 15 | 16 | font-weight: lighter; 17 | font-family: 'Ogg'; 18 | } 19 | 20 | .contact-page-container h1 img{ 21 | width: 100px; 22 | margin-left: 50px; 23 | margin-bottom: 100px; 24 | animation: animate-rotate 10s infinite linear; 25 | } 26 | @keyframes animate-rotate { 27 | from{ 28 | transform: rotate(0deg); 29 | } 30 | to{ 31 | transform: rotate(360deg); 32 | } 33 | } 34 | 35 | @media (max-width: 900px) { 36 | .contact-page-container h1{ 37 | font-size: 100px; 38 | line-height: 88%; 39 | } 40 | 41 | } 42 | @media (max-width: 500px) { 43 | .contact-page-container h1{ 44 | font-size: 80px; 45 | } 46 | .contact-page-container h1 img{ 47 | width: 50px; 48 | } 49 | } -------------------------------------------------------------------------------- /src/Contact/Contact.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef } from 'react' 2 | import Header from '../Header/Header' 3 | import './Contact.css' 4 | import Footer from '../Footer/Footer' 5 | import flower from '../Assets/flower.svg' 6 | import gsap from 'gsap' 7 | function Contact() { 8 | const timeline_contact = gsap.timeline(); 9 | let text1 = useRef(null); 10 | useEffect(() => { 11 | timeline_contact.from(text1, { 12 | duration: 1, 13 | skewY: 10, 14 | y: 500, 15 | stagger: { 16 | amount: .4 17 | }, 18 | opacity: 0 19 | }, "-=1") 20 | }) 21 | return ( 22 |
23 |
24 |
25 |
26 |

text1 =el }> 27 | Let's talk about
the project? 28 |

29 |
30 |
31 |
32 |
33 | ) 34 | } 35 | 36 | export default Contact 37 | -------------------------------------------------------------------------------- /src/GetInTouch/GetInTouch.css: -------------------------------------------------------------------------------- 1 | .get-in-touch{ 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | width: 100%; 6 | height: 600px; 7 | margin-top: 250px; 8 | flex-direction: column; 9 | } 10 | .get-in-touch h1 { 11 | font-size: 200px; 12 | font-weight: lighter; 13 | font-family: 'Ogg'; 14 | } 15 | .get-in-touch p{ 16 | font-size: 20px; 17 | margin-top: -150px; 18 | font-weight: 300; 19 | text-transform: uppercase; 20 | font-family: 'Inter'; 21 | } 22 | .get-in-touch img{ 23 | width: 500px; 24 | margin-top: -400px; 25 | opacity: .1; 26 | animation: animate-rotate 30s linear infinite; 27 | 28 | } 29 | @keyframes animate-rotate { 30 | from{ 31 | transform: rotate(0deg); 32 | } 33 | to{ 34 | transform: rotate(360deg); 35 | } 36 | } 37 | 38 | @media (max-width: 1300px) { 39 | .get-in-touch h1{ 40 | font-size: 70px; 41 | } 42 | .get-in-touch img{ 43 | width: 200px; 44 | margin-top: -100px; 45 | opacity: .1; 46 | } 47 | .get-in-touch p{ 48 | font-size: 10px; 49 | font-weight: 400; 50 | margin-left: 10px; 51 | margin-right: 10px; 52 | text-align: center; 53 | font-family: 'Inter'; 54 | } 55 | 56 | } 57 | @media (max-width: 500px) { 58 | .get-in-touch h1 { 59 | font-size: 50px; 60 | } 61 | .get-in-touch p{ 62 | font-size: 10px; 63 | font-weight: 500; 64 | } 65 | .get-in-touch img{ 66 | margin-top: -90px; 67 | } 68 | .get-in-touch{ 69 | height: 400px; 70 | } 71 | } -------------------------------------------------------------------------------- /src/Header/Header.js: -------------------------------------------------------------------------------- 1 | import React, {useRef, useEffect} from 'react' 2 | import './Header.css' 3 | import { Link } from 'react-router-dom' 4 | import MenuIcon from '../Assets/menu.svg' 5 | import gsap from 'gsap' 6 | function Header({ timeline }) { 7 | let li1 = useRef(null) 8 | let li2 = useRef(null) 9 | let li3 = useRef(null) 10 | let li4 = useRef(null) 11 | let li5 = useRef(null) 12 | 13 | useEffect(() => { 14 | timeline.from([li1,li2,li3,li4,li5], { 15 | opacity: 0, 16 | duration: 1, 17 | delay: .2, 18 | y: 20, 19 | stagger: { 20 | amount: .6 21 | } 22 | }) 23 | }) 24 | return ( 25 |
26 |
27 | 28 |
29 | 30 |
31 |
    32 |
  • li1 =el}> 33 | Home 34 |
    • 35 |
  • li2 =el}> 36 | About 37 |
    • 38 |
  • li3 =el}> 39 | Projects 40 |
    • 41 |
  • li4 =el}> 42 | Contact 43 |
    • 44 |
  • li5 =el}> 45 | Youtube 46 |
    • 47 |
48 |
49 |
50 | ) 51 | } 52 | 53 | export default Header 54 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | 2 | html, body{ 3 | height: 0; 4 | } 5 | body{ 6 | background-color: #e9dbd4; 7 | } 8 | .App{ 9 | margin: 0; 10 | padding: 0; 11 | } 12 | .noise::before{ 13 | position: fixed; 14 | top: 0; 15 | left: 0; 16 | width: 100vw; 17 | height: 100vh; 18 | content: ""; 19 | /* opacity: 1; */ 20 | opacity: .03; 21 | z-index: 1500; 22 | pointer-events: none; 23 | background: url(./Assets/noise.gif); 24 | } 25 | ::-webkit-scrollbar{ 26 | display: none; 27 | } 28 | 29 | .cursor-follower{ 30 | position: absolute; 31 | background: url(Assets/Red_asterisk.svg) no-repeat 50% 50% ; 32 | background-size: cover; 33 | height: 70px; 34 | width: 70px; 35 | animation: animate-rotate 10s infinite linear; 36 | z-index: 1500; 37 | user-select: none; 38 | opacity: .8; 39 | mix-blend-mode: multiply; 40 | overflow: hidden; 41 | pointer-events: none; 42 | transform: translate(35px, 35px); 43 | } 44 | @keyframes animate-rotate { 45 | to{ 46 | transform: rotate(0deg); 47 | } 48 | from{ 49 | transform: rotate(360deg); 50 | } 51 | } 52 | 53 | @media (max-width: 768px) { 54 | .cursor-follower{ 55 | display: none; 56 | } 57 | } 58 | 59 | 60 | .loader{ 61 | margin: 0; 62 | padding: 0; 63 | position: fixed; 64 | top: 0; 65 | left: 0; 66 | width: 100%; 67 | height: 100vh; 68 | z-index: 1200; 69 | background-color: #e9dbd4; 70 | 71 | } 72 | .progress{ 73 | margin: 0; 74 | padding: 0; 75 | position: absolute; 76 | bottom: 0%; 77 | display: flex; 78 | align-items: center; 79 | justify-content: center; 80 | height: 400px; 81 | width: 100%; 82 | flex-direction: column; 83 | } 84 | #percent{ 85 | margin: 0; 86 | padding: 0; 87 | position: absolute; 88 | top: 10%; 89 | left: 10%; 90 | margin-bottom: 50px; 91 | color: black; 92 | font-size: 100px; 93 | font-family: 'Ogg'; 94 | } 95 | #bar{ 96 | margin: 0; 97 | padding: 0; 98 | width: 80%; 99 | margin-top: 20px; 100 | } 101 | #barc{ 102 | margin: 0; 103 | padding: 0; 104 | width: 1%; 105 | padding: 1px 0px; 106 | background-color: black; 107 | } -------------------------------------------------------------------------------- /src/Assets/Red_asterisk.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 18 | 20 | 42 | 44 | 45 | 47 | image/svg+xml 48 | 50 | 51 | 52 | 53 | 54 | 59 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Header/Header.css: -------------------------------------------------------------------------------- 1 | header{ 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | display: flex; 7 | justify-content: space-between; 8 | align-items: center; 9 | height: 60px; 10 | z-index: 1000; 11 | transition: .6s ease-in-out; 12 | } 13 | #logo{ 14 | font-size: 1.2vw; 15 | font-family: 'Inter'; 16 | transition: .6s ease-in-out; 17 | font-weight: bold; 18 | font-family: 'Ogg'; 19 | } 20 | .toggle-menu{ 21 | display: none; 22 | } 23 | .menu-items{ 24 | position: fixed; 25 | top: 20px; 26 | right: 60px; 27 | list-style: none; 28 | text-align: right; 29 | transition: .6s ease-in-out; 30 | transition: display 1s ease-in-out; 31 | } 32 | .menu-items li, .li{ 33 | font-family: 'Inter'; 34 | margin-top: 10px; 35 | text-transform: uppercase; 36 | font-size: 20px; 37 | overflow: hidden; 38 | color: black; 39 | text-decoration: none; 40 | cursor: pointer; 41 | margin-left: 20px; 42 | mix-blend-mode: difference; 43 | } 44 | .li:hover::before{ 45 | opacity: 1; 46 | transform: scaleX(1); 47 | transform-origin: 0 50%; 48 | transition: trasnform 0.7s cubic-bezier(0.2,1,0.3,1), opacity 0.1s linear; 49 | } 50 | .li::before{ 51 | content: ""; 52 | position: absolute; 53 | left: auto; 54 | margin-top: 22px; 55 | width: 40%; 56 | height: 2px; 57 | overflow: hidden; 58 | background: #642420; 59 | transform: scaleX(0.001); 60 | opacity: 0; 61 | transform-origin: 100% 50%; 62 | transition: transform 0.3s cubic-bezier(0.2,1,0.3,1), opacity 0.1s linear 0.2s; 63 | } 64 | @media (max-width: 1200px){ 65 | .menu-items li ,.li{ 66 | font-size: 20px; 67 | } 68 | .li::before{ 69 | margin-top: 23px; 70 | } 71 | } 72 | @media (max-width: 768px) { 73 | .menu-items{ 74 | display: none; 75 | background-color: #161616; 76 | top: 80px; 77 | right: 20px; 78 | padding: 10px 0px; 79 | } 80 | .menu-items li, .li{ 81 | color: #f0f0f0; 82 | font-size: 15px; 83 | padding-right: 10px; 84 | padding-bottom: 2px; 85 | } 86 | .li::before{ 87 | background-color: #f0f0f0; 88 | } 89 | .toggle-menu{ 90 | display: block; 91 | position: fixed; 92 | top: 15px; 93 | right: 20px; 94 | margin: 10px 0px; 95 | padding: 0px 5px; 96 | padding-top: 5px; 97 | border-radius: 1px; 98 | background-color: #161616; 99 | 100 | } 101 | .toggle-menu img{ 102 | width: 40px; 103 | font-weight: lighter; 104 | color: #f0f0f0; 105 | } 106 | header:hover .menu-items{ 107 | display: block; 108 | } 109 | } 110 | @media (max-width: 400px) { 111 | .menu-items{ 112 | top: 60px; 113 | right: 10px; 114 | } 115 | .toggle-menu{ 116 | right: 10px; 117 | top: 15px; 118 | padding: 0px 8px; 119 | padding-top: 4px; 120 | } 121 | .toggle-menu img{ 122 | width: 25px; 123 | } 124 | } -------------------------------------------------------------------------------- /src/Footer/Footer.css: -------------------------------------------------------------------------------- 1 | .footer{ 2 | display: flex; 3 | align-items: center; 4 | justify-content: space-between; 5 | width: 100%; 6 | flex-direction: column; 7 | margin-top: 150px; 8 | height: 500px; 9 | background-color: #161616; 10 | text-transform: uppercase; 11 | color: white; 12 | } 13 | .footer-container{ 14 | display: flex; 15 | align-items: center; 16 | justify-content: space-evenly; 17 | width: 100%; 18 | height: 80%; 19 | } 20 | .footer-container .message-for-users span{ 21 | font-size: 14px; 22 | font-family: 'Inter'; 23 | font-weight: lighter; 24 | margin: 20px; 25 | } 26 | .footer-container .social-links{ 27 | display: flex; 28 | justify-content: center; 29 | flex-direction: column; 30 | margin: 20px; 31 | } 32 | .footer-container .social-links .social-links-h{ 33 | font-size: 20px; 34 | margin-bottom: 10px; 35 | font-family: 'Inter'; 36 | font-weight: bold; 37 | } 38 | .footer-container .social-links .social-links-items{ 39 | display: flex; 40 | justify-content: center; 41 | flex-direction: column; 42 | } 43 | .footer a, .footer p{ 44 | color: #e0e0e0; 45 | text-decoration: none; 46 | font-family: 'Inter'; 47 | font-size: 15px; 48 | font-weight: lighter; 49 | cursor: pointer; 50 | margin-top: 5px; 51 | border-bottom: 1px dashed transparent; 52 | transition: border .8s cubic-bezier(.16,1,.3,1); 53 | } 54 | .footer-container p:hover, 55 | .footer-container a:hover{ 56 | border-bottom: 1px dashed white; 57 | transition: text-decoration .8s cubic-bezier(.16,1,.3,1); 58 | } 59 | .footer-btn{ 60 | padding: 85px 50px; 61 | border: 1px dashed white; 62 | border-radius: 50%; 63 | margin: 20px; 64 | } 65 | .footer-bottom{ 66 | display: flex; 67 | justify-content: space-between; 68 | width: 100%; 69 | margin-bottom: 20px; 70 | } 71 | .left-footer-bottom{ 72 | margin-left: 80px; 73 | } 74 | .right-footer-bottom{ 75 | margin-right: 50px; 76 | } 77 | .footer-ticker{ 78 | width: 100%; 79 | overflow: hidden; 80 | background-color: white; 81 | display: flex; 82 | align-items: center; 83 | white-space: nowrap; 84 | width: fit-content; 85 | will-change: transform; 86 | animation: animation-reel 60s infinite linear; 87 | } 88 | .footer-ticker-{ 89 | } 90 | @keyframes animation-reel { 91 | from{ 92 | transform: translateX(0%); 93 | } 94 | to{ 95 | transform: translateX(-100%); 96 | } 97 | } 98 | 99 | .footer-ticker-item{ 100 | font-weight: bold; 101 | color: black; 102 | font-family: 'Inter'; 103 | font-size: 15px; 104 | text-transform: uppercase; 105 | 106 | } 107 | 108 | @media (max-width: 900px) { 109 | .footer{ 110 | height: 750px; 111 | } 112 | .footer-container { 113 | flex-wrap: wrap; 114 | height: 100%; 115 | } 116 | .message-for-users span{ 117 | display: none; 118 | 119 | } 120 | .footer-bottom{ 121 | flex-direction: column; 122 | align-items: center; 123 | justify-content: center; 124 | } 125 | .left-footer-bottom{ 126 | margin-left: 0px; 127 | } 128 | .right-footer-bottom{ 129 | margin-right: 0px; 130 | } 131 | 132 | } 133 | @media (max-width: 400px) { 134 | .footer{ 135 | height: 850px; 136 | 137 | } 138 | .left-footer-bottom p{ 139 | margin-left: 0px; 140 | font-size: 12px; 141 | } 142 | .right-footer-bottom p{ 143 | margin-right: 0px; 144 | font-size: 12px; 145 | } 146 | } 147 | -------------------------------------------------------------------------------- /src/Projects/Projects.css: -------------------------------------------------------------------------------- 1 | 2 | .my-projects{ 3 | display: flex; 4 | align-items: center; 5 | justify-content: flex-start; 6 | margin-left: 5vw; 7 | margin-right: 5vw; 8 | height: 50vh; 9 | border-bottom: 1px dashed black; 10 | } 11 | .my-projects h1{ 12 | font-family: 'Ogg'; 13 | font-size: 220px; 14 | font-weight: lighter; 15 | line-height: 80%; 16 | text-transform: capitalize; 17 | } 18 | .project-page a { 19 | color: #642420; 20 | text-decoration: none; 21 | } 22 | .project-page-container{ 23 | display: flex; 24 | align-items: center; 25 | justify-content: center; 26 | width: 100%; 27 | height: fit-content; 28 | } 29 | .project-page-items{ 30 | display: flex; 31 | justify-content: center; 32 | height: fit-content; 33 | flex-direction: row; 34 | width: 100%; 35 | flex-wrap: wrap; 36 | } 37 | .project-page-item{ 38 | padding: 100px; 39 | width: 400px; 40 | transition: transform .6s cubic-bezier(.16,1,.3,1); 41 | } 42 | .project-page-item:hover{ 43 | transform: scale(1.05); 44 | } 45 | .project-page-item-number p{ 46 | font-size: 10px; 47 | font-weight: 500; 48 | font-family: 'Inter'; 49 | } 50 | .project-page-item-header{ 51 | display: flex; 52 | width: 100%; 53 | align-items: baseline; 54 | justify-content: space-between; 55 | } 56 | .project-page-item-header h1{ 57 | font-size: 15px; 58 | font-weight: bold; 59 | width: 50%; 60 | font-family: 'Inter'; 61 | text-transform: uppercase; 62 | } 63 | .project-page-item-header p{ 64 | font-size: 10px; 65 | font-weight: 500; 66 | font-family: 'Inter'; 67 | width: 50%; 68 | text-transform: uppercase; 69 | } 70 | .project-page-item-image{ 71 | width: 100%; 72 | height: 400px; 73 | background-color: #642420; 74 | background-position: 50% 50%; 75 | background-repeat: no-repeat; 76 | background-size: cover; 77 | margin-top: 10px; 78 | } 79 | .project-page-item-footer{ 80 | display: flex; 81 | justify-content: space-between; 82 | width: 100%; 83 | align-items: center; 84 | margin-top: 10px; 85 | border-top: 1px dashed black; 86 | border-bottom: 1px dashed black; 87 | padding: 10px 0px; 88 | } 89 | .project-page-item-footer p{ 90 | font-size: 12px; 91 | font-weight: 400; 92 | font-family: 'Inter'; 93 | text-transform: uppercase; 94 | } 95 | .project-page-item-footer img{ 96 | width: 12px; 97 | margin-right: 5px; 98 | transform: rotate(270deg); 99 | } 100 | .project-page-item-image1{ 101 | background-image: url(../Assets/project1.jpg); 102 | } 103 | .project-page-item-image2{ 104 | background-image: url(../Assets/project2.jpg); 105 | } 106 | .project-page-item-image3{ 107 | background-image: url(../Assets/project3.jpg); 108 | } 109 | .project-page-item-image4{ 110 | background-image: url(../Assets/project4.jpg); 111 | } 112 | .project-page-item-image5{ 113 | background-image: url(../Assets/project5.jpg); 114 | } 115 | .project-page-item-image6{ 116 | background-image: url(../Assets/project6.jpg); 117 | } 118 | 119 | @media (max-width: 900px) { 120 | .my-projects{ 121 | height: 40vh; 122 | } 123 | .my-projects h1{ 124 | font-size: 120px; 125 | } 126 | .project-page-item{ 127 | padding: 50px; 128 | } 129 | } 130 | @media (max-width: 500px) { 131 | .my-projects{ 132 | height: 30vh; 133 | margin-top: 100px; 134 | } 135 | .my-projects h1{ 136 | font-size: 80px; 137 | } 138 | 139 | .project-page-item{ 140 | height: 300px; 141 | } 142 | } -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, {useRef , useEffect} from 'react'; 2 | import './App.css'; 3 | import {BrowserRouter as Router, Switch, Route} from 'react-router-dom' 4 | import Home from './Home/Home'; 5 | import About from './About/About' 6 | import Projects from './Projects/Projects' 7 | import Contact from './Contact/Contact' 8 | import ScrollToTop from './ScrollToTop/ScrollToTop'; 9 | import gsap from 'gsap'; 10 | function App() { 11 | let cursor = useRef(null) 12 | let posX1 = useRef(null) 13 | let posY1 = useRef(null) 14 | let mouseX1 = useRef(null) 15 | let mouseY1 = useRef(null) 16 | 17 | let tl = gsap.timeline(); 18 | let tl2 = gsap.timeline(); 19 | 20 | useEffect(() => { 21 | let posX = posX1.current; 22 | let posY = posY1.current; 23 | let mouseX = mouseX1.current; 24 | let mouseY = mouseY1.current; 25 | tl.to({} , 0.016, { 26 | repeat: -1, 27 | onRepeat: function(){ 28 | posX += (mouseX - posX) / 10; 29 | posY += (mouseY - posY) / 10; 30 | tl.set(cursor, { 31 | css: { 32 | left: posX - 50, 33 | top: posY - 50, 34 | }, 35 | }); 36 | } 37 | }) 38 | document.addEventListener("mousemove", function(e){ 39 | mouseX = e.pageX; 40 | mouseY = e.pageY; 41 | }) 42 | tl2.from(cursor, { 43 | duration: 1.5, 44 | delay: 2, 45 | opacity: 0 46 | }, "-=1") 47 | }) 48 | 49 | const load = gsap.timeline({ 50 | paused: "true", 51 | }); 52 | let loader = useRef(null) 53 | let progress = useRef(null) 54 | let percent = useRef(null) 55 | let bar = useRef(null) 56 | let barc = useRef(null) 57 | 58 | useEffect(() => { 59 | load.to([percent, bar], { 60 | duration: 0.2, 61 | opacity: 0, 62 | zIndex: -1, 63 | }); 64 | load.to(progress, { 65 | duration: 0.8, 66 | width: "0%", 67 | }); 68 | load.to(loader, { 69 | visibility: 'hidden', 70 | zIndex: -1 71 | }); 72 | }); 73 | 74 | var id; 75 | var width1 = 1; 76 | 77 | function loading() { 78 | id = setInterval(frame, 20); 79 | } 80 | function frame() { 81 | if (width1 >= 100) { 82 | clearInterval(id); 83 | load.play(); 84 | } else { 85 | width1++; 86 | document.getElementById("barc").style.width = width1 + "%"; 87 | document.getElementById("percent").innerHTML = width1 + "%"; 88 | } 89 | } 90 | window.addEventListener("load", (e) => { 91 | loading(); 92 | }) 93 | return ( 94 |
95 | 96 |
97 |
98 |
(loader = el)}> 99 |
(progress = el)}> 100 |
(percent = el)}> 101 | 1% 102 |
103 |
(bar = el)}> 104 |
(barc = el)}>
105 |
106 |
107 |
108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 |
cursor = el }>
122 |
123 | 124 |
125 | ); 126 | } 127 | 128 | export default App; 129 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 39 | 40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | # Responsive-Portfolio-Website-with-Preloader-and-Custom-Cursor-using-React.js-and-GSAP 72 | # Responsive-Portfolio-Website-with-Preloader-and-Custom-Cursor-using-React.js-and-GSAP 73 | -------------------------------------------------------------------------------- /src/About/About.css: -------------------------------------------------------------------------------- 1 | .container-text{ 2 | position: absolute; 3 | top: 0; 4 | left: 0; 5 | margin-left: 10%; 6 | margin-top: 5vh; 7 | display: flex; 8 | font-size: 200px; 9 | font-family: 'Ogg'; 10 | font-weight: lighter; 11 | overflow: hidden; 12 | flex-direction: column; 13 | justify-content: center; 14 | letter-spacing: -10px; 15 | } 16 | .container-text p { 17 | overflow: hidden; 18 | } 19 | .container-inner-text2{ 20 | margin-top: -520px; 21 | } 22 | .container-quote{ 23 | position: absolute; 24 | top: 70vh; 25 | right: 100px; 26 | font-family: 'Inter'; 27 | font-size: 15px; 28 | color: #642420; 29 | word-spacing: 10px; 30 | text-transform: uppercase; 31 | font-weight: 300; 32 | } 33 | .container-image{ 34 | position: absolute; 35 | top: 95vh; 36 | left: 50%; 37 | transform: translate(-50%,-50%); 38 | width: 50vw; 39 | background: url(../Assets/image.jpeg) 50% 50% no-repeat; 40 | background-size: cover; 41 | filter: grayscale(1); 42 | height: 110vh; 43 | z-index: -1; 44 | } 45 | .container-quote2{ 46 | position: absolute; 47 | top: 160vh; 48 | left: 10%; 49 | } 50 | .about-container2{ 51 | position: absolute; 52 | top: 190vh; 53 | display: flex; 54 | justify-content: space-between; 55 | align-items: center; 56 | 57 | height: 250vh; 58 | width: 100%; 59 | flex-direction: column; 60 | } 61 | .about-container2-heading, 62 | .about-container2-heading2, 63 | .about-container2-heading2 p{ 64 | margin-right: 50px; 65 | margin-left: 50px; 66 | margin-bottom: 50px; 67 | } 68 | .about-container2-heading p, 69 | .about-container2-heading2 p{ 70 | font-size: 200px; 71 | font-family: 'Ogg'; 72 | line-height: 0%; 73 | font-weight: lighter; 74 | letter-spacing: -8px; 75 | 76 | } 77 | .about-container2-heading2 p{ 78 | text-decoration: line-through 5px #806868; 79 | } 80 | .about-container2-p p{ 81 | font-size: 18px; 82 | font-family: 'Inter'; 83 | margin-bottom: 80px; 84 | color: #642420; 85 | word-spacing: 12px; 86 | font-weight: 300; 87 | text-transform: uppercase; 88 | } 89 | .about-container2-p-right{ 90 | text-align: right; 91 | } 92 | .about-container-flower{ 93 | position: absolute; 94 | top: 80vh; 95 | left: 100px; 96 | animation: animate-rotate 10s infinite linear; 97 | 98 | } 99 | .about-container-flower img{ 100 | width: 100px; 101 | } 102 | .about-footer{ 103 | margin-top: 500vh; 104 | } 105 | @keyframes animate-rotate { 106 | from{ 107 | transform: rotate(0deg); 108 | } 109 | to{ 110 | transform: rotate(360deg); 111 | } 112 | } 113 | 114 | @media (max-width:1000px) { 115 | .container-text{ 116 | font-size: 120px; 117 | } 118 | .container-inner-text2{ 119 | margin-top: -300px; 120 | } 121 | .about-container2-heading p, 122 | .about-container2-heading2 p{ 123 | font-size: 140px; 124 | } 125 | .about-container-flower{ 126 | top: 70vh; 127 | } 128 | .about-container2-heading{ 129 | margin-top: 100px; 130 | } 131 | .about-container2-heading2 p{ 132 | font-size: 80px; 133 | } 134 | .about-footer{ 135 | margin-top: 450vh; 136 | } 137 | } 138 | 139 | @media (max-width: 650px) { 140 | .about-container2-heading2 p, .about-container2-heading p{ 141 | font-size: 90px; 142 | } 143 | .container-quote1{ 144 | top: 50vh; 145 | 146 | } 147 | 148 | .container-image{ 149 | width: 95vw; 150 | 151 | } 152 | .container-text{ 153 | margin-left: 15px; 154 | } 155 | .about-container2-p p{ 156 | font-size: 15px; 157 | } 158 | .about-footer{ 159 | margin-top: 430vh; 160 | } 161 | } 162 | -------------------------------------------------------------------------------- /src/Footer/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './Footer.css' 3 | function Footer() { 4 | return ( 5 |
6 |
7 |
8 |
9 | 10 | Please contact me in any way
you like 11 | 12 |
13 |
14 |
15 | Social 16 |
17 |
18 | Youtube 19 | Facebook 20 | Instagram 21 | Twitter 22 | Github 23 | LinkedIn 24 | Snapchat 25 |
26 |
27 |
28 |
29 | Contact 30 |
31 |
32 | Mail 33 | Whatsapp 34 | Telegram 35 | +92 302 4606680 36 |
37 |
38 |
39 |
40 | Other Menu 41 |
42 |
43 |

Home.

44 |

About.

45 |

Projects.

46 |

Contact.

47 |
48 |
49 |
50 | Get Started! 51 |
52 |
53 |
54 |
55 |

Pakistan

56 |
57 |
58 |

2021. Taimoor Shahzada. ALL RIGHT RESERVED

59 |
60 |
61 |
62 |
63 |
  - Taimoor shahzada
64 |
  - Taimoor shahzada
65 |
  - Taimoor shahzada
66 |
  - Taimoor shahzada
67 |
  - Taimoor shahzada
68 |
  - Taimoor shahzada
69 |
  - Taimoor shahzada
70 |
  - Taimoor shahzada
71 |
  - Taimoor shahzada
72 |
  - Taimoor shahzada
73 |
  - Taimoor shahzada
74 |
  - Taimoor shahzada
75 |
  - Taimoor shahzada
76 |
  - Taimoor shahzada
77 |
  - Taimoor shahzada
78 |
  - Taimoor shahzada
79 |
  - Taimoor shahzada
80 |
  - Taimoor shahzada
81 |
  - Taimoor shahzada
82 |
  - Taimoor shahzada
83 |
84 |
85 | ) 86 | } 87 | 88 | export default Footer 89 | -------------------------------------------------------------------------------- /src/Assets/flower2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/About/About.js: -------------------------------------------------------------------------------- 1 | import React, {useEffect, useRef} from 'react' 2 | import Footer from '../Footer/Footer' 3 | import GetInTouch from '../GetInTouch/GetInTouch' 4 | import Header from '../Header/Header' 5 | import './About.css' 6 | import gsap from 'gsap' 7 | import flower from '../Assets/flower.svg' 8 | function About() { 9 | let text1 = useRef(null) 10 | let text2 = useRef(null) 11 | let image = useRef(null) 12 | let p1 = useRef(null) 13 | const timeline_about = gsap.timeline(); 14 | useEffect(() => { 15 | timeline_about.from([text1, text2], { 16 | duration: .8, 17 | y: 500, 18 | skewY: 10, 19 | stagger: { 20 | amount: .4 21 | } 22 | }, "-=.5") 23 | timeline_about.from(image, { 24 | duration: 1.5, 25 | y: 300, 26 | delay: .2, 27 | opacity: 0 28 | }, "-=.5") 29 | timeline_about.from(p1, { 30 | duration: .5, 31 | x: 200, 32 | skewX: 10, 33 | opacity: 0 34 | }) 35 | }) 36 | return ( 37 | <> 38 |
39 |
40 |
41 |
42 |
43 |
44 |

text1 = el}> 45 | Taimoor 46 |

47 |
48 |
49 |

text2 = el}> 50 | Shahzada 51 |

52 |
53 |
54 | p1 = el}v className="container-quote container-quote1"> 55 | I create sites and
applications that cause
pleasant emotions 56 | 57 |
58 | I specialize in interaction
design, experience websites
and applications 59 |
60 |
image = el}>
61 |
62 |
63 |
64 |
65 |

Web Designer,

66 |
67 |
68 |

       Front-End

69 |
70 |
71 |

 Developer    &

72 |
73 |
74 |

     a Youtuber

75 |
76 |
77 |
78 |

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Sed, cum?

79 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam molestiae architecto minima odio, incidunt qui?

80 |

81 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Saepe sunt,
ipsam laborum rerum fugiat dolore natus unde odio placeat quia. 82 |

83 |

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, ipsam.

84 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, cupiditate!

85 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, dolorum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, nemo!

86 |
87 |
88 |
89 |

What is my feature?

90 |
91 |
92 |
93 |

94 | Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet. 95 |

96 |

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

97 |
98 |
99 | 100 |
101 |
102 |
103 | 104 |
105 |
106 |
107 |
108 | 109 | 110 | ) 111 | } 112 | 113 | export default About 114 | -------------------------------------------------------------------------------- /src/Home/Home.css: -------------------------------------------------------------------------------- 1 | *{ 2 | font-family: 'Ogg'; 3 | } 4 | .container{ 5 | display: flex; 6 | align-items: flex-start; 7 | justify-content: space-between; 8 | height: 50vh; 9 | width: 100%; 10 | margin-top: -80px; 11 | } 12 | .container1{ 13 | display: flex; 14 | flex-direction: column; 15 | padding: 0px 100px; 16 | height: 100%; 17 | justify-content: center; 18 | overflow: hidden; 19 | 20 | } 21 | .txt-line{ 22 | overflow: hidden; 23 | } 24 | .txt-line p{ 25 | font-size: 180px; 26 | text-transform: capitalize; 27 | letter-spacing: -10px; 28 | font-family: 'Ogg'; 29 | overflow: hidden; 30 | height: 100%; 31 | line-height: 90%; 32 | } 33 | .line-bottom{ 34 | margin-top: -130px; 35 | } 36 | .right-side-menu{ 37 | position: absolute; 38 | top: 40vh; 39 | text-align: right; 40 | right: 60px; 41 | } 42 | .right-side-menu p{ 43 | font-size: 20px; 44 | font-family: 'Inter'; 45 | color: #642420; 46 | cursor: pointer; 47 | font-weight: lighter; 48 | } 49 | .left-side-quote{ 50 | margin-left: 120px; 51 | } 52 | .left-side-quote p{ 53 | color: black; 54 | font-size: 15px; 55 | font-family: 'Inter'; 56 | word-spacing: 10px; 57 | text-transform: uppercase; 58 | font-weight: 300; 59 | 60 | } 61 | .flower-svg{ 62 | margin-left: 150px; 63 | margin-top: -250px; 64 | } 65 | .flower-svg img{ 66 | animation: animate-rotate 30s infinite linear; 67 | width: 80px; 68 | } 69 | .short-about{ 70 | margin-top: 25vh; 71 | display: flex; 72 | align-items: center; 73 | width: 100%; 74 | justify-content: space-between; 75 | flex-direction: column; 76 | } 77 | .main-h1-short-about{ 78 | margin-top: 100px; 79 | } 80 | .sub-main-p-short-about{ 81 | margin-top: 120px; 82 | } 83 | .short-about h1{ 84 | font-size: 150px; 85 | font-weight: 500; 86 | font-family: 'Ogg'; 87 | margin-bottom: -150px; 88 | letter-spacing: -2px; 89 | text-align: center; 90 | } 91 | .short-about p{ 92 | text-align: center; 93 | color: #642420; 94 | font-family: 'Inter'; 95 | font-weight: 500; 96 | font-size: 18px; 97 | margin-top: 20px; 98 | } 99 | .another-svg{ 100 | margin-top: 50px; 101 | } 102 | .short-about .another-svg img{ 103 | width: 50px; 104 | animation: animate-rotate 10s infinite linear; 105 | } 106 | 107 | @keyframes animate-rotate { 108 | from{ 109 | transform: rotate(0deg); 110 | } 111 | to{ 112 | transform: rotate(360deg); 113 | } 114 | } 115 | .my-skills-main-reel{ 116 | width: 100%; 117 | overflow: hidden; 118 | } 119 | 120 | .my-skills-reel{ 121 | margin-top: 300px; 122 | display: flex; 123 | align-items: center; 124 | white-space: nowrap; 125 | width: fit-content; 126 | will-change: transform; 127 | animation: animation-reel 60s infinite linear; 128 | } 129 | 130 | @keyframes animation-reel { 131 | from{ 132 | transform: translateX(0%); 133 | } 134 | to{ 135 | transform: translateX(-100%); 136 | } 137 | } 138 | .reel-item{ 139 | font-weight: 400; 140 | font-family: 'Ogg'; 141 | font-size: 180px; 142 | text-transform: uppercase; 143 | } 144 | .skill-set-boxes{ 145 | display: flex; 146 | align-items: center; 147 | justify-content: space-around; 148 | margin-top: 100px; 149 | width: 100%; 150 | height: fit-content; 151 | flex-wrap: wrap; 152 | } 153 | 154 | .skill-set-box{ 155 | margin: 50px 10px; 156 | display: flex; 157 | width: 350px; 158 | height: 200px; 159 | color: #e6e6e6; 160 | flex-direction: column; 161 | background-color: #101010; 162 | border: 1px solid transparent; 163 | transition: color .8s cubic-bezier(.16, 1, .3 ,1); 164 | transition: background-color 1s cubic-bezier(.16, 1, .3 ,1); 165 | transition: border .8s cubic-bezier(.16, 1, .3 ,1); 166 | } 167 | .skill-set-box:hover{ 168 | color: #161616; 169 | background-color: #f0f0f0; 170 | border: 1px solid #161616; 171 | } 172 | .skill-set-box h1, 173 | .skill-set-box p{ 174 | margin: 0px 30px; 175 | font-family: 'Inter'; 176 | font-weight: lighter; 177 | text-transform: uppercase; 178 | } 179 | .skill-set-box h1{ 180 | margin-top: 35px; 181 | font-size: 20px; 182 | font-weight: bold; 183 | } 184 | .skill-set-box p{ 185 | margin-top: 20px; 186 | font-size: 13px; 187 | } 188 | .project-and-work{ 189 | display: flex; 190 | align-items: center; 191 | justify-content: center; 192 | width: 80%; 193 | margin-left: 10%; 194 | margin-top: 100px; 195 | margin-bottom: 100px; 196 | flex-direction: column; 197 | height: 30vh; 198 | padding-bottom: 100px; 199 | border-bottom: 1px dashed black; 200 | } 201 | .project-and-work h1 .h1-project{ 202 | text-decoration: none; 203 | color: black; 204 | font-size: 100px; 205 | font-weight: lighter; 206 | font-family: 'Ogg'; 207 | text-decoration: .5px line-through; 208 | 209 | } 210 | .project-and-work p{ 211 | color: black; 212 | font-size: 20px; 213 | margin-top: -20px; 214 | font-weight: lighter; 215 | font-family: 'Inter'; 216 | } 217 | .h1-project img{ 218 | width: 90px; 219 | } 220 | 221 | 222 | @media (max-width: 1200px) { 223 | .txt-line p{ 224 | font-size: 100px; 225 | letter-spacing: -5px; 226 | font-weight: 500; 227 | } 228 | .line-bottom{ 229 | margin-top: -200px; 230 | } 231 | .flower-svg{ 232 | display: none; 233 | } 234 | .short-about h1{ 235 | font-size: 100px; 236 | margin: 0; 237 | line-height: 88%; 238 | } 239 | .short-about p{ 240 | margin-top: 5px; 241 | font-weight: 300; 242 | } 243 | .sub-main-p-short-about { 244 | margin-top: 10px; 245 | } 246 | .reel-item{ 247 | font-size: 100px; 248 | } 249 | .project-and-work h1 .h1-project{ 250 | font-size: 50px; 251 | } 252 | .project-and-work h1 .h1-project img{ 253 | width: 30px; 254 | } 255 | .project-and-work p{ 256 | margin-top: -30px; 257 | } 258 | .skill-set-box{ 259 | margin: 10px 5px; 260 | } 261 | } 262 | @media (max-width: 600px) { 263 | .short-about p{ 264 | font-size: 12px; 265 | margin-left: 10px; 266 | margin-right: 10px; 267 | } 268 | 269 | .txt-line p{ 270 | font-size: 60px; 271 | letter-spacing: -2px; 272 | font-weight: 500; 273 | } 274 | .line-bottom{ 275 | margin-top: -120px; 276 | } 277 | 278 | .left-side-quote{ 279 | margin-left: 10vw; 280 | } 281 | .left-side-quote p{ 282 | font-size: 12px; 283 | } 284 | .container1{ 285 | padding: 0px 50px; 286 | } 287 | .short-about h1{ 288 | font-size: 60px; 289 | margin: 0; 290 | line-height: 88%; 291 | } 292 | 293 | .reel-item{ 294 | font-size: 60px; 295 | } 296 | } 297 | -------------------------------------------------------------------------------- /src/Projects/Projects.js: -------------------------------------------------------------------------------- 1 | import React, {useEffect, useRef} from 'react' 2 | import Header from '../Header/Header' 3 | import './Projects.css' 4 | import arrow from '../Assets/arrow.svg' 5 | import GetInTouch from '../GetInTouch/GetInTouch' 6 | import Footer from '../Footer/Footer' 7 | import gsap from 'gsap' 8 | function Projects() { 9 | const timeline_project = gsap.timeline(); 10 | let text1 = useRef(null) 11 | let itemsProject = useRef(null) 12 | useEffect(() => { 13 | timeline_project.from(text1, { 14 | duration: 1, 15 | skewY: 10, 16 | y: 500, 17 | delay: 2, 18 | stagger: { 19 | amount: .4 20 | }, 21 | opacity: 0 22 | }, "-=1.5"); 23 | timeline_project.from(itemsProject, { 24 | duration: .5, 25 | opacity: 0, 26 | y: 100 27 | }) 28 | }) 29 | 30 | return ( 31 |
32 |
33 |
34 |
35 |

text1 = el }> 36 | my
37 | projects 38 |

39 |
40 |
41 |
itemsProject = el}> 42 | 58 | 74 | 90 | 106 | 122 | 138 |
139 |
140 |
141 | 142 |
143 |
144 | ) 145 | } 146 | 147 | export default Projects 148 | -------------------------------------------------------------------------------- /src/Home/Home.js: -------------------------------------------------------------------------------- 1 | import React, {useEffect, useRef} from 'react' 2 | import './Home.css' 3 | import Header from '../Header/Header'; 4 | import flower from '../Assets/flower.svg' 5 | import another from '../Assets/another.svg' 6 | import arrow from '../Assets/arrow.svg' 7 | import { Link } from 'react-router-dom'; 8 | import GetInTouch from '../GetInTouch/GetInTouch'; 9 | import Footer from '../Footer/Footer'; 10 | import gsap from 'gsap'; 11 | function Home() { 12 | let text1 = useRef(null) 13 | let text2 = useRef(null) 14 | let text3 = useRef(null) 15 | let text4 = useRef(null) 16 | let p1 = useRef(null) 17 | 18 | const timeline_home = gsap.timeline(); 19 | useEffect(() => { 20 | timeline_home.from([text1, text2, text3, text4], { 21 | duration: 1, 22 | skewY: 15, 23 | y: 400, 24 | stagger: { 25 | amount: .2 26 | } 27 | },"-=1.2") 28 | timeline_home.from(p1, { 29 | duration: .6, 30 | x: -100, 31 | delay: .2, 32 | opacity: 0 33 | }) 34 | }) 35 | return ( 36 |
37 | 1
38 |
39 |
40 |
41 |

text1 = el}>Taimoor

42 |
43 |
44 |

text2 = el}>Shahzada

45 |
46 |
47 |
48 |
49 |
50 |

p1 = el}>I create didgital experiences that merge art
direction, branding, creative strategy, web
design, prototyping, and digital interactions.

51 |
52 |
53 |
54 |
55 |
56 |

text3 = el}>Digital

57 |
58 |
59 |

text4 = el}>Designer

60 |
61 |
62 |
63 |
64 | 65 |
66 |
67 |
68 |

69 | Shortly 70 |

71 |

72 | About 73 |

74 |

75 | MySelf! 76 |

77 |
78 |
79 |

80 | I BELIEVE THAT EVERY PROJECT THAT I DO SHOULD HAVE AN OVERVALUE. 81 |

82 |

83 | I ALWAYS TRY TO FIND THE OPTIMAL SOLUTION TO THE CLIENT'S TASK. 84 |

85 |
86 |
87 | 88 |
89 |
90 |
91 |
92 |
  -- My skills
93 |
  -- My skills
94 |
  -- My skills
95 |
  -- My skills
96 |
  -- My skills
97 |
  -- My skills
98 |
  -- My skills
99 |
  -- My skills
100 |
  -- My skills
101 |
  -- My skills
102 |
103 |
104 |
105 |

HTML5

106 |

I mainly used to develop Website Markup

107 |

___

108 |
109 |
110 |

CSS3

111 |

I use this to style and bring design to browsers

112 |

___

113 |
114 |
115 |

javascript

116 |

With this technology i create visual effects and interaction and DOM elements

117 |

___

118 |
119 |
120 |

React.js

121 |

I loved it! I use it to create applications that have lot of reactivity

122 |

___

123 |
124 |
125 |

Greensock - GSAP

126 |

I used this as an animation library, The most loved ones!

127 |

___

128 |
129 |
130 |

Three.js

131 |

This library deals and simplifies the working with webgl and glsl

132 |

___

133 |
134 |
135 |

Sass

136 |

I prefer this also instead of CSS beacouse of advance functionalities

137 |

___

138 |
139 |
140 |

Node.js

141 |

I use it to writing server scripting for applications

142 |

___

143 |
144 | 145 |
146 |

Photoshop

147 |

Use to edit photos or prototype any website design

148 |

___

149 |
150 | 151 |
152 |

Illustrator

153 |

I use to make creative svgs and illustrations for website

154 |

___

155 |
156 |
157 |
158 |

159 | 160 | My Projects and Works 161 | 162 |

163 |
164 |

Click me!

165 |
166 | 167 |
169 |
170 | ) 171 | } 172 | 173 | export default Home 174 | --------------------------------------------------------------------------------