My website

vobanghia12 · Jan 7, 2022 · fe6b4ba · fe6b4ba
1 parent 3f5bebd
commit fe6b4ba
Show file tree

Hide file tree

Showing 31 changed files with 906 additions and 53 deletions.
diff --git a/.gitignore b/.gitignore
@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# Local Netlify folder
+.netlify
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,12 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@headlessui/react": "^1.4.2",
+    "@heroicons/react": "^1.0.5",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
+    "aos": "^2.3.4",
+    "aphrodite": "^2.4.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-fade-in": "^2.0.1",
+    "react-icons": "^4.3.1",
     "react-scripts": "5.0.0",
+    "react-typical": "^0.1.3",
+    "scrollreveal": "^4.0.9",
     "web-vitals": "^2.1.2"
   },
   "scripts": {
@@ -34,5 +42,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.5",
+    "tailwindcss": "^3.0.7"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico?" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -24,7 +24,12 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+
+    <title>My Personal Website</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -39,5 +44,7 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+
   </body>
+
 </html>
diff --git a/src/App.js b/src/App.js
@@ -1,25 +1,16 @@
-import logo from './logo.svg';
-import './App.css';
+import Header from "./component/header/Header";
+import Main from "./component/main/Main";
+import Footer from "./component/footer/Footer";
+const App = (props) =>
+{
+    return(
+        <>
+            <Header/>
+            <Main/>
+            <Footer/>
+        </>
+
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+    )
 }
-
 export default App;
diff --git a/src/asset/NghiaVoResume.docx b/src/asset/NghiaVoResume.docx
diff --git a/src/asset/PortfolioRecord.mp4 b/src/asset/PortfolioRecord.mp4
diff --git a/src/asset/RestaurantProject.mp4 b/src/asset/RestaurantProject.mp4
diff --git a/src/asset/VoResume.pdf b/src/asset/VoResume.pdf
diff --git a/src/asset/hero-img.svg b/src/asset/hero-img.svg
diff --git a/src/asset/icons8-python.svg b/src/asset/icons8-python.svg
diff --git a/src/asset/my-picture.jpeg b/src/asset/my-picture.jpeg
diff --git a/src/asset/project1.png b/src/asset/project1.png
diff --git a/src/asset/project2.png b/src/asset/project2.png
diff --git a/src/asset/project3.png b/src/asset/project3.png
diff --git a/src/asset/project4.png b/src/asset/project4.png
diff --git a/src/asset/project5.png b/src/asset/project5.png
diff --git a/src/component/footer/Footer.js b/src/component/footer/Footer.js
@@ -0,0 +1,11 @@
+import SideSocial from "./SideSocial";
+const Footer = () =>{
+    return (
+        <footer className="mb-10">
+            <SideSocial/>
+            <p className="text-center text-gray-500 text-lg font-medium">Build and Designed with dedication by <a rel="noreferrer" href="https://github.com/vobanghia12" target="_blank" className="underline underline-offset-2 text-secondary">Nghia Vo</a></p>
+        </footer>
+    )
+}
+
+export default Footer;
diff --git a/src/component/footer/SideSocial.js b/src/component/footer/SideSocial.js
@@ -0,0 +1,34 @@
+import { FaGithub, FaLinkedin, FaTwitterSquare } from "react-icons/fa";
+const SideSocial = () => {
+  return (
+    <div className="w-full flex mt-10 justify-center items-center mb-5 md:fixed md:left-0 md:top-1/3 md:block md:w-10 md:z-10">
+      <ul className="flex md:block">
+        <li>
+          <a target="_blank" href="https://github.com/vobanghia12" rel="noreferrer">
+            <SideBar item={<FaGithub size="30" />} />
+          </a>
+        </li>
+        <li>
+          <a
+            target="_blank"
+            href="https://www.linkedin.com/in/nghia-vo-449456207/"
+            rel="noreferrer"
+          >
+            <SideBar item={<FaLinkedin size="30" />} />
+          </a>
+        </li>
+        <li>
+          <a target="_blank" href="https://twitter.com/VoNghia31309183" rel="noreferrer">
+            <SideBar item={<FaTwitterSquare size="30" />} />
+          </a>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+const SideBar = ({ item }) => {
+  return <div className="sidebar">{item}</div>;
+};
+
+export default SideSocial;
diff --git a/src/component/header/Header.js b/src/component/header/Header.js
@@ -0,0 +1,39 @@
+import NavBar from "./NavBar";
+import React from "react";
+import Hero from "./Hero";
+
+class Header extends React.Component {
+    listener = null;
+    state = {
+        nav: false
+    }
+    componentDidMount() {
+        window.addEventListener("scroll", this.handleScroll);
+    }
+    componentWillUnmount()
+        {
+            window.removeEventListener('scroll')
+        }
+    handleScroll = () =>{
+        if(window.pageYOffset > 140){
+            if(!this.state.nav) {
+                this.setState({nav: true});
+            }
+        }
+        else {
+                if(this.state.nav) this.setState({nav: false})
+            }
+    }
+
+    render(){
+        return(
+            <header>
+                <NavBar className={`${this.state.nav && 'bg-white z-10 overflow-hidden'}`}/>
+                <Hero/>
+            </header>
+
+        )
+    }
+}
+
+export default Header;
diff --git a/src/component/header/Hero.js b/src/component/header/Hero.js
@@ -0,0 +1,58 @@
+import hero from "../../asset/hero-img.svg";
+import Typical from 'react-typical';
+import Aos from "aos";
+import React, {useEffect} from "react";
+import "aos/dist/aos.css"
+import resume from "../../asset/VoResume.pdf"
+
+const Hero = React.memo(() => {
+    useEffect(() => {
+        Aos.init({duration: 2000});
+    },[]);
+
+    return (
+        <div className="flex justify-center items-center flex-col md:flex-row min-h-85vh mt-40 w-full px-8 mb-50">
+            <div className="flex-1 p-5 lg:mb-60 md:ml-14 ">
+                <h1 className="text-4xl font-bold text-primary lg:text-5xl text-left max-w-full lg:mt-20">Hi, I'm Nghia.</h1>
+                <h2 data-aos="fade-up" className="font-medium text-xl mt-2 md:mt-4 md:text-2xl">
+                    { <Typical
+                        loop = {Infinity}
+                        steps = {
+                            ['Full-stack Developer', 
+                            1000,
+                            'Front-end Developer', 
+                            1000,
+                            'Back-end Developer', 
+                            1000,
+                            'Student', 
+                            1000,
+                            'Aspiring Software Engineer',
+                            1000,
+                            'React/React Native Dev',
+                            1000,]
+                        }
+                    /> }
+                </h2>
+                <p data-aos="fade-up" className="text-gray-500 mt-4 lg:w-10/12 md:text-lg" >I am a student and aspiring software engineer based in US who is passionate to construct and creat end-user application to meet user need.</p>
+                <div data-aos="fade-up" className= "mt-8">
+                    <a href= "mailto:[email protected]" className="btn bg-primary text-white hover:bg-blue-800">Get in touch
+                    </a>
+                    <a href ={resume} target ="_blank" rel="noreferrer" className = "relative btn border-secondary ml-5 text-primary hover:bg-blue-100 hover:border-0">
+                    Resume
+                    <span class="inline-flex h-3 w-3 absolute -right-2 -top-2">
+                        <span className="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-secondary opacity-75"></span>
+                        <span className="relative rounded-full inline-flex h-3 w-3 bg-secondary"></span>
+                   </span>
+                   </a>
+
+                </div>
+            </div>
+            <div data-aos="fade-up" className="flex-1 p-5">
+                <img src= {hero} className ="max-w-full" alt="Illustrator"/>
+            </div>
+        </div>
+
+    )
+})
+
+export default Hero; 
diff --git a/src/component/header/NavBar.js b/src/component/header/NavBar.js
@@ -0,0 +1,83 @@
+import { Popover, Transition } from "@headlessui/react";
+import { MenuIcon, XIcon } from "@heroicons/react/outline";
+import { Fragment } from "react";
+
+
+const navigation = [
+  { name: "About", href: "/#About" },
+  { name: "Skills", href: "/#Skills" },
+  { name: "Projects", href: "/#Projects" },
+  { name: "Contact", href: "/#Contact" },
+];
+const NavBar = (props) => {
+  return (
+    <Popover >
+      <div className={props.className + "px-4 fixed top-0 sm:px-6 lg:px-8 w-full py-4 drop-shadow-xl transition duration-500"}>
+        <nav className= "flex justify-between text-lg mx-7 items-center">
+          <div className="flex items-cente w-full md:w-auto">
+            <div className="flex items-center justify-between w-full md:w-auto">
+              <a href="/" className= "text-2xl font-bold">
+                Nghia Vo
+              </a>
+              <div className="-mr-2 flex items-center md:hidden">
+                <Popover.Button className="bg-gray-100 rounded-md p-2 inline-flex items-center drop-shadow-md justify-center text-black-800 hover:bg-gray-100">
+                  <MenuIcon className="h-8 w-8" aria-hidden="true" />
+                </Popover.Button>
+              </div>
+            </div>
+          </div>
+          <ul className="font-medium hidden md:flex z-20">
+            {navigation.map((item) => (
+              <li>
+                <a
+                  key={item.name}
+                  href={item.href}
+                  className="px-5 py-1 mx-3 text-gray-500 from-left button_slide slide_right font-bold scroll-smooth"
+                >
+                  {item.name}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      </div>
+      <Transition
+        as={Fragment}
+        enter="duration-300 ease-out "
+        enterFrom="opacity-0 scale-95"
+        enterTo="opacity-100 scale-100"
+        leave="duration-300 ease-in"
+        leaveFrom="opacity-100 scale-100"
+        leaveTo="opacity-0 scale-95"
+      >
+        <Popover.Panel
+          focus
+          className="absolute z-10 top-0 right-0 p-2 transition md:hidden w-80 h-full"
+        >
+          <div className="rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden h-full">
+            <div className="px-5 pt-4 flex items-center justify-end">
+              <div className="-mr-2">
+                <Popover.Button className="rounded-md p-2 inline-flex items-center justify-center text-black-800 bg-gray-100 drop-shadow-md">
+                  <XIcon className="h-8 w-8" aria-hidden="true" />
+                </Popover.Button>
+              </div>
+            </div>
+            <div className="text-center px-2 pt-2 pb-3 space-y-1">
+              {navigation.map((item) => (
+                <a
+                  key={item.name}
+                  href={item.href}
+                  className="block px-3 py-2 rounded-md text-base text-gray-500 font-bold button_slide:block slide_right"
+                >
+                  {item.name}
+                </a>
+              ))}
+            </div>
+          </div>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
+  );
+};
+
+export default NavBar;
diff --git a/src/component/main/About.js b/src/component/main/About.js
@@ -0,0 +1,29 @@
+import Aos from "aos";
+import React, {useEffect} from "react";
+import "aos/dist/aos.css"
+import profile from "../../asset/my-picture.jpeg"
+const About = () =>{
+
+    useEffect(() => {
+        Aos.init({duration: 2000});
+    },[]);
+    return(
+        <section data-aos="fade-up" className=" bg-gradient-to-r from-primary to-secondary text-white py-16 px-8 md:px-10 lg:px-20 md:clip" id="About"> 
+            <h1 className="text-center font-bold mb-8 text-4xl">About Me.</h1>
+            <div className="md:flex ">
+                <div data-aos="fade-right" className="flex justify-center items-center mb-8 md:flex-1 md:justify-center md:items-center">
+                    <img src={profile} alt="Super handsome boy" className="h-52 w-52 rounded-full drop-shadow-2xl md:w-80 md:h-80"></img>
+                </div>
+                <div data-aos="fade-up" className="md:flex-1 lg:mr-10 xl:mr-20 text-lg font-medium leading-8 md:mb-24">
+                    <p className="text-center px-4 md:text-left mt-4">I'm a student at University of South Florida and pursuing Bachelor's Degree in Computer Science. I love crafting things for website and mobile application. 
+                    Besides attending college, I'm also working on exiting and interesting projects by skills I learn from online and school.</p>
+                    <p className="text-center px-4 md:text-left mt-4">As a junior developer, I'm willing to learn somethings new in problems-solving as well as software developments.  </p>
+                    <p className="text-center px-4 md:text-left mt-4">If I'm not doing anything coding-related, I enjoy going to the gym and exploring amazing places around my town.</p>
+                </div>
+            </div>
+
+        </section>
+    )
+}
+
+export default About;