Home Page layout

tin0312 · Sep 19, 2023 · f54ef1d · f54ef1d
1 parent fd5b718
commit f54ef1d
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 101 deletions.
diff --git a/index.html b/index.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
 
 
-    <title>Justin Hoang</title>
+    <title>Justin</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.css b/src/App.css
@@ -5,18 +5,27 @@
 }
 body {
   color: white;
-  background-image: url("./images/siteBg.png");
+  background-color: #151515;
   font-family:'Syne', sans-serif;
+  height: auto;
 }
+
+/* Navigation Bar */
 header {
   display: flex;
-  padding: 60px;
   letter-spacing: 2px ;
-  justify-content: center;
-  gap: 900px;
   font-family: 'Space Grotesk', sans-serif;
+  overflow: hidden;
+  width: 80%;
+  margin: 0 auto;
+}
+.nav-bar{
+  width: 50%;
+  display: flex;
+  justify-content: flex-end;
 }
 header .brand-name {
+  width: 50%;
   text-shadow: 0 0 20px #00cc00, 0 0 40px #00cc00, 0 0 60px #00cc00;
   animation: glow 2s infinite;
   font-family: 'Space Grotesk', sans-serif;
@@ -32,10 +41,9 @@ header a {
   text-decoration: none;
   font-size: 1.5rem;
   font-weight: 600;
-  margin-right: 1.5rem;
+  padding: 1.5rem;
 }
 nav a {
-  padding-right: 30px;
   color: rgba(255, 255, 255, 0.48);
   text-shadow: 0 0 20px #00cc00, 0 0 40px #00cc00, 0 0 60px #00cc00;
   animation: glow 2s infinite;
@@ -48,76 +56,49 @@ nav a:hover{
   text-decoration: none;
   cursor: pointer;
 }
-.brand-container{
+/* home container */
+.home-container{
   display: flex;
-  margin-top: 60px;
-  justify-content: center;
   align-items: center;
-  gap: 300px;
-}
-.developer-wrapper{
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  line-height: 60px;
-  letter-spacing: 5px;
-  text-shadow: 0 0 20px #00cc00, 0 0 40px #00cc00, 0 0 60px #00cc00;
-  animation: glow 2s infinite;
+  width: 80%;
+  height: 50vh;
+  margin: 0 auto;
+  margin-top: 5%;
 }
-.developer-name {
+.greeting {
   font-family: 'Space Grotesk', sans-serif;
   font-weight: 700;
   font-size: 70px;
-  overflow: hidden; /* Ensures the content is not revealed until the animation */
-  border-right: .15em solid green; /* The typwriter cursor */
-  white-space: nowrap; /* Keeps the content on a single line */
-  letter-spacing: .15em; /* Adjust as needed */
-  animation: typing 3.5s steps(40, end),blink-caret .75s step-end infinite;
-}
-/* The typing effect */
-@keyframes typing {
-  from { width: 0 }
-  to { width: 50% }
+  margin-bottom: 43px;
 }
-
-/* The typewriter cursor effect */
-@keyframes blink-caret {
-  from, to { border-color: transparent }
-  50% { border-color: green; }
+.introduction-container,
+.image-container {
+  height: 100%;
+  width: 50%;
 }
-
-.developer-introduction{
-  font-size: 20px;
-  font-weight: 500;
-  font-family: 'Space Grotesk', sans-serif;
+.introduction-container{
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  height: 100%;
 }
-.photo-wrapper{
-  position: relative; /* Create a relative positioning context for the image */
-  width: 400px;
-  height: 400px;
-
+.image-container{
+  display: flex;
+  justify-content: flex-end;
 }
-
-.developer-image {
-  width: 100%;
+.profile-picture {
+  width: 380px;
   height: 100%;
-  border-radius: 50% / 2% 30% 2% 2%; 
-  box-shadow: 0 0 20px rgba(0, 204, 0, 0.3);
-  animation: flip 20s linear infinite; /* Apply the flip animation to the image */
-  transform-origin: center center; /* Set the rotation origin to the center */
+  overflow: hidden;
 }
-
-@keyframes flip {
-  0% {
-    transform: perspective(800px) rotateY(0deg);
-  }
-  50% {
-    transform: perspective(800px) rotateY(180deg);
-  }
-  100% {
-    transform: perspective(800px) rotateY(360deg);
-  }
+.introduction-message{
+  font-size: 20px;
+  color:#D9D9D9;
+  font-family: "Space Grotesk", sans-serif;
 }
+
+/* Footer */
 .footer-wrapper {
   position: fixed;
   bottom: 20px;

diff --git a/src/Pages/Brand.jsx b/src/Pages/Brand.jsx
@@ -2,20 +2,28 @@ import React from "react";
 
 export default function Brand() {
   return (
-    <div className="brand-container ">
-      <div className="developer-wrapper">
-        <h1 className="developer-name">Hello, my name is <br/>Truong Hoang</h1>
-        <p className="developer-introduction">
-          Based in the Toronto, I’m a front-end developer <br />
-          passionate about building functional, real-world <br />
-          related web apps that enhance users experience{" "}
-        </p>
+    <div className="home-container ">
+      {/* Name && Introduction */}
+      <div className="introduction-container">
+        <div>
+          <h1 className="greeting">
+            Nice to meet you!
+            <br />
+            I’m Justin
+          </h1>
+          <p className="introduction-message">
+            Based in the Toronto, I’m a front-end developer
+            <br /> passionate about building accessible web apps
+            <br /> that users love.
+          </p>
+        </div>
       </div>
-      <div className="photo-wrapper">
+      {/* image */}
+      <div className="image-container">
         <img
           src="src/images/developer-photo.jpeg"
-          alt="Justin Hoang"
-          className="developer-image"
+          alt="developer-photo"
+          className="profile-picture"
         />
       </div>
     </div>

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -1,28 +1,36 @@
-import React from "react"
-import { NavLink, Link } from "react-router-dom"
-
+import React from "react";
+import { NavLink, Link } from "react-router-dom";
 
 export default function Header() {
-    const isActiveLink= {
-        fontWeight: "bold",
-        color: "green"
-
-    }
-    return (
-        <header>
-            <Link className = "brand-name" to = "/">truong</Link>
-            <nav>
-                <NavLink to  = "/about" style = {({isActive}) => isActive ? isActiveLink : null }>
-                    About
-                </NavLink>
-                <NavLink to  = "/projects" style = {({isActive}) => isActive ? isActiveLink : null } >
-                    Projects
-                </NavLink>
-                <NavLink to  = "/contacts" style = {({isActive}) => isActive ? isActiveLink : null }>
-                    Contacts
-                </NavLink>
-            </nav>
-
-        </header>
-    )
-}
+  const isActiveLink = {
+    fontWeight: "bold",
+    color: "green",
+  };
+  return (
+    <header>
+      <Link className="brand-name" to="/">
+        Justin
+      </Link>
+      <nav className="nav-bar">
+        <NavLink
+          to="/about"
+          style={({ isActive }) => (isActive ? isActiveLink : null)}
+        >
+          About
+        </NavLink>
+        <NavLink
+          to="/projects"
+          style={({ isActive }) => (isActive ? isActiveLink : null)}
+        >
+          Projects
+        </NavLink>
+        <NavLink
+          to="/contacts"
+          style={({ isActive }) => (isActive ? isActiveLink : null)}
+        >
+          Contacts
+        </NavLink>
+      </nav>
+    </header>
+  );
+}