├── src ├── constants │ ├── index.js │ └── images.js ├── assets │ ├── api.png │ ├── asus.png │ ├── bolt.png │ ├── cpp.png │ ├── css.png │ ├── git.png │ ├── html.png │ ├── logo.png │ ├── mu5.png │ ├── nb.png │ ├── node.png │ ├── sass.png │ ├── vue.png │ ├── adidas.png │ ├── amazon.png │ ├── bgIMG.png │ ├── email.png │ ├── figma.png │ ├── mobile.png │ ├── python.png │ ├── react.png │ ├── redux.png │ ├── skype.png │ ├── about01.png │ ├── about02.png │ ├── about03.png │ ├── about04.png │ ├── bgWhite.png │ ├── flutter.png │ ├── graphql.png │ ├── profile.png │ ├── spotify.png │ ├── javascript.png │ ├── typescript.png │ ├── circle.svg │ └── logo.svg ├── wrapper │ ├── index.js │ ├── MotionWrap.js │ └── AppWrap.js ├── components │ ├── index.js │ ├── NavigationDots.jsx │ ├── SocialMedia.jsx │ └── Navbar │ │ ├── Navbar.jsx │ │ └── Navbar.scss ├── index.js ├── container │ ├── index.js │ ├── About │ │ ├── About.scss │ │ └── About.jsx │ ├── Footer │ │ ├── Footer.jsx │ │ └── Footer.scss │ ├── Header │ │ ├── Header.jsx │ │ └── Header.scss │ ├── Testimonial │ │ ├── Testimonial.jsx │ │ └── Testimonial.scss │ ├── Skills │ │ ├── Skills.jsx │ │ └── Skills.scss │ └── Work │ │ ├── Work.scss │ │ └── Work.jsx ├── App.js ├── index.css └── App.scss ├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── favicon-16x16.png ├── favicon-32x32.png ├── piyush_favicon.png ├── apple-touch-icon.png ├── android-chrome-192x192.png ├── android-chrome-512x512.png ├── site.webmanifest ├── about.txt ├── manifest.json └── index.html ├── .gitignore ├── package.json └── README.md /src/constants/index.js: -------------------------------------------------------------------------------- 1 | export { default as images } from "./images"; 2 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/public/logo512.png -------------------------------------------------------------------------------- /src/assets/api.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/api.png -------------------------------------------------------------------------------- /src/assets/asus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/asus.png -------------------------------------------------------------------------------- /src/assets/bolt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/bolt.png -------------------------------------------------------------------------------- /src/assets/cpp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/cpp.png -------------------------------------------------------------------------------- /src/assets/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/css.png -------------------------------------------------------------------------------- /src/assets/git.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/git.png -------------------------------------------------------------------------------- /src/assets/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/html.png -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/mu5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/mu5.png -------------------------------------------------------------------------------- /src/assets/nb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/nb.png -------------------------------------------------------------------------------- /src/assets/node.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/node.png -------------------------------------------------------------------------------- /src/assets/sass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/sass.png -------------------------------------------------------------------------------- /src/assets/vue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/vue.png -------------------------------------------------------------------------------- /src/assets/adidas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/adidas.png -------------------------------------------------------------------------------- /src/assets/amazon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/amazon.png -------------------------------------------------------------------------------- /src/assets/bgIMG.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/bgIMG.png -------------------------------------------------------------------------------- /src/assets/email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/email.png -------------------------------------------------------------------------------- /src/assets/figma.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/figma.png -------------------------------------------------------------------------------- /src/assets/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/mobile.png -------------------------------------------------------------------------------- /src/assets/python.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/python.png -------------------------------------------------------------------------------- /src/assets/react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/react.png -------------------------------------------------------------------------------- /src/assets/redux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/redux.png -------------------------------------------------------------------------------- /src/assets/skype.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/skype.png -------------------------------------------------------------------------------- /public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/public/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/public/favicon-32x32.png -------------------------------------------------------------------------------- /src/assets/about01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/about01.png -------------------------------------------------------------------------------- /src/assets/about02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/about02.png -------------------------------------------------------------------------------- /src/assets/about03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/about03.png -------------------------------------------------------------------------------- /src/assets/about04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/about04.png -------------------------------------------------------------------------------- /src/assets/bgWhite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/bgWhite.png -------------------------------------------------------------------------------- /src/assets/flutter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/flutter.png -------------------------------------------------------------------------------- /src/assets/graphql.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/graphql.png -------------------------------------------------------------------------------- /src/assets/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/profile.png -------------------------------------------------------------------------------- /src/assets/spotify.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/spotify.png -------------------------------------------------------------------------------- /public/piyush_favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/public/piyush_favicon.png -------------------------------------------------------------------------------- /src/assets/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/javascript.png -------------------------------------------------------------------------------- /src/assets/typescript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/src/assets/typescript.png -------------------------------------------------------------------------------- /public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/public/apple-touch-icon.png -------------------------------------------------------------------------------- /src/wrapper/index.js: -------------------------------------------------------------------------------- 1 | export { default as AppWrap } from "./AppWrap"; 2 | export { default as MotionWrap } from "./MotionWrap"; 3 | -------------------------------------------------------------------------------- /public/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/public/android-chrome-192x192.png -------------------------------------------------------------------------------- /public/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thepiyushmalhotra/my-personal-portfolio/HEAD/public/android-chrome-512x512.png -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | export { default as Navbar } from "./Navbar/Navbar"; 2 | export { default as NavigationDots } from "./NavigationDots"; 3 | export { default as SocialMedia } from "./SocialMedia"; 4 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | 4 | import App from "./App"; 5 | import "./index.css"; 6 | 7 | ReactDOM.render(, document.getElementById("root")); 8 | -------------------------------------------------------------------------------- /public/site.webmanifest: -------------------------------------------------------------------------------- 1 | {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} -------------------------------------------------------------------------------- /src/container/index.js: -------------------------------------------------------------------------------- 1 | export { default as About } from "./About/About"; 2 | export { default as Footer } from "./Footer/Footer"; 3 | export { default as Header } from "./Header/Header"; 4 | export { default as Skills } from "./Skills/Skills"; 5 | export { default as Testimonial } from "./Testimonial/Testimonial"; 6 | export { default as Work } from "./Work/Work"; 7 | -------------------------------------------------------------------------------- /public/about.txt: -------------------------------------------------------------------------------- 1 | This favicon was generated using the following font: 2 | 3 | - Font Title: Jost 4 | - Font Author: Copyright 2020 The Jost Project Authors (https://github.com/indestructible-type/Jost) 5 | - Font Source: http://fonts.gstatic.com/s/jost/v12/92zPtBhPNqw79Ij1E865zBUv7myjJQVGPokMmuHL.ttf 6 | - Font License: SIL Open Font License, 1.1 (http://scripts.sil.org/OFL)) 7 | -------------------------------------------------------------------------------- /.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/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { About, Footer, Header, Skills, Testimonial, Work } from "./container"; 4 | import { Navbar } from "./components"; 5 | import "./App.scss"; 6 | 7 | const App = () => ( 8 |
9 | 10 |
11 | 12 | 13 | 14 | 15 |
16 |
17 | ); 18 | 19 | export default App; 20 | -------------------------------------------------------------------------------- /src/assets/circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/wrapper/MotionWrap.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { motion } from "framer-motion"; 3 | 4 | const MotionWrap = (Component, classNames) => 5 | function HOC() { 6 | return ( 7 | 12 | 13 | 14 | ); 15 | }; 16 | 17 | export default MotionWrap; 18 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap"); 2 | 3 | :root { 4 | --font-base: "DM Sans", sans-serif; 5 | 6 | --primary-color: #edf2f8; 7 | --secondary-color: #313bac; 8 | --black-color: #030303; 9 | --lightGray-color: #e4e4e4; 10 | --gray-color: #6b7688; 11 | --brown-color: #46364a; 12 | --white-color: #ffffff; 13 | } 14 | 15 | * { 16 | box-sizing: border-box; 17 | padding: 0; 18 | margin: 0; 19 | scroll-behavior: smooth; 20 | } 21 | -------------------------------------------------------------------------------- /src/components/NavigationDots.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const NavigationDots = ({ active }) => { 4 | return ( 5 |
6 | {['home', 'about', 'work', 'skills', 'testimonial', 'contact'].map((item, index) => ( 7 | 13 | ))} 14 |
15 | ); 16 | }; 17 | 18 | export default NavigationDots; -------------------------------------------------------------------------------- /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/wrapper/AppWrap.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { NavigationDots, SocialMedia } from "../components"; 3 | 4 | const AppWrap = (Component, idName, classNames) => 5 | function HOC() { 6 | return ( 7 |
8 | 9 |
10 | 11 | 12 |
13 | {/*

Piyush Malhotra

14 |

Full Stack Developer

*/} 15 |
16 |
17 | 18 |
19 | ); 20 | }; 21 | 22 | export default AppWrap; 23 | -------------------------------------------------------------------------------- /src/components/SocialMedia.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { BsGithub, BsLinkedin } from 'react-icons/bs'; 3 | import { FaMediumM } from 'react-icons/fa'; 4 | 5 | const SocialMedia = () => { 6 | return ( 7 |
8 |
9 | 10 | 11 | 12 |
13 |
14 | 15 | 16 | 17 |
18 |
19 | 20 | 21 | 22 |
23 |
24 | ); 25 | }; 26 | 27 | export default SocialMedia; -------------------------------------------------------------------------------- /src/container/About/About.scss: -------------------------------------------------------------------------------- 1 | .app__about { 2 | flex: 1; 3 | width: 100%; 4 | flex-direction: column; 5 | } 6 | 7 | .about__para { 8 | text-align: justify; 9 | font-size: 1.1rem; 10 | line-height: 1.5; 11 | margin: 1rem 13rem; 12 | } 13 | 14 | @media screen and (max-width: 1024px) { 15 | .about__para { 16 | margin: 1rem 1rem; 17 | } 18 | } 19 | 20 | .app__profiles { 21 | display: flex; 22 | justify-content: center; 23 | align-items: flex-start; 24 | flex-wrap: wrap; 25 | margin-top: 2rem; 26 | } 27 | 28 | .app__profile-item { 29 | width: 190px; 30 | display: flex; 31 | justify-content: flex-start; 32 | align-items: flex-start; 33 | flex-direction: column; 34 | margin: 2rem; 35 | 36 | img { 37 | width: 100%; 38 | height: 170px; 39 | border-radius: 15px; 40 | object-fit: cover; 41 | } 42 | 43 | @media screen and (min-width: 2000px) { 44 | width: 370px; 45 | margin: 2rem 4rem; 46 | 47 | img { 48 | height: 320px; 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "frontend_react", 3 | "homepage": ".", 4 | "version": "0.1.0", 5 | "private": true, 6 | "dependencies": { 7 | "@sanity/client": "^3.1.0", 8 | "@sanity/image-url": "^1.0.1", 9 | "@testing-library/jest-dom": "^5.16.2", 10 | "@testing-library/react": "^12.1.3", 11 | "@testing-library/user-event": "^13.5.0", 12 | "framer-motion": "^6.2.8", 13 | "node-sass": "^7.0.1", 14 | "react": "^17.0.2", 15 | "react-app-polyfill": "^3.0.0", 16 | "react-dom": "^17.0.2", 17 | "react-icons": "^4.3.1", 18 | "react-router-dom": "^6.2.1", 19 | "react-scripts": "5.0.0", 20 | "react-tooltip": "^4.2.21", 21 | "web-vitals": "^2.1.4" 22 | }, 23 | "scripts": { 24 | "start": "react-scripts start", 25 | "build": "react-scripts build", 26 | "test": "react-scripts test", 27 | "eject": "react-scripts eject" 28 | }, 29 | "eslintConfig": { 30 | "extends": [ 31 | "react-app", 32 | "react-app/jest" 33 | ] 34 | }, 35 | "browserslist": { 36 | "production": [ 37 | ">0.2%", 38 | "not dead", 39 | "not op_mini all" 40 | ], 41 | "development": [ 42 | "last 1 chrome version", 43 | "last 1 firefox version", 44 | "last 1 safari version" 45 | ] 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/components/Navbar/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { HiMenuAlt4, HiX } from 'react-icons/hi'; 3 | import { motion } from 'framer-motion'; 4 | 5 | import { images } from '../../constants'; 6 | import './Navbar.scss'; 7 | 8 | const Navbar = () => { 9 | const [toggle, setToggle] = useState(false); 10 | 11 | return ( 12 | 47 | ); 48 | }; 49 | 50 | export default Navbar; -------------------------------------------------------------------------------- /src/container/Footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | 3 | import { images } from '../../constants'; 4 | import { AppWrap, MotionWrap } from '../../wrapper'; 5 | import { client } from '../../client'; 6 | import './Footer.scss'; 7 | 8 | const Footer = () => { 9 | const [formData, setFormData] = useState({ name: '', email: '', message: '' }); 10 | const [isFormSubmitted, setIsFormSubmitted] = useState(false); 11 | const [loading, setLoading] = useState(false); 12 | 13 | const { username, email, message } = formData; 14 | 15 | const handleChangeInput = (e) => { 16 | const { name, value } = e.target; 17 | setFormData({ ...formData, [name]: value }); 18 | }; 19 | 20 | const handleSubmit = () => { 21 | setLoading(true); 22 | 23 | const contact = { 24 | _type: 'contact', 25 | name: formData.username, 26 | email: formData.email, 27 | message: formData.message, 28 | }; 29 | 30 | client.create(contact) 31 | .then(() => { 32 | setLoading(false); 33 | setIsFormSubmitted(true); 34 | }) 35 | .catch((err) => console.log(err)); 36 | }; 37 | 38 | return ( 39 | <> 40 |

What's next? Let's have a chat!

41 | 42 |
43 |
44 | email 45 | piyush.malhotra@outlook.com 46 |
47 |
48 | 49 | ); 50 | }; 51 | 52 | export default AppWrap( 53 | MotionWrap(Footer, 'app__footer'), 54 | 'contact', 55 | 'app__whitebg', 56 | ); -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Piyush Malhotra 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/constants/images.js: -------------------------------------------------------------------------------- 1 | import email from "../assets/email.png"; 2 | import mobile from "../assets/mobile.png"; 3 | import api from "../assets/api.png"; 4 | import cpp from "../assets/cpp.png"; 5 | import css from "../assets/css.png"; 6 | import figma from "../assets/figma.png"; 7 | import flutter from "../assets/flutter.png"; 8 | import git from "../assets/git.png"; 9 | import graphql from "../assets/graphql.png"; 10 | import html from "../assets/html.png"; 11 | import javascript from "../assets/javascript.png"; 12 | import mu5 from "../assets/mu5.png"; 13 | import node from "../assets/node.png"; 14 | import python from "../assets/python.png"; 15 | import react from "../assets/react.png"; 16 | import redux from "../assets/redux.png"; 17 | import sass from "../assets/sass.png"; 18 | import typescript from "../assets/typescript.png"; 19 | import vue from "../assets/vue.png"; 20 | 21 | import about01 from "../assets/about01.png"; 22 | import about02 from "../assets/about02.png"; 23 | import about03 from "../assets/about03.png"; 24 | import about04 from "../assets/about04.png"; 25 | 26 | import profile from "../assets/profile.png"; 27 | import circle from "../assets/circle.svg"; 28 | import logo from "../assets/logo.png"; 29 | 30 | import adidas from "../assets/adidas.png"; 31 | import amazon from "../assets/amazon.png"; 32 | import asus from "../assets/asus.png"; 33 | import bolt from "../assets/bolt.png"; 34 | import nb from "../assets/nb.png"; 35 | import skype from "../assets/skype.png"; 36 | import spotify from "../assets/spotify.png"; 37 | 38 | export default { 39 | email, 40 | mobile, 41 | api, 42 | cpp, 43 | css, 44 | figma, 45 | flutter, 46 | git, 47 | graphql, 48 | html, 49 | javascript, 50 | mu5, 51 | node, 52 | python, 53 | react, 54 | redux, 55 | sass, 56 | typescript, 57 | vue, 58 | about01, 59 | about02, 60 | about03, 61 | about04, 62 | profile, 63 | circle, 64 | logo, 65 | adidas, 66 | amazon, 67 | asus, 68 | bolt, 69 | nb, 70 | skype, 71 | spotify, 72 | }; 73 | -------------------------------------------------------------------------------- /src/container/About/About.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import { motion } from 'framer-motion'; 3 | 4 | import { AppWrap, MotionWrap } from '../../wrapper'; 5 | import { urlFor, client } from '../../client'; 6 | import './About.scss'; 7 | 8 | const About = () => { 9 | const [abouts, setAbouts] = useState([]); 10 | 11 | useEffect(() => { 12 | const query = '*[_type == "abouts"]'; 13 | 14 | client.fetch(query).then((data) => { 15 | setAbouts(data); 16 | }); 17 | }, []); 18 | 19 | return ( 20 | <> 21 |

A little bit About Me and my Career Interests



22 |

I view myself as a coding enthusiast and I love tinkering with tech, building stuff, and 23 | creating projects be it in web development, game development or data science. Even at home, I am in a permanent 24 | Beta Mode: Constantly learning, evolving, and getting proficient in fields related to my career. My love of reading 25 | integrates well with my coding habit as I am always riffling through Hacker News, programming subreddits, or 26 | tearing through books even remotely related to computer science. Apart from reading, my other favorite hobby is 27 | gaming so naturally, I fused that too into my affinity for programming by learning Unity. 28 | When I'm not working, I enjoy Gaming, Art, Journaling, Skateboarding and Reading.

29 | 30 |
31 | {abouts.map((about, index) => ( 32 | 39 | {about.title} 40 |

{about.title}

41 |

{about.description}

42 | 43 | ))} 44 |
45 | 46 | ); 47 | }; 48 | 49 | export default AppWrap( 50 | MotionWrap(About, 'app__about'), 51 | 'about', 52 | "app__whitebg" 53 | ); -------------------------------------------------------------------------------- /src/container/Header/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { motion } from 'framer-motion'; 3 | 4 | import { AppWrap } from '../../wrapper'; 5 | import { images } from '../../constants'; 6 | import './Header.scss'; 7 | 8 | const scaleVariants = { 9 | whileInView: { 10 | scale: [0, 1], 11 | opacity: [0, 1], 12 | transition: { 13 | duration: 1, 14 | ease: 'easeInOut', 15 | }, 16 | }, 17 | }; 18 | 19 | const Header = () => { 20 | return ( 21 |
22 | 27 |
28 |
29 | 🎮 30 |
31 |

Hey Everyone, I am

32 |

Piyush

33 |
34 |
35 | 36 |
37 |

Developer

38 |

Digital Artist

39 |

Blogger

40 |

Gamer

41 |
42 |
43 | 44 | 45 | 50 | profile_bg 51 | 58 | 59 | 60 | 65 | {[images.flutter, images.redux, images.sass].map((circle, index) => ( 66 |
67 | profile_bg 68 |
69 | ))} 70 | 71 |
72 | ); 73 | }; 74 | 75 | export default AppWrap(Header, 'home'); -------------------------------------------------------------------------------- /src/container/Testimonial/Testimonial.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import { HiChevronLeft, HiChevronRight } from 'react-icons/hi'; 3 | import { motion } from 'framer-motion'; 4 | 5 | import { AppWrap, MotionWrap } from '../../wrapper'; 6 | import { urlFor, client } from '../../client'; 7 | import './Testimonial.scss'; 8 | 9 | const Testimonial = () => { 10 | const [currentIndex, setCurrentIndex] = useState(0); 11 | const [testimonials, setTestimonials] = useState([]); 12 | const [brands, setBrands] = useState([]); 13 | 14 | const handleClick = (index) => { 15 | setCurrentIndex(index); 16 | }; 17 | 18 | useEffect(() => { 19 | const query = '*[_type == "testimonials"]'; 20 | const brandsQuery = '*[_type == "brands"]'; 21 | 22 | client.fetch(query).then((data) => { 23 | setTestimonials(data); 24 | }); 25 | 26 | client.fetch(brandsQuery).then((data) => { 27 | setBrands(data); 28 | }); 29 | }, []); 30 | 31 | return ( 32 | <> 33 | {testimonials.length && ( 34 | <> 35 |
36 | {testimonials[currentIndex].name} 37 |
38 |

{testimonials[currentIndex].feedback}

39 |
40 |

{testimonials[currentIndex].name}

41 |
{testimonials[currentIndex].company}
42 |
43 |
44 |
45 | 46 |
47 |
handleClick(currentIndex === 0 ? testimonials.length - 1 : currentIndex - 1)}> 48 | 49 |
50 | 51 |
handleClick(currentIndex === testimonials.length - 1 ? 0 : currentIndex + 1)}> 52 | 53 |
54 |
55 | 56 | )} 57 | 58 |
59 | {brands.map((brand) => ( 60 | 65 | {brand.name} 66 | 67 | ))} 68 |
69 | 70 | ); 71 | }; 72 | 73 | export default AppWrap( 74 | MotionWrap(Testimonial, 'app__testimonial'), 75 | 'testimonial', 76 | 'app__primarybg', 77 | ); -------------------------------------------------------------------------------- /src/container/Footer/Footer.scss: -------------------------------------------------------------------------------- 1 | .app__footer { 2 | flex: 1; 3 | width: 100%; 4 | flex-direction: column; 5 | 6 | @media screen and (max-width: 768px) { 7 | flex-direction: column; 8 | } 9 | } 10 | 11 | .app__footer-cards { 12 | width: 60%; 13 | display: flex; 14 | justify-content: space-evenly; 15 | align-items: center; 16 | flex-wrap: wrap; 17 | margin: 4em 2rem 2rem; 18 | 19 | .app__footer-card { 20 | min-width: 290px; 21 | display: flex; 22 | flex-direction: row; 23 | justify-content: flex-start; 24 | align-items: center; 25 | 26 | margin: 1rem 0; 27 | padding: 1rem; 28 | border-radius: 10px; 29 | cursor: pointer; 30 | background-color: #fef4f5; 31 | 32 | transition: all 0.3s ease-in-out; 33 | 34 | img { 35 | width: 40px; 36 | height: 40px; 37 | margin: 0 0.7rem; 38 | } 39 | 40 | p { 41 | font-weight: 500; 42 | } 43 | a { 44 | text-decoration: none; 45 | font-weight: 500; 46 | } 47 | &:hover { 48 | box-shadow: 0 0 25px #fef4f5; 49 | } 50 | 51 | @media screen and (max-width: 450px) { 52 | width: 100%; 53 | } 54 | } 55 | 56 | @media screen and (max-width: 768px) { 57 | width: 100%; 58 | } 59 | } 60 | 61 | .app__footer-cards .app__footer-card:last-child { 62 | background-color: #f2f7fb; 63 | } 64 | 65 | .app__footer-cards .app__footer-card:last-child:hover { 66 | box-shadow: 0 0 25px #f2f7fb; 67 | } 68 | 69 | .app__footer-form { 70 | width: 60%; 71 | flex-direction: column; 72 | margin: 1rem 2rem; 73 | 74 | div { 75 | width: 100%; 76 | 77 | margin: 0.75rem 0; 78 | border-radius: 10px; 79 | cursor: pointer; 80 | background-color: var(--primary-color); 81 | 82 | transition: all 0.3s ease-in-out; 83 | 84 | input, 85 | textarea { 86 | width: 100%; 87 | padding: 0.95rem; 88 | border: none; 89 | border-radius: 7px; 90 | background-color: var(--primary-color); 91 | 92 | font-family: var(--font-base); 93 | color: var(--secondary-color); 94 | outline: none; 95 | } 96 | 97 | textarea { 98 | height: 170px; 99 | } 100 | 101 | &:hover { 102 | box-shadow: 0 0 25px var(--primary-color); 103 | } 104 | } 105 | 106 | button { 107 | padding: 1rem 2rem; 108 | border-radius: 10px; 109 | border: none; 110 | background-color: var(--secondary-color); 111 | 112 | font-weight: 500; 113 | color: var(--white-color); 114 | outline: none; 115 | margin: 2rem 0 0 0; 116 | font-family: var(--font-base); 117 | 118 | transition: cubic-bezier(0.55, 0.085, 0.68, 0.53); 119 | cursor: pointer; 120 | 121 | &:hover { 122 | background-color: #2430af; 123 | } 124 | } 125 | 126 | @media screen and (max-width: 768px) { 127 | width: 100%; 128 | margin: 1rem 0; 129 | } 130 | } 131 | -------------------------------------------------------------------------------- /src/container/Skills/Skills.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import { motion } from 'framer-motion'; 3 | import ReactTooltip from 'react-tooltip'; 4 | 5 | import { AppWrap, MotionWrap } from '../../wrapper'; 6 | import { urlFor, client } from '../../client'; 7 | import './Skills.scss'; 8 | 9 | const Skills = () => { 10 | const [experiences, setExperiences] = useState([]); 11 | const [skills, setSkills] = useState([]); 12 | 13 | useEffect(() => { 14 | const query = '*[_type == "experiences"]'; 15 | const skillsQuery = '*[_type == "skills"]'; 16 | 17 | client.fetch(query).then((data) => { 18 | setExperiences(data); 19 | }); 20 | 21 | client.fetch(skillsQuery).then((data) => { 22 | setSkills(data); 23 | }); 24 | }, []); 25 | 26 | return ( 27 | <> 28 |

My Skills & Experiences

29 | 30 |
31 | 32 | {skills.map((skill) => ( 33 | 39 |
43 | {skill.name} 44 |
45 |

{skill.name}

46 | 47 | ))} 48 | 49 |
50 | {experiences.map((experience) => ( 51 | 55 |
56 |

{experience.year}

57 |
58 | 59 | {experience.works.map((work) => ( 60 | <> 61 | 69 |

{work.name}

70 |

{work.company}

71 | 72 | 78 | {work.desc} 79 | 80 | 81 | ))} 82 | 83 | 84 | ))} 85 |
86 |
87 | 88 | ); 89 | }; 90 | 91 | export default AppWrap( 92 | MotionWrap(Skills, 'app__skills'), 93 | 'skills', 94 | "app__whitebg" 95 | ); -------------------------------------------------------------------------------- /src/container/Work/Work.scss: -------------------------------------------------------------------------------- 1 | .app__works { 2 | flex: 1; 3 | width: 100%; 4 | flex-direction: column; 5 | } 6 | 7 | .app__work-filter { 8 | display: flex; 9 | flex-direction: row; 10 | justify-content: flex-start; 11 | align-items: center; 12 | flex-wrap: wrap; 13 | 14 | margin: 4rem 0 2rem; 15 | 16 | .app__work-filter-item { 17 | padding: 0.5rem 1rem; 18 | border-radius: 0.5rem; 19 | background-color: #fff; 20 | color: #000; 21 | font-weight: 800; 22 | 23 | cursor: pointer; 24 | transition: all 0.3s ease; 25 | margin: 0.5rem; 26 | 27 | &:hover { 28 | background-color: var(--secondary-color); 29 | color: #fff; 30 | } 31 | 32 | @media screen and (min-width: 2000px) { 33 | padding: 1rem 2rem; 34 | border-radius: 0.85rem; 35 | } 36 | } 37 | 38 | .item-active { 39 | background-color: var(--secondary-color); 40 | color: #fff; 41 | } 42 | } 43 | 44 | .app__work-portfolio { 45 | display: flex; 46 | flex-wrap: wrap; 47 | justify-content: center; 48 | align-items: center; 49 | 50 | .app__work-item { 51 | width: 270px; 52 | flex-direction: column; 53 | 54 | margin: 2rem; 55 | padding: 1rem; 56 | border-radius: 0.5rem; 57 | background-color: #fff; 58 | color: #000; 59 | 60 | cursor: pointer; 61 | transition: all 0.3s ease; 62 | 63 | &:hover { 64 | box-shadow: 0 0 25px rgba(0, 0, 0, 0.2); 65 | } 66 | 67 | @media screen and (min-width: 2000px) { 68 | width: 470px; 69 | padding: 1.25rem; 70 | border-radius: 0.75rem; 71 | } 72 | 73 | @media screen and (max-width: 300px) { 74 | width: 100%; 75 | margin: 1rem; 76 | } 77 | } 78 | } 79 | 80 | .app__work-img { 81 | width: 100%; 82 | height: 230px; 83 | 84 | position: relative; 85 | 86 | img { 87 | width: 100%; 88 | height: 100%; 89 | border-radius: 0.5rem; 90 | object-fit: cover; 91 | } 92 | 93 | @media screen and (min-width: 2000px) { 94 | height: 350px; 95 | } 96 | } 97 | 98 | .app__work-hover { 99 | position: absolute; 100 | top: 0; 101 | left: 0; 102 | bottom: 0; 103 | right: 0; 104 | width: 100%; 105 | height: 100%; 106 | background-color: rgba(0, 0, 0, 0.5); 107 | 108 | border-radius: 0.5rem; 109 | opacity: 0; 110 | transition: all 0.3s ease; 111 | 112 | div { 113 | width: 50px; 114 | height: 50px; 115 | border-radius: 50%; 116 | background-color: rgba(0, 0, 0, 0.5); 117 | color: #fff; 118 | 119 | margin: 1rem; 120 | font-family: var(--font-base); 121 | font-weight: 800; 122 | cursor: pointer; 123 | transition: all 0.3s ease; 124 | 125 | svg { 126 | width: 50%; 127 | height: 50%; 128 | color: var(--white-color); 129 | } 130 | } 131 | } 132 | 133 | .app__work-content { 134 | padding: 0.5rem; 135 | width: 100%; 136 | position: relative; 137 | flex-direction: column; 138 | 139 | h4 { 140 | margin-top: 1rem; 141 | line-height: 1.5; 142 | 143 | @media screen and (min-width: 2000px) { 144 | margin-top: 3rem; 145 | } 146 | } 147 | 148 | .app__work-tag { 149 | position: absolute; 150 | 151 | padding: 0.5rem 1rem; 152 | border-radius: 10px; 153 | background-color: #fff; 154 | top: -25px; 155 | } 156 | } 157 | -------------------------------------------------------------------------------- /src/container/Testimonial/Testimonial.scss: -------------------------------------------------------------------------------- 1 | .app__testimonial { 2 | flex: 1; 3 | width: 100%; 4 | flex-direction: column; 5 | } 6 | 7 | .app__testimonial-item { 8 | width: 60%; 9 | min-height: 320px; 10 | background-color: var(--white-color); 11 | display: flex; 12 | flex-direction: row; 13 | padding: 2rem; 14 | border-radius: 15px; 15 | box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1); 16 | 17 | transition: all 0.3s ease-in-out; 18 | 19 | img { 20 | width: 100px; 21 | height: 100px; 22 | border-radius: 50%; 23 | object-fit: cover; 24 | } 25 | 26 | @media screen and (min-width: 2000px) { 27 | min-height: 450px; 28 | 29 | img { 30 | width: 150px; 31 | height: 150px; 32 | } 33 | } 34 | 35 | @media screen and (max-width: 850px) { 36 | width: 100%; 37 | } 38 | 39 | @media screen and (max-width: 600px) { 40 | flex-direction: column; 41 | } 42 | } 43 | 44 | .app__testimonial-content { 45 | flex: 1; 46 | height: 100%; 47 | padding: 0 2rem; 48 | text-align: left; 49 | 50 | display: flex; 51 | flex-direction: column; 52 | justify-content: space-around; 53 | align-items: flex-start; 54 | 55 | p { 56 | font-size: 1.25rem; 57 | line-height: 2rem; 58 | color: var(--black-color); 59 | font-family: var(--font-base); 60 | 61 | @media screen and (min-width: 2000px) { 62 | font-size: 2rem; 63 | line-height: 3.5rem; 64 | } 65 | } 66 | 67 | h4 { 68 | font-weight: 600; 69 | color: var(--secondary-color); 70 | margin-top: 2rem; 71 | } 72 | 73 | h5 { 74 | font-weight: 400; 75 | color: var(--gray-color); 76 | margin-top: 5px; 77 | } 78 | 79 | @media screen and (max-width: 600px) { 80 | margin-top: 2rem; 81 | padding: 0; 82 | } 83 | } 84 | 85 | .app__testimonial-btns { 86 | flex-direction: row; 87 | margin-top: 1rem; 88 | 89 | div { 90 | width: 50px; 91 | height: 50px; 92 | border-radius: 50%; 93 | background-color: var(--white-color); 94 | 95 | margin: 1rem; 96 | transition: all 0.3s ease-in-out; 97 | 98 | svg { 99 | width: 20px; 100 | height: 20px; 101 | color: var(--secondary-color); 102 | } 103 | 104 | &:hover { 105 | background-color: var(--secondary-color); 106 | 107 | svg { 108 | color: var(--white-color); 109 | } 110 | } 111 | 112 | @media screen and (min-width: 2000px) { 113 | width: 100px; 114 | height: 100px; 115 | 116 | svg { 117 | width: 45px; 118 | height: 45px; 119 | } 120 | } 121 | } 122 | } 123 | 124 | .app__testimonial-brands { 125 | width: 80%; 126 | flex-wrap: wrap; 127 | margin-top: 2rem; 128 | 129 | div { 130 | width: 150px; 131 | margin: 1.5rem; 132 | 133 | img { 134 | width: 100%; 135 | height: auto; 136 | object-fit: cover; 137 | filter: grayscale(1); 138 | } 139 | 140 | &:hover { 141 | img { 142 | filter: grayscale(0); 143 | } 144 | } 145 | 146 | @media screen and (min-width: 2000px) { 147 | width: 210px; 148 | margin: 2rem; 149 | } 150 | 151 | @media screen and (max-width: 450px) { 152 | width: 120px; 153 | margin: 1rem; 154 | } 155 | } 156 | 157 | @media screen and (max-width: 800px) { 158 | width: 100%; 159 | } 160 | } 161 | -------------------------------------------------------------------------------- /src/container/Skills/Skills.scss: -------------------------------------------------------------------------------- 1 | .app__skills { 2 | flex: 1; 3 | width: 100%; 4 | flex-direction: column; 5 | } 6 | 7 | .app__skills-container { 8 | width: 80%; 9 | margin-top: 3rem; 10 | 11 | display: flex; 12 | flex-direction: row; 13 | 14 | @media screen and (max-width: 900px) { 15 | width: 100%; 16 | flex-direction: column; 17 | } 18 | } 19 | 20 | .app__skills-list { 21 | flex: 1; 22 | display: flex; 23 | flex-wrap: wrap; 24 | justify-content: flex-start; 25 | align-items: flex-start; 26 | 27 | margin-right: 5rem; 28 | 29 | @media screen and (max-width: 900px) { 30 | margin-right: 0; 31 | justify-content: center; 32 | align-items: center; 33 | } 34 | } 35 | 36 | .app__skills-item { 37 | flex-direction: column; 38 | text-align: center; 39 | 40 | margin: 1rem; 41 | 42 | transition: all 0.3s ease-in-out; 43 | 44 | div { 45 | width: 90px; 46 | height: 90px; 47 | border-radius: 50%; 48 | transition: 300ms ease-in-out; 49 | background-color: #161032; 50 | 51 | img { 52 | width: 50%; 53 | height: 50%; 54 | } 55 | 56 | &:hover { 57 | transition: all 200ms ease-in-out; 58 | transform: rotate(25deg); 59 | // box-shadow: 0px 0px 5px 3px #f45b69; 60 | } 61 | 62 | @media screen and (min-width: 2000px) { 63 | width: 150px; 64 | height: 150px; 65 | } 66 | 67 | @media screen and (max-width: 450px) { 68 | width: 70px; 69 | height: 70px; 70 | } 71 | } 72 | 73 | p { 74 | font-weight: 500; 75 | margin-top: 0.5rem; 76 | } 77 | 78 | @media screen and (min-width: 2000px) { 79 | margin: 1rem 2rem; 80 | 81 | p { 82 | margin-top: 1rem; 83 | } 84 | } 85 | } 86 | 87 | .app__skills-exp { 88 | flex: 1; 89 | display: flex; 90 | justify-content: flex-start; 91 | align-items: flex-start; 92 | flex-direction: column; 93 | 94 | @media screen and (max-width: 900px) { 95 | margin-top: 2rem; 96 | } 97 | } 98 | 99 | .app__skills-exp-item { 100 | width: 100%; 101 | display: flex; 102 | flex-direction: row; 103 | justify-content: flex-start; 104 | align-items: flex-start; 105 | margin: 1rem 0; 106 | } 107 | 108 | .app__skills-exp-works { 109 | flex: 1; 110 | 111 | .app__skills-exp-work { 112 | display: flex; 113 | flex-direction: column; 114 | justify-content: flex-start; 115 | align-items: flex-start; 116 | margin-bottom: 1rem; 117 | cursor: pointer; 118 | 119 | h4 { 120 | font-weight: 500; 121 | } 122 | 123 | p { 124 | font-weight: 400; 125 | color: var(--gray-color); 126 | margin-top: 5px; 127 | } 128 | } 129 | } 130 | 131 | .app__skills-exp-year { 132 | margin-right: 3rem; 133 | 134 | p { 135 | font-weight: 800; 136 | color: var(--secondary-color); 137 | } 138 | 139 | @media screen and (max-width: 450px) { 140 | margin-right: 1rem; 141 | } 142 | } 143 | 144 | .skills-tooltip { 145 | max-width: 300px !important; 146 | background-color: var(--white-color) !important; 147 | box-shadow: 0 0 25px rgba(0, 0, 0, 0.1) !important; 148 | border-radius: 5px !important; 149 | padding: 1rem !important; 150 | color: var(--gray-color) !important; 151 | text-align: center !important; 152 | line-height: 1.5 !important; 153 | opacity: 1 !important; 154 | 155 | @media screen and (min-width: 2000px) { 156 | font-size: 1.75rem !important; 157 | max-width: 500px !important; 158 | line-height: 2 !important; 159 | } 160 | } 161 | -------------------------------------------------------------------------------- /src/components/Navbar/Navbar.scss: -------------------------------------------------------------------------------- 1 | .app__navbar { 2 | width: 100%; 3 | 4 | display: flex; 5 | justify-content: space-between; 6 | align-items: center; 7 | 8 | padding: 1rem 2rem; 9 | background: rgba(255, 255, 255, 0.25); 10 | // box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); 11 | backdrop-filter: blur(4px); 12 | -webkit-backdrop-filter: blur(4px); 13 | border: 1px solid rgba(255, 255, 255, 0.18); 14 | position: fixed; 15 | z-index: 2; 16 | } 17 | 18 | .app__navbar-logo { 19 | display: flex; 20 | justify-content: flex-start; 21 | align-items: center; 22 | 23 | img { 24 | width: 90px; 25 | height: 20px; 26 | 27 | @media screen and (min-width: 2000px) { 28 | width: 180px; 29 | height: 40px; 30 | } 31 | } 32 | } 33 | 34 | .app__navbar-links { 35 | flex: 1; 36 | display: flex; 37 | justify-content: center; 38 | align-items: center; 39 | 40 | list-style: none; 41 | 42 | li { 43 | margin: 0 1rem; 44 | cursor: pointer; 45 | 46 | flex-direction: column; 47 | 48 | div { 49 | width: 5px; 50 | height: 5px; 51 | background: transparent; 52 | border-radius: 50%; 53 | 54 | margin-bottom: 5px; 55 | } 56 | 57 | a { 58 | color: var(--gray-color); 59 | text-decoration: none; 60 | flex-direction: column; 61 | 62 | text-transform: uppercase; 63 | font-weight: 500; 64 | 65 | transition: all 0.3s ease-in-out; 66 | 67 | &:hover { 68 | color: var(--secondary-color); 69 | } 70 | } 71 | 72 | &:hover { 73 | div { 74 | background: var(--secondary-color); 75 | } 76 | } 77 | } 78 | 79 | @media screen and (max-width: 900px) { 80 | display: none; 81 | } 82 | } 83 | 84 | .app__navbar-menu { 85 | width: 35px; 86 | height: 35px; 87 | border-radius: 50%; 88 | position: relative; 89 | 90 | display: flex; 91 | justify-content: center; 92 | align-items: center; 93 | background-color: var(--secondary-color); 94 | 95 | svg { 96 | width: 70%; 97 | height: 70%; 98 | color: var(--white-color); 99 | } 100 | 101 | div { 102 | position: fixed; 103 | top: 0; 104 | bottom: 0; 105 | right: 0; 106 | z-index: 5; 107 | 108 | padding: 1rem; 109 | 110 | width: 80%; 111 | height: 100vh; 112 | 113 | display: flex; 114 | justify-content: flex-end; 115 | align-items: flex-end; 116 | flex-direction: column; 117 | 118 | background: url("../../assets/bgWhite.png"); 119 | background-color: var(--white-color); 120 | background-size: cover; 121 | background-repeat: repeat; 122 | 123 | /* top box shadow */ 124 | box-shadow: 0px 0px 20px rgba(168, 168, 168, 0.15); 125 | 126 | svg { 127 | width: 35px; 128 | height: 35px; 129 | color: var(--secondary-color); 130 | margin: 0.5rem 1rem; 131 | } 132 | 133 | ul { 134 | list-style: none; 135 | margin: 0; 136 | padding: 0; 137 | height: 100%; 138 | width: 100%; 139 | 140 | display: flex; 141 | justify-content: flex-start; 142 | align-items: flex-start; 143 | flex-direction: column; 144 | 145 | li { 146 | margin: 1rem; 147 | 148 | a { 149 | color: var(--gray-color); 150 | text-decoration: none; 151 | font-size: 1rem; 152 | text-transform: uppercase; 153 | font-weight: 500; 154 | 155 | transition: all 0.3s ease-in-out; 156 | 157 | &:hover { 158 | color: var(--secondary-color); 159 | } 160 | } 161 | } 162 | } 163 | 164 | @media screen and (min-width: 900px) { 165 | display: none; 166 | } 167 | } 168 | 169 | @media screen and (min-width: 900px) { 170 | display: none; 171 | } 172 | } 173 | -------------------------------------------------------------------------------- /src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 17 | 19 | 20 | 22 | image/svg+xml 23 | 25 | 26 | 27 | 28 | 40 | 42 | 47 | 50 | 51 | 56 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /src/App.scss: -------------------------------------------------------------------------------- 1 | .app { 2 | background-color: var(--primary-color); 3 | font-family: var(--font-base); 4 | } 5 | 6 | .app__whitebg { 7 | background-color: var(--white-color); 8 | } 9 | 10 | .app__primarybg { 11 | background-color: var(--primary-color); 12 | } 13 | 14 | .app__container { 15 | width: 100%; 16 | min-height: 100vh; 17 | 18 | display: flex; 19 | flex-direction: row; 20 | } 21 | 22 | .app__flex { 23 | display: flex; 24 | justify-content: center; 25 | align-items: center; 26 | } 27 | 28 | .app__wrapper { 29 | flex: 1; 30 | width: 100%; 31 | flex-direction: column; 32 | padding: 4rem 2rem; 33 | 34 | @media screen and (max-width: 450px) { 35 | padding: 4rem 1rem 2rem; 36 | } 37 | } 38 | 39 | .copyright { 40 | width: 100%; 41 | padding: 2rem 0 0; 42 | 43 | display: flex; 44 | flex-direction: column; 45 | justify-content: flex-end; 46 | align-items: flex-end; 47 | 48 | p { 49 | text-transform: uppercase; 50 | color: var(--black-color); 51 | } 52 | } 53 | 54 | .head-text { 55 | font-size: 2.75rem; 56 | font-weight: 800; 57 | text-align: center; 58 | color: var(--black-color); 59 | text-transform: capitalize; 60 | 61 | span { 62 | color: var(--secondary-color); 63 | } 64 | 65 | @media screen and (min-width: 2000px) { 66 | font-size: 4rem; 67 | } 68 | 69 | @media screen and (max-width: 450px) { 70 | font-size: 2rem; 71 | } 72 | } 73 | 74 | .p-text { 75 | font-size: 0.8rem; 76 | text-align: left; 77 | color: var(--gray-color); 78 | line-height: 1.5; 79 | 80 | @media screen and (min-width: 2000px) { 81 | font-size: 1.75rem; 82 | } 83 | } 84 | 85 | .bold-text { 86 | font-size: 1rem; 87 | font-weight: 800; 88 | color: var(--black-color); 89 | text-align: left; 90 | 91 | @media screen and (min-width: 2000px) { 92 | font-size: 2rem; 93 | } 94 | 95 | @media screen and (max-width: 450px) { 96 | font-size: 0.9rem; 97 | } 98 | } 99 | 100 | .app__social { 101 | display: flex; 102 | justify-content: flex-end; 103 | align-items: center; 104 | flex-direction: column; 105 | 106 | padding: 1rem; 107 | 108 | div { 109 | width: 40px; 110 | height: 40px; 111 | border-radius: 50%; 112 | background-color: var(--white-color); 113 | margin: 0.25rem 0; 114 | border: 1px solid var(--lightGray-color); 115 | 116 | display: flex; 117 | justify-content: center; 118 | align-items: center; 119 | 120 | transition: all 0.3s ease-in-out; 121 | 122 | svg { 123 | width: 15px; 124 | height: 15px; 125 | color: var(--gray-color); 126 | } 127 | 128 | &:hover { 129 | background-color: var(--secondary-color); 130 | border-color: var(--secondary-color); 131 | 132 | svg { 133 | color: var(--white-color); 134 | } 135 | } 136 | 137 | @media screen and (min-width: 2000px) { 138 | width: 70px; 139 | height: 70px; 140 | 141 | margin: 0.5rem 0; 142 | 143 | svg { 144 | width: 30px; 145 | height: 30px; 146 | } 147 | } 148 | } 149 | } 150 | 151 | .app__navigation { 152 | display: flex; 153 | justify-content: center; 154 | align-items: center; 155 | flex-direction: column; 156 | 157 | padding: 1rem; 158 | 159 | .app__navigation-dot { 160 | width: 10px; 161 | height: 10px; 162 | border-radius: 50%; 163 | background-color: #cbcbcb; 164 | margin: 0.5rem; 165 | 166 | transition: background-color 0.2s ease-in-out; 167 | 168 | &:hover { 169 | background-color: var(--secondary-color); 170 | } 171 | 172 | @media screen and (min-width: 2000px) { 173 | width: 20px; 174 | height: 20px; 175 | } 176 | } 177 | } 178 | 179 | @media screen and (max-width: 500px) { 180 | .app__navigation, 181 | .app__social { 182 | display: none; 183 | } 184 | 185 | .copyright { 186 | padding: 2rem; 187 | } 188 | } 189 | -------------------------------------------------------------------------------- /src/container/Header/Header.scss: -------------------------------------------------------------------------------- 1 | #home { 2 | position: relative; 3 | background: url("../../assets/bgIMG.png"); 4 | background-size: cover; 5 | background-repeat: repeat; 6 | background-position: center; 7 | 8 | .app__wrapper { 9 | padding: 0; 10 | 11 | .copywright { 12 | display: none; 13 | } 14 | } 15 | } 16 | 17 | .app__header { 18 | flex: 1; 19 | width: 100%; 20 | height: 100%; 21 | flex-direction: row; 22 | 23 | padding: 6rem 2rem 0; 24 | 25 | @media screen and (min-width: 2000px) { 26 | padding-top: 8rem; 27 | } 28 | 29 | @media screen and (max-width: 1200px) { 30 | flex-direction: column; 31 | } 32 | 33 | @media screen and (max-width: 400px) { 34 | padding: 6rem 1rem 2rem; 35 | } 36 | } 37 | 38 | .app__header-info { 39 | flex: 0.65; 40 | display: flex; 41 | flex-direction: column; 42 | justify-content: flex-start; 43 | align-items: flex-start; 44 | height: 100%; 45 | 46 | @media screen and (max-width: 2000px) { 47 | width: 100%; 48 | margin-right: 0rem; 49 | } 50 | } 51 | 52 | .app__header-badge { 53 | width: 100%; 54 | display: flex; 55 | justify-content: flex-end; 56 | align-items: flex-end; 57 | flex-direction: column; 58 | 59 | .badge-cmp, 60 | .tag-cmp { 61 | padding: 1rem 2rem; 62 | border: var(--white-color); 63 | border-radius: 15px; 64 | flex-direction: row; 65 | width: auto; 66 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); 67 | } 68 | 69 | .tag-cmp { 70 | flex-direction: column; 71 | margin-top: 3rem; 72 | 73 | p { 74 | width: 100%; 75 | text-transform: uppercase; 76 | text-align: right; 77 | } 78 | } 79 | 80 | span { 81 | font-size: 2.5rem; 82 | 83 | @media screen and (min-width: 2000px) { 84 | font-size: 5rem; 85 | } 86 | } 87 | 88 | @media screen and (max-width: 1200px) { 89 | justify-content: flex-start; 90 | align-items: flex-start; 91 | } 92 | } 93 | 94 | .app__header-circles { 95 | flex: 0.75; 96 | display: flex; 97 | flex-direction: column; 98 | justify-content: space-evenly; 99 | align-items: flex-start; 100 | height: 100%; 101 | margin-left: 1rem; 102 | 103 | div { 104 | width: 100px; 105 | height: 100px; 106 | border-radius: 50%; 107 | 108 | background: var(--white-color); 109 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); 110 | 111 | img { 112 | width: 60%; 113 | height: 60%; 114 | } 115 | } 116 | 117 | div:nth-child(1) { 118 | width: 100px; 119 | height: 100px; 120 | } 121 | 122 | div:nth-child(2) { 123 | margin: 1.75rem; 124 | width: 100px; 125 | height: 100px; 126 | } 127 | 128 | div:nth-child(3) { 129 | width: 70px; 130 | height: 70px; 131 | } 132 | 133 | @media screen and (min-width: 2000px) { 134 | div:nth-child(1) { 135 | width: 400px; 136 | height: 400px; 137 | } 138 | 139 | div:nth-child(2) { 140 | width: 170px; 141 | height: 170px; 142 | } 143 | 144 | div:nth-child(3) { 145 | width: 200px; 146 | height: 200px; 147 | } 148 | } 149 | 150 | @media screen and (max-width: 1200px) { 151 | width: 100%; 152 | flex-direction: row; 153 | flex-wrap: wrap; 154 | margin-left: 0; 155 | 156 | div { 157 | margin: 1rem; 158 | } 159 | } 160 | } 161 | 162 | .app__header-img { 163 | flex: 0.4; 164 | height: 60%; 165 | 166 | display: flex; 167 | justify-content: flex-end; 168 | align-items: flex-end; 169 | position: relative; 170 | 171 | img { 172 | width: 100%; 173 | object-fit: contain; 174 | z-index: 1; 175 | } 176 | 177 | .overlay_circle { 178 | position: absolute; 179 | left: 0; 180 | right: 0; 181 | bottom: 0; 182 | z-index: 0; 183 | width: 100%; 184 | height: 90%; 185 | } 186 | 187 | @media screen and (max-width: 1200px) { 188 | margin: 2rem 0; 189 | } 190 | } 191 | -------------------------------------------------------------------------------- /src/container/Work/Work.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import { AiFillEye, AiFillGithub } from 'react-icons/ai'; 3 | import { motion } from 'framer-motion'; 4 | 5 | import { AppWrap, MotionWrap } from '../../wrapper'; 6 | import { urlFor, client } from '../../client'; 7 | import './Work.scss'; 8 | 9 | const Work = () => { 10 | const [works, setWorks] = useState([]); 11 | const [filterWork, setFilterWork] = useState([]); 12 | const [activeFilter, setActiveFilter] = useState('All'); 13 | const [animateCard, setAnimateCard] = useState({ y: 0, opacity: 1 }); 14 | 15 | useEffect(() => { 16 | const query = '*[_type == "works"]'; 17 | 18 | client.fetch(query).then((data) => { 19 | setWorks(data); 20 | setFilterWork(data); 21 | }); 22 | }, []); 23 | 24 | const handleWorkFilter = (item) => { 25 | setActiveFilter(item); 26 | setAnimateCard([{ y: 100, opacity: 0 }]); 27 | 28 | setTimeout(() => { 29 | setAnimateCard([{ y: 0, opacity: 1 }]); 30 | 31 | if (item === 'All') { 32 | setFilterWork(works); 33 | } else { 34 | setFilterWork(works.filter((Work) => Work.tags.includes(item))); 35 | } 36 | }, 500); 37 | }; 38 | 39 | return ( 40 | <> 41 |

Project Experience

42 | 43 | {/* Add Project Categories Here */} 44 | 45 |
46 | {['Web App', 'React JS', 'All'].map((item, index) => ( 47 |
handleWorkFilter(item)} 50 | className={`app__work-filter-item app__flex p-text ${activeFilter === item ? 'item-active' : ''}`} 51 | > 52 | {item} 53 |
54 | ))} 55 |
56 | 57 | 62 | {filterWork.map((Work, index) => ( 63 |
64 |
67 | {Work.name} 68 | 69 | 74 | 75 | 76 | 82 | 83 | 84 | 85 | 86 | 92 | 93 | 94 | 95 | 96 |
97 | 98 |
99 |

{Work.title}

100 |

{Work.description}

101 | 102 |
103 |

{Work.tags}

104 |
105 |
106 |
107 | ))} 108 | 109 | 110 | ); 111 | }; 112 | 113 | export default AppWrap( 114 | MotionWrap(Work, 'app__works'), 115 | 'work', 116 | "app__primarybg" 117 | ); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # My Personal Portfolio 2 | 3 | Check out the Live Website - https://piyushmalhotra.netlify.app/ 4 | 5 | ![portfolio_home](https://user-images.githubusercontent.com/46517096/157948019-0e3a81f9-9905-46fb-b1d0-caa139572378.png) 6 | ![portfolio_about](https://user-images.githubusercontent.com/46517096/157948099-8c6021df-547d-48bd-ac95-a9a83adfa54e.png) 7 | ![portfolio_work](https://user-images.githubusercontent.com/46517096/157948112-843aedce-307b-4f0e-bf57-bde71d59cb28.png) 8 | ![portfolio_skills](https://user-images.githubusercontent.com/46517096/157948123-7adee8ee-8618-4946-90e9-6080d69d52ca.png) 9 | 10 | 11 | ## About 12 | Been long enough since I've been learning to code. So I figured it would be a good idea to make a well designed and an aesthetically pleasing portfolio. And here we are, I followed some tutorials on youtube, and then added my own personal touches to it. Overall, it was a good learning experience. My main objective was to learn React JS and if along the way, I get to make an impressive portfolio, why not? 13 | 14 | ## Things I Learned 15 | - React JS - I knew React before but was still rusty in it a little bit so this project gave me a lot of confidence in using it and hopefully I'll be able to create more interesting projects with it and increase my proficiency. 16 | - Framer-Motion - I was familiar with this animation library via Youtube and was just astounded how easy it was to use and integrate inside the code to get some smooth animations! 17 | - Sanity - Never heard of Sanity before this project came along. A super simple Content Management System so that people who don't know how to write code can easily change things for their website without ever breaking it. The ease of use with which you can customize the content inside it is insane. 18 | - UI/UX Design Flows - Learning UI/UX design as a developer solidifies your understanding of good design and workflows. 19 | 20 | ## Problems I Encountered 21 | Of Course there are always error that may pop up when creating a project. These were some of them: 22 | - Render problems for some React components due to some names that I misspelled, a silly mistake which happens a lot in programming. 23 | - Sanity failed to reload when I added something new to the website, after spending some time on the internet, I was able to find a solution. 24 | - Some styling bugs in various devices which were solved by playing around with them for some time. 25 | 26 | ## My Takeaways 27 | This is probably my first "Proper" personal project that I made which is live on the internet. Along with the techy "things" that I learned, I would like to share some general tips that may help others while creating big projects like this one. 28 | - TAKE BREAKS! It's important to feel fresh when you're working on something and it's not a race so its okay if a bug is taking you a whole day to solve or you just don't have the energy to do anything right now. 29 | - Don't let your ego get in the way of being efficient. Use whichever tools you like whether other people use them or not. You need to be comfortable with what you work with. 30 | - Ask for help whenever you can, from wherever you can. The ego part comes again here. You don't know everything and neither does other programmers. We are all in an awesome community and we are here to help each other grow. 31 | 32 | 33 | # React & Project Info 34 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 35 | 36 | ## Available Scripts 37 | 38 | In the project directory, you can run: 39 | 40 | ### `npm start` 41 | 42 | Runs the app in the development mode.\ 43 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 44 | 45 | The page will reload when you make changes.\ 46 | You may also see any lint errors in the console. 47 | 48 | ### `npm test` 49 | 50 | Launches the test runner in the interactive watch mode.\ 51 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 52 | 53 | ### `npm run build` 54 | 55 | Builds the app for production to the `build` folder.\ 56 | It correctly bundles React in production mode and optimizes the build for the best performance. 57 | 58 | The build is minified and the filenames include the hashes.\ 59 | Your app is ready to be deployed! 60 | 61 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 62 | 63 | ### `npm run eject` 64 | 65 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 66 | 67 | 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. 68 | 69 | 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. 70 | 71 | 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. 72 | 73 | ## Learn More 74 | 75 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 76 | 77 | To learn React, check out the [React documentation](https://reactjs.org/). 78 | 79 | ### Code Splitting 80 | 81 | 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) 82 | 83 | ### Analyzing the Bundle Size 84 | 85 | 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) 86 | 87 | ### Making a Progressive Web App 88 | 89 | 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) 90 | 91 | ### Advanced Configuration 92 | 93 | 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) 94 | 95 | ### Deployment 96 | 97 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 98 | 99 | ### `npm run build` fails to minify 100 | 101 | 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) 102 | --------------------------------------------------------------------------------