├── src
    ├── pages
    │   ├── experience.js
    │   ├── contact.js
    │   ├── about.js
    │   ├── skills.js
    │   ├── certifications.js
    │   └── projects.js
    ├── images
    │   ├── new-logo.png
    │   └── Eshaan-Photo.jpeg
    ├── styles
    │   ├── MesloLGS-Regular.ttf
    │   ├── contact.scss
    │   ├── footer.scss
    │   ├── skills.scss
    │   ├── projects.scss
    │   ├── certifications.scss
    │   ├── about.scss
    │   ├── navbar.scss
    │   └── App.scss
    ├── components
    │   ├── head.js
    │   ├── email.js
    │   ├── social.js
    │   ├── App.js
    │   ├── navbar.js
    │   └── footer.js
    ├── setupTests.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    └── serviceWorker.js
├── public
    ├── _redirects
    ├── robots.txt
    ├── new-logo.png
    ├── manifest.json
    └── index.html
├── .gitignore
├── README.md
├── LICENSE
├── package.json
└── debug.log


/src/pages/experience.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/public/_redirects:
--------------------------------------------------------------------------------
1 | /*  /index.html  200


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/new-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/eshaan007/My-Portfolio-v1/HEAD/public/new-logo.png


--------------------------------------------------------------------------------
/src/images/new-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/eshaan007/My-Portfolio-v1/HEAD/src/images/new-logo.png


--------------------------------------------------------------------------------
/src/images/Eshaan-Photo.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/eshaan007/My-Portfolio-v1/HEAD/src/images/Eshaan-Photo.jpeg


--------------------------------------------------------------------------------
/src/styles/MesloLGS-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/eshaan007/My-Portfolio-v1/HEAD/src/styles/MesloLGS-Regular.ttf


--------------------------------------------------------------------------------
/src/components/head.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Helmet } from 'react-helmet'
 3 | 
 4 | const Head = () => {
 5 |     return(
 6 |         <Helmet title="Eshaan Khurana | Portfolio"/>
 7 |     )
 8 | }
 9 | 
10 | export default Head


--------------------------------------------------------------------------------
/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/extend-expect';
6 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render } from '@testing-library/react';
 3 | import App from './App';
 4 | 
 5 | test('renders learn react link', () => {
 6 |   const { getByText } = render(<App />);
 7 |   const linkElement = getByText(/learn react/i);
 8 |   expect(linkElement).toBeInTheDocument();
 9 | });
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 |   background-color: #0a192f;
 9 | }
10 | 
11 | code {
12 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
13 |     monospace;
14 | }
15 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.css';
 4 | import App from './components/App';
 5 | import * as serviceWorker from './serviceWorker';
 6 | 
 7 | ReactDOM.render(
 8 |   <React.StrictMode>
 9 |     <App />
10 |   </React.StrictMode>,
11 |   document.getElementById('root')
12 | );
13 | 
14 | // If you want your app to work offline and load faster, you can change
15 | // unregister() to register() below. Note this comes with some pitfalls.
16 | // Learn more about service workers: https://bit.ly/CRA-PWA
17 | serviceWorker.unregister();
18 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "Eshaan Khurana",
 3 |   "name": "Welcome to Eshaan Khurana's Home!",
 4 |   "icons": [
 5 |     {
 6 |       "src": "/new-logo.png",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "/new-logo.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "/new-logo.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/components/email.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';                              
 2 | 
 3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 4 | import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
 5 | 
 6 | class Email extends Component {
 7 |     render() {
 8 |         return(
 9 |             <div id="Email-section">
10 |                 <a className="sign" href="mailto:eshaany2k@gmail.com" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon className="fontHai" icon={faEnvelope} size="1x" color="#2bbc8a"/></a> {   }
11 |             </div>
12 |         );
13 |     }
14 | }
15 | 
16 | export default Email;
17 | 
18 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | <h1 align="center"> <strong> My Portfolio </strong> </h1>
 3 | 
 4 | Having a portfolio of my own was always something I personally wanted. But developing it on my own is **THE THING** I am proud of most *Right Now.*
 5 | 
 6 | <p>
 7 |   I would keep updating it as time passes by. <strong>Do :star: the Repository if the design and template looks good!</strong> It motivates me to design and develop many more beautiful websites on my own .. Cheers!!
 8 | </p>
 9 |   
10 | <h3 align="center">
11 |   Made with ❤️ by <strong>Eshaan Khurana</strong> using <img src="https://cdn2.iconfinder.com/data/icons/designer-skills/128/react-512.png" width="30"     align="center">
12 | </h3>
13 | 
14 | <p align="center">
15 |   <a href="https://app.netlify.com/sites/eshaankhurana/deploys">
16 |       <img src="https://api.netlify.com/api/v1/badges/2f1563cd-34c6-492b-8d6d-59d25b28045b/deploy-status" align="center">
17 |   </a>
18 | </p>
19 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Eshaan Khurana
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "portfolio",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@fortawesome/fontawesome-svg-core": "^1.2.36",
 7 |     "@fortawesome/free-brands-svg-icons": "^5.15.4",
 8 |     "@fortawesome/free-solid-svg-icons": "^5.15.4",
 9 |     "@fortawesome/react-fontawesome": "^0.1.16",
10 |     "@testing-library/jest-dom": "^4.2.4",
11 |     "@testing-library/react": "^9.3.2",
12 |     "@testing-library/user-event": "^7.1.2",
13 |     "caniuse-lite": "^1.0.30001296",
14 |     "react": "^18.2.0",
15 |     "react-dom": "^18.2.0",
16 |     "react-helmet": "^6.0.0",
17 |     "react-reveal": "^1.2.2",
18 |     "react-rotating-text": "^1.4.1",
19 |     "react-scripts": "^2.1.3",
20 |     "sass": "^1.45.2",
21 |     "simple-flexbox": "^2.3.3"
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": "react-app"
31 |   },
32 |   "browserslist": {
33 |     "production": [
34 |       ">0.2%",
35 |       "not dead",
36 |       "not op_mini all"
37 |     ],
38 |     "development": [
39 |       "last 1 chrome version",
40 |       "last 1 firefox version",
41 |       "last 1 safari version"
42 |     ]
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/src/components/social.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';                              
 2 | 
 3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 4 | import { faGithub, faLinkedinIn, faMediumM, faTwitter} from '@fortawesome/free-brands-svg-icons'
 5 | 
 6 | class Social extends Component {
 7 |     render() {
 8 |         return(
 9 |             <div id="Social-section">
10 |                 <div className="logos">  
11 |                     <a className="sign" href="https://github.com/eshaan007/" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon className="fontHai" icon={faGithub} size="1x" color="#2bbc8a"/></a> {   }                    
12 |                     <a className="sign" href="https://linkedin.com/in/eshaan-khurana/" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon className="fontHai" icon={faLinkedinIn} size="1x" color="#2bbc8a"/></a> {    }
13 |                     <a className="sign" href="https://medium.com/@eshaany2k/" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon className="fontHai" icon={faMediumM} size="1x" color="#2bbc8a"/></a> {    }
14 |                     <a className="sign" href="https://twitter.com/eshaaaan007" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon className="fontHai" icon={faTwitter} size="1x" color="#2bbc8a"/></a> {    }
15 |                 </div>
16 |             </div>
17 |         );
18 |     }
19 | }
20 | 
21 | export default Social;


--------------------------------------------------------------------------------
/src/styles/contact.scss:
--------------------------------------------------------------------------------
 1 | $link-color: #2bbc8a; // slateblue
 2 | @font-face {
 3 |     font-style: normal;
 4 |     font-family: "Meslo LG";
 5 |     src: local("Meslo LG S"), url("./MesloLGS-Regular.ttf") format("truetype");
 6 |     font-display: swap;
 7 |   }
 8 |   
 9 | .cent-line {
10 |     color: $link-color;
11 |     font-size: 1.6rem;
12 |     // font-family: 'Roboto Mono', monospace;
13 |     font-family: "Source Sans Pro", sans-serif;
14 |     transition: color .2s ease-out;
15 |     text-align: center;
16 | 
17 |     &:hover {
18 |         transition: all .3s ease-in-out;
19 |         color: $link-color;
20 |     }
21 |   
22 |     @media only screen and (max-width: 600px) {
23 |         font-size: 1rem;
24 |         margin-top: 0px;
25 |         display: block;
26 |         margin-left: auto;
27 |         margin-right: auto;
28 |         width: 95%;
29 |     }
30 | }
31 | 
32 | .logos {
33 |     display: block;
34 |     text-align: center;
35 | }
36 | 
37 | .logoc {
38 |     width: 40px;
39 |     padding: 15px;
40 |     transition: all .3s ease-in-out;
41 |     margin: 10px;
42 |     vertical-align: middle;
43 | 
44 |     &:hover {
45 |         transition: all .3s ease-in-out;
46 |         color: #ffffff;
47 |     }
48 | 
49 |     @media only screen and (max-width: 600px) {
50 |         padding: 0px;
51 |         width: 22px;
52 |     }
53 | }
54 | 
55 | .sign {
56 |     margin-left: 20px;
57 |     margin-left: 400px;
58 | 
59 |     @media only screen and (max-width: 600px) {
60 |         
61 |         margin-left: 5px;
62 |         margin-right: 5px;
63 |     }
64 | }
65 | 
66 | .fontHai {
67 |     @media only screen and (max-width: 600px) {
68 |         max-width: 30px;
69 |     }
70 | }


--------------------------------------------------------------------------------
/src/components/App.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';                              
 2 | import '../styles/App.scss';
 3 | import Head from './head.js';
 4 | import Navbar from './navbar.js';
 5 | import About from '../pages/about.js';
 6 | import Skills from '../pages/skills.js';
 7 | import Projects from '../pages/projects.js';
 8 | import Footer from '../components/footer.js';
 9 | // import Contact from '../pages/contact.js';
10 | import Fade from 'react-reveal/Fade';
11 | import Certifications from '../pages/certifications.js';
12 | import me from '../images/Eshaan-Photo.jpeg';
13 | 
14 | class App extends Component {
15 |   render() {
16 |   return (
17 |     <div id="top" className="App">
18 |       <Head />
19 |       <Navbar />
20 |       <article className = "contain">
21 |         <Fade bottom>
22 |           <h4 className="intro"> <span className="animate-hand" role="img" aria-label="hand-wave">👋</span> Hi, my name is </h4>
23 |         <Fade bottom cascade>
24 |           <h2 className="name">Eshaan Khurana.</h2>
25 |         </Fade>
26 |         <h2 className="aftername"> I Lead Products to Success.</h2>
27 |         <h4 className="desc">I'm a Product Manager based in India specializing in Managing products, Leading people and getting <b>Work Done!</b>
28 |         </h4>
29 | 
30 |         <p>
31 |           <button className="arrow-link" target="_blank" rel="noopener noreferrer">
32 |             <a className="mail" href="mailto:eshaany2k@gmail.com">
33 |               Get in touch
34 |             </a>
35 |           </button>
36 |         </p>
37 |         </Fade>
38 |       </article> 
39 |       <Fade bottom>
40 |       <img className="me" src = {me} alt="Eshaan"/>
41 |       </Fade>
42 |       <About />
43 |       <Skills />
44 |       <Certifications />
45 |       <Projects />
46 |       {/* <Contact/> */}
47 |       <Footer />
48 |     </div>
49 |   );
50 | }
51 | }
52 | 
53 | export default App;
54 | 


--------------------------------------------------------------------------------
/src/pages/contact.js:
--------------------------------------------------------------------------------
 1 | import React, { Component} from 'react';
 2 | import '../styles/contact.scss';
 3 | import Fade from 'react-reveal/Fade';
 4 | 
 5 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 6 | import { faGithub, faLinkedinIn, faMediumM, faTwitter} from '@fortawesome/free-brands-svg-icons'
 7 | import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
 8 | 
 9 | 
10 | class Contact extends Component {
11 |     render() {
12 |     return(
13 |         <Fade bottom>
14 |             <div id="Contact-section" className="cont">
15 |                 <h2 className="cent-line"> I am available for any new collabs, opportunities and ideas here : </h2>
16 |                 <div className="logos">  
17 |                     <a className="sign" href="https://github.com/eshaan007/" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon className="fontHai" icon={faGithub} size="3x" color="#2bbc8a"/></a> {   }
18 |                     <a className="sign" href="mailto:eshaany2k@gmail.com" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon className="fontHai" icon={faEnvelope} size="3x" color="#2bbc8a"/></a> {   }
19 |                     <a className="sign" href="https://linkedin.com/in/eshaan-khurana/" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon className="fontHai" icon={faLinkedinIn} size="3x" color="#2bbc8a"/></a> {    }
20 |                     <a className="sign" href="https://medium.com/@eshaany2k/" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon className="fontHai" icon={faMediumM} size="3x" color="#2bbc8a"/></a> {    }
21 |                     <a className="sign" href="https://twitter.com/eshaaaan007" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon className="fontHai" icon={faTwitter} size="3x" color="#2bbc8a"/></a> {    }
22 |                </div>
23 |             </div>
24 |         </Fade>
25 |     );
26 |     }
27 | }
28 | 
29 | export default Contact;


--------------------------------------------------------------------------------
/src/styles/footer.scss:
--------------------------------------------------------------------------------
 1 | $link-color: #2bbc8a; // slateblue
 2 | @font-face {
 3 |     font-style: normal;
 4 |     font-family: "Meslo LG";
 5 |     src: local("Meslo LG S"), url("./MesloLGS-Regular.ttf") format("truetype");
 6 |     font-display: swap;
 7 |   }
 8 |   
 9 | .intro1 {
10 |     // font-family: 'Roboto Mono', monospace;
11 |     font-family: "Source Sans Pro", sans-serif;
12 |     font-size: 1.3rem;
13 |     font-weight: bold;
14 |     line-height: 0px;
15 |     // text-align: center;
16 |     display: block;
17 |     color: white;
18 | 
19 |     @media only screen and (max-width: 600px) {
20 |         margin-top: 0px;
21 |         font-size: 1rem;
22 |         width: 95%;
23 |         text-align: center;
24 |         color: white;
25 |         margin-left: 3px;
26 |     }
27 | }
28 | 
29 | .links {
30 |     color: #2bbc8a;
31 |     margin-left: 883px;
32 |     margin-top: -45px;
33 |     display: block;
34 | 
35 |     @media only screen and (max-width: 600px) {
36 |         margin-left: 10px;
37 |         margin-top: 50px;
38 |         display: none;
39 |     }
40 | }
41 | 
42 | .footer-container {
43 |     margin-bottom: 50px;
44 | }
45 | 
46 | 
47 | $duration: .2s;
48 | $distance: 8px;
49 | $easeOutBack: cubic-bezier(0.175, 0.885, 0.320, 1.275);
50 | 
51 | .arrow-link-1 {
52 |     margin: 10px;
53 |     text-decoration: none;
54 |     color: $link-color;
55 |     font-weight: 600;
56 |     display: inline-block;
57 |     // padding: 0px 7px;
58 |     transition: all .2s ease-in-out;
59 |     box-sizing: border-box;
60 |     text-decoration: none;
61 |     
62 |     &:hover {
63 |         transition: all .3s ease-out;
64 |         box-shadow:  0 -2px 0 0 $link-color inset ;
65 |       }
66 |   }
67 | 
68 | .favicon-again {
69 |     display: none;
70 | 
71 |     @media only screen and (max-width: 600px) {
72 |         margin-right: 19px;
73 |         display: block;
74 |         text-align: center;
75 |         
76 |     }
77 | 
78 | }


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="../src/images/new-logo.png" />
 6 | 
 7 |     <style>
 8 |         html{
 9 |           scroll-behavior: smooth;
10 |         }
11 | 
12 |     </style>
13 | 
14 |     <link rel="stylesheet" href="/src/styles/certifications.scss" media="print" onload="this.media='all'">
15 |     <link rel="stylesheet" href="/src/styles/skills.scss" media="print" onload="this.media='all'">
16 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
17 |     <meta name="theme-color" content="#000000" />
18 |     <meta
19 |       name="description"
20 |       content="Eshaan Khurana | Portfolio "
21 |     />
22 |     <link rel="new-logo" href="../src/images/new-logo.png" />
23 |     <!--
24 |       manifest.json provides metadata used when your web app is installed on a
25 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
26 |     -->
27 |     <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
28 |     <!--
29 |       Notice the use of %PUBLIC_URL% in the tags above.
30 |       It will be replaced with the URL of the `public` folder during the build.
31 |       Only files inside the `public` folder can be referenced from the HTML.
32 | 
33 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
34 |       work correctly both with client-side routing and a non-root public URL.
35 |       Learn how to configure a non-root public URL by running `npm run build`.
36 |     -->
37 |     <title>Eshaan Khurana | Portfolio</title>
38 |   </head>
39 |   <body>
40 |     <noscript></noscript>
41 |     <div id="root"></div>
42 |     <!--
43 |       This HTML file is a template.
44 |       If you open it directly in the browser, you will see an empty page.
45 | 
46 |       You can add webfonts, meta tags, or analytics to this file.
47 |       The build step will place the bundled scripts into the <body> tag.
48 | 
49 |       To begin the development, run `npm start` or `yarn start`.
50 |       To create a production bundle, use `npm run build` or `yarn build`.
51 |     -->
52 |   </body>
53 | 
54 |   
55 | </html>
56 | 


--------------------------------------------------------------------------------
/src/components/navbar.js:
--------------------------------------------------------------------------------
 1 | import React, { Component} from 'react';
 2 | import '../styles/navbar.scss';
 3 | import Fade from 'react-reveal/Fade';
 4 | import Logowhite from '../images/new-logo.png';
 5 |  
 6 | class Navbar extends Component {
 7 | 
 8 |     constructor(props) {
 9 |         super(props);
10 |         this.state = {
11 |            imgSrc: Logowhite
12 |         };
13 |         this.handleMouseOver = this.handleMouseOver.bind(this);
14 |         this.handleMouseOut = this.handleMouseOut.bind(this);
15 |       }
16 |     
17 |       handleMouseOver() {
18 |         this.setState({
19 |           imgSrc: Logowhite
20 |         });
21 |       }
22 |     
23 |       handleMouseOut() {
24 |         this.setState({
25 |           imgSrc: Logowhite
26 |         });
27 |       }
28 | 
29 |     render() {
30 |     return(
31 |         <div>
32 |             <header className="header">
33 |                 <Fade left>
34 | 
35 |                 <a href="#top" className="logo"> 
36 |                 <div>
37 |                   <img className="resolution" onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} src={this.state.imgSrc} alt="logo"/>
38 |                 </div> </a>
39 |                 
40 |                 </Fade>
41 |                 <input className="menu-btn" type="checkbox" id="menu-btn" />
42 |                 <label className="menu-icon" htmlFor="menu-btn"><span className="navicon"></span></label>
43 |                 <ul className="menu">
44 |                 <Fade right>
45 |                     <li> <a className="ind" href="#about-page"> About Me </a> </li>
46 |                     <li> <a className="ind" href="#skill-top"> Skills</a> </li>
47 |                     <li> <a className="ind" href="#project-page"> Projects</a> </li>
48 |                     <li> <a className="ind" href="#foot"> Contact Me</a> </li>
49 |                     <button className="resume" target="_blank" rel="noopener noreferrer">
50 |                       <li> <a className="res" href="https://drive.google.com/file/d/1NdZZ6Rcsm4akpkXHRtlVq9Xmeh67yYPm/view?usp=sharing" target="_blank" rel="noopener noreferrer"> Resume</a> </li>
51 |                     </button>
52 |                 </Fade>            
53 |                 </ul>
54 |             </header>
55 |         </div>
56 |     );
57 |     }
58 | }
59 | 
60 | export default Navbar
61 | 


--------------------------------------------------------------------------------
/src/styles/skills.scss:
--------------------------------------------------------------------------------
  1 | @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  2 | 
  3 | $link-color: #2bbc8a; // slateblue
  4 | @font-face {
  5 |   font-style: normal;
  6 |   font-family: "Meslo LG";
  7 |   src: local("Meslo LG S"), url("./MesloLGS-Regular.ttf") format("truetype");
  8 |   font-display: swap;
  9 | }
 10 | 
 11 | .logo {
 12 |   max-width: 45px;
 13 |   max-height: 60px;
 14 |   object-fit: contain;
 15 |   transition: all .3s ease-in-out;
 16 |   margin: 5px;
 17 |   vertical-align: middle;
 18 |   -webkit-filter: grayscale(100%);
 19 |   filter: grayscale(0%);
 20 | 
 21 |   &:hover {
 22 |     filter: grayscale(0%);
 23 |   }
 24 | 
 25 |   @media only screen and (max-width: 600px) {
 26 |     width: 60px;
 27 |     padding: 0px;
 28 |     margin: 5px;
 29 |   }
 30 | }
 31 | 
 32 | //  filter: sepia(100%) hue-rotate(190deg) saturate(500%);
 33 | 
 34 | .heading_1{
 35 |   margin-top: 120px;
 36 |   margin-left: 10px;
 37 |   color: #2bbc8a;
 38 |   font-size: 1.8rem;
 39 | 
 40 |   @media only screen and (max-width: 600px) {
 41 |     display: block;
 42 |     margin-left: auto;
 43 |     margin-right: auto;
 44 |     width: 90%;
 45 |     font-size: 1.4rem;
 46 |   }
 47 | }
 48 | 
 49 | .about-me-bold1 {
 50 |   // font-family: "Source Sans Pro", sans-serif;
 51 |   font-family: "Source Sans Pro", sans-serif;
 52 |   color: #ffffff;
 53 |   margin-left: 50px;
 54 |   font-size: 1.3rem;
 55 |   max-width: 1000px;
 56 |   margin-inline-end: 150px;
 57 |   font-weight: 400;
 58 | 
 59 |   @media only screen and (max-width: 600px) {
 60 |       font-size: 1.05rem;
 61 |       display: block;
 62 |       margin-left: auto;
 63 |       margin-right: auto;
 64 |       width: 90%;
 65 |   }
 66 | }
 67 | 
 68 | .logo-container {
 69 |   max-width: 1300px;
 70 | //  margin-left: 50px;
 71 |   margin-bottom: 250px;
 72 |   // text-align: center;
 73 | 
 74 |   @media only screen and (max-width: 600px) {
 75 |     margin-bottom: 100px;
 76 |     display: block;
 77 |     margin-left: auto;
 78 |     margin-right: auto;
 79 |     width: 95%;
 80 |   }
 81 | }
 82 | 
 83 | .skill-top {
 84 |   margin-top: 100px;
 85 |   // text-align: center;
 86 |   // justify-content: center;
 87 | 
 88 |   @media only screen and (max-width: 600px) {
 89 |     margin-top: 0px;
 90 |   }
 91 | }
 92 | 
 93 | .logo-name {
 94 |   font-family: "Poppins", sans-serif;
 95 |   color: #ffffff;
 96 |   font-size: 1rem;
 97 | }
 98 | 
 99 | .arrow {
100 |   color: #2bbc8a;
101 | }


--------------------------------------------------------------------------------
/src/components/footer.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import '../styles/footer.scss';
 3 | import Fade from 'react-reveal/Fade';
 4 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 5 | import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
 6 | import { faGithub, faLinkedin, faMedium, faTwitter } from '@fortawesome/free-brands-svg-icons';
 7 | // import Flip from 'react-reveal/Flip';
 8 | 
 9 |  class Footer extends Component{
10 |     render() {
11 |     return(   
12 | 
13 |         <Fade bottom>
14 |             <div className="footer-container" id="foot">
15 |                 {/* <Flip cascade> */}
16 |                 <h4 className="intro1"> Designed & Developed by</h4>
17 |                 <h4 className="intro1"> Eshaan Khurana <span role="img" aria-label="rock"> 🤘</span> 2020</h4>
18 |                 {/* </Flip> */}
19 | 
20 |                 <div className="links">
21 |                     <a className="arrow-link-1" href="mailto:eshaany2k@gmail.com" target="_blank" rel="noopener noreferrer">MAIL</a>
22 |                     <a className="arrow-link-1" href="https://github.com/eshaan007/" target="_blank" rel="noopener noreferrer">GITHUB</a>
23 |                     <a className="arrow-link-1" href="https://linkedin.com/in/eshaan-khurana/" target="_blank" rel="noopener noreferrer">LINKEDIN</a>
24 |                     <a className="arrow-link-1" href="https://twitter.com/eshaaaan007/" target="_blank" rel="noopener noreferrer">TWITTER</a>
25 |                     <a className="arrow-link-1" href="https://medium.com/@eshaany2k/" target="_blank" rel="noopener noreferrer">MEDIUM</a>
26 |                 </div>
27 | 
28 |                 <div className="favicon-again">
29 |                     <a className="arrow-link-1" href="mailto:eshaany2k@gmail.com" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faEnvelope} size="2x"/>{   }</a>
30 |                     <a className="arrow-link-1" href="https://github.com/eshaan007/" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faGithub} size="2x" />{   }</a>
31 |                     <a className="arrow-link-1" href="https://linkedin.com/in/eshaan-khurana/" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faLinkedin} size="2x" />{   }</a>
32 |                     <a className="arrow-link-1" href="https://twitter.com/eshaaaan007/" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faTwitter} size="2x" />{   }</a>
33 |                     <a className="arrow-link-1" href="https://medium.com/@eshaany2k/" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faMedium} size="2x" />{   }</a>
34 |                 </div>
35 | 
36 |             </div>
37 |         </Fade>
38 |     );
39 | }
40 | }
41 | 
42 | export default Footer;


--------------------------------------------------------------------------------
/src/styles/projects.scss:
--------------------------------------------------------------------------------
  1 | $link-color : #2bbc8a;
  2 | 
  3 | .proj-page {
  4 |     margin-bottom: 200px;
  5 | 
  6 |     @media only screen and (max-width: 600px) {
  7 |     
  8 |         margin-bottom: 50px;
  9 |     }
 10 | 
 11 | }
 12 | 
 13 | .heading-proj {
 14 |     margin-top: 100px;
 15 |     color: $link-color;
 16 |     font-size: 2rem;
 17 |     font-family: "Source Sans Pro", sans-serif;
 18 |     animation: fadeInAnimation ease 3s;
 19 |     animation-iteration-count: 1; 
 20 |     animation-fill-mode: forwards; 
 21 |     margin-bottom: 30px;
 22 |     margin-left: 10px;
 23 |    
 24 |     @keyframes fadeInAnimation { 
 25 |       0% { 
 26 |           opacity: 0; 
 27 |       } 
 28 |       100% { 
 29 |           opacity: 1; 
 30 |       }
 31 |     } 
 32 |   
 33 |     @media only screen and (max-width: 600px) {
 34 | 
 35 |         font-size: 1.3rem;
 36 |         margin-top: 0px;
 37 |         display: block;
 38 |         margin-left: auto;
 39 |         margin-right: auto;
 40 |         width: 90%;
 41 |     }
 42 | }
 43 | 
 44 | .arrow-link-2 {
 45 | 
 46 |     font-family: "Source Sans Pro", sans-serif;
 47 |     color: #ffffff;
 48 |     margin-bottom: 5px;
 49 |     font-size: 1.55rem;
 50 |     font-weight: bold;
 51 |     margin-left: 10px;
 52 |     text-decoration: none;    
 53 |     transition: all .2s ease-in-out;
 54 |     box-sizing: border-box;
 55 |     text-decoration: none;
 56 |     
 57 |     &:hover {
 58 |         transition: all .3s ease-out;
 59 |         color: white;
 60 |       }
 61 | 
 62 |     @media only screen and (max-width: 600px) {
 63 |         font-size: 1rem;
 64 |         display: block;
 65 |         margin-left: auto;
 66 |         margin-right: auto;
 67 |         width: 90%;
 68 |     
 69 |     }
 70 |   }
 71 | 
 72 | .proj-desc-container {
 73 |     margin-top: 10px;
 74 | 
 75 |     @media only screen and (max-width: 600px) {
 76 |         
 77 |         display: block;
 78 |         margin-left: auto;
 79 |         margin-right: auto;
 80 |         width: 95%;
 81 |     }
 82 | }
 83 | 
 84 | .proj-desc {
 85 |     margin-left: 10px;
 86 |     font-family: "Source Sans Pro", sans-serif;
 87 |     font-size: 1.25rem;
 88 |     color: #afaeae;
 89 |     font-weight: lighter;
 90 |     margin-bottom: 5px;
 91 |   
 92 |     @media only screen and (max-width: 600px) {
 93 |       margin-inline-end: 0px;
 94 |       font-size: 0.9rem;
 95 |       display: block;
 96 |       margin-left: auto;
 97 |       margin-right: auto;
 98 |       width: 95%;
 99 |     }
100 | }
101 | 
102 | 
103 | 
104 | .project {
105 |     margin-bottom: 35px;
106 | }
107 | 
108 | .proj-desc-tool {
109 |     color: $link-color; 
110 |     border: $link-color;
111 |     font-family: "Source Sans Pro", sans-serif;
112 |     text-align: center;
113 |     text-decoration: none;
114 |     font-size: 0.9rem;
115 |     max-width: 140px;
116 |     display: inline-block;
117 |     padding: 3px;
118 |     margin-right: 8px;
119 | 
120 |     border: 2px solid $link-color;
121 |     border-radius: 4px;
122 |     transition: all .3s ease-in-out;
123 | 
124 |     @media only screen and (max-width: 600px) {    
125 |         font-size: 12px;
126 |         // display: block;
127 |         margin-left: auto;
128 |         margin-right: auto;
129 |         margin-right: 5px;
130 |     }
131 | }
132 | 
133 | .proj-desc-tool-container {
134 |     margin-left: 30px;
135 |     margin-top: 5px;
136 |     white-space: nowrap;
137 | 
138 |     @media only screen and (max-width: 600px) {
139 |         
140 |         display: block;
141 |         margin-left: auto;
142 |         margin-right: auto;
143 |         width: 90%;
144 |     }
145 | }
146 | 
147 | @keyframes slide {
148 |     0% {
149 |       left: 0;
150 |       top: 0;
151 |     }
152 |     100% {
153 |       right: 10px;
154 |     }
155 |   }
156 | 
157 | .arrow__1 {
158 |     color: #afaeae;
159 |     transition: all .3s ease-in-out;
160 | 
161 |     &:hover {
162 |         color: #ffffff;
163 |         animation-name: slide;
164 |         animation-duration: 2s;
165 |         animation-timing-function: ease-in-out;
166 |         animation-delay: .5s;    }
167 | }


--------------------------------------------------------------------------------
/src/styles/certifications.scss:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css?family=Lora:400,700|Source+Sans+Pro:300,400|Dosis:300,400,700&display=swap');
  2 | @import url('https://fonts.googleapis.com/css2?family=Abel&family=Roboto+Mono:wght@300&display=swap');
  3 | @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
  4 | 
  5 | @font-face {
  6 |     font-style: normal;
  7 |     font-family: "Meslo LG";
  8 |     src: local("Meslo LG S"), url("./MesloLGS-Regular.ttf") format("truetype");
  9 |     font-display: swap;
 10 |   }
 11 |   
 12 | 
 13 | $link-color: #2bbc8a; // slateblue
 14 | 
 15 | .about-cert {
 16 |    // margin-left: 50px;
 17 |     flex: 1;
 18 |     flex-direction: 'row';
 19 |     align-items: 'center';
 20 |     justify-content: 'center';
 21 | }
 22 | 
 23 | // media="print" onload="this.media='all'
 24 | 
 25 | .cert-name {
 26 |     // font-family: 'Roboto Mono', monospace;
 27 |     font-family: "Source Sans Pro", sans-serif;
 28 |     color: #ffffff;
 29 |   //  text-align: left;
 30 |     margin-bottom: 5px;
 31 |     font-size: 1.35rem;
 32 |     font-weight: bold;
 33 |     text-decoration: none;
 34 |     transition: all .3s ease-in-out;
 35 | 
 36 |     @media only screen and (max-width: 600px) {
 37 |     
 38 |     font-size: 1rem;
 39 | 
 40 |     }
 41 | 
 42 |     &:hover {
 43 |         color: $link-color;  
 44 |     }
 45 | }
 46 | 
 47 | .cert-desc {
 48 |     // font-family: 'Roboto Mono', monospace;
 49 |     font-family: "Source Sans Pro", sans-serif;
 50 |     color: #a3a3a3;
 51 |     font-size: 0.9rem;
 52 |     text-decoration: none;
 53 | 
 54 |     &:hover{
 55 |         color: #a3a3a3;
 56 |     }
 57 | 
 58 |     @media only screen and (max-width: 600px) {
 59 |     
 60 |         font-size: 13px;
 61 | 
 62 |         }
 63 | }
 64 | 
 65 | .heading-cert {
 66 |     margin-top: 100px;
 67 |     color: $link-color;
 68 |     //margin-top: -20px;
 69 |    // margin-left: 50px;
 70 |     font-size: 2rem;
 71 |     // font-family: 'Roboto Mono', monospace;
 72 |     font-family: "Source Sans Pro", sans-serif;
 73 |     animation: fadeInAnimation ease 3s;
 74 |     animation-iteration-count: 1; 
 75 |     animation-fill-mode: forwards; 
 76 |     margin-bottom: 30px;
 77 |     margin-left: 10px;
 78 |    
 79 |     @keyframes fadeInAnimation { 
 80 |       0% { 
 81 |           opacity: 0; 
 82 |       } 
 83 |       100% { 
 84 |           opacity: 1; 
 85 |       }
 86 |     } 
 87 |   
 88 |     @media only screen and (max-width: 600px) {
 89 | 
 90 |       font-size: 1.3rem;
 91 |       margin-top: 0px;
 92 |       display: block;
 93 |         margin-left: auto;
 94 |         margin-right: auto;
 95 |         width: 90%;
 96 |     }
 97 | }
 98 | 
 99 | .col1 .col2 .col3 {
100 |     display: block;
101 |     margin-left: auto;
102 |     margin-right: auto;
103 |     width: 95%;
104 | 
105 | 
106 |     @media only screen and (max-width: 600px) {
107 |         margin: 0px;
108 |     }
109 | }
110 | 
111 | .card {
112 |     min-width: 400px;
113 |     max-width: 500px;
114 |     padding: 20px;
115 |     margin: 10px;
116 |     border: 1px solid #1d1f21;
117 |     border-radius: 4px;
118 |     background-color: #1e2124;
119 |     box-shadow: 6px 6px 3px #18191a ;
120 |     transition: all .2s ease-in-out;
121 | 
122 |     &:hover {
123 |         box-shadow: 3px 3px 1px #161616 ;
124 | 
125 |         .cert-name {
126 |         color: $link-color;  
127 |         }
128 |     }
129 |     
130 |     @media only screen and (max-width: 600px) {
131 |         
132 |         margin-bottom: 15px;
133 |         min-width: 300px;
134 |         max-width: 360px;
135 |         margin-left: auto;
136 |         margin-right: auto;
137 |         padding: 10px;
138 |         box-shadow: 3px 3px 2px #161616 ;
139 |     }
140 | }
141 | 
142 | 
143 | .cert-container {
144 |     max-width: 1400px;
145 |    // margin-left: 50px;
146 |     margin-bottom: 120px;
147 |     // text-align: center;
148 |   
149 |     @media only screen and (max-width: 600px) {
150 |       margin-bottom: 100px;
151 |       display: block;
152 |       margin-left: auto;
153 |       margin-right: auto;
154 |       width: 95%;
155 |     }
156 |   }
157 |   


--------------------------------------------------------------------------------
/src/pages/about.js:
--------------------------------------------------------------------------------
 1 | import React, { Component} from 'react';
 2 | import '../styles/about.scss';
 3 | import Fade from 'react-reveal/Fade';
 4 | import { Column, Row } from 'simple-flexbox';
 5 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 6 | import { faHeartbeat, faFire, faLaptopCode } from '@fortawesome/free-solid-svg-icons';
 7 | 
 8 | class About extends Component {
 9 |     render() {
10 |     return(
11 | 
12 |         <div id="about-page">
13 |             <div className="contain1">
14 |             <Fade bottom>        
15 |                 <h3 className="heading"> <a className="number-about" href=" ">01. </a>About Me </h3>
16 |                 <Column className="col2" flexGrow={1}>
17 |                     <div className="am-size">    
18 |                         <Fade bottom>
19 |                             <div className="am-1">
20 |                                 <h4 className="about-me">Hello! I'm Eshaan Khurana. I am a Final Year Undergraduate (2018-22) at <a className="bold-blue" href=" ">Indian Institute of Information Technology, Vadodara </a>pursuing B.Tech in Information Technology. I have a commitment to delivering continuous high-value to customers. 
21 |                                     I enjoy managing Products and am a 'People's Person'.</h4>
22 | 
23 |                                 <h4 className="about-me"> My goal is to lead essential products which provide a rich user experience with real world application.</h4>
24 |                             </div>
25 |                         </Fade>    
26 | 
27 |                         <Row wrap horizontal='spaced'>
28 |                             <Fade bottom>
29 |                                 <Column className="about-column-1" flexGrow={1} horizontal='spaced'>
30 |                                     <h4 className="about-me-bold"> <FontAwesomeIcon icon={faHeartbeat} /> Life so Far...</h4>     
31 |                                     <h4 className="about-me_bullet"><h className="arrow">⪢</h> Breathing since 2000 </h4> 
32 |                                     <h4 className="about-me_bullet"><h className="arrow">⪢</h> Graduating from IIITV in 2022 </h4>
33 |                                     <h4 className="about-me_bullet"><h className="arrow">⪢</h> Being a Tech-Geek since 2010</h4>
34 |                                     <h4 className="about-me_bullet"><h className="arrow">⪢</h> Started Coding in 2018 </h4>         
35 |                                     <h4 className="about-me_bullet"><h className="arrow">⪢</h> Developed Awesome Websites ️and Applications </h4>         
36 |                                     <h4 className="about-me_bullet"><h className="arrow">⪢</h> Contributed to OSS actively </h4>                 
37 |                                 </Column>
38 |                             </Fade>    
39 |                             
40 |                             <Fade bottom>
41 |                                 <Column className="about-column-2" flexGrow={1} horizontal='spaced'>
42 |                                     <h4 className="about-me-bold"> <FontAwesomeIcon icon={faFire} /> Passionate About...</h4> 
43 |                                     <h4 className="about-me_bullet"><h className="arrow">⪢</h> Jamming on Acoustic Guitars</h4>     
44 |                                     <h4 className="about-me_bullet"><h className="arrow">⪢</h> Listening to Rock & Country Music</h4>         
45 |                                     <h4 className="about-me_bullet"><h className="arrow">⪢</h> Blogging Tech and Thoughts</h4>                                       
46 |                                     <h4 className="about-me_bullet"><h className="arrow">⪢</h> Watching Football</h4>        
47 |                                     <h4 className="about-me_bullet"><h className="arrow">⪢</h> Gaming</h4>  
48 |                                 </Column>
49 |                             </Fade>    
50 | 
51 |                             <Fade bottom>
52 |                                 <Column className="about-column-3" flexGrow={1} horizontal='spaced'>
53 |                                     <h4 className="about-me-bold"> <FontAwesomeIcon icon={faLaptopCode} /> Learning...</h4>   
54 |                                     <h4 className="about-me_bullet"><h className="arrow">⪢</h> PM Tips and Tricks! </h4>                        
55 |                                     <h4 className="about-me_bullet"><h className="arrow">⪢</h> Software Project Management </h4>                        
56 |                                     <h4 className="about-me_bullet"><h className="arrow">⪢</h> Analysing Data </h4>         
57 |                                     <h4 className="about-me_bullet"><h className="arrow">⪢</h> Product Metrics </h4>                      
58 |                                 </Column>
59 |                             </Fade>
60 |                         </Row>
61 |                     </div>
62 |                 </Column>
63 |             </Fade>    
64 |             </div>
65 |         </div>
66 |         
67 |     );
68 |     }
69 | }
70 | 
71 | export default About;
72 | 


--------------------------------------------------------------------------------
/src/pages/skills.js:
--------------------------------------------------------------------------------
 1 | import React,{ Component } from 'react';
 2 | import { Column, Row } from 'simple-flexbox';
 3 | // import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 4 | // import { faLaptopCode } from '@fortawesome/free-solid-svg-icons';
 5 | 
 6 | import '../styles/skills.scss';
 7 | import Fade from 'react-reveal/Fade';
 8 | 
 9 | class Skills extends Component {
10 |     render() {
11 |     return(
12 |         <div id="skill-top">
13 | 
14 |             <Fade bottom>
15 |             <h3 className="heading_1"> <a className="number-about" href=" "> 02. </a> My Skills </h3>
16 |             </Fade>
17 | 
18 |             <div id="no-mob" className="logo-container">       
19 | 
20 |                     <Row wrap horizontal='spaced'>
21 |                         <Fade bottom>
22 |                             <Column className="about-column-1" flexGrow={1} horizontal='spaced'>
23 |                                 <h4 className="about-me-bold"> Languages</h4>     
24 |                                 <h4 className="about-me_bullet"><h className="arrow">⪢</h> Javascript(ES6+) </h4> 
25 |                                 <h4 className="about-me_bullet"><h className="arrow">⪢</h> Java </h4>
26 |                                 <h4 className="about-me_bullet"><h className="arrow">⪢</h> HTML</h4>
27 |                                 <h4 className="about-me_bullet"><h className="arrow">⪢</h> S(CSS) </h4>         
28 |                                 <h4 className="about-me_bullet"><h className="arrow">⪢</h> C/C++ ️</h4>  
29 |                                 <h4 className="about-me_bullet"><h className="arrow">⪢</h> Python ️</h4>                
30 |                             </Column>
31 |                         </Fade>    
32 |                         
33 |                         <Fade bottom>
34 |                             <Column className="about-column-2" flexGrow={1} horizontal='spaced'>
35 |                                 <h4 className="about-me-bold"> Frameworks</h4> 
36 |                                 <h4 className="about-me_bullet"><h className="arrow">⪢</h> ReactJS</h4>     
37 |                                 <h4 className="about-me_bullet"><h className="arrow">⪢</h> Redux</h4>     
38 |                                 <h4 className="about-me_bullet"><h className="arrow">⪢</h> Bootstrap4</h4>         
39 |                                 <h4 className="about-me_bullet"><h className="arrow">⪢</h> JQuery</h4> 
40 |                             </Column>
41 |                         </Fade>    
42 | 
43 |                         <Fade bottom>
44 |                             <Column className="about-column-1" flexGrow={1} horizontal='spaced'>
45 |                                 <h4 className="about-me-bold"> Research Interest</h4>     
46 |                                 <h4 className="about-me_bullet"><h className="arrow">⪢</h> Software Project Management </h4> 
47 |                                 <h4 className="about-me_bullet"><h className="arrow">⪢</h> Business Analytics </h4>
48 |                                 <h4 className="about-me_bullet"><h className="arrow">⪢</h> Product Management </h4>                        
49 |                             </Column>
50 |                         </Fade>    
51 | 
52 |                         <Fade bottom>
53 |                             <Column className="about-column-1" flexGrow={1} horizontal='spaced'>
54 |                                 <h4 className="about-me-bold"> Blockchain Development</h4>     
55 |                                 <h4 className="about-me_bullet"><h className="arrow">⪢</h> Solidity </h4> 
56 |                                 <h4 className="about-me_bullet"><h className="arrow">⪢</h> Web3.js </h4>
57 |                                 <h4 className="about-me_bullet"><h className="arrow">⪢</h> Truffle </h4>
58 |                                 <h4 className="about-me_bullet"><h className="arrow">⪢</h> Ganache </h4>
59 |                                 <h4 className="about-me_bullet"><h className="arrow">⪢</h> Distributed Applications </h4>
60 |                             </Column>
61 |                         </Fade>    
62 | 
63 |                        
64 |                         <Fade bottom>
65 |                             <Column className="about-column-3" flexGrow={1} horizontal='spaced'>
66 |                                 <h4 className="about-me-bold"> Tools </h4>  
67 |                                 <h4 className="about-me_bullet"><h className="arrow">⪢</h> VSCode </h4>   
68 |                                 <h4 className="about-me_bullet"><h className="arrow">⪢</h> Adobe Photoshop </h4> 
69 |                                 <h4 className="about-me_bullet"><h className="arrow">⪢</h> RemixIDE </h4> 
70 |                                 <h4 className="about-me_bullet"><h className="arrow">⪢</h> Jira</h4>    
71 |                                 <h4 className="about-me_bullet"><h className="arrow">⪢</h> Git</h4>         
72 |                                 <h4 className="about-me_bullet"><h className="arrow">⪢</h> Figma</h4>                      
73 |                             </Column>
74 |                         </Fade>  
75 | 
76 |                         
77 |                     </Row>
78 |             </div>
79 |         </div>
80 |     );
81 |     }
82 | }
83 | export default Skills;
84 | 


--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read https://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === 'localhost' ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === '[::1]' ||
 17 |     // 127.0.0.0/8 are considered localhost for IPv4.
 18 |     window.location.hostname.match(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | );
 22 | 
 23 | export function register(config) {
 24 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 25 |     // The URL constructor is available in all browsers that support SW.
 26 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
 27 |     if (publicUrl.origin !== window.location.origin) {
 28 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 29 |       // from what our page is served on. This might happen if a CDN is used to
 30 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 31 |       return;
 32 |     }
 33 | 
 34 |     window.addEventListener('load', () => {
 35 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 36 | 
 37 |       if (isLocalhost) {
 38 |         // This is running on localhost. Let's check if a service worker still exists or not.
 39 |         checkValidServiceWorker(swUrl, config);
 40 | 
 41 |         // Add some additional logging to localhost, pointing developers to the
 42 |         // service worker/PWA documentation.
 43 |         navigator.serviceWorker.ready.then(() => {
 44 |           console.log(
 45 |             'This web app is being served cache-first by a service ' +
 46 |               'worker. To learn more, visit https://bit.ly/CRA-PWA'
 47 |           );
 48 |         });
 49 |       } else {
 50 |         // Is not localhost. Just register service worker
 51 |         registerValidSW(swUrl, config);
 52 |       }
 53 |     });
 54 |   }
 55 | }
 56 | 
 57 | function registerValidSW(swUrl, config) {
 58 |   navigator.serviceWorker
 59 |     .register(swUrl)
 60 |     .then(registration => {
 61 |       registration.onupdatefound = () => {
 62 |         const installingWorker = registration.installing;
 63 |         if (installingWorker == null) {
 64 |           return;
 65 |         }
 66 |         installingWorker.onstatechange = () => {
 67 |           if (installingWorker.state === 'installed') {
 68 |             if (navigator.serviceWorker.controller) {
 69 |               // At this point, the updated precached content has been fetched,
 70 |               // but the previous service worker will still serve the older
 71 |               // content until all client tabs are closed.
 72 |               console.log(
 73 |                 'New content is available and will be used when all ' +
 74 |                   'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
 75 |               );
 76 | 
 77 |               // Execute callback
 78 |               if (config && config.onUpdate) {
 79 |                 config.onUpdate(registration);
 80 |               }
 81 |             } else {
 82 |               // At this point, everything has been precached.
 83 |               // It's the perfect time to display a
 84 |               // "Content is cached for offline use." message.
 85 |               console.log('Content is cached for offline use.');
 86 | 
 87 |               // Execute callback
 88 |               if (config && config.onSuccess) {
 89 |                 config.onSuccess(registration);
 90 |               }
 91 |             }
 92 |           }
 93 |         };
 94 |       };
 95 |     })
 96 |     .catch(error => {
 97 |       console.error('Error during service worker registration:', error);
 98 |     });
 99 | }
100 | 
101 | function checkValidServiceWorker(swUrl, config) {
102 |   // Check if the service worker can be found. If it can't reload the page.
103 |   fetch(swUrl, {
104 |     headers: { 'Service-Worker': 'script' },
105 |   })
106 |     .then(response => {
107 |       // Ensure service worker exists, and that we really are getting a JS file.
108 |       const contentType = response.headers.get('content-type');
109 |       if (
110 |         response.status === 404 ||
111 |         (contentType != null && contentType.indexOf('javascript') === -1)
112 |       ) {
113 |         // No service worker found. Probably a different app. Reload the page.
114 |         navigator.serviceWorker.ready.then(registration => {
115 |           registration.unregister().then(() => {
116 |             window.location.reload();
117 |           });
118 |         });
119 |       } else {
120 |         // Service worker found. Proceed as normal.
121 |         registerValidSW(swUrl, config);
122 |       }
123 |     })
124 |     .catch(() => {
125 |       console.log(
126 |         'No internet connection found. App is running in offline mode.'
127 |       );
128 |     });
129 | }
130 | 
131 | export function unregister() {
132 |   if ('serviceWorker' in navigator) {
133 |     navigator.serviceWorker.ready
134 |       .then(registration => {
135 |         registration.unregister();
136 |       })
137 |       .catch(error => {
138 |         console.error(error.message);
139 |       });
140 |   }
141 | }
142 | 


--------------------------------------------------------------------------------
/src/styles/about.scss:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css?family=Lora:400,700|Source+Sans+Pro:300,400|Dosis:300,400,700&display=swap');
  2 | @import url('https://fonts.googleapis.com/css2?family=Abel&family=Roboto+Mono:wght@300&display=swap');
  3 | @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
  4 | 
  5 | $link-color: #2bbc8a; // slateblue
  6 | 
  7 | .heading {
  8 |     margin-top: 100px;
  9 |     color: $link-color;
 10 |     //margin-top: -20px;
 11 |     margin-left: 10px;
 12 |     font-size: 1.8rem;
 13 |     // font-family: 'Roboto Mono', monospace;
 14 |     font-family: "Source Sans Pro", sans-serif;
 15 |     animation: fadeInAnimation ease 3s;
 16 |     animation-iteration-count: 1; 
 17 |     animation-fill-mode: forwards; 
 18 |    
 19 |     @keyframes fadeInAnimation { 
 20 |       0% { 
 21 |           opacity: 0; 
 22 |       } 
 23 |       100% { 
 24 |           opacity: 1; 
 25 |       }
 26 |     } 
 27 |   
 28 |     @media only screen and (max-width: 600px) {
 29 |       font-size: 1.4rem;
 30 |       margin-top: 0px;
 31 |       display: block;
 32 |         margin-left: auto;
 33 |         margin-right: auto;
 34 |         width: 95%;
 35 |     }
 36 | }
 37 | 
 38 | .number-about {
 39 |     font-size: 2rem;
 40 |     color: $link-color;
 41 | 
 42 |     @media only screen and (max-width: 600px) {
 43 |         font-size: 1.3rem;
 44 |     }
 45 | }
 46 | 
 47 | .about-me {
 48 |     // font-family: "Source Sans Pro", sans-serif;
 49 |     font-family: "Source Sans Pro", sans-serif;
 50 |     color: #e6e3e3;
 51 |     margin-left: 10px;
 52 |     font-weight: 400;
 53 |    font-size: 20px;
 54 |     max-width: 1300px;
 55 |     // margin-inline-end: 50px;
 56 |     
 57 |     @media only screen and (max-width: 600px) {
 58 |         font-size: 1.1rem;
 59 |        // margin-inline-end: 0px;
 60 |        // margin-left: 20px;
 61 |        display: block;
 62 |         margin-left: auto;
 63 |         margin-right: auto;
 64 |         width: 95%;
 65 |     }
 66 | }
 67 | .about-me_bullet {
 68 |     font-family: "Source Sans Pro", sans-serif;
 69 |     color: #cccaca;
 70 |     font-weight: 100;
 71 |     font-size: 18px;
 72 |     margin-bottom: 8px;
 73 |     margin-left: 10px;
 74 | 
 75 |     @media only screen and (max-width: 600px) {
 76 |         font-size: 1rem;
 77 |        // margin-inline-end: 0px;
 78 |         margin-left: 20px;
 79 |      }
 80 | }
 81 | 
 82 | .about-me-bold {
 83 |     // font-family: "Source Sans Pro", sans-serif;
 84 |     font-family: "Source Sans Pro", sans-serif;
 85 |     color: #ece7e7;
 86 |     font-weight: bolder;
 87 |     margin-left: 10px;
 88 |     font-size: 1.6rem;
 89 |     max-width: 350px;
 90 |     // margin-inline-end: 150px;
 91 | 
 92 |     @media only screen and (max-width: 600px) {
 93 |         font-size: 1.1rem;
 94 |         display: block;
 95 |         margin-left: auto;
 96 |         margin-right: auto;
 97 |         width: 95%;
 98 |         margin-bottom: 10px;
 99 |         margin-left: 20px;
100 | 
101 |     }
102 | }
103 | 
104 | .contain1 {
105 |     display: inline-block;
106 |     margin-bottom: -100px;
107 | 
108 |     @media only screen and (max-width: 600px) {
109 | 
110 |         display: block;
111 |         margin-left: auto;
112 |         margin-right: auto;
113 |         width: 95%;
114 |         margin-bottom: -50px;
115 | 
116 |         #no-mob {
117 |             display: none;
118 |         }
119 |       }
120 |   }
121 | 
122 | .bold-blue {
123 |     color: $link-color;
124 |     // font-family: "Source Sans Pro", sans-serif;
125 |     font-family: "Source Sans Pro", sans-serif;
126 |     text-decoration: none;
127 |     font-weight: bold;
128 | }
129 | 
130 | .bold-yellow {
131 |     color: yellow;
132 |     // font-weight: bold;
133 |     // font-family: "Source Sans Pro", sans-serif;
134 |     font-family: "Source Sans Pro", sans-serif;
135 |     text-decoration: none;
136 | 
137 | 
138 |     &:hover {
139 |         color: rgb(255, 230, 0);
140 |     }
141 | }
142 | 
143 | .bold-white {
144 |     color: white;
145 |     // font-family: "Source Sans Pro", sans-serif;
146 |     font-family: "Source Sans Pro", sans-serif;
147 |     text-decoration: none;
148 | 
149 | 
150 |     &:hover {
151 |         color: white;
152 |     }
153 | }
154 | 
155 | .bold-brown {
156 |     color: rgb(230, 149, 84);
157 |     // font-family: "Source Sans Pro", sans-serif;
158 |     font-family: "Source Sans Pro", sans-serif;
159 |     text-decoration: none;
160 | 
161 | 
162 |     &:hover {
163 |         color: rgb(235, 169, 115);
164 |     }
165 | }
166 | 
167 | .bold-green {
168 |     color: rgb(33, 236, 33);
169 |     // font-family: "Source Sans Pro", sans-serif;
170 |     font-family: "Source Sans Pro", sans-serif;
171 |     text-decoration: none;
172 | 
173 |     &:hover {
174 |         color: rgb(33, 236, 33);
175 |     }
176 | }
177 | 
178 | #no-mob {
179 |     display: block;
180 | }
181 | 
182 | .number-about {
183 |     text-decoration: none;
184 | }
185 | 
186 | .am-size{
187 |     max-width: 1250px;
188 |     margin-bottom: 200px;
189 |     @media only screen and (max-width: 600px) {
190 |         margin-bottom: 30px;
191 |     }
192 | 
193 | }
194 | 
195 | .am-1 {
196 |     margin-bottom: 50px;
197 |     @media only screen and (max-width: 600px) {
198 |         margin-bottom: 30px;
199 | 
200 |     }
201 | 
202 | 
203 | }
204 | 
205 | .about-column-1,.about-column-2,.about-column-3 {
206 | 
207 |     max-width: 600px;
208 |     
209 |     @media only screen and (max-width: 600px) {
210 |     
211 |         margin-bottom: 30px;
212 |          margin-left: auto;
213 |          margin-right: auto;
214 |         // width: 95%;
215 |         display: block;
216 | 
217 |         #no-mob {
218 |             display: none;
219 |         }
220 | 
221 |     }
222 | }
223 | 
224 | // .github-chart {
225 | //     margin-left: auto;
226 | //     margin-right: auto;
227 | //     margin-bottom: -40px;
228 | //     margin-top: -120px;
229 | 
230 | //     @media only screen and (max-width: 600px) {
231 |     
232 | //         margin-top: -150px;
233 |         
234 | //     }
235 | // }


--------------------------------------------------------------------------------
/src/styles/navbar.scss:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Abel&family=Roboto+Mono:wght@300&display=swap');
  2 | @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
  3 | @font-face {
  4 |   font-style: normal;
  5 |   font-family: "Meslo LG";
  6 |   src: local("Meslo LG S"), url("./MesloLGS-Regular.ttf") format("truetype");
  7 |   font-display: swap;
  8 | }
  9 | 
 10 | $link-color: #2bbc8a; // slateblue
 11 | 
 12 | a {
 13 |     color: #ffffff;
 14 |     // font-family: 'Roboto Mono', monospace;
 15 |     font-family: "Source Sans Pro", sans-serif;
 16 | 
 17 |     &:hover {
 18 |         color: $link-color;    
 19 |     }
 20 | 
 21 |   }
 22 | 
 23 |   /* header */
 24 |   
 25 |   .header {
 26 |     transition: top 0.5s;
 27 |     margin-left: -328px;
 28 |     background-color: #1d1f21;
 29 |     box-shadow: 1px 1px 4px 0 rgba(0,0,0,.3);
 30 |      position: fixed;
 31 |      width: 100%;
 32 |      z-index: 3;
 33 | 
 34 |     @media only screen and (max-width: 2560px) {
 35 |       max-width: 1368px;
 36 |       margin-left: -60px;
 37 |     }
 38 |     
 39 |     @media only screen and (max-width: 1368px) {
 40 |       max-width: 1300px;
 41 |       margin-left: 0px;
 42 |     }
 43 | 
 44 |     @media only screen and (max-width: 1000px) {
 45 |       max-width: 700px;
 46 |       margin-left: 0px;
 47 |     }
 48 | 
 49 |     @media only screen and (max-width: 600px) {
 50 |         margin-left: 0px;
 51 |     }
 52 |   }
 53 | 
 54 |   .header ul {
 55 |     
 56 |     
 57 |     margin: 0;
 58 |     padding: 0;
 59 |     list-style: none;
 60 |     overflow: hidden;
 61 |   }
 62 |   
 63 |   .header li a {
 64 |     display: block;
 65 |     padding: 15px 20px;
 66 |     text-decoration: none;
 67 |   }
 68 |   
 69 |   .header .logo {
 70 |     display: block;
 71 |     float: left;
 72 |     font-size: 2em;
 73 |     padding: 0px 20px;
 74 |     text-decoration: none;
 75 |   }
 76 |   
 77 |   /* menu */
 78 |   
 79 |   .header .menu {
 80 |     clear: both;
 81 |     max-height: 0;
 82 |     transition: max-height .2s ease-out;
 83 |     
 84 |   }
 85 |   
 86 |   /* menu icon */
 87 |   
 88 |   .header .menu-icon {
 89 |     cursor: pointer;
 90 |     display: inline-block;
 91 |     float: right;
 92 |     padding: 24px 20px;
 93 |     position: relative;
 94 |     user-select: none;
 95 | 
 96 |   }
 97 |   
 98 |   .header .menu-icon .navicon {
 99 |     background: #ffffff;
100 |     display: block;
101 |     height: 2px;
102 |     position: relative;
103 |     transition: background .2s ease-out;
104 |     width: 18px;
105 |     margin-top: 10px;
106 |   }
107 |   
108 |   .header .menu-icon .navicon:before,
109 |   .header .menu-icon .navicon:after {
110 |     background: #ffffff;
111 |     content: '';
112 |     display: block;
113 |     height: 100%;
114 |     position: absolute;
115 |     transition: all .2s ease-out;
116 |     width: 100%;
117 |     
118 |   }
119 |   
120 |   .header .menu-icon .navicon:before {
121 |     top: 5px;
122 |   }
123 |   
124 |   .header .menu-icon .navicon:after {
125 |     top: -5px;
126 |   }
127 |   
128 |   /* menu btn */
129 |   
130 |   .header .menu-btn {
131 |     display: none;
132 |     
133 |   }
134 |   
135 |   .header .menu-btn:checked ~ .menu {
136 |     margin-right: auto;
137 |     //width: 35%;
138 |     max-height: 350px;
139 |   }
140 |   
141 |   .header .menu-btn:checked ~ .menu-icon .navicon {
142 |     background: transparent;
143 |     
144 |     
145 |   }
146 |   
147 |   .header .menu-btn:checked ~ .menu-icon .navicon:before {
148 |     transform: rotate(-45deg);
149 |   }
150 |   
151 |   .header .menu-btn:checked ~ .menu-icon .navicon:after {
152 |     transform: rotate(45deg);
153 |   }
154 |   
155 |   .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
156 |   .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
157 |     top: 0;
158 |     
159 |     
160 |   }
161 |   
162 |   /* 48em = 768px */
163 |   
164 |   @media (min-width: 48em) {
165 |     .header li {
166 |       float: left;
167 |     }
168 |     .header li a {
169 |       padding: 20px 30px;
170 |       
171 |     }
172 |     .header .menu {
173 |       clear: none;
174 |       float: right;
175 |       max-height: none;
176 |       
177 |     }
178 |     .header .menu-icon {
179 |       display: none;
180 |       
181 |     }
182 |   }
183 |   
184 | 
185 |   .resume {
186 |     color: $link-color; 
187 |     font-weight: bold;
188 |     border: $link-color;
189 |     // font-family: 'Roboto Mono', monospace;
190 |     font-family: "Source Sans Pro", sans-serif;
191 |     text-align: center;
192 |     text-decoration: none;
193 |     font-size: 16px;
194 |     cursor: pointer;
195 | 
196 |     background-color: #1d1f21;
197 |     color: $link-color; 
198 |     border: 2px solid $link-color;
199 |     border-radius: 4px;
200 | 
201 |     display: inline-block;
202 |     padding: 3px;
203 |     border: 2px solid $link-color;
204 |     border-radius: 4px;
205 |     transition: all .3s ease-in-out;
206 | 
207 |     @media only screen and (max-width: 600px) {    
208 |         margin-left: 20px ;
209 |       font-size: 12px;
210 |     }
211 | 
212 |     &:after {
213 |       position: relative;
214 |       bottom: 0.2ex;
215 |    
216 |       transition: all .3s ease-in-out;
217 |       // font-family: "FontAwesome";
218 |       font-family: "Source Sans Pro", sans-serif;
219 |       font-size: 1.5rem;
220 |       display: inline-block;
221 |       vertical-align: middle;
222 |       -webkit-transition: all .15s ease-in-out;
223 |     }
224 | 
225 |     &:hover {
226 |       transition: all .3s ease-in-out;
227 |       background-color: rgba(100, 180, 255, 0.07);
228 |       color: $link-color;
229 |     }
230 | 
231 |     &:hover:after {
232 | 
233 |       transform: translateX(7px);
234 |     }
235 |   }
236 | 
237 |   .res {
238 |     transition: all .3s ease-in-out;
239 | 
240 |       text-decoration: none;
241 |   }
242 | 
243 |   .ind {
244 |     transition: all .3s ease-in-out;
245 |     scroll-behavior: smooth;
246 |   }
247 | 
248 |   .logo {
249 |     transition: all .3s ease-in-out;
250 |   }
251 | 
252 |   .resolution {
253 |     height: 60px;
254 | 
255 |     @media only screen and (max-width: 600px) {
256 |       height: 58px;
257 |     }
258 |   }


--------------------------------------------------------------------------------
/debug.log:
--------------------------------------------------------------------------------
 1 | [0516/013518.546:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
 2 | [0516/013518.585:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
 3 | [0516/013518.550:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
 4 | [0516/013518.711:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
 5 | [0516/013518.711:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
 6 | [0516/013518.711:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
 7 | [0516/013518.711:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
 8 | [0516/013518.711:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
 9 | [0516/013518.711:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
10 | [0516/013518.711:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
11 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
12 | [0516/013518.710:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
13 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
14 | [0516/013518.711:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
15 | [0516/013518.710:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
16 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
17 | [0516/013518.710:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
18 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
19 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
20 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
21 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
22 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
23 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
24 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
25 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
26 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
27 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
28 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
29 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
30 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
31 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
32 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
33 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
34 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
35 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
36 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
37 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
38 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
39 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
40 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
41 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
42 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
43 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
44 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
45 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
46 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
47 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
48 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
49 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
50 | [0516/013518.712:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
51 | [0516/013518.713:ERROR:process_reader_win.cc(151)] SuspendThread: Access is denied. (0x5)
52 | [0516/013518.712:ERROR:process_reader_win.cc(123)] NtOpenThread: {Access Denied} A process has requested access to an object, but has not been granted those access rights. (0xc0000022)
53 | [0516/013518.551:ERROR:process_reader_win.cc(123)] NtOpenThread: {Access Denied} A process has requested access to an object, but has not been granted those access rights. (0xc0000022)
54 | [0516/013518.712:ERROR:process_reader_win.cc(123)] NtOpenThread: {Access Denied} A process has requested access to an object, but has not been granted those access rights. (0xc0000022)
55 | [0516/013519.003:ERROR:exception_snapshot_win.cc(98)] thread ID 17800 not found in process
56 | [0516/013518.712:ERROR:process_reader_win.cc(123)] NtOpenThread: {Access Denied} A process has requested access to an object, but has not been granted those access rights. (0xc0000022)
57 | [0516/013519.003:ERROR:exception_snapshot_win.cc(98)] thread ID 7412 not found in process
58 | [0516/013518.712:ERROR:process_reader_win.cc(123)] NtOpenThread: {Access Denied} A process has requested access to an object, but has not been granted those access rights. (0xc0000022)
59 | [0516/013519.003:ERROR:exception_snapshot_win.cc(98)] thread ID 17368 not found in process
60 | [0516/013518.713:ERROR:process_reader_win.cc(123)] NtOpenThread: {Access Denied} A process has requested access to an object, but has not been granted those access rights. (0xc0000022)
61 | [0516/013519.003:ERROR:exception_snapshot_win.cc(98)] thread ID 6604 not found in process
62 | [0516/013519.003:ERROR:exception_snapshot_win.cc(98)] thread ID 17464 not found in process
63 | [0516/013518.713:ERROR:process_reader_win.cc(123)] NtOpenThread: {Access Denied} A process has requested access to an object, but has not been granted those access rights. (0xc0000022)
64 | [0516/013519.003:ERROR:exception_snapshot_win.cc(98)] thread ID 20308 not found in process
65 | [0516/013519.004:ERROR:exception_snapshot_win.cc(98)] thread ID 3988 not found in process
66 | [1028/152104.573:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
67 | 


--------------------------------------------------------------------------------
/src/styles/App.scss:
--------------------------------------------------------------------------------
  1 | @font-face {
  2 |   font-style: normal;
  3 |   font-family: "Meslo LG";
  4 |   src: local("Meslo LG S"), url("./MesloLGS-Regular.ttf") format("truetype");
  5 |   font-display: swap;
  6 | }
  7 | 
  8 | body {
  9 |     margin: 0;
 10 |     background-color: #1d1f21;
 11 |     display: flex;
 12 |     justify-content: center;
 13 |     animation: fadeInAnimation ease 3s;
 14 |     animation-iteration-count: 1; 
 15 |     animation-fill-mode: forwards; 
 16 |     scroll-behavior: smooth;
 17 |    
 18 |     
 19 |     @keyframes fadeInAnimation { 
 20 |       0% { 
 21 |           opacity: 0; 
 22 |       } 
 23 |       100% { 
 24 |           opacity: 1; 
 25 |       } 
 26 |     } 
 27 |   }
 28 |   
 29 |   h1,h2,h3,h4,h5 {
 30 |     margin-left: 0;
 31 |     margin-right: 0;
 32 |     margin-top: 0;
 33 |     padding-bottom: 0;
 34 |     padding-left: 0;
 35 |     padding-right: 0;
 36 |     padding-top: 0;
 37 |     margin-bottom: 1.45rem;
 38 |     color: inherit;
 39 |     // font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
 40 |     //   Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 41 | 
 42 |     font-family: "Source Sans Pro", sans-serif;
 43 | 
 44 |     font-weight: bold;
 45 |     text-rendering: optimizeLegibility;
 46 |     font-size: 2rem;
 47 |     line-height: 1.1;
 48 |   }
 49 |   h2 {
 50 |     font-size: 1.62671rem;
 51 |   }
 52 |   h3 {
 53 |     font-size: 1.38316rem;
 54 |   }
 55 |   h4 {
 56 |     font-size: 1rem;
 57 |   }
 58 |   h5 {
 59 |     font-size: 0.85028rem;
 60 |   }
 61 |   ul {
 62 |     margin-left: 1.45rem;
 63 |     margin-right: 0;
 64 |     margin-top: 0;
 65 |     padding-bottom: 0;
 66 |     padding-left: 0;
 67 |     padding-right: 0;
 68 |     padding-top: 0;
 69 |     margin-bottom: 1.45rem;
 70 |     list-style-position: outside;
 71 |     list-style-image: none;
 72 |   }
 73 | 
 74 | 
 75 |   @import url('https://fonts.googleapis.com/css?family=Lora:400,700|Source+Sans+Pro:300,400|Dosis:300,400,700&display=swap');
 76 | 
 77 | $link-color: #2bbc8a; // slateblue
 78 | 
 79 | article {
 80 |   //margin-left: 30px;
 81 |   justify-content: center;
 82 |   max-width: 880px;
 83 |   margin-top: 140px;
 84 |   margin-bottom: 200px;
 85 |   padding: 12px;
 86 |    font-family: "Source Sans Pro", sans-serif;
 87 |   // font-family: "Poppins", sans-serif;
 88 |   color: #36363C;
 89 | 
 90 |   @media only screen and (max-width: 600px) {
 91 |     margin-top: 120px;
 92 |     margin-bottom: 30px;
 93 |     display: block;
 94 |     margin-left: auto;
 95 |     margin-right: auto;
 96 |     width: 95%;
 97 |   }
 98 | 
 99 |   h1 {
100 |     font-weight: 300;
101 |     line-height: 1.5;
102 |     font-size: 2.1rem;
103 |   }
104 | 
105 |   .highlight-link {
106 |     text-decoration: none;
107 |     color: #ffffff;
108 |     display: inline-block;
109 |     padding: 0px 7px;
110 |     transition: all .2s ease-in-out;
111 |     box-sizing: border-box;
112 |     text-decoration: none;
113 |     box-shadow: inset 0 -3px 0 $link-color;
114 |     &:hover {
115 |       box-shadow: inset 0 -47px 0 0 $link-color;
116 |       color: white;
117 |     }
118 |   }
119 | 
120 |   .arrow-link {
121 |     color: #2bbc8a; 
122 |     //background-color: #0a192f;
123 |     font-weight: bold;
124 |     border: #2bbc8a;
125 |     // font-family: 'Roboto Mono', monospace;
126 |     font-family: "Source Sans Pro", sans-serif;
127 |     padding: 15px 32px;
128 |     text-align: center;
129 |     text-decoration: none;
130 |     display: inline-block;
131 |     font-size: 22px;
132 |     margin-top: 30px;
133 |     cursor: pointer;
134 |     border-radius: 4px;
135 |     transition: all .3s ease-in-out;
136 | 
137 |     background-color: #1d1f21;
138 |     color: #2bbc8a; 
139 |     border: 2px solid #2bbc8a;
140 | 
141 |     @media only screen and (max-width: 600px) {
142 |       
143 |       
144 |       padding: 8px 18px;
145 |       margin-top: 20px;
146 |       font-size: 15px;
147 |     }
148 | 
149 |     &:after {
150 |       position: relative;
151 |       bottom: 0.2ex;
152 |       margin-left: 10px;
153 |       border: 2px solid $link-color;
154 |       color: $link-color;
155 |       // font-family: "FontAwesome";
156 |       font-family: "Source Sans Pro", sans-serif;
157 |       font-size: 1.5rem;
158 |       display: inline-block;
159 |       vertical-align: middle;
160 |       -webkit-transition: all .15s ease-in-out;
161 |     }
162 | 
163 |     &:hover {
164 |       transition: all .3s ease-in-out;
165 |       background-color: rgba(101, 248, 224, 0.07);
166 |       color: $link-color;
167 |     }
168 | 
169 |     &:hover:after {
170 |       transform: translateX(7px);
171 |     }
172 |   }
173 | }
174 | 
175 | @import url('https://fonts.googleapis.com/css2?family=Abel&family=Roboto+Mono:wght@300&display=swap');
176 | 
177 | .intro {
178 |   margin-top: 100px;
179 |   color: $link-color;
180 |   // font-family: 'Roboto Mono', monospace;
181 |   font-family: "Source Sans Pro", sans-serif;
182 |   font-size: 1.3rem;
183 |   @media only screen and (max-width: 600px) {
184 |     margin-top: 10px;
185 |     font-size: 1rem;
186 |   }
187 | }
188 | 
189 | .name {
190 |   color: #ffffff;
191 |   //margin-top: -20px;
192 |   margin-left: -3px;
193 |   font-size: 3.9rem;
194 |   font-weight: 800;
195 | 
196 |   @media only screen and (max-width: 600px) {
197 |     font-size: 2.1rem;
198 |     margin-left: 0px;
199 |   }
200 | }
201 | 
202 | .aftername {
203 |   margin-top: -10px;
204 |   font-size: 3.6rem;
205 |   color: #929191;
206 |   font-weight: 800;
207 |   
208 |   @media only screen and (max-width: 600px) {
209 |     font-size: 1.8rem;
210 |   }
211 | }
212 | 
213 | .desc {
214 |   margin-top: 30px;
215 |   //font-family: 'Abel', sans-serif;
216 |   // font-family: "Source Sans Pro", sans-serif;
217 |   font-family: "Source Sans Pro", sans-serif;
218 |   font-size: 1.25rem;
219 |   margin-inline-end: 350px;
220 |   font-weight: bold;
221 |   color: #cccaca;
222 |   font-weight: lighter;
223 | 
224 |   @media only screen and (max-width: 600px) {
225 |     margin-top: 10px;
226 |     margin-inline-end: 0px;
227 |     font-size: 1.1rem;
228 |   }
229 | }
230 | 
231 | .mail {
232 |   transition: all .3s ease-in-out;
233 |   text-decoration: none;
234 |   color: $link-color;
235 | }
236 | 
237 | 
238 | .contain {
239 |   display: inline-block;
240 |   // width: 65vw;
241 | }
242 | 
243 | 
244 |   span.animate-hand {
245 |     animation-name: wave-animation;    /* Refers to the name of your @keyframes element below */
246 |     animation-duration: 2.2s;          /* Change to speed up or slow down */
247 |     animation-iteration-count: infinite;    /* Never stop waving :) */
248 |     transform-origin: 70% 70%;         /* Pivot around the bottom-left palm */
249 |     display: inline-block;
250 |     font-size: 1.4rem;
251 | 
252 |     @media only screen and (max-width: 600px) {
253 |       
254 |       font-size: 1.2rem;
255 |     }
256 |   }
257 |   
258 |   @keyframes wave-animation {
259 |       0% { transform: rotate(  0.0deg) }
260 |      10% { transform: rotate(-10.0deg) }    /* The following four values can be played with to make the waving more or less extreme */
261 |      20% { transform: rotate( 12.0deg) }
262 |      30% { transform: rotate(-10.0deg) }
263 |      40% { transform: rotate(  9.0deg) }
264 |      50% { transform: rotate(  0.0deg) }    /* Reset for the last half to pause */
265 |     100% { transform: rotate(  0.0deg) }
266 |   }
267 | 
268 | 
269 |   
270 | .me {
271 |   
272 |   display: inline-block;
273 |   vertical-align : 30px;
274 |   width: 248px;
275 |   margin-bottom: 30px;
276 | 
277 |   @media only screen and (max-width: 600px) {
278 | 
279 |       display: block;
280 |       margin-left: auto;
281 |       margin-right: auto;
282 |       margin-bottom: 100px;
283 |       width: 45%;
284 |   }
285 | }
286 | 


--------------------------------------------------------------------------------
/src/pages/certifications.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import Fade from 'react-reveal/Fade';
  3 | import '../styles/certifications.scss';
  4 | import { Column, Row } from 'simple-flexbox';
  5 | 
  6 | class Certifications extends Component {
  7 |     render() {
  8 |         return (
  9 |             <div id="cert-page">
 10 | 
 11 |                 <Fade bottom>
 12 |                     <h3 className="heading-cert"> <a className="number-about" href="/resume"> 03. </a> My Certifications </h3>
 13 |                 </Fade>
 14 | 
 15 |                     <div className="cert-container">       
 16 | 
 17 |                         <div className="about-cert">
 18 | 
 19 |                         <Fade bottom>
 20 |                             <Column className="col1" flexGrow={1}>
 21 |                                 <Row wrap horizontal='spaced'>
 22 |   
 23 |                                     <Column className="card" flexGrow={1} horizontal='spaced'>
 24 |                                         <a className="cert-name" href="https://coursera.org/share/152a0d77124b59c561eac67dc5b9a9d8" target="_blank" rel="noopener noreferrer" >Blockchain Specialization</a>
 25 |                                         <a className="cert-desc" href="https://coursera.org/share/152a0d77124b59c561eac67dc5b9a9d8">- The University of Buffalo </a>
 26 |                                     </Column>
 27 | 
 28 |                                     <Column className="card" flexGrow={1} horizontal='spaced'>
 29 |                                         <a className="cert-name" target="_blank" rel="noopener noreferrer" href="https://coursera.org/share/96829d634fedba6f11ea5681a7020f3d">Guitar Specialization</a>
 30 |                                         <a className="cert-desc" href="https://coursera.org/share/96829d634fedba6f11ea5681a7020f3drse">- Berklee College of Music</a>
 31 |                                     </Column>
 32 |                                 </Row>
 33 |                             </Column>
 34 |                             </Fade>
 35 | 
 36 |                             <Fade bottom>
 37 |                             <Column className="col1" flexGrow={1}>
 38 |                                 <Row wrap horizontal='spaced'>
 39 |   
 40 |                                     <Column className="card" flexGrow={1} horizontal='spaced'>
 41 |                                         <a className="cert-name" href="https://coursera.org/share/8075cf9cd83b6feea0d7deecad649842" target="_blank" rel="noopener noreferrer" >Front-End Web Development with React</a>
 42 |                                         <a className="cert-desc" href="https://coursera.org/share/8075cf9cd83b6feea0d7deecad649842">- Hong Kong University of Science and Technology </a>
 43 |                                     </Column>
 44 | 
 45 |                                     <Column className="card" flexGrow={1} horizontal='spaced'>
 46 |                                         <a className="cert-name" target="_blank" rel="noopener noreferrer" href="https://udemy-certificate.s3.amazonaws.com/pdf/UC-81c4e375-06f5-4fc2-9028-61ee4df7a8f1.pdf">The Complete 2020 Web Development Bootcamp</a>
 47 |                                         <a className="cert-desc" href="https://udemy-certificate.s3.amazonaws.com/pdf/UC-81c4e375-06f5-4fc2-9028-61ee4df7a8f1.pdf">- Udemy</a>
 48 |                                     </Column>
 49 |                                 </Row>
 50 |                             </Column>
 51 |                             </Fade>
 52 | 
 53 |                             <Fade bottom>
 54 |                             <Column className="col2" flexGrow={1}>
 55 |                                 <Row wrap horizontal='spaced'>
 56 |                                     <Column className="card" flexGrow={1} horizontal='spaced'>
 57 |                                         <a className="cert-name" href="https://www.coursera.org/account/accomplishments/certificate/KZD3YCXMXK25" target="_blank" rel="noopener noreferrer">Front-End Web UI, Frameworks and Tools : Bootstrap4</a>
 58 |                                         <a className="cert-desc" href="https://www.coursera.org/account/accomplishments/certificate/KZD3YCXMXK25">- Hong Kong University of Science and Technology</a>
 59 |                                     </Column>
 60 |                                 
 61 |                                     <Column className="card" flexGrow={1} horizontal='spaced'>
 62 |                                         <a className="cert-name" href="https://learndigital.withgoogle.com/digitalunlocked/validate-certificate-code" target="_blank" rel="noopener noreferrer">The Fundamentals of Digital Marketing</a>
 63 |                                         <a className="cert-desc" href="https://learndigital.withgoogle.com/digitalunlocked/validate-certificate-code">- Google</a>
 64 |                                     </Column>
 65 |                                 </Row>
 66 |                             </Column>
 67 |                             </Fade>
 68 | 
 69 |                             <Fade bottom>
 70 |                             <Column className="col3" flexGrow={1}>
 71 |                                 <Row wrap horizontal='spaced'>
 72 |                                 
 73 |                                     <Column className="card" flexGrow={1} horizontal='spaced'>
 74 |                                         <a className="cert-name" href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fapp.pluralsight.com%2Fscore%2Fredir%2F3c330b34-6eb1-4374-a4ca-8cfbbaf13e8b%3Fec97ad1aba" target="_blank" rel="noopener noreferrer">JAVA Skill IQ : Expert</a>
 75 |                                         <a className="cert-desc" href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fapp.pluralsight.com%2Fscore%2Fredir%2F3c330b34-6eb1-4374-a4ca-8cfbbaf13e8b%3Fec97ad1aba">- PluralSight </a>
 76 |                                     </Column>
 77 |                                 
 78 |                                 
 79 |                                     <Column className="card" flexGrow={1} horizontal='spaced'>
 80 |                                         <a className="cert-name" href="https://udemy-certificate.s3.amazonaws.com/pdf/UC-4c5df15f-8201-4a6d-958b-f19add0c9a54.pdf" target="_blank" rel="noopener noreferrer">Java Programming Masterclass</a>
 81 |                                         <a className="cert-desc" href="https://udemy-certificate.s3.amazonaws.com/pdf/UC-4c5df15f-8201-4a6d-958b-f19add0c9a54.pdf">- Udemy</a>
 82 |                                     </Column>
 83 | 
 84 |                                     
 85 |                                 </Row>
 86 |                             </Column>
 87 |                             </Fade>
 88 | 
 89 |                             {/* <Fade bottom>
 90 |                             <Column className="col3" flexGrow={1}>
 91 |                                 <Row wrap horizontal="spaced">
 92 |                                 
 93 |                                     <Column className="card" flexGrow={1} horizontal='spaced'>
 94 |                                         <a className="cert-name-pluralsight" href="https://www.docdroid.net/wdNtKmG/mysqlfundamentals-pdf" target="_blank" rel="noopener noreferrer">MySQL Fundamentals</a>
 95 |                                         <a className="cert-desc" href="https://www.docdroid.net/wdNtKmG/mysqlfundamentals-pdf">- PluralSight</a>
 96 |                                     </Column>
 97 | 
 98 |                                     <Column className="card" flexGrow={1} horizontal='spaced'>
 99 |                                         <a className="cert-name-girlscript" href="https://imgur.com/a/MRDMJRi" target="_blank" rel="noopener noreferrer">Data Structures And Algorithms</a>
100 |                                         <a className="cert-desc" href="https://imgur.com/a/MRDMJRi">- GirlScript.tech</a>
101 |                                     </Column>
102 |                                 </Row>
103 |                             </Column>
104 |                             </Fade> */}
105 | 
106 |                             <Fade bottom>
107 |                             <Column className="col1" flexGrow={1}>
108 |                                 <Row wrap horizontal='spaced'>
109 |   
110 |                                     <Column className="card" flexGrow={1} horizontal='spaced'>
111 |                                         <a className="cert-name" href="https://google.qwiklabs.com/public_profiles/be9c5216-ec84-405c-8537-40e46f73ab26" target="_blank" rel="noopener noreferrer">Explore ML Track : Intermediate Level</a>
112 |                                         <a className="cert-desc" href="https://google.qwiklabs.com/public_profiles/be9c5216-ec84-405c-8537-40e46f73ab26">- Google</a>
113 |                                     </Column>
114 | 
115 |                                     <Column className="card" flexGrow={1} horizontal='spaced'>
116 |                                         <a className="cert-name" target="_blank" rel="noopener noreferrer" href="https://www.freecodecamp.org/certification/eshaan007/responsive-web-design">Responsive Web Design</a>
117 |                                         <a className="cert-desc" href="https://www.freecodecamp.org/certification/eshaan007/responsive-web-design">- freeCodeCamp.org</a>
118 |                                     </Column>
119 |                                 </Row>
120 |                             </Column>
121 |                             </Fade>
122 |                         
123 |                         </div>
124 |                     </div>
125 |             </div>
126 |         );
127 |     }
128 | }
129 | 
130 | export default Certifications;
131 | 
132 | 


--------------------------------------------------------------------------------
/src/pages/projects.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import Fade from 'react-reveal/Fade';
  3 | import '../styles/projects.scss';
  4 | 
  5 | class Projects extends Component {
  6 |     render() {
  7 |         return (
  8 |             <div id="project-page" className="proj-page">  
  9 |                 <Fade Bottom>
 10 |                     <h3 className="heading-proj"> <a className="number-about" href="/projects"> 04. </a> My Projects </h3>
 11 |                 </Fade>
 12 | 
 13 |                     <div className="proj-container">
 14 | 
 15 |                     <Fade Bottom>
 16 | 
 17 |                         <div className="project">
 18 |                             <a className="arrow-link-2" href="https://github.com/eshaan007/My-Portfolio-v1" target="_blank" rel="noopener noreferrer">Portfolio v1 <h className="arrow__1">➜</h></a>
 19 |                             {/* <h3 className="proj-name">Portfolio v1</h3> */}
 20 | 
 21 |                             <div className="proj-desc-container">
 22 | 
 23 |                                 <h4 className="proj-desc"><h className="arrow">⪢</h> It is the first Portfolio Website I designed and developed. </h4>
 24 |                                 <h4 className="proj-desc"><h className="arrow">⪢</h> I learned a lot about React, Scss and improving SEO. </h4>
 25 |                                 <h4 className="proj-desc"><h className="arrow">⪢</h> It has helped my web development improve quite a bit. It has gained 85+ Stars on Github.</h4>
 26 | 
 27 |                                 <div className="proj-desc-tool-container">
 28 | 
 29 |                                     <p className="proj-desc-tool"> HTML </p>  
 30 |                                     <p className="proj-desc-tool"> Javascript </p>
 31 |                                     <p className="proj-desc-tool"> ReactJS </p>
 32 |                                     <p className="proj-desc-tool"> Sass </p>
 33 |                                     <p className="proj-desc-tool"> Git </p>
 34 | 
 35 |                                 </div>
 36 |                             </div>
 37 |                         </div>
 38 | 
 39 |                         </Fade>
 40 | 
 41 |                         <Fade Bottom>
 42 | 
 43 |                         <div className="project">
 44 |                         <a className="arrow-link-2" href="https://github.com/eshaan007/MeloBeats" target="_blank" rel="noopener noreferrer">MeloBeats <h className="arrow__1">➜</h></a>
 45 |                             <div className="proj-desc-container">
 46 |                                 <h4 className="proj-desc"><h className="arrow">⪢</h> Because of my Love for Music, I developed a Responsive Music Player to Enjoy Chill-Hop Music. </h4>
 47 |                                 <h4 className="proj-desc"><h className="arrow">⪢</h> It is made using ReactJS. The data is being called from ChillHop’s Website in the form of JSON. </h4>
 48 |                                 <h4 className="proj-desc"><h className="arrow">⪢</h> It is Deployed on Vercel. It has gained 35+ Stars on Github. </h4>
 49 | 
 50 |                                 <div className="proj-desc-tool-container">
 51 |                                     <p className="proj-desc-tool"> HTML </p>  
 52 |                                     <p className="proj-desc-tool"> Javascript </p>
 53 |                                     <p className="proj-desc-tool"> ReactJS </p>  
 54 |                                     <p className="proj-desc-tool"> Sass </p>
 55 |                                 </div>
 56 |                             </div>
 57 |                         </div>
 58 | 
 59 |                     </Fade>
 60 | 
 61 |                     <Fade Bottom>
 62 |                         <div className="project">
 63 |                         <a className="arrow-link-2" href="https://github.com/eshaan007/api-digest-2021" target="_blank" rel="noopener noreferrer">Inferno - Gaming Search Engine <h className="arrow__1">➜</h></a>
 64 |                             <div className="proj-desc-container">
 65 |                                 <h4 className="proj-desc"><h className="arrow">⪢</h> Developed this Web-App to gather Ratings, Reviews and the Glimpses of the Game the users would be about to buy. </h4>
 66 |                                 <h4 className="proj-desc"><h className="arrow">⪢</h> Used ReactJS and Redux and Called in the Data from RAWG API. </h4>
 67 |                                 <h4 className="proj-desc"><h className="arrow">⪢</h> Beautified using Styled Components and Animated using Framer Motion API. </h4>
 68 | 
 69 |                                 <div className="proj-desc-tool-container">
 70 |                                     <p className="proj-desc-tool"> React </p>  
 71 |                                     <p className="proj-desc-tool"> Redux </p>
 72 |                                     <p className="proj-desc-tool"> Framer Motion </p>  
 73 |                                     <p className="proj-desc-tool"> RAWG API </p>  
 74 |                                     <p className="proj-desc-tool"> Styled Components </p>
 75 |                                 </div>
 76 |                             </div>
 77 |                         </div>
 78 | 
 79 |                     </Fade>
 80 | 
 81 |                         <Fade Bottom>
 82 | 
 83 |                         <div className="project">
 84 |                         <a className="arrow-link-2" href="https://github.com/eshaan007/Allowance-Checker" target="_blank" rel="noopener noreferrer">Allowance Checker <h className="arrow__1">➜</h></a>
 85 |                             <div className="proj-desc-container">
 86 |                                 <h4 className="proj-desc"><h className="arrow">⪢</h> Helps in Keeping your Spending in Check! </h4>
 87 |                                 <h4 className="proj-desc"><h className="arrow">⪢</h> It gives allowance to a child by a Parent. </h4>
 88 |                                 <h4 className="proj-desc"><h className="arrow">⪢</h> Restriction is prevalent on his spending and the money given to him. </h4>
 89 | 
 90 |                                 <div className="proj-desc-tool-container">
 91 |                                     <p className="proj-desc-tool"> Solidity </p>  
 92 |                                     <p className="proj-desc-tool"> RemixIDE </p>
 93 |                                     <p className="proj-desc-tool"> Ganache Dev. Server</p>
 94 |                                 </div>
 95 |                             </div>
 96 |                         </div>
 97 | 
 98 | </Fade>
 99 | 
100 | <Fade Bottom>
101 | 
102 |                         <div className="project">
103 |                         <a className="arrow-link-2" href="https://github.com/eshaan007/WeatherX" target="_blank" rel="noopener noreferrer">WeatherX <h className="arrow__1">➜</h></a>
104 |                             <div className="proj-desc-container">
105 |                                 <h4 className="proj-desc"><h className="arrow">⪢</h> The Weather is yours to know! </h4>
106 |                                 <h4 className="proj-desc"><h className="arrow">⪢</h> Developed this App to search Weather Conditions in ANY CITY.</h4>
107 |                                 <h4 className="proj-desc"><h className="arrow">⪢</h> Used OpenWeatherAPI's functionality and integrated it into ReactJS. </h4>
108 |                                 <h4 className="proj-desc"><h className="arrow">⪢</h> Beautified using Bootstrap CSS Framework. </h4>
109 | 
110 | 
111 |                                 <div className="proj-desc-tool-container">
112 |                                     <p className="proj-desc-tool"> React.js </p>  
113 |                                     <p className="proj-desc-tool"> Javascript </p>  
114 |                                     <p className="proj-desc-tool"> OpenWeatherAPI </p>
115 |                                     <p className="proj-desc-tool"> Bootstrap4 </p>
116 |                                 </div>
117 |                             </div>
118 |                         </div>
119 | </Fade>
120 | <Fade Bottom>
121 | 
122 |                         <div className="project">
123 |                         <a className="arrow-link-2" href="https://github.com/eshaan007/DrumKit" target="_blank" rel="noopener noreferrer">Virtual DrumKit <h className="arrow__1">➜</h></a>
124 |                             <div className="proj-desc-container">
125 |                                 <h4 className="proj-desc"><h className="arrow">⪢</h> Developed a Virtual Drum Kit which outputs a relevant sound in response to the input from the keyboard.</h4>
126 |                                 <h4 className="proj-desc"><h className="arrow">⪢</h> Helps us Stay in Touch with Music Remotely. </h4>
127 |                                 <h4 className="proj-desc"><h className="arrow">⪢</h> Deployed it via Github Pages. </h4>
128 |                                 
129 |                                 <div className="proj-desc-tool-container">
130 |                                     <p className="proj-desc-tool"> HTML </p>  
131 |                                     <p className="proj-desc-tool"> CSS </p>
132 |                                     <p className="proj-desc-tool"> Javascript </p>
133 |                                     <p className="proj-desc-tool"> Github Pages </p>
134 |                                 </div>
135 |                             </div>
136 |                         </div>
137 | </Fade>
138 | <Fade Bottom>
139 | 
140 |                         <div className="project">
141 |                         <a className="arrow-link-2" href="https://github.com/cerebro-iiitv/cerebro-web-2020" target="_blank" rel="noopener noreferrer">Cerebro Website 2020 <h className="arrow__1">➜</h></a>
142 |                             <div className="proj-desc-container">
143 |                                 <h4 className="proj-desc"><h className="arrow">⪢</h> Developed the Website of the Technical Fest in collaboration with the Cerebro Web team.</h4>
144 |                                 <h4 className="proj-desc"><h className="arrow">⪢</h> Made the Sponsors and Footer Section from Scratch. </h4>
145 |                                 <h4 className="proj-desc"><h className="arrow">⪢</h> Debugged 20+ Layout Issues across various devices.  </h4>
146 | 
147 |                                 <div className="proj-desc-tool-container">
148 |                                     <p className="proj-desc-tool"> Javascript </p>  
149 |                                     <p className="proj-desc-tool"> React.js </p>  
150 |                                     <p className="proj-desc-tool"> Sass </p>
151 | 
152 |                                 </div>
153 |                             </div>
154 |                         </div>
155 | </Fade>
156 | <Fade Bottom>
157 | 
158 |                         <div className="project">
159 |                         <a className="arrow-link-2" href="https://github.com/eshaan007/TheSnakeGame" target="_blank" rel="noopener noreferrer">The Infamous Snake Game <h className="arrow__1">➜</h></a>
160 |                             <div className="proj-desc-container">
161 |                                 <h4 className="proj-desc"><h className="arrow">⪢</h> A Classic Snake Game bound to invoke Nostalgia made using OOP Java.</h4>
162 |                                 <h4 className="proj-desc"><h className="arrow">⪢</h> Used Concepts of Javax Swing and Graphics. </h4>
163 | 
164 |                                 <div className="proj-desc-tool-container">
165 |                                     <p className="proj-desc-tool"> OOP Java </p>  
166 |                                     <p className="proj-desc-tool"> Javax Swing</p>
167 |                                 </div>
168 |                             </div>
169 |                         </div>
170 | </Fade>
171 | 
172 | <Fade Bottom>
173 | 
174 |                         <div className="project">
175 |                         <a className="arrow-link-2" href="https://github.com/eshaan007/PENTAGON-PRISONER-DATABASE-SERVER" target="_blank" rel="noopener noreferrer">Pentagon Prisoner Database Server <h className="arrow__1">➜</h></a>
176 |                             <div className="proj-desc-container">
177 |                                 <h4 className="proj-desc"><h className="arrow">⪢</h> The Head of the Prison would use this software to manage the data of a Prison all by his own.</h4>
178 |                                 <h4 className="proj-desc"><h className="arrow">⪢</h> It uses FileHandling Concepts as well as different String Functions of C to manipulate data. </h4>
179 |                                 <h4 className="proj-desc"><h className="arrow">⪢</h> It has a basic CRUD Functionality and the data is stored in a .txt format file. </h4>
180 | 
181 |                                 <div className="proj-desc-tool-container">
182 |                                     <p className="proj-desc-tool"> C Language</p>  
183 |                                     <p className="proj-desc-tool"> Filehandling Concepts </p>
184 |                                 </div>
185 |                             </div>
186 |                         </div>
187 | </Fade>
188 | 
189 |                     </div>
190 |             </div>
191 |         );
192 |     }
193 | }
194 | 
195 | export default Projects;
196 | 
197 | 


--------------------------------------------------------------------------------