├── .gitignore
├── README.md
├── assets
    └── website.PNG
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── robots.txt
└── src
    ├── App.js
    ├── components
        ├── About
        │   ├── About.js
        │   └── About.module.css
        ├── Contact
        │   ├── Contact.js
        │   └── Contact.module.css
        ├── Landing
        │   ├── Landing.js
        │   └── Landing.module.css
        ├── Logo
        │   ├── Logo.js
        │   └── Logo.module.css
        ├── NavBar
        │   ├── Burger.js
        │   ├── NavBar.js
        │   └── RightNav.js
        ├── Preloader
        │   └── Preloader.js
        ├── Project
        │   ├── Project.js
        │   └── Project.module.css
        ├── ProjectList
        │   ├── ProjectList.js
        │   └── ProjectList.module.css
        ├── Social
        │   ├── Social.js
        │   └── Social.module.css
        └── UI
        │   ├── Cancel.js
        │   ├── Card.js
        │   ├── Card.module.css
        │   ├── Mouse.css
        │   ├── Mouse.js
        │   ├── ProjectModal.js
        │   ├── ProjectModal.module.css
        │   ├── ThankYou.js
        │   └── ThankYou.module.css
    ├── data.js
    ├── img
        ├── Fooder.png
        ├── Jingle.png
        ├── homepage.png
        ├── marker.png
        ├── notepad.png
        ├── oldportfolio.png
        └── simplify1.png
    ├── index.css
    └── index.js


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 |  # 18_React_NN
 2 | React: Personal Portfolio
 3 | 
 4 | ## Introduction
 5 | Mobile responsive personal portfolio. This portfolio include modern features such as: 
 6 | * Landing page with engineered stroke-dash animation
 7 | * A sticky side footer for socials 
 8 | * Animation on-hover navigation bar with link to Resume
 9 | * Preloader animation using gsap library
10 | * Animated SVG scroll down button
11 | * Cursor animation
12 | * AOS on-scroll animation for smooth scrolling
13 | * Framer-motion to render component animations
14 | * Email JS to validate and send email from contact form
15 | * Google Map API to show current location
16 | * Spinning Skill Cube made with pure css
17 | 
18 | ![](./assets/website.PNG)
19 | 
20 | ## User Story
21 | 
22 | ```
23 | AS AN employer looking for candidates with experience building single-page applications
24 | I WANT to view a potential employee's deployed React portfolio of work samples
25 | SO THAT I can assess whether they're a good candidate for an open position
26 | ```
27 | 
28 | ## Acceptance Criteria
29 | 
30 | ```
31 | GIVEN a single-page application portfolio for a web developer
32 | WHEN I load the portfolio
33 | THEN I am presented with a page containing a header, a section for content, and a footer
34 | WHEN I view the header
35 | THEN I am presented with the developer's name and navigation with titles corresponding to different sections of the portfolio
36 | WHEN I view the navigation titles
37 | THEN I am presented with the titles About Me, Portfolio, Contact, and Resume, and the title corresponding to the current section is highlighted
38 | WHEN I click on a navigation title
39 | THEN I am presented with the corresponding section below the navigation without the page reloading and that title is highlighted
40 | WHEN I load the portfolio the first time
41 | THEN the About Me title and section are selected by default
42 | WHEN I am presented with the About Me section
43 | THEN I see a recent photo or avatar of the developer and a short bio about them
44 | WHEN I am presented with the Portfolio section
45 | THEN I see titled images of six of the developer’s applications with links to both the deployed applications and the corresponding GitHub repositories
46 | WHEN I am presented with the Contact section
47 | THEN I see a contact form with fields for a name, an email address, and a message
48 | WHEN I move my cursor out of one of the form fields without entering text
49 | THEN I receive a notification that this field is required
50 | WHEN I enter text into the email address field
51 | THEN I receive a notification if I have entered an invalid email address
52 | WHEN I am presented with the Resume section
53 | THEN I see a link to a downloadable resume and a list of the developer’s proficiencies
54 | WHEN I view the footer
55 | THEN I am presented with text or icon links to the developer’s GitHub and LinkedIn profiles, and their profile on a third platform (Stack Overflow, Twitter)
56 | 
57 | ``` 
58 | 
59 | ## Submission
60 | This portfolio was uploaded to GitHub at the following repository link:
61 | [https://github.com/nhanng19/portfolio_react](https://github.com/nhanng19/portfolio_react)
62 | 
63 | Deployed Link:
64 | [https://www.nhanngyn.tech/](https://www.nhanngyn.tech/)
65 | 


--------------------------------------------------------------------------------
/assets/website.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nhanng19/portfolio_react/d1041400f2f475664d355e329ba7deccc456e06e/assets/website.PNG


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "portfolio",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@fortawesome/fontawesome-svg-core": "^6.2.0",
 7 |     "@fortawesome/free-brands-svg-icons": "^6.2.0",
 8 |     "@fortawesome/react-fontawesome": "^0.2.0",
 9 |     "@react-google-maps/api": "^2.17.0",
10 |     "@testing-library/jest-dom": "^5.16.5",
11 |     "@testing-library/react": "^13.4.0",
12 |     "@testing-library/user-event": "^13.5.0",
13 |     "aos": "^2.3.4",
14 |     "emailjs": "^4.0.1",
15 |     "emailjs-com": "^3.2.0",
16 |     "framer-motion": "^7.6.12",
17 |     "gsap": "^3.11.3",
18 |     "html-react-parser": "^3.0.4",
19 |     "react": "^18.2.0",
20 |     "react-dom": "^18.2.0",
21 |     "react-dotenv": "^0.1.3",
22 |     "react-scripts": "5.0.1",
23 |     "react-scroll": "^1.8.8",
24 |     "react-transition-group": "^4.4.5",
25 |     "styled-components": "^5.3.6",
26 |     "web-vitals": "^2.1.4"
27 |   },
28 |   "scripts": {
29 |     "start": "react-scripts start",
30 |     "build": "react-scripts build",
31 |     "test": "react-scripts test",
32 |     "eject": "react-scripts eject"
33 |   },
34 |   "eslintConfig": {
35 |     "extends": [
36 |       "react-app",
37 |       "react-app/jest"
38 |     ]
39 |   },
40 |   "browserslist": {
41 |     "production": [
42 |       ">0.2%",
43 |       "not dead",
44 |       "not op_mini all"
45 |     ],
46 |     "development": [
47 |       "last 1 chrome version",
48 |       "last 1 firefox version",
49 |       "last 1 safari version"
50 |     ]
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nhanng19/portfolio_react/d1041400f2f475664d355e329ba7deccc456e06e/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Nhan Nguyen || Full Stack Developer with a serious passion for creating dynamic digital experiences and intuitive user interfaces while allowing seamless front-end integration to back-end systems."
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <link
19 |       href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap"
20 |       rel="stylesheet"
21 |     />
22 |     
23 |     <link
24 |       rel="stylesheet"
25 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
26 |     />
27 | 
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>Nhan N. || Full Stack Developer</title>
38 |   </head>
39 |   <body>
40 |     <noscript>You need to enable JavaScript to run this app.</noscript>
41 |     <div id = "backdrop-root"></div>
42 |     <div id = "overlay-root"></div>
43 |     <div id="root"></div>
44 | 
45 | 
46 |     <!--
47 |       This HTML file is a template.
48 |       If you open it directly in the browser, you will see an empty page.
49 | 
50 |       You can add webfonts, meta tags, or analytics to this file.
51 |       The build step will place the bundled scripts into the <body> tag.
52 | 
53 |       To begin the development, run `npm start` or `yarn start`.
54 |       To create a production bundle, use `npm run build` or `yarn build`.
55 |     -->
56 |     <div class="cursor"></div>
57 |     <div class="cursor2"></div>
58 |     <script>
59 |       var cursor = document.querySelector(".cursor");
60 |       var cursor2 = document.querySelector(".cursor2");
61 |       document.addEventListener("mousemove", function (e) {
62 |         cursor.style.cssText = cursor2.style.cssText =
63 |           "left: " + e.clientX + "px; top: " + e.clientY + "px;";
64 |       });
65 |     </script>
66 |   </body>
67 | </html>
68 | 


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nhanng19/portfolio_react/d1041400f2f475664d355e329ba7deccc456e06e/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nhanng19/portfolio_react/d1041400f2f475664d355e329ba7deccc456e06e/public/logo512.png


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


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


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import Landing from "./components/Landing/Landing";
 2 | import ProjectList from "./components/ProjectList/ProjectList";
 3 | import About from "./components/About/About";
 4 | import Contact from "./components/Contact/Contact";
 5 | import Social from "./components/Social/Social";
 6 | import Navbar from "./components/NavBar/NavBar";
 7 | import { useState } from "react";
 8 | import Preloader from "./components/Preloader/Preloader";
 9 | 
10 | function App() {
11 |   const [loading, setLoading] = useState(true);
12 | 
13 |   return (
14 |     <>
15 |       {loading ? (
16 |         <Preloader setLoading={setLoading} />
17 |       ) : (
18 |         <>
19 |           <Navbar />
20 |           <Social />
21 |           <Landing />
22 |           <ProjectList />
23 |           <About />
24 |           <Contact />
25 |         </>
26 |       )}
27 |     </>
28 |   );
29 | }
30 | 
31 | export default App;
32 | 


--------------------------------------------------------------------------------
/src/components/About/About.js:
--------------------------------------------------------------------------------
 1 | import styles from "./About.module.css";
 2 | import {
 3 |   faCss3,
 4 |   faGitAlt,
 5 |   faHtml5,
 6 |   faJsSquare,
 7 |   faReact,
 8 |   faEnvira,
 9 | } from "@fortawesome/free-brands-svg-icons";
10 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
11 | const About = () => {
12 |   return (
13 |     <div id="about" className={styles.about}>
14 |       <div data-aos="fade-left" className={styles.left}>
15 |         <div className={styles.cube}>
16 |           <div className={styles.box + " " + styles.box1}>
17 |             <FontAwesomeIcon icon={faEnvira} />
18 |           </div>
19 | 
20 |           <div className={styles.box + " " + styles.box2}>
21 |             <FontAwesomeIcon icon={faHtml5} />
22 |           </div>
23 | 
24 |           <div className={styles.box + " " + styles.box3}>
25 |             <FontAwesomeIcon icon={faCss3} />
26 |           </div>
27 | 
28 |           <div className={styles.box + " " + styles.box4}>
29 |             <FontAwesomeIcon icon={faReact} />
30 |           </div>
31 | 
32 |           <div className={styles.box + " " + styles.box5}>
33 |             <FontAwesomeIcon icon={faJsSquare} />
34 |           </div>
35 | 
36 |           <div className={styles.box + " " + styles.box6}>
37 |             <FontAwesomeIcon icon={faGitAlt} />
38 |           </div>
39 |         </div>
40 |       </div>
41 |       
42 |       <div data-aos="fade-right" className={styles.right}>
43 |         <h1 className={styles.title}>About Me</h1>
44 |         <p className={styles.sub}>
45 |           "Design is not just what it looks like and feels like. Design is how
46 |           it works" - Steve Jobs
47 |         </p>
48 |         <p className={styles.description}>
49 |           I have always had an affinity for technology and the arts, a chemistry
50 |           I gratefully utilize today as a developer. I have a serious passion
51 |           for creating dynamic digital experiences and intuitive user interfaces
52 |           while allowing seamless front-end integration to back-end systems.
53 |           Minimalism and "less is more" have always been my philosophy on
54 |           removing unnecessary distractions that would keep me from exuding my
55 |           creativity and products from executing its idea effectively. I am
56 |           interested in anything coding or design related, from software
57 |           engineering to UI/UX, and look forward to working on incredible projects
58 |           with positive people.
59 |         </p>
60 |       </div>
61 |     </div>
62 |   );
63 | };
64 | 
65 | export default About;
66 | 


--------------------------------------------------------------------------------
/src/components/About/About.module.css:
--------------------------------------------------------------------------------
  1 | .about {
  2 |   height: 100vh;
  3 |   display: flex;
  4 |   align-items: center;
  5 | }
  6 | 
  7 | .left {
  8 |   flex: 1;
  9 |   display: flex;
 10 |   align-items: center;
 11 |   justify-content: center;
 12 |   position: relative;
 13 |   height: 100%;
 14 | }
 15 | 
 16 | .right {
 17 |   flex: 1;
 18 | }
 19 | 
 20 | .cube {
 21 |   flex: 1;
 22 | }
 23 | 
 24 | .title {
 25 |   font-weight: 400;
 26 | }
 27 | 
 28 | .sub {
 29 |     font-style: italic;
 30 |   margin: 20px 0px;
 31 | }
 32 | 
 33 | .description {
 34 |   font-weight: 300;
 35 | }
 36 | 
 37 | .cube {
 38 |   width: 200px;
 39 |   height: 200px;
 40 |   position: absolute;
 41 |   transform-style: preserve-3d;
 42 |   animation: rotate 30s linear infinite;
 43 |   border: none;
 44 | }
 45 | 
 46 | .box {
 47 |   width: 100%;
 48 |   height: 100%;
 49 |   position: absolute;
 50 |   top: 0;
 51 |   left: 0;
 52 |   opacity: 0.9;
 53 |   text-align: center;
 54 |   font-size: 100px;
 55 |   display: flex;
 56 |   justify-content: center;
 57 |   align-items: center;
 58 | }
 59 | 
 60 | 
 61 | 
 62 | .box1 {
 63 |   transform: translateZ(100px);
 64 | }
 65 | 
 66 | .box2 {
 67 |   transform: rotateY(90deg) translateX(100px);
 68 |   transform-origin: right;
 69 | }
 70 | 
 71 | .box3 {
 72 |   transform: rotateY(180deg) translateZ(100px);
 73 | }
 74 | 
 75 | .box4 {
 76 |   transform: rotateY(-90deg) translateX(-100px);
 77 |   transform-origin: left;
 78 | }
 79 | 
 80 | .box5 {
 81 |   transform: rotateX(-90deg) translateY(-100px);
 82 |   transform-origin: top;
 83 | }
 84 | 
 85 | .box6 {
 86 |   transform: rotateX(90deg) translateY(100px);
 87 |   transform-origin: bottom;
 88 | }
 89 | 
 90 | /* Animating the elements */
 91 | @keyframes rotate {
 92 |   0%,
 93 |   100% {
 94 |     transform: rotate(0deg);
 95 |   }
 96 |   20% {
 97 |     transform: rotateY(90deg) rotateZ(90deg);
 98 |   }
 99 |   40% {
100 |     transform: rotateY(180deg) rotateZ(-90deg);
101 |   }
102 |   60% {
103 |     transform: rotateY(270deg) rotateZ(90deg);
104 |   }
105 |   80% {
106 |     transform: rotateY(360deg) rotateZ(-90deg);
107 |   }
108 | }
109 | 
110 | @media screen and (max-width: 390px)  {
111 |   .about {
112 |     flex-direction: column;
113 |     text-align: center;
114 |     margin-top: 50px;
115 |     overflow-x: hidden;
116 |   }
117 | 
118 |   .left {
119 |     width: 100%;
120 |   }
121 | 
122 |   .right {
123 |     padding: 20px;
124 |   }
125 | }
126 | 


--------------------------------------------------------------------------------
/src/components/Contact/Contact.js:
--------------------------------------------------------------------------------
  1 | import styles from "./Contact.module.css";
  2 | import { useRef, useState } from "react";
  3 | import emailjs from "emailjs-com";
  4 | import { GoogleMap, useLoadScript, MarkerF } from "@react-google-maps/api";
  5 | import Marker from "../../img/marker.png";
  6 | import Config from "../../config";
  7 | import ThankYou from "../UI/ThankYou";
  8 | import { AnimatePresence } from "framer-motion";
  9 | const Contact = () => {
 10 |   const formRef = useRef();
 11 |   const [done, setDone] = useState(false);
 12 | 
 13 |   const handleSubmit = (e) => {
 14 |     e.preventDefault();
 15 |     emailjs
 16 |       .sendForm(
 17 |         Config.SERVICE_ID,
 18 |         Config.TEMPLATE_ID,
 19 |         formRef.current,
 20 |         Config.USER_ID
 21 |       )
 22 |       .then(
 23 |         (result) => {
 24 |           console.log(result.text);
 25 |           setDone(true);
 26 |         },
 27 |         (error) => {
 28 |           console.log(error.text);
 29 |         }
 30 |       );
 31 |   };
 32 |   const { isLoaded } = useLoadScript({
 33 |     googleMapsApiKey: Config.API_KEY,
 34 |   });
 35 | 
 36 |   if (!isLoaded) return <div>Loading</div>;
 37 |   return (
 38 |     <div id="contact" className={styles.contact}>
 39 |       <div className={styles.right}>
 40 |         <p data-aos="fade-up-right" className={styles.description}>
 41 |           <b>Interested in my work?</b> Get in touch and send me a message.
 42 |           Always open to build amazing projects.
 43 |         </p>
 44 |         <form ref={formRef} onSubmit={handleSubmit}>
 45 |           <input
 46 |             data-aos="fade-up-right"
 47 |             type="text"
 48 |             placeholder="Name"
 49 |             name="user_name"
 50 |           />
 51 |           <input
 52 |             data-aos="fade-up-right"
 53 |             type="text"
 54 |             placeholder="Subject"
 55 |             name="user_subject"
 56 |           />
 57 |           <input
 58 |             data-aos="fade-up-right"
 59 |             type="text"
 60 |             placeholder="Email"
 61 |             name="user_email"
 62 |           />
 63 |           <textarea
 64 |             data-aos="fade-up-right"
 65 |             rows="5"
 66 |             placeholder="Message"
 67 |             name="message"
 68 |           />
 69 |           <button data-aos="fade-up-right">Submit</button>
 70 |         </form>
 71 |       </div>
 72 |       <AnimatePresence
 73 |         initial={false}
 74 |         exitBeforeEnter={true}
 75 |         onExitComplete={() => null}
 76 |       >
 77 |         {done && (
 78 |           <ThankYou
 79 |             onConfirm={() => {
 80 |               setDone(false);
 81 |             }}
 82 |           />
 83 |         )}
 84 |       </AnimatePresence>
 85 | 
 86 |       <div
 87 |         data-aos="fade-left"
 88 |         data-aos-duration="1500"
 89 |         className={styles.left}
 90 |       >
 91 |         <GoogleMap
 92 |           zoom={5}
 93 |           center={{ lat: 33.838000707701006, lng: -117.86423156003966 }}
 94 |           mapContainerClassName={styles.map}
 95 |           options={{
 96 |             mapId: Config.MAP_ID,
 97 |             disableDefaultUI: true,
 98 |             gestureHandling: "greedy",
 99 |           }}
100 |         >
101 |           <MarkerF
102 |             icon={{
103 |               url: Marker,
104 |               scaledSize: new window.google.maps.Size(30, 50),
105 |             }}
106 |             position={{ lat: 33.838000707701006, lng: -117.86423156003966 }}
107 |           />
108 |         </GoogleMap>
109 |       </div>
110 |     </div>
111 |   );
112 | };
113 | 
114 | export default Contact;
115 | 


--------------------------------------------------------------------------------
/src/components/Contact/Contact.module.css:
--------------------------------------------------------------------------------
  1 | .contact {
  2 |   height: 100vh;
  3 |   /* position: relative; */
  4 |   overflow: hidden;
  5 |   display: flex;
  6 | }
  7 | 
  8 | .left {
  9 |   flex: 1;
 10 |   position: relative;
 11 | }
 12 | 
 13 | .right {
 14 |   flex: 1;
 15 |   display: flex;
 16 |   flex-direction: column;
 17 |   align-items: center;
 18 |   justify-content: center;
 19 | }
 20 | 
 21 | .title {
 22 |   font-size: 60px;
 23 |   width: 80%;
 24 | }
 25 | 
 26 | .infoItem {
 27 |   display: flex;
 28 |   align-items: center;
 29 |   margin: 50px 0px;
 30 |   font-weight: 300;
 31 |   width: 70%;
 32 | }
 33 | 
 34 | .icon {
 35 |   width: 30px;
 36 |   height: 30px;
 37 |   margin-right: 20px;
 38 | }
 39 | 
 40 | .description {
 41 |   font-weight: 200;
 42 | }
 43 | 
 44 | .map {
 45 |   position: absolute;
 46 |   top: 0;
 47 |   bottom: 0;
 48 |   left: 0;
 49 |   right: 0;
 50 |   height: 100%;
 51 |   width: 100%;
 52 |   border: 1px solid rgb(255, 255, 255);
 53 | }
 54 | 
 55 | button {
 56 |   float: right;
 57 |   background-color: rgba(0, 0, 0, 0.001) !important;
 58 |   color: white !important;
 59 |   border: solid 1px!important;
 60 | }
 61 | input {
 62 |   width: 50%;
 63 |   height: 50px;
 64 |   border: none;
 65 |   border-bottom: 1px solid rgb(255, 255, 255);
 66 |   background: none;
 67 |   margin: 10px 0px;
 68 |   font-size: 14px;
 69 |   padding-left: 10px;
 70 |   color: white;
 71 | }
 72 | 
 73 | input:-webkit-autofill,
 74 | input:-webkit-autofill:hover,
 75 | input:-webkit-autofill:focus input:-webkit-autofill,
 76 | textarea:-webkit-autofill,
 77 | textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
 78 | select:-webkit-autofill,
 79 | select:-webkit-autofill:hover,
 80 | select:-webkit-autofill:focus {
 81 |   transition: background-color 5000s ease-in-out 0s;
 82 |   -webkit-text-fill-color: rgb(255, 255, 255);
 83 | }
 84 | 
 85 | textarea {
 86 |   width: 100%;
 87 |   background: none;
 88 |   margin: 10px 0px;
 89 |   font-size: 14px;
 90 |   padding-left: 10px;
 91 |   border: none;
 92 |   border-bottom: 1px solid rgb(255, 255, 255);
 93 | }
 94 | 
 95 | textarea:focus,
 96 | input:focus {
 97 |   outline: none;
 98 | }
 99 | 
100 | button {
101 |   border: none;
102 |   padding: 15px;
103 |   background-color: #ffffff;
104 |   color: rgb(0, 0, 0);
105 |   font-weight: 500;
106 |   cursor: pointer;
107 | }
108 | 
109 | @media screen and (max-width: 390px) {
110 |   .contact {
111 |     flex-direction: column;
112 |     padding: 0px 50px;
113 |     overflow-x: hidden;
114 |   }
115 | 
116 |   .title {
117 |     font-size: 30px;
118 |   }
119 | 
120 |   .info {
121 |     margin: 20px 0px;
122 |     width: 100%;
123 |   }
124 | 
125 |   form {
126 |     margin-top: 0px;
127 |     display: flex;
128 |     flex-wrap: wrap;
129 |   }
130 | 
131 |   input {
132 |     width: 35%;
133 |     height: 40px;
134 |     margin: 10px;
135 |     margin-left: 0;
136 |   }
137 | 
138 |   button {
139 |     margin-top: 10px;
140 |   }
141 | }
142 | 


--------------------------------------------------------------------------------
/src/components/Landing/Landing.js:
--------------------------------------------------------------------------------
 1 | import styles from "./Landing.module.css";
 2 | import Aos from "aos";
 3 | import { useEffect } from "react";
 4 | import "aos/dist/aos.css";
 5 | import Logo from "../Logo/Logo";
 6 | import Mouse from "../UI/Mouse";
 7 | import { Link } from "react-scroll";
 8 | 
 9 | const Landing = () => {
10 |   useEffect(() => {
11 |     Aos.init({ duration: 1000 });
12 |   }, []);
13 | 
14 |   return (
15 |     <div id="landing" className={styles.landing}>
16 |       <div className={styles.left}>
17 |         <div className={styles.leftWrapper}>
18 |           <h2
19 |             data-aos="fade-in"
20 |             data-aos-duration="2000"
21 |             className={styles.intro}
22 |           >
23 |             Hello, My name is
24 |           </h2>
25 |           <Logo />
26 |           <h1
27 |             data-aos="fade-in"
28 |             data-aos-duration="2000"
29 |             className={styles.name}
30 |           >
31 |             Nhan Nguyen
32 |           </h1>
33 |           <p
34 |             data-aos="fade-in"
35 |             data-aos-duration="2000"
36 |             className={styles.description}
37 |           >
38 |             Full Stack Developer
39 |           </p>
40 |         </div>
41 |       </div>
42 |       <Link to="project" spy={true} smooth={true} offset={-30} duration={500}>
43 |         <Mouse />
44 |       </Link>
45 |     </div>
46 |   );
47 | };
48 | 
49 | export default Landing;
50 | 


--------------------------------------------------------------------------------
/src/components/Landing/Landing.module.css:
--------------------------------------------------------------------------------
 1 | .landing {
 2 |   display: flex;
 3 |   height: 100vh;
 4 | }
 5 | 
 6 | .left {
 7 |   flex: 1;
 8 |   display: flex;
 9 |   align-items: center;
10 |   justify-content: center;
11 |   text-align: center;
12 | }
13 | 
14 | .right {
15 |   flex: 1;
16 |   position: relative;
17 | }
18 | 
19 | .leftWrapper {
20 |   height: 50%;
21 |   display: flex;
22 |   flex-direction: column;
23 |   justify-content: space-between;
24 | }
25 | 
26 | .intro {
27 |   font-size: 30px;
28 |   font-weight: 300;
29 | }
30 | 
31 | .name {
32 |   font-size: 60px;
33 | }
34 | 
35 | .description {
36 |   height: 50px;
37 |   font-size: 30px;
38 | 
39 | }
40 | 
41 | @keyframes move {
42 |   25% {
43 |     transform: translateY(-50px);
44 |   }
45 |   50% {
46 |     transform: translateY(-100px);
47 |   }
48 |   75% {
49 |     transform: translateY(-150px);
50 |   }
51 |   100% {
52 |     transform: translateY(-200px);
53 |   }
54 | }
55 | 
56 | .titleItem {
57 |   position: absolute;
58 |   top: 68%;
59 |   left: 50%;
60 |   transform: translate(-50%, -50%);
61 |   bottom: 30px;
62 |   height: 50px;
63 |   font-size: 30px;
64 |   font-weight: bold;
65 | }
66 | 
67 | 
68 | @media screen and (max-width: 390px) {
69 |   .landing {
70 |     flex-direction: column;
71 |   }
72 | 
73 |   .leftWrapper {
74 |     align-items: center;
75 |     justify-content: center;
76 |     text-align: center;
77 |     gap: 100px;
78 |     height: 100%;
79 |   }
80 | }
81 | 


--------------------------------------------------------------------------------
/src/components/Logo/Logo.js:
--------------------------------------------------------------------------------
 1 | import styles from "./Logo.module.css"
 2 | 
 3 | const Logo = () => {
 4 |     return (
 5 |       <svg
 6 |         id="logo"
 7 |         className={styles.logo}
 8 |         width="253"
 9 |         height="262"
10 |         viewBox="0 0 253 262"
11 |         fill="none"
12 |         xmlns="http://www.w3.org/2000/svg"
13 |       >
14 |         <linearGradient id="gradient">
15 |           <stop offset="5%" stopColor="#000000" />
16 |           <stop offset="95%" stopColor="#2d3436" />
17 |         </linearGradient>
18 |         <path
19 |           id="path"
20 |           d="M250.68 261.5H251.569L251.107 260.74L93.4897 1.56051L93.3436 1.32031H93.0625H1.85156H0.964011L1.42393 2.07941L158.455 261.259L158.601 261.5H158.883H250.68ZM1.35156 261V261.5H1.85156H77.0469H77.5469V261V149.672V149.531L77.4737 149.411L2.27839 26.1693L1.35156 24.6502V26.4297V261ZM251.18 1.82031V1.32031H250.68H175.484H174.984V1.82031V112.562V112.702L175.057 112.822L250.252 236.65L251.18 238.177V236.391V1.82031Z"
21 |           stroke="white"
22 |           strokeWidth= "0.5"
23 |         />
24 |       </svg>
25 |     );
26 | }
27 | 
28 | export default Logo;


--------------------------------------------------------------------------------
/src/components/Logo/Logo.module.css:
--------------------------------------------------------------------------------
 1 | .logo {
 2 |   position: absolute;
 3 |   top: 50%;
 4 |   left: 50%;
 5 |   transform: translate(-50%, -50%);
 6 | }
 7 | 
 8 | .logo path {
 9 |   stroke-dasharray: 1774;
10 |   stroke-dashoffset: 1774;
11 |   fill: url(#gradient);
12 |   fill-opacity: 0;
13 |   animation: line-anim 5s ease forwards, fill 0.5s ease forwards 2s;
14 | }
15 | 
16 | 
17 | @keyframes line-anim {
18 |   to {
19 |     stroke-dashoffset: 0;
20 |   }
21 | }
22 | 
23 | @keyframes fill {
24 |   from {
25 |     fill-opacity: 0;
26 |   }
27 |   to {
28 |     fill-opacity: 1;
29 |   }
30 | }
31 | 
32 | @media screen and (max-width: 390px) {
33 |   .logo {
34 | 
35 |     z-index: -10;
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/src/components/NavBar/Burger.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import styled from "styled-components";
 3 | import RightNav from "./RightNav";
 4 | 
 5 | const StyledBurger = styled.div`
 6 |   width: 2rem;
 7 |   height: 2rem;
 8 |   position: fixed;
 9 |   top: 15px;
10 |   right: 20px;
11 |   z-index: 20;
12 |   display: none;
13 |   @media (max-width: 390px) {
14 |     display: flex;
15 |     justify-content: space-around;
16 |     flex-flow: column nowrap;
17 |   }
18 |   div {
19 |     width: 2rem;
20 |     height: 0.25rem;
21 |     background-color: ${({ open }) => (open ? "#ccc" : "#333")};
22 |     border-radius: 10px;
23 |     transform-origin: 1px;
24 |     transition: all 0.3s linear;
25 |     &:nth-child(1) {
26 |       transform: ${({ open }) => (open ? "rotate(45deg)" : "rotate(0)")};
27 |     }
28 |     &:nth-child(2) {
29 |       transform: ${({ open }) => (open ? "translateX(100%)" : "translateX(0)")};
30 |       opacity: ${({ open }) => (open ? 0 : 1)};
31 |     }
32 |     &:nth-child(3) {
33 |       transform: ${({ open }) => (open ? "rotate(-45deg)" : "rotate(0)")};
34 |     }
35 |   }
36 | `;
37 | 
38 | const Burger = () => {
39 |   const [open, setOpen] = useState(false);
40 | 
41 |   return (
42 |     <>
43 |       <StyledBurger open={open} onClick={() => setOpen(!open)}>
44 |         <div style={{ backgroundColor: "white" }} />
45 |         <div style={{ backgroundColor: "white" }} />
46 |         <div style={{ backgroundColor: "white" }} />
47 |       </StyledBurger>
48 |       <RightNav open={open} />
49 |     </>
50 |   );
51 | };
52 | 
53 | export default Burger;
54 | 


--------------------------------------------------------------------------------
/src/components/NavBar/NavBar.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styled from "styled-components";
 3 | import Burger from "./Burger";
 4 | 
 5 | const Nav = styled.nav`
 6 |   width: 100%;
 7 |   height: 55px;
 8 |   background: #000000;
 9 |   border-bottom: 2px solid #f1f1f1;
10 |   display: flex;
11 |   justify-content: center;
12 |   position: fixed;
13 |   text-align: center;
14 |   z-index: 9999;
15 | `;
16 | 
17 | const Navbar = () => {
18 |   return (
19 |     <Nav data-aos="fade-down">
20 |       <Burger />
21 |     </Nav>
22 |   );
23 | };
24 | 
25 | export default Navbar;
26 | 


--------------------------------------------------------------------------------
/src/components/NavBar/RightNav.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styled from "styled-components";
 3 | import { Link } from "react-scroll";
 4 | 
 5 | const Ul = styled.ul`
 6 |   list-style: none;
 7 |   display: flex;
 8 |   align-items: center;
 9 |   text-align: center;
10 |   li {
11 |     position: relative;
12 |     padding: 5px 10px;
13 |     cursor: pointer;
14 |   }
15 |   li a{
16 |     text-decoration: none;
17 |   }
18 |   li:before,
19 |   li:after {
20 |     position: absolute;
21 |     opacity: 0;
22 |     width: 0%;
23 |     height: 1px;
24 |     content: "";
25 |     background: #fff;
26 |     transition: all 0.3s;
27 |   }
28 |   li:before {
29 |     left: 0px;
30 |     top: 0px;
31 |   }
32 |   li:after {
33 |     right: 0px;
34 |     bottom: 0px;
35 |   }
36 |   li:hover:before,
37 |   li:hover:after {
38 |     opacity: 1;
39 |     width: 100%;
40 |   }
41 | 
42 |   @media (max-width: 390px) {
43 |     flex-flow: column nowrap;
44 |     background: linear-gradient(112.1deg, #000000 11.4%, #2d3436 70.2%);
45 |     position: fixed;
46 |     transform: ${({ open }) => (open ? "translateX(0)" : "translateX(100%)")};
47 |     top: 0;
48 |     right: 0;
49 |     height: 100vh;
50 |     width: 300px;
51 |     padding-top: 3.5rem;
52 |     transition: transform 0.3s ease-in-out;
53 |     li {
54 |       color: #fff;
55 |     }
56 |   }
57 | `;
58 | 
59 | const RightNav = ({ open }) => {
60 |   return (
61 |     <Ul open={open}>
62 |       <li>
63 |         <Link to="landing" spy={true} smooth={true} offset={0} duration={500}>
64 |           HOME
65 |         </Link>
66 |       </li>
67 |       <li>
68 |         <Link to="project" spy={true} smooth={true} offset={-30} duration={500}>
69 |           PROJECTS
70 |         </Link>
71 |       </li>
72 |       <li>
73 |         <Link to="about" spy={true} smooth={true} offset={50} duration={500}>
74 |           ABOUT
75 |         </Link>
76 |       </li>
77 |       <li>
78 |         <Link to="contact" spy={true} smooth={true} offset={50} duration={500}>
79 |           CONTACT
80 |         </Link>
81 |       </li>
82 |       <li>
83 |         <a
84 |           href="https://drive.google.com/file/d/1JJQJAzv3tKF7ROPnHAwiXPI3bMV5g-0m/view?usp=sharing"
85 |           target="__blank"
86 |         >
87 |           RESUME
88 |         </a>
89 |       </li>
90 |     </Ul>
91 |   );
92 | };
93 | 
94 | export default RightNav;
95 | 


--------------------------------------------------------------------------------
/src/components/Preloader/Preloader.js:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect } from "react";
  2 | import { gsap, CSSPlugin, Expo } from "gsap";
  3 | import styled from "styled-components";
  4 | 
  5 | const Preloader = ({ setLoading }) => {
  6 |   const [counter, setCounter] = useState(0);
  7 |   useEffect(() => {
  8 |     const count = setInterval(() => {
  9 |       setCounter((counter) =>
 10 |         counter < 100
 11 |           ? counter + 1
 12 |           : (clearInterval(count), setCounter(100), reveal())
 13 |       );
 14 |     }, 25);
 15 |   }, []);
 16 | 
 17 |   async function reveal() {
 18 |     const t1 =  gsap.timeline({});
 19 | 
 20 |       await t1
 21 |       .to(".follow", {
 22 |         width: "100%",
 23 |         ease: Expo.easeInOut,
 24 |         duration: 1.2,
 25 |         delay: 0.5,
 26 |       })
 27 |       .to(".hide", { opacity: 0, duration: 0.3 })
 28 |       .to(".follow", {
 29 |         height: "100%",
 30 |         ease: Expo.easeInOut,
 31 |         duration: 0.7,
 32 |       })
 33 |       .to(".content", { width: "100%", ease: Expo.easeInOut, duration: 0.7 });
 34 |     if (!t1.isActive()) {
 35 |        await setLoading(false);
 36 |     }
 37 |   }
 38 | 
 39 |   return (
 40 |     <AppContainer>
 41 |       <Loading>
 42 |         <Follow className="follow"></Follow>
 43 |         <ProgressBar
 44 |           className="hide"
 45 |           id="progress-bar"
 46 |           style={{ width: counter + "%" }}
 47 |         ></ProgressBar>
 48 |       </Loading>
 49 | 
 50 |       <Content className="content"></Content>
 51 |     </AppContainer>
 52 |   );
 53 | };
 54 | 
 55 | const AppContainer = styled.div`
 56 |   width: 100vw;
 57 |   height: 100vh;
 58 |   color: #000000;
 59 |   position: relative;
 60 | `;
 61 | const Loading = styled.div`
 62 |   height: 100%;
 63 |   width: 100%;
 64 |   background-color: #000000;
 65 |   display: flex;
 66 |   justify-content: center;
 67 |   align-items: center;
 68 |   position: absolute;
 69 |   top: 0;
 70 | `;
 71 | const Follow = styled.div`
 72 |   position: absolute;
 73 |   background: linear-gradient(112.1deg, #000000 11.4%, #2d3436 70.2%);
 74 |   height: 2px;
 75 |   width: 0;
 76 |   left: 0;
 77 |   z-index: 2;
 78 | `;
 79 | 
 80 | const ProgressBar = styled.div`
 81 |   position: absolute;
 82 |   left: 0;
 83 |   background-color: #fff;
 84 |   height: 2px;
 85 |   width: 0;
 86 |   transition: 0.4s ease-out;
 87 | `;
 88 | 
 89 | const Content = styled.div`
 90 |   height: 100%;
 91 |   width: 0;
 92 |   position: absolute;
 93 |   left: 0;
 94 |   top: 0;
 95 |   background-color: #000000;
 96 |   padding: auto;
 97 |   z-index: 2;
 98 |   overflow: hidden;
 99 |   color: #fff;
100 | `;
101 | 
102 | export default Preloader;
103 | 


--------------------------------------------------------------------------------
/src/components/Project/Project.js:
--------------------------------------------------------------------------------
 1 | import styles from "./Project.module.css";
 2 | import { useState } from "react";
 3 | import ProjectModal from "../UI/ProjectModal";
 4 | import { AnimatePresence } from "framer-motion";
 5 | 
 6 | const Project = ({ img, link, delay, title, techno, description, summary, source }) => {
 7 |   const [modal, setModal] = useState(false);
 8 |   const modalHandler = () => {
 9 |     setModal(false);
10 |   };
11 |   return (
12 |     <>
13 |       <div
14 |         data-aos-delay={delay}
15 |         data-aos="fade-right"
16 |         className={styles.project}
17 |       >
18 |         <div className={styles.browser}>
19 |           <div className={styles.circle1}></div>
20 |           <div className={styles.circle2}></div>
21 |           <div className={styles.circle3}></div>
22 |         </div>
23 |         <img
24 |           onClick={() => {
25 |             setModal(true);
26 |           }}
27 |           src={img}
28 |           alt=""
29 |           className={styles.img}
30 |         />
31 |       </div>
32 |       <AnimatePresence
33 |         initial={false}
34 |         exitBeforeEnter={true}
35 |         onExitComplete={() => null}
36 |       >
37 |         {modal && (
38 |           <ProjectModal
39 |             title={title}
40 |             techno={techno}
41 |             description={description}
42 |             summary={summary}
43 |             link={link}
44 |             source={source}
45 |             img={img}
46 |             onConfirm={modalHandler}
47 |           />
48 |         )}
49 |       </AnimatePresence>
50 |     </>
51 |   );
52 | };
53 | 
54 | export default Project;
55 | 


--------------------------------------------------------------------------------
/src/components/Project/Project.module.css:
--------------------------------------------------------------------------------
 1 | .project {
 2 |   width: 30%;
 3 |   height: 40vh;
 4 |   margin: 20px 10px;
 5 |   border: 2px solid rgb(243, 242, 242);
 6 |   border-radius: 10px 10px 0px 0px;
 7 |   overflow: hidden;
 8 | }
 9 | 
10 | .browser {
11 |   height: 20px;
12 |   background-color: #ffffff;
13 |   display: flex;
14 |   align-items: center;
15 |   position: sticky;
16 |   z-index: 2;
17 | }
18 | 
19 | .circle1,
20 | .circle2,
21 | .circle3 {
22 |   width: 6px;
23 |   height: 6px;
24 |   border-radius: 50%;
25 |   margin: 3px;
26 |   background-color: rgb(252, 53, 53) !important;
27 | }
28 | 
29 | .circle2 {
30 |   background-color: rgb(238, 207, 139) !important;
31 | }
32 | 
33 | .circle3 {
34 |   background-color: rgb(81, 231, 81) !important;
35 | }
36 | 
37 | .img {
38 |   width: 100%;
39 |   transition: all 10s ease;
40 |   cursor: pointer;
41 | }
42 | 
43 | .project:hover .img {
44 |   transform: translateY(-100%);
45 | }
46 | 
47 | 
48 | 
49 | @media screen and (max-width: 390px) {
50 |   .project {
51 |     width: 40%;
52 |     height: 20vh;
53 |   }
54 | }


--------------------------------------------------------------------------------
/src/components/ProjectList/ProjectList.js:
--------------------------------------------------------------------------------
 1 | import styles from "./ProjectList.module.css";
 2 | import Project from "../Project/Project";
 3 | import { projects } from "../../data.js";
 4 | 
 5 | const ProjectList = () => {
 6 |   return (
 7 |     <div id="project" className={styles.projectList}>
 8 |       <div className={styles.texts}>
 9 |         <h1 data-aos="fade-right" className={styles.title}>
10 |           Check out my latest work
11 |         </h1>
12 |         <p data-aos="fade-right" className={styles.description}>
13 |           Select one of my projects to learn more.
14 |         </p>
15 |       </div>
16 | 
17 |       <div className={styles.list}>
18 |           {projects.map((project) => (
19 |             <Project
20 |               key={project.id}
21 |               img={project.img}
22 |               link={project.link}
23 |               source={project.source}
24 |               delay={project.delay}
25 |               title={project.title}
26 |               techno={project.techno}
27 |               description={project.description}
28 |               summary = {project.summary}
29 |             />
30 |           ))}
31 |       </div>
32 |     </div>
33 |   );
34 | };
35 | 
36 | export default ProjectList;
37 | 


--------------------------------------------------------------------------------
/src/components/ProjectList/ProjectList.module.css:
--------------------------------------------------------------------------------
 1 | .projectList {
 2 |   height: 100vh;
 3 |     padding: 50px 100px;
 4 |     display: flex;
 5 |     flex-direction: column;
 6 |     align-items: center;
 7 |     text-align: center;
 8 | }
 9 | 
10 | .texts {
11 |     width: 65%;
12 | }
13 | 
14 | .title {
15 |     font-size: 50px;
16 |     font-weight: 600;
17 | }
18 | 
19 | .description {
20 |     margin: 20px 0px;
21 | }
22 | 
23 | .list {
24 |     width: 100%;
25 |     display: flex;
26 |     flex-wrap: wrap;
27 |     justify-content: space-between;
28 | }
29 | 
30 | 
31 | 
32 | @media screen and (max-width: 390px) {
33 |   .projectList {
34 |     padding: 10px;
35 |   }
36 | 
37 |   .texts {
38 |     width: 100%;
39 |   }
40 | 
41 |   .description {
42 |     display: none;
43 |   }
44 | 
45 | }


--------------------------------------------------------------------------------
/src/components/Social/Social.js:
--------------------------------------------------------------------------------
 1 | import styles from "./Social.module.css";
 2 | import {
 3 |   faGithub,
 4 |   faGitlab,
 5 |   faLinkedin,
 6 | } from "@fortawesome/free-brands-svg-icons";
 7 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 8 | 
 9 | const Social = () => {
10 |   return (
11 |     <div className={styles.socials}>
12 |       <ul data-aos="fade-up" className={styles.list}>
13 |         <li>
14 |           <a
15 |             href="https://github.com/nhanng19"
16 |             aria-label="Github"
17 |             className={styles.link}
18 |             target="_blank"
19 |             rel="noreferrer"
20 |           >
21 |             <FontAwesomeIcon
22 |               className={styles.font}
23 |               icon={faGithub}
24 |               color="#DD0031"
25 |             />
26 |           </a>
27 |         </li>
28 |         <li>
29 |           <a
30 |             href="https://www.linkedin.com/in/nhanngyn/"
31 |             aria-label="Github"
32 |             className={styles.link}
33 |             target="_blank"
34 |             rel="noreferrer"
35 |           >
36 |             <FontAwesomeIcon
37 |               className={styles.font}
38 |               icon={faLinkedin}
39 |               color="#DD0031"
40 |             />
41 |           </a>
42 |         </li>
43 |         <li>
44 |           <a
45 |             href="https://gitlab.com/nhanng19"
46 |             aria-label="Github"
47 |             className={styles.link}
48 |             target="_blank"
49 |             rel="noreferrer"
50 |           >
51 |             <FontAwesomeIcon
52 |               className={styles.font}
53 |               icon={faGitlab}
54 |               color="#DD0031"
55 |             />
56 |           </a>
57 |         </li>
58 |       </ul>
59 |     </div>
60 |   );
61 | };
62 | 
63 | export default Social;
64 | 


--------------------------------------------------------------------------------
/src/components/Social/Social.module.css:
--------------------------------------------------------------------------------
 1 | .socials {
 2 |   position: fixed;
 3 |   bottom: 0;
 4 |   z-index: 10000;
 5 | }
 6 | 
 7 | .list{
 8 |   list-style: none;
 9 |   display: flex;
10 |   flex-direction: column;
11 |   align-items: center;
12 | }
13 | 
14 | .list::after {
15 |   content: "";
16 |   display: block;
17 |   background-color: white;
18 |   width: 2px;
19 |   height: 5rem
20 | }
21 | 
22 | .font {
23 |   font-size: 24px;
24 | }
25 | 
26 | 
27 | 
28 | .link:link,
29 | .link:visited {
30 |   text-decoration: none;
31 |   color: grey !important;
32 |   font-size: 3rem;
33 |   transition: all 0.3s ease-out;
34 | }
35 | 
36 | .link:hover,
37 | .link:active {
38 |   color: grey !important;
39 | }
40 | 
41 | @media screen and (max-width: 390px) {
42 | .socials {
43 |   display: none;
44 | }
45 | }


--------------------------------------------------------------------------------
/src/components/UI/Cancel.js:
--------------------------------------------------------------------------------
 1 | const Cancel = (props) => {
 2 |     return (
 3 |       <div style={{cursor: "pointer"} } onClick = {props.onCancel}>
 4 |         <svg
 5 |         width="36"
 6 |         height="36"
 7 |         viewBox="0 0 36 36"
 8 |         fill="none"
 9 |         xmlns="http://www.w3.org/2000/svg"
10 |       >
11 |         <path
12 |           d="M18 33C26.25 33 33 26.25 33 18C33 9.75 26.25 3 18 3C9.75 3 3 9.75 3 18C3 26.25 9.75 33 18 33Z"
13 |           stroke="grey"
14 |           stroke-width="1.5"
15 |           stroke-linecap="round"
16 |           stroke-linejoin="round"
17 |         />
18 |         <path
19 |           d="M13.7549 22.245L22.2449 13.755"
20 |           stroke="grey"
21 |           stroke-width="1.5"
22 |           stroke-linecap="round"
23 |           stroke-linejoin="round"
24 |         />
25 |         <path
26 |           d="M22.2449 22.245L13.7549 13.755"
27 |           stroke="grey"
28 |           stroke-width="1.5"
29 |           stroke-linecap="round"
30 |           stroke-linejoin="round"
31 |         />
32 |       </svg>
33 |       </div>
34 |       
35 |     );
36 | }
37 | 
38 | export default Cancel;


--------------------------------------------------------------------------------
/src/components/UI/Card.js:
--------------------------------------------------------------------------------
 1 | import classes from "./Card.module.css";
 2 | import { motion } from "framer-motion";
 3 | const Card = (props) => {
 4 |   const dropIn = {
 5 |     hidden: {
 6 |       x: "-200vh",
 7 |       opacity: 0,
 8 |     },
 9 |     visible: {
10 |       x: "0",
11 |       opacity: 1,
12 |       transition: {
13 |         duration: 0.5,
14 |       },
15 |     },
16 |     exit: {
17 |       x: "200vh",
18 |       opacity: 0,
19 |       transition: {
20 |         duration: 0.5,
21 |       },
22 |     },
23 |   };
24 | 
25 |   return (
26 |     <motion.div
27 |       variants={dropIn}
28 |       initial="hidden"
29 |       animate="visible"
30 |       exit="exit"
31 |       className={`${classes.card} ${props.className}`}
32 |     >
33 |       {props.children}
34 |     </motion.div>
35 |   );
36 | };
37 | 
38 | export default Card;
39 | 


--------------------------------------------------------------------------------
/src/components/UI/Card.module.css:
--------------------------------------------------------------------------------
 1 | .card {
 2 |   background: black;
 3 |   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
 4 |   width: 100%;
 5 |   left: 0;
 6 |   right: 0;
 7 |   top: 0;
 8 |   bottom: 0;
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/components/UI/Mouse.css:
--------------------------------------------------------------------------------
 1 | @keyframes ani-mouse {
 2 |   0% {
 3 |     opacity: 1;
 4 |     top: 29%;
 5 |   }
 6 |   15% {
 7 |     opacity: 1;
 8 |     top: 50%;
 9 |   }
10 |   50% {
11 |     opacity: 0;
12 |     top: 50%;
13 |   }
14 |   100% {
15 |     opacity: 0;
16 |     top: 29%;
17 |   }
18 | }
19 | 
20 | @keyframes upDown {
21 |   0% {
22 |     transform: translateY(0px);
23 |     opacity: 0.5;
24 |   }
25 |   50% {
26 |     transform: translateY(-10px);
27 |     opacity: 1;
28 |   }
29 |   100% {
30 |     transform: translateY(0px);
31 |     opacity: 0.5;
32 |   }
33 | }
34 | 
35 | 
36 | 
37 | .scroll-btn {
38 |   height: 30px;
39 |   width: 10px;
40 |   position: absolute;
41 |   left: 50%;
42 |   bottom: 30px;
43 |   border-radius: 50px;
44 |   cursor: pointer;
45 |   animation: upDown 1.5s ease infinite;
46 | }
47 | .scroll-btn > * {
48 |   display: inline-block;
49 |   line-height: 18px;
50 |   font-size: 13px;
51 |   font-weight: normal;
52 |   color: #7f8c8d;
53 |   color: #ffffff;
54 |   font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
55 |   letter-spacing: 2px;
56 | }
57 | .scroll-btn > *:hover,
58 | .scroll-btn > *:focus,
59 | .scroll-btn > *.active {
60 |   color: #ffffff;
61 | }
62 | .scroll-btn > *:hover,
63 | .scroll-btn > *:focus,
64 | .scroll-btn > *:active,
65 | .scroll-btn > *.active {
66 |   opacity: 0.8;
67 |   filter: alpha(opacity=80);
68 | }
69 | .scroll-btn .mouse {
70 |   position: relative;
71 |   display: block;
72 |   width: 15px;
73 |   height: 35px;
74 |   margin: 0 auto 20px;
75 |   box-sizing: border-box;
76 |   border: 2px solid white;
77 |   border-radius: 23px;
78 | }
79 | .scroll-btn .mouse > * {
80 |   position: absolute;
81 |   display: block;
82 |   top: 29%;
83 |   left: 65%;
84 |   width: 5px;
85 |   height: 5px;
86 |   margin: -4px 0 0 -4px;
87 |   background: white;
88 |   border-radius: 50%;
89 |   animation: ani-mouse 1.5s ease infinite 0.8s;
90 | }
91 | 


--------------------------------------------------------------------------------
/src/components/UI/Mouse.js:
--------------------------------------------------------------------------------
 1 | import "./Mouse.css";
 2 | 
 3 | const Mouse = () => {
 4 |   return (
 5 |     <span className="scroll-btn">
 6 |       <span className="mouse">
 7 |         <span></span>
 8 |       </span>
 9 |     </span>
10 |   );
11 | };
12 | 
13 | export default Mouse;
14 | 


--------------------------------------------------------------------------------
/src/components/UI/ProjectModal.js:
--------------------------------------------------------------------------------
 1 | import ReactDOM from "react-dom";
 2 | import classes from "./ProjectModal.module.css";
 3 | import Card from "./Card";
 4 | import Cancel from "./Cancel";
 5 | import { motion } from "framer-motion";
 6 | import parse from "html-react-parser";
 7 | import Jingle from "../../img/Jingle.png";
 8 | const Backdrop = (props) => {
 9 |   const dropIn = {
10 |     hidden: {
11 |       opacity: 0,
12 |     },
13 |     visible: {
14 |       opacity: 1,
15 |       transition: {
16 |         duration: 0.1,
17 |       },
18 |     },
19 |     exit: {
20 |       opacity: 0,
21 |     },
22 |   };
23 |   return (
24 |     <motion.div
25 |       variants={dropIn}
26 |       initial="hidden"
27 |       animate="visible"
28 |       exit="exit"
29 |       className={classes.backdrop}
30 |       onClick={props.onConfirm}
31 |     ></motion.div>
32 |   );
33 | };
34 | 
35 | const ModalOverlay = (props) => {
36 |   return (
37 |     <Card className={classes.modal}>
38 |       <header className={classes.actions}>
39 |         <Cancel onCancel={props.onConfirm} />
40 |       </header>
41 |       <div className={classes.left}>
42 |         <div className={classes.leftWrapper}>
43 |           <h2 className={classes.intro}>{props.description}</h2>
44 |           <h1 className={classes.name}>{props.title}</h1>
45 |           <div className={classes.titleItem}>{props.techno}</div>
46 |           <p className={classes.description}>{parse(`${props.summary}`)}</p>
47 |           <div className={classes.source}>
48 |             <button
49 |               onClick={() => window.open(`${props.link}`, "_blank")}
50 |               type="button"
51 |             >
52 |               See Live
53 |             </button>
54 |             <button
55 |               onClick={() => window.open(`${props.source}`, "_blank")}
56 |               type="button"
57 |             >
58 |               Source Code
59 |             </button>
60 |           </div>
61 |         </div>
62 |       </div>
63 |       <div className={classes.right}>
64 |         <div className={classes.imgContainer}>
65 |           <img className={classes.img} src={props.img}></img>
66 |         </div>
67 |       </div>
68 |     </Card>
69 |   );
70 | };
71 | const ProjectModal = (props) => {
72 |   return (
73 |     <>
74 |       {ReactDOM.createPortal(
75 |         <Backdrop onConfirm={props.onConfirm} />,
76 |         document.getElementById("backdrop-root")
77 |       )}
78 |       {ReactDOM.createPortal(
79 |         <ModalOverlay
80 |           title={props.title}
81 |           description={props.description}
82 |           techno={props.techno}
83 |           summary={props.summary}
84 |           link={props.link}
85 |           source={props.source}
86 |           img={props.img}
87 |           onConfirm={props.onConfirm}
88 |         />,
89 |         document.getElementById("overlay-root")
90 |       )}
91 |     </>
92 |   );
93 | };
94 | 
95 | export default ProjectModal;
96 | 


--------------------------------------------------------------------------------
/src/components/UI/ProjectModal.module.css:
--------------------------------------------------------------------------------
  1 | .backdrop {
  2 |   position: fixed;
  3 |   top: 0;
  4 |   left: 0;
  5 |   width: 100%;
  6 |   height: 100vh;
  7 |   z-index: 10000;
  8 |   background: rgba(0, 0, 0, 0.75);
  9 | }
 10 | 
 11 | .modal {
 12 |   position: fixed;
 13 |   left: 0;
 14 |   right: 0;
 15 |   top: 0;
 16 |   bottom: 0;
 17 |   z-index: 100000;
 18 |   overflow: hidden;
 19 |   display: flex;
 20 | }
 21 | 
 22 | .left {
 23 |   flex: 1;
 24 |   display: flex;
 25 |   align-items: center;
 26 |   justify-content: center;
 27 | }
 28 | 
 29 | .right {
 30 |   flex: 1;
 31 | }
 32 | 
 33 | .leftWrapper {
 34 |   padding: 50px;
 35 |   height: 50%;
 36 |   display: flex;
 37 |   flex-direction: column;
 38 |   justify-content: space-between;
 39 | }
 40 | 
 41 | .intro {
 42 |   font-size: 30px;
 43 |   font-weight: 300;
 44 | }
 45 | 
 46 | .name {
 47 |   font-size: 60px;
 48 | }
 49 | 
 50 | .title {
 51 |   height: 50px;
 52 |   overflow: hidden;
 53 | }
 54 | 
 55 | .titleItem {
 56 |   height: 50px;
 57 |   font-size: 30px;
 58 |   font-weight: bold;
 59 |   display: flex;
 60 |   align-items: center;
 61 | }
 62 | 
 63 | .actions {
 64 |   position: absolute;
 65 |   top: 0;
 66 |   right: 0;
 67 |   padding: 1rem;
 68 |   display: flex;
 69 |   justify-content: flex-end;
 70 | }
 71 | .leftWrapper button {
 72 |   align-self: flex-start;
 73 |   width: 120px;
 74 | 
 75 |   background-color: rgba(0, 0, 0, 0.001);
 76 |   color: white;
 77 |   border: solid 1px;
 78 | }
 79 | 
 80 | .img {
 81 |   width: 100%;
 82 |   transition: all 10s ease;
 83 |   cursor: pointer;
 84 | }
 85 | 
 86 | .imgContainer {
 87 |   height: 50vh;
 88 | }
 89 | 
 90 | @media screen and (max-width: 480px) {
 91 |   .modal {
 92 |     flex-direction: column;
 93 |   }
 94 | 
 95 |   .leftWrapper {
 96 |     padding: 10px;
 97 |     align-items: center;
 98 |     justify-content: center;
 99 |     text-align: center;
100 |     height: 100%;
101 |   }
102 | 
103 |     .titleItem {
104 |       font-size: 15px;
105 |     }
106 | 
107 |   .description {
108 |     display: none;
109 |   }
110 | }
111 | 


--------------------------------------------------------------------------------
/src/components/UI/ThankYou.js:
--------------------------------------------------------------------------------
 1 | import ReactDOM from "react-dom";
 2 | import classes from "./ThankYou.module.css";
 3 | import { motion } from "framer-motion";
 4 | const Backdrop = (props) => {
 5 |  const dropIn = {
 6 |    hidden: {
 7 |      opacity: 0,
 8 |    },
 9 |    visible: {
10 |      opacity: 1,
11 |      transition: {
12 |        duration: 0.1,
13 |      },
14 |    },
15 |    exit: {
16 |      opacity: 0,
17 |    },
18 |  };
19 |  return (
20 |    <motion.div
21 |      variants={dropIn}
22 |      initial="hidden"
23 |      animate="visible"
24 |      exit="exit"
25 |      className={classes.backdrop}
26 |      onClick={props.onConfirm}
27 |    ></motion.div>
28 |  );
29 | };
30 | 
31 | const ModalOverlay = (props) => {
32 |     const dropIn = {
33 |       hidden: {
34 |         y: "-100vh",
35 |         opacity: 0,
36 |       },
37 |       visible: {
38 |         y: "0",
39 |         opacity: 1,
40 |         transition: {
41 |           duration: 0.5,
42 |         },
43 |       },
44 |       exit: {
45 |         y: "100vh",
46 |         opacity: 0,
47 |         transition: {
48 |           duration: 0.5,
49 |         },
50 |       },
51 |     };
52 | 
53 |   return (
54 |     <motion.div
55 |       variants={dropIn}
56 |       initial="hidden"
57 |       animate="visible"
58 |       exit="exit"
59 |       className={classes.modal}
60 |     >
61 |       <div className={classes.content}>
62 |         <p>
63 |           Thank you for reaching out! I'll get back to you as soon as possible.
64 |         </p>
65 |       </div>
66 |       <footer className={classes.actions}>
67 |         <button onClick={props.onConfirm}>Go back</button>
68 |       </footer>
69 |     </motion.div>
70 |   );
71 | };
72 | const ThankYou = (props) => {
73 |   return (
74 |     <>
75 |       {ReactDOM.createPortal(
76 |         <Backdrop onConfirm={props.onConfirm} />,
77 |         document.getElementById("backdrop-root")
78 |       )}
79 |       {ReactDOM.createPortal(
80 |         <ModalOverlay
81 |           title={props.title}
82 |           message={props.message}
83 |           onConfirm={props.onConfirm}
84 |         />,
85 |         document.getElementById("overlay-root")
86 |       )}
87 |     </>
88 |   );
89 | };
90 | 
91 | export default ThankYou;
92 | 


--------------------------------------------------------------------------------
/src/components/UI/ThankYou.module.css:
--------------------------------------------------------------------------------
 1 | .backdrop {
 2 |   position: fixed;
 3 |   top: 0;
 4 |   left: 0;
 5 |   width: 100%;
 6 |   height: 100vh;
 7 |   z-index: 100000;
 8 |   background: rgba(0, 0, 0, 0.75);
 9 | }
10 | 
11 | .modal {
12 |   position: fixed;
13 |   top: 30vh;
14 |   left: 10%;
15 |   width: 80%;
16 |   z-index: 100000;
17 |   background: rgb(0, 0, 0);
18 |   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
19 |   border: 1px solid white;
20 |   overflow: hidden;
21 | }
22 | 
23 | 
24 | .content {
25 |   padding: 1rem;
26 | }
27 | 
28 | .actions {
29 |   padding: 1rem;
30 |   display: flex;
31 |   justify-content: flex-end;
32 | }
33 | 
34 | @media (min-width: 768px) {
35 |   .modal {
36 |     left: calc(50% - 20rem);
37 |     width: 40rem;
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/data.js:
--------------------------------------------------------------------------------
 1 | import Simplify from "./img/simplify1.png";
 2 | import DrawMe from "./img/homepage.png";
 3 | import Fooder from "./img/Fooder.png";
 4 | import Jingle from "./img/Jingle.png";
 5 | import Notepad from "./img/notepad.png";
 6 | import Portfolio from "./img/oldportfolio.png";
 7 | export const projects = [
 8 |   {
 9 |     id: 1,
10 |     title: "Simplify",
11 |     techno: "React | MySQL | Express",
12 |     description: "Text Summarizer",
13 |     summary: `Simplify is a website productivity application that can take long and tedious text and summarize it for students to easily digest information. By utilizing the innovations of natural language processing and web scraping technologies, we're able to create a more practical method for students to streamline their studying process. As a result, Simplify was developed with the goal of making it easier for students to comprehend extensive information and automatically generate flashcards to assist them in retaining key concepts. I had the pleasure to collaborate with a UX designer and a brilliant <a href="https://brian-lam.netlify.app/" target="_blank">developer</a> to win 1st place at the <a href="https://devpost.com/software/simplify-82ux9o" target="_blank">2022 API World Hackathon</a> with this project!`,
14 |     img: Simplify,
15 |     link: "https://simplify-apiworlds.netlify.app/summarize",
16 |     source: "https://github.com/lam-brian/API-World",
17 |     delay: "0",
18 |   },
19 |   {
20 |     id: 2,
21 |     title: "Draw.me",
22 |     techno: "Handlebars | MySQL | Node | Express",
23 |     description: "Drawing Platform",
24 |     summary:
25 |       "Draw.me is a community-based drawing platform where users can create an account to draw, post, share, and comment on other user's art. Our server uses mySQL database to store users' confidential credentials, drawings, and comments. Our drawing application is engineered with the Canvas API. Canvas provides a means for drawing graphics via JavaScript and the HTML canvas element. Our Javascript function can render objects such as shapes, lines, and strokes on the Canvas element at any given space coordinates, which in our application's case, the x and y coordinates of our cursor. By using Sequelize ORM, we were able to consistently store data such as drawings and comments by updating queries, so our Express server can respond back to user's requests. Our social network service is entirely built on this stack to retrieve, store, and render data back to our client.",
26 |     img: DrawMe,
27 |     link: "https://drawme.herokuapp.com/",
28 |     source: "https://github.com/nhanng19/Draw.me",
29 |     delay: "100",
30 |   },
31 |   {
32 |     id: 3,
33 |     title: "Fooder",
34 |     techno: "HTML | CSS | JavaScript | Web API",
35 |     description: "Food Application",
36 |     summary: `Fooder is a food search web application that would allow users to quickly find multiple restaurant locations of savory and delicious food. We will ask you for your location services and with that we can directly pinpoint your position wherever you are and give you food in your location. Spoonacular gave us the ability to use a information (data) of different types of food and manipulate the data where we could let the user find any type of food of their choice. The YelpAPI calls would allow us to find different restaurants and store data and by taking SpoonacularsAPI calls and manipulating the data moving forward into Yelp's API, we would be able to accomplish our goal to allow the user to get any type of food in his/her area. I was lucky enough to have won 2nd place at the <a href = "https://devpost.com/software/fooder-gtnmkz">2022 API World Hackathon</a> with this project!`,
37 |     img: Fooder,
38 |     link: "https://nhanng19.github.io/Fooder",
39 |     source: "https://github.com/nhanng19/Fooder",
40 |     delay: "200",
41 |   },
42 |   {
43 |     id: 4,
44 |     title: "Jingle",
45 |     techno: "HTML | CSS | JavaScript | Web API",
46 |     description: "Music Guessing Game",
47 |     summary:
48 |       "We wanted to find a interactive way to use data from an API that worked with music specifically, was inspired by the recent game wordle. Small music themed game that uses the last.fm API to pull a top track list, and Wikipedia's MediaWiki Api to pull a artist photo, so that users can play by guessing the artist who performed a song name that is randomly generated. ",
49 |     img: Jingle,
50 |     link: "https://nhanng19.github.io/music_wordle",
51 |     source: "https://github.com/nhanng19/music_wordle",
52 |     delay: "0",
53 |   },
54 |   {
55 |     id: 5,
56 |     title: "CSS Portfolio",
57 |     techno: "HTML | CSS",
58 |     description: "First Porfolio",
59 |     summary:
60 |       "This is my first portfolio site made with pure HTML and CSS. This is my favorite project out of the six because it reminds me how far I've come!",
61 |     img: Portfolio,
62 |     link: "https://nhanng19.github.io/css_portfolio/develop/index",
63 |     source: "https://github.com/nhanng19/css_portfolio",
64 |     delay: "100",
65 |   },
66 |   {
67 |     id: 6,
68 |     title: "Note Express",
69 |     techno: "HTML | CSS | JavaScript",
70 |     description: "Note taking application",
71 |     summary:
72 |       "A note application utilizing Express.js backend to write, store, retrieve, and delete notes. It uses an Express.js back end that save and retrieve note data from a JSON file.",
73 |     img: Notepad,
74 |     link: "https://expressnotepad.herokuapp.com/",
75 |     source: "https://github.com/nhanng19/notepad",
76 |     delay: "200",
77 |   },
78 | ];
79 | 


--------------------------------------------------------------------------------
/src/img/Fooder.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nhanng19/portfolio_react/d1041400f2f475664d355e329ba7deccc456e06e/src/img/Fooder.png


--------------------------------------------------------------------------------
/src/img/Jingle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nhanng19/portfolio_react/d1041400f2f475664d355e329ba7deccc456e06e/src/img/Jingle.png


--------------------------------------------------------------------------------
/src/img/homepage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nhanng19/portfolio_react/d1041400f2f475664d355e329ba7deccc456e06e/src/img/homepage.png


--------------------------------------------------------------------------------
/src/img/marker.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nhanng19/portfolio_react/d1041400f2f475664d355e329ba7deccc456e06e/src/img/marker.png


--------------------------------------------------------------------------------
/src/img/notepad.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nhanng19/portfolio_react/d1041400f2f475664d355e329ba7deccc456e06e/src/img/notepad.png


--------------------------------------------------------------------------------
/src/img/oldportfolio.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nhanng19/portfolio_react/d1041400f2f475664d355e329ba7deccc456e06e/src/img/oldportfolio.png


--------------------------------------------------------------------------------
/src/img/simplify1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nhanng19/portfolio_react/d1041400f2f475664d355e329ba7deccc456e06e/src/img/simplify1.png


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   margin: 0;
 3 |   font-family: "Poppins";
 4 |   color: white;
 5 | }
 6 | 
 7 | *::-webkit-scrollbar {
 8 |   display: none;
 9 | }
10 | body {
11 |   background: black;
12 | }
13 | .cursor {
14 |   position: fixed;
15 |   width: 50px;
16 |   height: 50px;
17 |   border: 1px solid #c6c6c6;
18 |   background-color: #c6c6c6;
19 |   opacity: 0.5;
20 |   border-radius: 50%;
21 |   left: 50%;
22 |   top: 50%;
23 |   pointer-events: none;
24 |   transform: translate(-50%, -50%);
25 |   transition: 0.1s;
26 |   z-index: 1000000;
27 | }
28 | 
29 | .cursor2 {
30 |   position: fixed;
31 |   width: 8px;
32 |   height: 8px;
33 |   background-color: #c6c6c6;
34 |   border-radius: 50%;
35 |   left: 50%;
36 |   top: 50%;
37 |   pointer-events: none;
38 |   transform: translate(-50%, -50%);
39 |   transition: 0.15s;
40 |   z-index: 1000000;
41 | }
42 | 
43 | @media screen and (max-width: 390px) {
44 |   .cursor,
45 |   .cursor2 {
46 |     display: none;
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import App from './App';
 4 | import "./index.css"
 5 | const root = ReactDOM.createRoot(document.getElementById('root'));
 6 | root.render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>
10 | );
11 | 
12 | 


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