├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
└── src
├── About
├── About.css
└── About.js
├── App.css
├── App.js
├── App.test.js
├── Assets
├── 4.png
├── Red_asterisk.svg
├── about.jpg
├── another.svg
├── arrow down.svg
├── arrow.svg
├── asterik.svg
├── asterik2.svg
├── curve.svg
├── flower.svg
├── flower2.svg
├── font.css
├── image.jpeg
├── menu.svg
├── noise.gif
├── project1.jpg
├── project2.jpg
├── project3.jpg
├── project4.jpg
├── project5.jpg
├── project6.jpg
├── project7.jpg
├── project8.jpg
└── project9.jpg
├── Contact
├── Contact.css
└── Contact.js
├── Footer
├── Footer.css
└── Footer.js
├── GetInTouch
├── GetInTouch.css
└── GetInTouch.js
├── Header
├── Header.css
└── Header.js
├── Home
├── Home.css
└── Home.js
├── Projects
├── Projects.css
└── Projects.js
├── ScrollToTop
└── ScrollToTop.js
├── index.css
├── index.js
├── logo.svg
├── reportWebVitals.js
└── setupTests.js
/.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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taimoorshahzada/Responsive-Portfolio-Website-with-Preloader-and-Custom-Cursor-using-React.js-and-GSAP/be7538fbaafc41bfe6fb8218aeb234de7b91063a/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | React App
28 |
29 |
30 | You need to enable JavaScript to run this app.
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taimoorshahzada/Responsive-Portfolio-Website-with-Preloader-and-Custom-Cursor-using-React.js-and-GSAP/be7538fbaafc41bfe6fb8218aeb234de7b91063a/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taimoorshahzada/Responsive-Portfolio-Website-with-Preloader-and-Custom-Cursor-using-React.js-and-GSAP/be7538fbaafc41bfe6fb8218aeb234de7b91063a/public/logo512.png
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/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/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 |
108 |
109 | >
110 | )
111 | }
112 |
113 | export default About
114 |
--------------------------------------------------------------------------------
/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/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 |
--------------------------------------------------------------------------------
/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/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taimoorshahzada/Responsive-Portfolio-Website-with-Preloader-and-Custom-Cursor-using-React.js-and-GSAP/be7538fbaafc41bfe6fb8218aeb234de7b91063a/src/Assets/4.png
--------------------------------------------------------------------------------
/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/Assets/about.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taimoorshahzada/Responsive-Portfolio-Website-with-Preloader-and-Custom-Cursor-using-React.js-and-GSAP/be7538fbaafc41bfe6fb8218aeb234de7b91063a/src/Assets/about.jpg
--------------------------------------------------------------------------------
/src/Assets/another.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/arrow down.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/arrow.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/asterik.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/asterik2.svg:
--------------------------------------------------------------------------------
1 | icon-asterisk-small
2 |
3 |
--------------------------------------------------------------------------------
/src/Assets/curve.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/src/Assets/flower.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/flower2.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/src/Assets/image.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taimoorshahzada/Responsive-Portfolio-Website-with-Preloader-and-Custom-Cursor-using-React.js-and-GSAP/be7538fbaafc41bfe6fb8218aeb234de7b91063a/src/Assets/image.jpeg
--------------------------------------------------------------------------------
/src/Assets/menu.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/noise.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taimoorshahzada/Responsive-Portfolio-Website-with-Preloader-and-Custom-Cursor-using-React.js-and-GSAP/be7538fbaafc41bfe6fb8218aeb234de7b91063a/src/Assets/noise.gif
--------------------------------------------------------------------------------
/src/Assets/project1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taimoorshahzada/Responsive-Portfolio-Website-with-Preloader-and-Custom-Cursor-using-React.js-and-GSAP/be7538fbaafc41bfe6fb8218aeb234de7b91063a/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/be7538fbaafc41bfe6fb8218aeb234de7b91063a/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/be7538fbaafc41bfe6fb8218aeb234de7b91063a/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/be7538fbaafc41bfe6fb8218aeb234de7b91063a/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/be7538fbaafc41bfe6fb8218aeb234de7b91063a/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/be7538fbaafc41bfe6fb8218aeb234de7b91063a/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/be7538fbaafc41bfe6fb8218aeb234de7b91063a/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/be7538fbaafc41bfe6fb8218aeb234de7b91063a/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/be7538fbaafc41bfe6fb8218aeb234de7b91063a/src/Assets/project9.jpg
--------------------------------------------------------------------------------
/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/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/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 |
26 |
27 |
28 |
29 | Contact
30 |
31 |
37 |
38 |
39 |
40 | Other Menu
41 |
42 |
43 |
Home.
44 |
About.
45 |
Projects.
46 |
Contact.
47 |
48 |
49 |
52 |
53 |
54 |
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/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/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/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/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 |
--------------------------------------------------------------------------------
/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/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 |
168 |
169 |
170 | )
171 | }
172 |
173 | export default Home
174 |
--------------------------------------------------------------------------------
/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/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 |
144 | )
145 | }
146 |
147 | export default Projects
148 |
--------------------------------------------------------------------------------
/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 | }
--------------------------------------------------------------------------------
/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/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 |
--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/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/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 |
--------------------------------------------------------------------------------