├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── robots.txt
├── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── components
    │   ├── ContactForm.js
    │   ├── FeaturedProject.js
    │   ├── FramerMotion.js
    │   ├── NavBar.js
    │   ├── Projects.js
    │   ├── SocialMedia.js
    │   ├── TextAnimation.js
    │   ├── detail-project
    │   │   ├── DetailProject.css
    │   │   └── DetailProject.js
    │   └── featured-project
    │   │   ├── FeaturedProjectMedium.js
    │   │   └── FeaturedProjectSmall.js
    ├── data
    │   └── imgData.js
    ├── hooks
    │   └── CustomHook.js
    ├── img
    │   ├── 0001.png
    │   ├── 558669671596975469.gif
    │   ├── EF7C8E.jpg
    │   ├── Pokemon.jpg
    │   ├── avatar.gif
    │   ├── barSite.jpg
    │   ├── connectFour.jpg
    │   ├── disney.jpg
    │   ├── hotelProject.jpg
    │   ├── planner.jpg
    │   ├── random.jpg
    │   ├── starWar.jpg
    │   └── starWars.jpg
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── pages
    │   ├── About.js
    │   ├── Footer.js
    │   ├── Home.js
    │   └── Work.js
    ├── reportWebVitals.js
    ├── services
    │   ├── project-api.js
    │   └── quotes-api.js
    └── setupTests.js
└── tailwind.config.js


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # My Portfolio
 2 | > This is my web portfolio to introduce my self
 3 | 
 4 | ## About
 5 | [My Porfolio](https://tmp-portfolio.onrender.com/) - This is a deployment link for my portfolio website
 6 | 
 7 | ### Main Features
 8 | - Responsive Design
 9 | - Fetching Quotes API 
10 | - Sticky Nav Bar
11 | - Applying Bootstrap and Tailwind library framework
12 | - Validation for contact form
13 | 
14 | ### Build With
15 | - ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
16 | - ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
17 | - ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
18 | - ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
19 | - ![React Hook Form](https://img.shields.io/badge/React%20Hook%20Form-%23EC5990.svg?style=for-the-badge&logo=reacthookform&logoColor=white)
20 | - ![Bootstrap](https://img.shields.io/badge/bootstrap-%23563D7C.svg?style=for-the-badge&logo=bootstrap&logoColor=white)
21 | - ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)
22 | 
23 | ## Getting Started 
24 | 
25 | ### Available Scripts
26 | 
27 | In the project directory, you can run:
28 | 
29 | ### `npm start`
30 | 
31 | Runs the app in the development mode.\
32 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
33 | 
34 | The page will reload when you make changes.\
35 | You may also see any lint errors in the console.
36 | 
37 | ### `npm test`
38 | 
39 | Launches the test runner in the interactive watch mode.\
40 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
41 | 
42 | ### `npm run build`
43 | 
44 | Builds the app for production to the `build` folder.\
45 | It correctly bundles React in production mode and optimizes the build for the best performance.
46 | 
47 | The build is minified and the filenames include the hashes.\
48 | Your app is ready to be deployed!
49 | 
50 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
51 | 
52 | ## Roadmap
53 | 
54 | [ ] Local Storage
55 | 
56 | ## License
57 | Distributed under the MIT License. See `LICENSE.txt` for more information
58 | 
59 | ## Contact
60 | My Phung Tieu - [LinkedIn](https://www.linkedin.com/in/my-phung-tieu-0bba22219/) - [Github](https://github.com/tmp03099):heart_eyes:
61 | 
62 | 
63 | Project Link - [My Portfolio](https://tmp-portfolio.onrender.com/)
64 | 
65 | ## Acknowledgements
66 | - [API Qoute](https://animechan.vercel.app/)
67 | - [Tailwind](https://tailwindcss.com/docs/installation)
68 | - [React BootStrap](https://react-bootstrap.netlify.app/getting-started/introduction)
69 | - [Formik](https://formik.org/docs/tutorial)
70 | - [Netlify](https://app.netlify.com/)
71 | 
72 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "my-portfolio",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@fortawesome/fontawesome-svg-core": "^6.4.0",
 7 |     "@fortawesome/free-brands-svg-icons": "^6.4.0",
 8 |     "@fortawesome/free-solid-svg-icons": "^6.4.0",
 9 |     "@fortawesome/react-fontawesome": "^0.2.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 |     "axios": "^1.3.4",
14 |     "bootstrap": "^5.2.3",
15 |     "deepai": "^1.0.21",
16 |     "formik": "^2.2.9",
17 |     "framer-motion": "^10.10.0",
18 |     "install": "^0.13.0",
19 |     "next-gallery": "^1.2.1",
20 |     "npm": "^9.6.2",
21 |     "react": "^18.2.0",
22 |     "react-bootstrap": "^2.7.2",
23 |     "react-dom": "^18.2.0",
24 |     "react-icons": "^4.8.0",
25 |     "react-router-dom": "^6.9.0",
26 |     "react-scripts": "5.0.1",
27 |     "react-scroll": "^1.8.9",
28 |     "web-vitals": "^2.1.4",
29 |     "yup": "^1.0.2"
30 |   },
31 |   "scripts": {
32 |     "start": "react-scripts start",
33 |     "build": "react-scripts build",
34 |     "test": "react-scripts test",
35 |     "eject": "react-scripts eject"
36 |   },
37 |   "eslintConfig": {
38 |     "extends": [
39 |       "react-app",
40 |       "react-app/jest"
41 |     ]
42 |   },
43 |   "browserslist": {
44 |     "production": [
45 |       ">0.2%",
46 |       "not dead",
47 |       "not op_mini all"
48 |     ],
49 |     "development": [
50 |       "last 1 chrome version",
51 |       "last 1 firefox version",
52 |       "last 1 safari version"
53 |     ]
54 |   },
55 |   "devDependencies": {
56 |     "tailwindcss": "^3.3.0"
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tmp03099/MyPortfolio/15d0a4f855570a7489b5dde4e7260f31d727c9e5/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="Web site created using create-react-app"
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 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <style>
28 |       @import url("https://fonts.googleapis.com/css2?family=Coiny&family=Inconsolata&family=Nunito&family=Press+Start+2P&family=Ribeye&family=Silkscreen&family=Source+Code+Pro&family=Syne+Mono&family=VT323&display=swap");
29 |     </style>
30 |     <script src="https://cdnjs.deepai.org/deepai.min.js"></script>
31 |     <title>React App</title>
32 |   </head>
33 |   <body>
34 |     <noscript>You need to enable JavaScript to run this app.</noscript>
35 |     <div id="root"></div>
36 |     <!--
37 |       This HTML file is a template.
38 |       If you open it directly in the browser, you will see an empty page.
39 | 
40 |       You can add webfonts, meta tags, or analytics to this file.
41 |       The build step will place the bundled scripts into the <body> tag.
42 | 
43 |       To begin the development, run `npm start` or `yarn start`.
44 |       To create a production bundle, use `npm run build` or `yarn build`.
45 |     -->
46 |   </body>
47 | </html>
48 | 


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tmp03099/MyPortfolio/15d0a4f855570a7489b5dde4e7260f31d727c9e5/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tmp03099/MyPortfolio/15d0a4f855570a7489b5dde4e7260f31d727c9e5/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.css:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import "./App.css";
 2 | import NavBar from "./components/NavBar";
 3 | import Home from "./pages/Home";
 4 | import About from "./pages/About";
 5 | import Work from "./pages/Work";
 6 | import Footer from "./pages/Footer";
 7 | 
 8 | function App() {
 9 |   return (
10 |     <div className="App d-flex flex-column justify-center">
11 |       <NavBar />
12 |       <Home />
13 |       <About />
14 |       <Work />
15 |       <Footer />
16 |     </div>
17 |   );
18 | }
19 | 
20 | export default App;
21 | 


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


--------------------------------------------------------------------------------
/src/components/ContactForm.js:
--------------------------------------------------------------------------------
  1 | import { useFormik } from "formik";
  2 | import * as Yup from "yup";
  3 | 
  4 | function ContactForm() {
  5 |   const formik = useFormik({
  6 |     initialValues: {
  7 |       fullName: "",
  8 |       email: "",
  9 |       phone: "",
 10 |     },
 11 | 
 12 |     validationSchema: Yup.object({
 13 |       fullName: Yup.string().min(2, "Too Short!").required("Required"),
 14 |       email: Yup.string().email("Invalid email").required("Required"),
 15 |       phone: Yup.string()
 16 |         .min(9, "Too Short!")
 17 |         .max(11, "Too Long!")
 18 |         .required("Required"),
 19 |     }),
 20 |     onSubmit: (values, { resetForm }) => {
 21 |       resetForm({ values: "" });
 22 |       alert("Your successfully submit the form ");
 23 |     },
 24 |   });
 25 | 
 26 |   return (
 27 |     <div>
 28 |       <form
 29 |         className="flex flex-col w-full max-w-sm"
 30 |         onSubmit={formik.handleSubmit}
 31 |       >
 32 |         <div className="flex items-center mb-6">
 33 |           <div className="w-1/3">
 34 |             <label
 35 |               htmlFor="fullName"
 36 |               className="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4"
 37 |             >
 38 |               Full Name
 39 |             </label>
 40 |           </div>
 41 |           <div className="w-2/3">
 42 |             <input
 43 |               id="fullName"
 44 |               name="fullName"
 45 |               type="text"
 46 |               onChange={formik.handleChange}
 47 |               onBlur={formik.handleBlur}
 48 |               value={formik.values.fullName}
 49 |               className={
 50 |                 "bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500 " +
 51 |                 (formik.touched.fullName && formik.errors.fullName
 52 |                   ? "border-red-500"
 53 |                   : null)
 54 |               }
 55 |             />
 56 |             {formik.touched.fullName && formik.errors.fullName ? (
 57 |               <div style={{ color: "red" }}>{formik.errors.fullName}</div>
 58 |             ) : null}
 59 |           </div>
 60 |         </div>
 61 |         <div className="flex items-center mb-6">
 62 |           <div className="w-1/3">
 63 |             <label
 64 |               htmlFor="email"
 65 |               className="text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4"
 66 |             >
 67 |               Email
 68 |             </label>
 69 |           </div>
 70 |           <div className="w-2/3">
 71 |             <input
 72 |               id="email"
 73 |               name="email"
 74 |               type="email"
 75 |               onChange={formik.handleChange}
 76 |               onBlur={formik.handleBlur}
 77 |               value={formik.values.email}
 78 |               className={
 79 |                 "bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500 " +
 80 |                 (formik.touched.email && formik.errors.email
 81 |                   ? "border-red-500"
 82 |                   : null)
 83 |               }
 84 |             />
 85 |             {formik.touched.email && formik.errors.email ? (
 86 |               <div style={{ color: "red" }}>{formik.errors.email}</div>
 87 |             ) : null}
 88 |           </div>
 89 |         </div>
 90 |         <div className="flex items-center mb-6">
 91 |           <div className="w-1/3">
 92 |             <label
 93 |               htmlFor="phone"
 94 |               className="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4"
 95 |             >
 96 |               Phone
 97 |             </label>
 98 |           </div>
 99 |           <div className="w-2/3">
100 |             <input
101 |               id="phone"
102 |               name="phone"
103 |               type="phone"
104 |               onChange={formik.handleChange}
105 |               onBlur={formik.handleBlur}
106 |               value={formik.values.phone}
107 |               className={
108 |                 "bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500 " +
109 |                 (formik.touched.phone && formik.errors.phone
110 |                   ? "border-red-500"
111 |                   : null)
112 |               }
113 |             />
114 |             {formik.touched.phone && formik.errors.phone ? (
115 |               <div style={{ color: "red" }}>{formik.errors.phone}</div>
116 |             ) : null}
117 |           </div>
118 |         </div>
119 |         <div className="flex items-center mb-6">
120 |           <div className="w-full">
121 |             <textarea
122 |               className="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"
123 |               id="inline-text"
124 |               type="text"
125 |               placeholder="Your text here"
126 |             />
127 |           </div>
128 |         </div>
129 |         <div className="flex items-center justify-center">
130 |           <div className="w-2/3">
131 |             <button
132 |               className="shadow bg-purple-500 hover:bg-purple-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded"
133 |               type="submit"
134 |             >
135 |               Submit
136 |             </button>
137 |           </div>
138 |         </div>
139 |       </form>
140 |     </div>
141 |   );
142 | }
143 | export default ContactForm;
144 | 


--------------------------------------------------------------------------------
/src/components/FeaturedProject.js:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from "react";
 2 | import { getFeatureProjects } from "../services/project-api";
 3 | import { useViewport } from "../hooks/CustomHook";
 4 | import FeaturedProjectMedium from "./featured-project/FeaturedProjectMedium";
 5 | import FeaturedProjectSmall from "./featured-project/FeaturedProjectSmall";
 6 | 
 7 | function FeaturedProject() {
 8 |   const [fProject, setFProject] = useState([]);
 9 | 
10 |   const { width } = useViewport();
11 |   const small = 650;
12 | 
13 |   useEffect(() => {
14 |     const loadProject = () => {
15 |       const data = getFeatureProjects();
16 |       setFProject(data);
17 |     };
18 |     loadProject();
19 |   }, []);
20 | 
21 |   return (
22 |     <section className="flex flex-col justify-center items-center">
23 |       {fProject.map((item, idx) =>
24 |         width < small ? (
25 |           <FeaturedProjectSmall project={item} key={idx} />
26 |         ) : (
27 |           <FeaturedProjectMedium project={item} key={idx} />
28 |         )
29 |       )}
30 |     </section>
31 |   );
32 | }
33 | export default FeaturedProject;
34 | 


--------------------------------------------------------------------------------
/src/components/FramerMotion.js:
--------------------------------------------------------------------------------
 1 | import { motion } from "framer-motion";
 2 | 
 3 | function FramerMotion({ slogan }) {
 4 |   const words = slogan.split("");
 5 | 
 6 |   // Variants for container of words
 7 |   const container = {
 8 |     hidden: { opacity: 0 },
 9 |     visible: (i = 1) => ({
10 |       opacity: 1,
11 |       transition: { staggerChildren: 0.15, delayChildren: 0.04 * i },
12 |     }),
13 |   };
14 | 
15 |   // Variants for each word
16 |   const child = {
17 |     visible: {
18 |       opacity: 1,
19 |       x: 0,
20 |       transition: {
21 |         type: "spring",
22 |         damping: 12,
23 |         stiffness: 100,
24 |       },
25 |     },
26 |     hidden: {
27 |       opacity: 0,
28 |       x: 20,
29 |       transition: {
30 |         type: "spring",
31 |         damping: 12,
32 |         stiffness: 100,
33 |       },
34 |     },
35 |   };
36 | 
37 |   return (
38 |     <motion.div
39 |       className="flex justify-end"
40 |       style={{ overflow: "hidden" }}
41 |       variants={container}
42 |       initial="hidden"
43 |       animate="visible"
44 |     >
45 |       {words.map((word, index) => (
46 |         <motion.span
47 |           // className="fontCoiny mb-3 md:my-3 text-xl md:text-4xl lg:text-5xl"
48 |           className="md:my-4 text-lg md:text-3xl lg:text-4xl"
49 |           variants={child}
50 |           style={{ marginRight: "4px" }}
51 |           key={index}
52 |         >
53 |           {word}
54 |         </motion.span>
55 |       ))}
56 |     </motion.div>
57 |   );
58 | }
59 | export default FramerMotion;
60 | 


--------------------------------------------------------------------------------
/src/components/NavBar.js:
--------------------------------------------------------------------------------
 1 | import Navbar from "react-bootstrap/Navbar";
 2 | import Nav from "react-bootstrap/Nav";
 3 | import Container from "react-bootstrap/Container";
 4 | import { Link as LinkScroll } from "react-scroll";
 5 | import logoImg from "../img/0001.png";
 6 | 
 7 | function NavBar() {
 8 |   return (
 9 |     <>
10 |       <Navbar sticky="top" expand={"md"} className="nav flex item-center">
11 |         <Container fluid>
12 |           <Navbar.Brand href="https://tmpportfolio.netlify.app/">
13 |             <img
14 |               src={logoImg}
15 |               alt="logo.img"
16 |               className="logo w-14 border-amber-300 rounded-full ml-5"
17 |             />
18 |           </Navbar.Brand>
19 |           <Navbar.Toggle aria-controls={`offcanvasNavbar-expand-md`} />
20 |           <Navbar.Offcanvas
21 |             id={`offcanvasNavbar-expand-md`}
22 |             aria-labelledby={`offcanvasNavbarLabel-expand-md`}
23 |             placement="end"
24 |           >
25 |             <Nav className="fontSyne align-center justify-end grow pe-3">
26 |               <LinkScroll
27 |                 className="text-xl mx-4 font-bold no-underline text-amber-300 "
28 |                 activeClass="active"
29 |                 smooth
30 |                 spy
31 |                 to="home"
32 |                 duration={100}
33 |               >
34 |                 Home
35 |               </LinkScroll>
36 |               <LinkScroll
37 |                 className="text-xl mx-4 font-bold no-underline text-amber-300"
38 |                 smooth
39 |                 spy
40 |                 to="about"
41 |                 duration={100}
42 |               >
43 |                 About
44 |               </LinkScroll>
45 |               <LinkScroll
46 |                 className="text-xl mx-4 font-bold no-underline text-amber-300"
47 |                 smooth
48 |                 spy
49 |                 to="projects"
50 |                 duration={100}
51 |               >
52 |                 Work
53 |               </LinkScroll>
54 |               <LinkScroll
55 |                 className="text-xl mx-4 font-bold no-underline text-amber-300"
56 |                 smooth
57 |                 spy
58 |                 to="contact"
59 |                 duration={100}
60 |               >
61 |                 Contact
62 |               </LinkScroll>
63 |               <a
64 |                 className="text-xl mx-4 font-bold no-underline text-amber-300"
65 |                 href="https://docs.google.com/document/d/e/2PACX-1vS_GmGWxfwTtaWRePRdwUNTErFMZ5T2t_ajXwj63sVPjcfY9EvoMG344MRMR2ELnQ/pub"
66 |               >
67 |                 Resume
68 |               </a>
69 |             </Nav>
70 |           </Navbar.Offcanvas>
71 |         </Container>
72 |       </Navbar>
73 |     </>
74 |   );
75 | }
76 | 
77 | export default NavBar;
78 | 


--------------------------------------------------------------------------------
/src/components/Projects.js:
--------------------------------------------------------------------------------
 1 | import DetailProject from "./detail-project/DetailProject";
 2 | import { useState, useEffect } from "react";
 3 | import { getProjects } from "../services/project-api";
 4 | 
 5 | function Projects() {
 6 |   const [project, setProject] = useState([]);
 7 | 
 8 |   useEffect(() => {
 9 |     const loadProject = () => {
10 |       const data = getProjects();
11 |       setProject(data);
12 |     };
13 |     loadProject();
14 |   }, []);
15 | 
16 |   return (
17 |     <section className="flex flex-col m-5 justify-center items-center">
18 |       <h2 className="text-left lg:text-5xl mb-5">OTHER PROJECTS</h2>
19 |       <div className="flex flex-wrap justify-center item-center">
20 |         {project.map((ele, idx) => (
21 |           <DetailProject project={ele} key={idx} />
22 |         ))}
23 |       </div>
24 |     </section>
25 |   );
26 | }
27 | export default Projects;
28 | 


--------------------------------------------------------------------------------
/src/components/SocialMedia.js:
--------------------------------------------------------------------------------
 1 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 2 | import { faGithub } from "@fortawesome/free-brands-svg-icons";
 3 | import { faInstagram } from "@fortawesome/free-brands-svg-icons";
 4 | import { faLinkedin } from "@fortawesome/free-brands-svg-icons";
 5 | 
 6 | function SocialMedia() {
 7 |   return (
 8 |     <section className="w-screen h-auto sticky top-0 z-auto">
 9 |       <ul>
10 |         <li className="">
11 |           <a
12 |             className="text-3xl text-black scale-y-125"
13 |             href="https://github.com/tmp03099"
14 |           >
15 |             <FontAwesomeIcon icon={faGithub} />
16 |           </a>
17 |         </li>
18 |         <li>
19 |           <a
20 |             className="text-3xl text-black"
21 |             href="https://www.instagram.com/fung.09/"
22 |           >
23 |             <FontAwesomeIcon icon={faInstagram} />
24 |           </a>
25 |         </li>
26 |         <li>
27 |           <a
28 |             className="text-3xl text-black"
29 |             href="https://www.linkedin.com/in/my-phung-tieu-0bba22219/"
30 |           >
31 |             <FontAwesomeIcon icon={faLinkedin} />
32 |           </a>
33 |         </li>
34 |       </ul>
35 |     </section>
36 |   );
37 | }
38 | export default SocialMedia;
39 | 


--------------------------------------------------------------------------------
/src/components/TextAnimation.js:
--------------------------------------------------------------------------------
 1 | import { useEffect } from "react";
 2 | import FramerMotion from "./FramerMotion";
 3 | 
 4 | function TextAnimation() {
 5 |   useEffect(() => {
 6 |     const array = ["Simple", "Creative", "Impressive", "Effective"];
 7 |     let arrayIdx = 0;
 8 | 
 9 |     const countinue = () => {
10 |       // countinue looping
11 |       if (arrayIdx < array.length) {
12 |         fadeIn();
13 |         arrayIdx++; // loop the next word
14 |       } else {
15 |         arrayIdx = 0;
16 |         fadeIn();
17 |       }
18 |     };
19 | 
20 |     const fadeIn = () => {
21 |       // get Element by Id
22 |       const arrSpan = document.getElementById("text-store");
23 | 
24 |       //remove the previous word
25 |       while (arrSpan.firstElementChild) {
26 |         arrSpan.removeChild(arrSpan.firstElementChild);
27 |       }
28 | 
29 |       //create element span for each word
30 |       const span = document.createElement("span");
31 |       span.id = "text-animation";
32 | 
33 |       // span.style.animation = "fadeInOut 3s ease-in-out";
34 |       span.style.position = "absolute"; //need set up position
35 |       //set the text content equal each word
36 |       span.textContent = array[arrayIdx];
37 | 
38 |       //append each word span to the parent arrSpan
39 |       arrSpan.appendChild(span);
40 | 
41 |       setTimeout(() => {
42 |         span.remove();
43 |         countinue();
44 |       }, 3000);
45 |     };
46 | 
47 |     countinue();
48 |   }, []);
49 | 
50 |   return (
51 |     <div className="slogan ml-2 grid grid-cols-2 justify-center content-center items-center ">
52 |       <span>
53 |         <FramerMotion slogan={`Build a Website`} />
54 |       </span>
55 |       <span
56 |         id="text-store"
57 |         className="smAnimation flex items-center content-center"
58 |       ></span>
59 |     </div>
60 |   );
61 | }
62 | export default TextAnimation;
63 | 


--------------------------------------------------------------------------------
/src/components/detail-project/DetailProject.css:
--------------------------------------------------------------------------------
 1 | .hide-section {
 2 |   height: 0;
 3 |   opacity: 0;
 4 | 
 5 |   transition-property: background-color, opacity, height;
 6 |   transition: 0.5s ease-in-out;
 7 | }
 8 | 
 9 | .hover {
10 |   height: 50%;
11 |   opacity: 1;
12 |   background-color: rgb(255, 255, 255);
13 | }
14 | 


--------------------------------------------------------------------------------
/src/components/detail-project/DetailProject.js:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import "./DetailProject.css";
 3 | 
 4 | function DetailProject({ project }) {
 5 |   const [hover, setHover] = useState(false);
 6 | 
 7 |   function mousetEnter() {
 8 |     setHover(true);
 9 |   }
10 | 
11 |   function mouseLeave() {
12 |     setHover(false);
13 |   }
14 | 
15 |   return (
16 |     <section>
17 |       <div
18 |         className="storeImg w-full relative"
19 |         onMouseEnter={mousetEnter}
20 |         onMouseLeave={mouseLeave}
21 |       >
22 |         <img
23 |           src={project.src}
24 |           style={{ width: 300, height: 250 }}
25 |           alt={project.alt}
26 |         />
27 |         <div className="flex flex-col justify-between item-center w-full h-full transition duration-150 ease-in-out top-0 left-0 absolute border-2 border-separate border-slate-700">
28 |           <div
29 |             className={
30 |               "hide-section flex flex-col items-center justify-center" +
31 |               (hover ? " hover" : "")
32 |             }
33 |           >
34 |             <div className="fontIncon mt-4 mb-2 text-black text-2xl font-extrabold">
35 |               {project.title}
36 |             </div>
37 |             <span className="mb-4 text-rose-500 text-center text-lg font-bold">
38 |               {project.programs}
39 |             </span>
40 |           </div>
41 |           <div
42 |             className={
43 |               "hide-section flex justify-center items-end" +
44 |               (hover ? " hover" : "")
45 |             }
46 |           >
47 |             <div className="mb-5">
48 |               <button className="fontSourceCode rounded-lg hover:rounded-xl bg-rose-500 py-2 px-3 ">
49 |                 <a
50 |                   href={project.link}
51 |                   className="no-underline text-white text-md "
52 |                 >
53 |                   CHECK OUT
54 |                 </a>
55 |               </button>
56 |             </div>
57 |           </div>
58 |         </div>
59 |       </div>
60 |     </section>
61 |   );
62 | }
63 | export default DetailProject;
64 | 


--------------------------------------------------------------------------------
/src/components/featured-project/FeaturedProjectMedium.js:
--------------------------------------------------------------------------------
 1 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 2 | import { faGithub } from "@fortawesome/free-brands-svg-icons";
 3 | import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
 4 | 
 5 | function FeaturedProjectMedium({ project }) {
 6 |   return (
 7 |     <div
 8 |       className="projectBg flex project-1 py-5 m-5 justify-center 
 9 |       relative isolate overflow-hidden px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:pt-0"
10 |     >
11 |       <svg
12 |         viewBox="0 0 1024 1024"
13 |         className="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"
14 |         aria-hidden="true"
15 |       >
16 |         <circle
17 |           cx={512}
18 |           cy={512}
19 |           r={512}
20 |           fill="url(#759c1415-0410-454c-8f7c-9a820de03641)"
21 |           fillOpacity="0.7"
22 |         />
23 |         <defs>
24 |           <radialGradient id="759c1415-0410-454c-8f7c-9a820de03641">
25 |             <stop stopColor="#24B391" />
26 |             <stop offset={1} stopColor="#1A7E70" />
27 |           </radialGradient>
28 |         </defs>
29 |       </svg>
30 |       <div className="flex relative vh-80 w-1/2 lg:w-full xl:mt-5 items-center ">
31 |         <img
32 |           className="rounded-md bg-white/5 ring-1 ring-white/10"
33 |           width={400}
34 |           height={400}
35 |           src={project.src}
36 |           alt={project.alt}
37 |         />
38 |       </div>
39 |       <div
40 |         className="text-white text-right ml-5 max-w-md w-1/2 lg:w-full lg:mx-0 lg:flex-auto lg:py-12"
41 |         width={200}
42 |         height={400}
43 |       >
44 |         <p className="mb-1">Feature Project</p>
45 |         <h3 className="my-4 text-xl lg:text-3xl">{project.title}</h3>
46 |         <div className="fontIncon lg:text-lg description">
47 |           {project.description}
48 |         </div>
49 |         <div className="fontIncon my-4 text-cyan-400">{project.programs}</div>
50 |         <ul className="flex list-none text-2xl">
51 |           <li>
52 |             <a href={project.github} className="text-white">
53 |               <FontAwesomeIcon icon={faGithub} />
54 |             </a>
55 |           </li>
56 |           <li className="mx-10">
57 |             <a href={project.link} className="text-white">
58 |               <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
59 |             </a>
60 |           </li>
61 |         </ul>
62 |       </div>
63 |     </div>
64 |   );
65 | }
66 | 
67 | export default FeaturedProjectMedium;
68 | 


--------------------------------------------------------------------------------
/src/components/featured-project/FeaturedProjectSmall.js:
--------------------------------------------------------------------------------
 1 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 2 | import { faGithub } from "@fortawesome/free-brands-svg-icons";
 3 | import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
 4 | 
 5 | function FeaturedProjectSmall({ project }) {
 6 |   return (
 7 |     <div
 8 |       className="flex flex-col p-3 m-2 justify-center
 9 |       relative isolate overflow-hidden bg-gray-900 rounded-2xl w-11/12"
10 |     >
11 |       <div
12 |         className="flex bg-contain bg-no-repeat bg-center"
13 |         style={{ backgroundImage: `url(${project.src})` }}
14 |       >
15 |         <div className="flex flex-col text-white bg-gray-900 opacity-90 text-center">
16 |           <p className="mb-1 text-cyan-400">Feature Project</p>
17 |           <h3 className="mb-4">{project.title}</h3>
18 |           <div className="fontIncon">{project.description}</div>
19 |           <div className="fontIncon my-4 text-cyan-400 font-bold">
20 |             {project.programs}
21 |           </div>
22 |           <ul className="flex list-none text-xl">
23 |             <li>
24 |               <a href={project.github} className="text-white">
25 |                 <FontAwesomeIcon icon={faGithub} />
26 |               </a>
27 |             </li>
28 |             <li className="mx-10">
29 |               <a href={project.link} className="text-white">
30 |                 <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
31 |               </a>
32 |             </li>
33 |           </ul>
34 |         </div>
35 |       </div>
36 |     </div>
37 |   );
38 | }
39 | 
40 | export default FeaturedProjectSmall;
41 | 


--------------------------------------------------------------------------------
/src/data/imgData.js:
--------------------------------------------------------------------------------
 1 | import hotelProject from "../img/hotelProject.jpg";
 2 | import connectFour from "../img/connectFour.jpg";
 3 | import pokemon from "../img/Pokemon.jpg";
 4 | import planner from "../img/planner.jpg";
 5 | import foodRandom from "../img/random.jpg";
 6 | import disney from "../img/disney.jpg";
 7 | import barSite from "../img/barSite.jpg";
 8 | import starWars from "../img/starWar.jpg";
 9 | 
10 | export const imgData = [
11 |   {
12 |     top: true,
13 |     src: planner,
14 |     alt: "plannerApp.img",
15 |     title: "Travel Planner",
16 |     programs: "React Node.js MongoDB JSON Tailwinds ",
17 |     description:
18 |       "A version website planner for traveller that help them manage and planning their trip is eaiser and faster.",
19 |     github: "https://github.com/tmp03099/Travel-Planner",
20 |     link: "https://travel-planner-api.onrender.com",
21 |   },
22 |   {
23 |     top: false,
24 |     src: hotelProject,
25 |     alt: "hotel.img",
26 |     title: "Hotel Booking",
27 |     programs: "Java RestAPI Spring Boot Angular Typescript PrimeNG ",
28 |     description:
29 |       "A version web Hotel Booking that allow you fill in the date to search available room, filter out and booking",
30 |     github: "https://github.com/tmp03099/BookingApplication",
31 |     link: "https://main--laplace-hotel.netlify.app/home",
32 |   },
33 |   {
34 |     top: true,
35 |     src: connectFour,
36 |     alt: "connect4.img",
37 |     title: "Connect Four Game",
38 |     programs: "JavaScripts HTML5 CSS3 HTML-DOM ",
39 |     description: `A website version connect four game with fully functional,
40 |       sounds and animation. Developed responsive design for any devices  `,
41 |     github: "https://github.com/tmp03099/connect-four-game.github.io",
42 |     link: "https://tmp03099.github.io/connect-four-game.github.io/",
43 |   },
44 |   {
45 |     top: false,
46 |     src: foodRandom,
47 |     alt: "foodRandom.img",
48 |     title: "Food Random",
49 |     programs: "Angular | Typescript | NgWheel | LocalStorage | JSON | PrimeNG",
50 |     github: "https://github.com/tmp03099/FoodRandom",
51 |     link: "https://github.com/tmp03099/FoodRandom",
52 |   },
53 |   {
54 |     top: false,
55 |     src: disney,
56 |     alt: "disney.img",
57 |     title: "Disney Character",
58 |     programs: "React | Router | API | Axios",
59 |     github: "https://github.com/tmp03099/Disney-Characters",
60 |     link: "https://main--disneycharactersapp.netlify.app/",
61 |   },
62 |   {
63 |     top: false,
64 |     src: pokemon,
65 |     alt: "pokemon.img",
66 |     title: "Pokemon Card Game",
67 |     programs: "HTML5 | CSS3 | Bootstraps | JavaScript | HTML DOM",
68 |     github: "https://github.com/tmp03099/memory-card-game",
69 |     link: "https://tmp03099.github.io/memory-card-game/",
70 |   },
71 |   {
72 |     top: false,
73 |     src: barSite,
74 |     alt: "barsite.img",
75 |     title: "Bar Website",
76 |     programs: "HTML5 | CSS3 | jQuery | JavaScript",
77 |     github: "https://github.com/tmp03099/BarWebPage.github.io",
78 |     link: "https://main--barswebsite.netlify.app/",
79 |   },
80 |   {
81 |     top: false,
82 |     src: starWars,
83 |     alt: "starWars.img",
84 |     title: "Star Wars Pagination ",
85 |     programs: "React | Router | API | Axios | Pagination",
86 |     github: "https://github.com/tmp03099/STAR-WARS-API",
87 |     link: "https://starwarsapi-app.netlify.app/",
88 |   },
89 | ];
90 | 


--------------------------------------------------------------------------------
/src/hooks/CustomHook.js:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from "react";
 2 | 
 3 | export const useViewport = () => {
 4 |   const [width, setWidth] = useState(window.innerWidth);
 5 |   // Add a second state variable "height" and default it to the current window height
 6 |   const [height, setHeight] = useState(window.innerHeight);
 7 | 
 8 |   useEffect(() => {
 9 |     const handleWindowResize = () => {
10 |       setWidth(window.innerWidth);
11 |       // Set the height in state as well as the width
12 |       setHeight(window.innerHeight);
13 |     };
14 | 
15 |     window.addEventListener("resize", handleWindowResize);
16 |     return () => window.removeEventListener("resize", handleWindowResize);
17 |   }, []);
18 | 
19 |   // Return both the height and width
20 |   return { width, height };
21 | };
22 | 


--------------------------------------------------------------------------------
/src/img/0001.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tmp03099/MyPortfolio/15d0a4f855570a7489b5dde4e7260f31d727c9e5/src/img/0001.png


--------------------------------------------------------------------------------
/src/img/558669671596975469.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tmp03099/MyPortfolio/15d0a4f855570a7489b5dde4e7260f31d727c9e5/src/img/558669671596975469.gif


--------------------------------------------------------------------------------
/src/img/EF7C8E.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tmp03099/MyPortfolio/15d0a4f855570a7489b5dde4e7260f31d727c9e5/src/img/EF7C8E.jpg


--------------------------------------------------------------------------------
/src/img/Pokemon.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tmp03099/MyPortfolio/15d0a4f855570a7489b5dde4e7260f31d727c9e5/src/img/Pokemon.jpg


--------------------------------------------------------------------------------
/src/img/avatar.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tmp03099/MyPortfolio/15d0a4f855570a7489b5dde4e7260f31d727c9e5/src/img/avatar.gif


--------------------------------------------------------------------------------
/src/img/barSite.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tmp03099/MyPortfolio/15d0a4f855570a7489b5dde4e7260f31d727c9e5/src/img/barSite.jpg


--------------------------------------------------------------------------------
/src/img/connectFour.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tmp03099/MyPortfolio/15d0a4f855570a7489b5dde4e7260f31d727c9e5/src/img/connectFour.jpg


--------------------------------------------------------------------------------
/src/img/disney.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tmp03099/MyPortfolio/15d0a4f855570a7489b5dde4e7260f31d727c9e5/src/img/disney.jpg


--------------------------------------------------------------------------------
/src/img/hotelProject.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tmp03099/MyPortfolio/15d0a4f855570a7489b5dde4e7260f31d727c9e5/src/img/hotelProject.jpg


--------------------------------------------------------------------------------
/src/img/planner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tmp03099/MyPortfolio/15d0a4f855570a7489b5dde4e7260f31d727c9e5/src/img/planner.jpg


--------------------------------------------------------------------------------
/src/img/random.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tmp03099/MyPortfolio/15d0a4f855570a7489b5dde4e7260f31d727c9e5/src/img/random.jpg


--------------------------------------------------------------------------------
/src/img/starWar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tmp03099/MyPortfolio/15d0a4f855570a7489b5dde4e7260f31d727c9e5/src/img/starWar.jpg


--------------------------------------------------------------------------------
/src/img/starWars.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tmp03099/MyPortfolio/15d0a4f855570a7489b5dde4e7260f31d727c9e5/src/img/starWars.jpg


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | #home {
  6 |   background-color: #ef7c8e;
  7 | }
  8 | 
  9 | #about {
 10 |   background-image: linear-gradient(
 11 |     to bottom,
 12 |     #ef7c8e,
 13 |     #f59999,
 14 |     #f8b4aa,
 15 |     #f9cfc2,
 16 |     #fae8e0
 17 |   );
 18 | }
 19 | 
 20 | #projects {
 21 |   background-image: linear-gradient(
 22 |     to bottom,
 23 |     #fae8e0,
 24 |     #f4dcd4,
 25 |     #efcfca,
 26 |     #e9c3c1,
 27 |     #e2b7b9,
 28 |     #e2b6b2,
 29 |     #e0b5ab,
 30 |     #deb4a4,
 31 |     #d8c0a2,
 32 |     #cccdab,
 33 |     #bfd9bc,
 34 |     #b6e2d3
 35 |   );
 36 | }
 37 | 
 38 | #contact {
 39 |   background-image: linear-gradient(
 40 |     to bottom,
 41 |     #b6e2d3,
 42 |     #bee9da,
 43 |     #c6f0e2,
 44 |     #cff8e9,
 45 |     #d7fff1
 46 |   );
 47 | }
 48 | 
 49 | .projectBg {
 50 |   background-color: #220814;
 51 | }
 52 | 
 53 | /* Font family */
 54 | h5,
 55 | .fontSyne {
 56 |   font-family: "Syne Mono";
 57 | }
 58 | 
 59 | h2 {
 60 |   font-family: "Silkscreen";
 61 | }
 62 | 
 63 | h3,
 64 | .fontRib {
 65 |   font-family: "Ribeye";
 66 | }
 67 | 
 68 | h1,
 69 | .fontCoiny {
 70 |   font-family: "Coiny";
 71 | }
 72 | 
 73 | span,
 74 | .fontVT {
 75 |   font-family: "VT323";
 76 | }
 77 | 
 78 | p,
 79 | .fontSourceCode {
 80 |   font-family: "Source Code Pro", monospace;
 81 | }
 82 | 
 83 | .fontIncon {
 84 |   font-family: "Inconsolata";
 85 | }
 86 | 
 87 | /* Detail Projects */
 88 | .captionImg {
 89 |   background-color: rgba(255, 255, 255, 0.7);
 90 |   visibility: none;
 91 |   opacity: 0;
 92 |   z-index: 2;
 93 | }
 94 | 
 95 | .storeImg:hover .captionImg {
 96 |   visibility: visible;
 97 |   opacity: 1;
 98 | }
 99 | 
100 | /* Hover effect  */
101 | .hoverEffect {
102 |   letter-spacing: 6px;
103 |   cursor: pointer;
104 | }
105 | 
106 | .hoverEffect span {
107 |   transition: 0.8s ease-out;
108 | }
109 | .hoverEffect:hover span:nth-child(1) {
110 |   margin-right: 30px;
111 | }
112 | 
113 | .hoverEffect:hover span:nth-child(3) {
114 |   margin-left: 30px;
115 | }
116 | .hoverEffect:hover span {
117 |   color: #fff;
118 |   text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff;
119 | }
120 | 
121 | @keyframes fadeInOut {
122 |   0% {
123 |     opacity: 0;
124 |     font-size: 150px;
125 |     transform: translateX(-100%);
126 |     filter: blur(1vmin);
127 |   }
128 |   50% {
129 |     opacity: 1;
130 |     font-size: 60px;
131 |     transform: translateX(0%);
132 |     filter: blur(0.02vmin);
133 |     color: #fff;
134 |     text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff;
135 |   }
136 |   100% {
137 |     opacity: 0;
138 |     font-size: 150px;
139 |     transform: translateX(100%);
140 |     filter: blur(1vmin);
141 |   }
142 | }
143 | 
144 | @keyframes fadeInOutSmall {
145 |   0% {
146 |     opacity: 0;
147 |     font-size: 100px;
148 |     transform: translateX(-100%);
149 |     filter: blur(1vmin);
150 |   }
151 |   50% {
152 |     opacity: 1;
153 |     font-size: 30px;
154 |     transform: translateX(0%);
155 |     filter: blur(0.02vmin);
156 |     color: #fff;
157 |     text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff;
158 |   }
159 |   100% {
160 |     opacity: 0;
161 |     font-size: 100px;
162 |     transform: translateX(100%);
163 |     filter: blur(1vmin);
164 |   }
165 | }
166 | 
167 | @media screen and (max-width: 650px) {
168 |   .smAnimation {
169 |     animation: fadeInOutSmall 3s ease-in-out infinite;
170 |   }
171 | }
172 | 
173 | @media screen and (min-width: 651px) {
174 |   .smAnimation {
175 |     animation: fadeInOut 3s ease-in-out infinite;
176 |   }
177 | }
178 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import './index.css';
 4 | import App from './App';
 5 | import reportWebVitals from './reportWebVitals';
 6 | import 'bootstrap/dist/css/bootstrap.min.css';
 7 | 
 8 | const root = ReactDOM.createRoot(document.getElementById('root'));
 9 | root.render(
10 |   <React.StrictMode>
11 |       <App />
12 |   </React.StrictMode>
13 | );
14 | 
15 | // If you want to start measuring performance in your app, pass a function
16 | // to log results (for example: reportWebVitals(console.log))
17 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
18 | reportWebVitals();
19 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>


--------------------------------------------------------------------------------
/src/pages/About.js:
--------------------------------------------------------------------------------
  1 | import avatarImg from "../img/avatar.gif";
  2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
  3 | import {
  4 |   faReact,
  5 |   faAngular,
  6 |   faJsSquare,
  7 |   faJava,
  8 |   faBootstrap,
  9 | } from "@fortawesome/free-brands-svg-icons";
 10 | import { SiTypescript } from "react-icons/si";
 11 | import { TbApi, TbBrandTailwind, TbDatabase } from "react-icons/tb";
 12 | import Carousel from "react-bootstrap/Carousel";
 13 | 
 14 | function About() {
 15 |   return (
 16 |     <section
 17 |       id="about"
 18 |       className="w-screen h-auto lg:min-h-screen flex flex-col items-center"
 19 |     >
 20 |       <h2 className="text-left lg:text-5xl ">About Me</h2>
 21 |       <div className="flex flex-col lg:flex-row w-full lg:w-4/5 xl:w-3/4 items-center mt-4">
 22 |         <div className="flex flex-col w-4/5 mr-3 text-lg lg:text-2xl">
 23 |           <div>
 24 |             <p>
 25 |               Hi my name is Phung, I’m a frontend developer who enjoys creating
 26 |               fun and user friendly web applications for everyone. I have always
 27 |               been interested in computers and related topics such as system
 28 |               configuration, application design and coding.
 29 |             </p>
 30 |             <p>
 31 |               When it comes to coding, I always have a high standard for my
 32 |               applications where I spend a lot of time fine tuning and testing
 33 |               to make sure that the applications are bug free and easy for
 34 |               everyone to use.
 35 |             </p>
 36 |             <p>
 37 |               To start and advance in my career as a developer, I always try to
 38 |               improve my existing skills while learning new ones. A recent
 39 |               example is after completing my college degree, I am participating
 40 |               in coding bootcamp with Per-Scholars to further improve my front
 41 |               end development skills along with learning about some of the
 42 |               latest technologies such as React, Redux, MongoDB, NodeJs. These
 43 |               skills help me become an even better frontend developer.
 44 |             </p>
 45 |           </div>
 46 |         </div>
 47 |         <div className="flex lg:mx-4 justify-center">
 48 |           <img
 49 |             src={avatarImg}
 50 |             alt="avatar.img"
 51 |             className="border-opacity-75 rounded-full border-yellow-300 border-dashed w-6/12 lg:mb-6 xl:mb-0 lg:w-full  lg:h-full"
 52 |           />
 53 |         </div>
 54 |       </div>
 55 |       <div className="w-4/5 sm:p-2 lg:p-5">
 56 |         <Carousel className="p-5">
 57 |           <Carousel.Item>
 58 |             <div className="flex">
 59 |               <FontAwesomeIcon
 60 |                 icon={faReact}
 61 |                 className="text-3xl md:text-6xl text-sky-400 w-full "
 62 |               />
 63 | 
 64 |               <FontAwesomeIcon
 65 |                 icon={faAngular}
 66 |                 className="text-3xl md:text-6xl text-red-600 w-full "
 67 |               />
 68 | 
 69 |               <FontAwesomeIcon
 70 |                 icon={faJsSquare}
 71 |                 className="text-3xl md:text-6xl text-yellow-500 w-full"
 72 |               />
 73 | 
 74 |               <SiTypescript className="text-3xl md:text-6xl text-blue-600 w-full" />
 75 |             </div>
 76 |           </Carousel.Item>
 77 |           <Carousel.Item>
 78 |             <div className="flex">
 79 |               <TbApi className="text-4xl md:text-6xl text-rose-500 w-full" />
 80 | 
 81 |               <FontAwesomeIcon
 82 |                 icon={faJava}
 83 |                 className="text-3xl md:text-6xl text-cyan-700 w-full"
 84 |               />
 85 | 
 86 |               <TbBrandTailwind className="text-3xl md:text-6xl text-sky-500 w-full" />
 87 | 
 88 |               <FontAwesomeIcon
 89 |                 icon={faBootstrap}
 90 |                 className="text-3xl md:text-6xl text-violet-600  w-full"
 91 |               />
 92 | 
 93 |               <TbDatabase className="text-3xl md:text-6xl text-sky-700 w-full " />
 94 |             </div>
 95 |           </Carousel.Item>
 96 |         </Carousel>
 97 |       </div>
 98 |     </section>
 99 |   );
100 | }
101 | export default About;
102 | 


--------------------------------------------------------------------------------
/src/pages/Footer.js:
--------------------------------------------------------------------------------
 1 | import ContactForm from "../components/ContactForm";
 2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 3 | import { faPaperPlane } from "@fortawesome/free-solid-svg-icons";
 4 | import Accordion from "react-bootstrap/Accordion";
 5 | import { useAccordionButton } from "react-bootstrap/AccordionButton";
 6 | import Card from "react-bootstrap/Card";
 7 | import SocialMedia from "../components/SocialMedia";
 8 | 
 9 | function Footer() {
10 |   const CustomToggle = ({ children, eventKey }) => {
11 |     const handleClick = useAccordionButton(eventKey, () =>
12 |       console.log("totally custom!")
13 |     );
14 | 
15 |     return (
16 |       <button className="bg-pink-300" type="button" onClick={handleClick}>
17 |         {children}
18 |       </button>
19 |     );
20 |   };
21 |   return (
22 |     <section
23 |       id="contact"
24 |       className="flex flex-col justify-center items-center w-screen h-auto pt-5"
25 |     >
26 |       <div className="border-4 outline-2 bg-gray-900 shadow-2xl rounded-3xl p-12 text-white text-center w-4/5">
27 |         <div>
28 |           <h3 className="text-amber-300 mb-4">
29 |             Interested in working together?
30 |           </h3>
31 |           <div className="flex justify-center">
32 |             <Accordion>
33 |               <Card>
34 |                 <Card.Header className="p-0">
35 |                   <CustomToggle eventKey="0">
36 |                     <div className="flex items-center">
37 |                       <h2 className="mx-4 mb-0">STAY CONNECTED</h2>
38 |                       <FontAwesomeIcon
39 |                         icon={faPaperPlane}
40 |                         className="text-2xl px-2"
41 |                       />
42 |                     </div>
43 |                   </CustomToggle>
44 |                 </Card.Header>
45 |                 <Accordion.Collapse eventKey="0">
46 |                   <Card.Body>
47 |                     <ContactForm />
48 |                   </Card.Body>
49 |                 </Accordion.Collapse>
50 |               </Card>
51 |             </Accordion>
52 |           </div>
53 |           <p className="my-4">
54 |             I'm currently looking for the opportunity to join a team of
55 |             developer. If you think I might be a good fit, please contact me via
56 |             <br></br>
57 |             tmp03099@gmail.com or 412-626-9130.
58 |           </p>
59 |         </div>
60 |         <div className="flex items-center">
61 |           <div className="relative w-16 h-16 bg-orange-700 border-2 rounded-full"></div>
62 |           <div className="relative -left-9 text-xl font-bold">
63 |             <a
64 |               className="text-white no-underline "
65 |               href="https://docs.google.com/document/d/e/2PACX-1vS_GmGWxfwTtaWRePRdwUNTErFMZ5T2t_ajXwj63sVPjcfY9EvoMG344MRMR2ELnQ/pub"
66 |             >
67 |               MY RESUME
68 |             </a>
69 |           </div>
70 |         </div>
71 |       </div>
72 |       <SocialMedia />
73 |       <div>© My Phung Tieu</div>
74 |     </section>
75 |   );
76 | }
77 | export default Footer;
78 | 


--------------------------------------------------------------------------------
/src/pages/Home.js:
--------------------------------------------------------------------------------
 1 | import techImg from "../img/EF7C8E.jpg";
 2 | import { Link as LinkScroll } from "react-scroll";
 3 | import TextAnimation from "../components/TextAnimation";
 4 | import { useState, useEffect } from "react";
 5 | import { getQuotes } from "../services/quotes-api";
 6 | 
 7 | function Home() {
 8 |   const [quote, setQuote] = useState([]);
 9 | 
10 |   useEffect(() => {
11 |     const quoteData = async () => {
12 |       const data = await getQuotes();
13 |       setQuote(data);
14 |       console.log(data);
15 |     };
16 |     quoteData();
17 |   }, []);
18 | 
19 |   return (
20 |     <section
21 |       id="home"
22 |       className="w-screen h-screen py-5 flex flex-col items-center"
23 |     >
24 |       <h5 className="flex text-sm md:text-xl justify-center">Hi, I am </h5>
25 |       <div className="h-full flex flex-col justify-center items-center">
26 |         <h1 className="hoverEffect flex mt-2 md:gap-3 justify-center">
27 |           <span className="fontCoiny text-md md:text-4xl lg:text-5xl">My</span>
28 |           <span className="fontCoiny text-md md:text-4xl lg:text-5xl">
29 |             Phung
30 |           </span>
31 |           <span className="fontCoiny text-md md:text-4xl lg:text-5xl">
32 |             Tieu
33 |           </span>
34 |         </h1>
35 |         <h1 className="fontCoiny mb-3 md:my-3 text-xl md:text-4xl lg:text-5xl text-center">
36 |           Frontend Developer | Software Developer
37 |         </h1>
38 |         <TextAnimation />
39 |         <div className="flex justify-center m-4">
40 |           <img style={{ width: 500 }} src={techImg} alt="tech.img" />
41 |         </div>
42 |         <div className="flex flex-column justify-center items-center w-3/4">
43 |           <p className="fontSyne text-md lg:text-2xl text-center">
44 |             {/* {quote.quote} */}
45 |           </p>
46 |           <button className="mt-5 text-lg fontSourceCode ring-2 ring-emerald-400 p-2 px-3 rounded-2xl">
47 |             <LinkScroll
48 |               activeClass="active"
49 |               smooth
50 |               spy
51 |               to="about"
52 |               duration={100}
53 |             >
54 |               About me
55 |             </LinkScroll>
56 |           </button>
57 |         </div>
58 |       </div>
59 |     </section>
60 |   );
61 | }
62 | export default Home;
63 | 


--------------------------------------------------------------------------------
/src/pages/Work.js:
--------------------------------------------------------------------------------
 1 | import FeaturedProject from "../components/FeaturedProject";
 2 | import Projects from "../components/Projects";
 3 | 
 4 | function Work() {
 5 |   return (
 6 |     <section
 7 |       className="flex flex-col w-screen h-auto items-center"
 8 |       id="projects"
 9 |     >
10 |       <h2 className="text-left lg:text-5xl m-3">Some Things I've Built</h2>
11 |       <FeaturedProject />
12 |       <Projects />
13 |     </section>
14 |   );
15 | }
16 | export default Work;
17 | 


--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/src/services/project-api.js:
--------------------------------------------------------------------------------
 1 | import { imgData } from "../data/imgData";
 2 | 
 3 | export const getFeatureProjects = () => {
 4 |   return imgData.filter((item) => item.top === true);
 5 | };
 6 | 
 7 | export const getProjects = () => {
 8 |   return imgData.filter((item) => item.top === false);
 9 | };
10 | 


--------------------------------------------------------------------------------
/src/services/quotes-api.js:
--------------------------------------------------------------------------------
 1 | import axios from "axios";
 2 | export const getQuotes = async () => {
 3 |   try {
 4 |     const respone = await axios.get("https://animechan.vercel.app/api/random");
 5 |     console.log(respone);
 6 |     const data = respone.data;
 7 |     console.log(data);
 8 |     return data;
 9 |   } catch (error) {
10 |     console.error(error);
11 |   }
12 | };
13 | 


--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 |   content: ["./src/**/*.{js,jsx,ts,tsx}"],
4 |   theme: {
5 |     extend: {},
6 |   },
7 |   plugins: [],
8 | };
9 | 


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