90 percent Brand Page DONE

index.html

@@ -4,7 +4,7 @@
     <!-- Required meta tags -->
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Syne&display=swap" rel="stylesheet">
     <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
 

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "boostrap": "^2.0.0",
+    "bootstrap": "^5.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "^6.14.2",

src/App.css

@@ -4,5 +4,72 @@
   box-sizing: border-box;
 }
 body {
-  color: black;
+  color: white;
+  background-image: url("./images/siteBg.png");
+  font-family:'Syne', sans-serif;
 }
+header {
+  display: flex;
+  padding: 60px;
+  letter-spacing: 2px ;
+}
+header .brand-name {
+  margin-right: auto;
+  text-transform: uppercase;
+  text-decoration: none;
+  text-decoration: none;
+  text-shadow: 0 0 20px #00cc00, 0 0 40px #00cc00, 0 0 60px #00cc00;
+  animation: glow 2s infinite;
+}
+header a {
+  color: #fff;
+  text-decoration: none;
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-right: 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;
+}
+nav a:hover{
+  color: white;
+  text-decoration: none;
+  cursor: pointer;
+}
+.brand-container{
+  display: flex;
+  margin-top: 60px;
+  justify-content: center;
+  align-items: center;
+  gap: 200px;
+}
+.developer-wrapper{
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  line-height: 60px;
+  letter-spacing: 5px;
+  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;
+}
+.developer-introduction{
+  font-size: 20px;
+}
+.developer-image {
+  width: 500px;
+  height: 500px;
+  border-radius: 50%;
+  box-shadow: 0 0 20px rgba(0, 204, 0, 0.3)
+}
+.footer-wrapper {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+
+}
+

src/App.jsx

@@ -1,11 +1,11 @@
-import React from 'react'
+import React from "react"
 import { BrowserRouter, Routes, Route} from "react-router-dom"
 import './App.css'
-import Layout from "./Components/Layout"
+import Layout from "./components/Layout"
 import About from "./Pages/About"
-import Home from "./Pages/Home"
+import Brand from "./Pages/Brand"
 import Projects from "./Pages/Projects"
-import Album from "./Pages/Album"
+import Contacts from "./Pages/Contacts"
 
 
 export default function App() {
@@ -15,10 +15,10 @@ export default function App() {
       <BrowserRouter>
         <Routes>
           <Route path = '/' element = {<Layout />}>
-              <Route index element = {<Home/>} />
+              <Route path = "/brand"  element = {<Brand />} />
               <Route path = '/about' element = {<About/>} />
               <Route path = '/projects' element = {<Projects/>}/>
-              <Route path = '/album' element = {<Album/>}/>
+              <Route path = '/contacts' element = {<Contacts />}/>
           </Route>
         </Routes>
       </BrowserRouter>

src/Pages/About.jsx

@@ -0,0 +1,10 @@
+import React from "react"
+
+
+export default function About(){
+    return(
+        <div>
+            <h1>About</h1>
+        </div>
+    )
+}

src/Pages/Brand.jsx

@@ -0,0 +1,15 @@
+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/> Justin Hoang</h1>
+                <p className="developer-introduction">As an eager learner and developer, I am delicated <br/>to making ideas into reality by web application  </p>
+            </div>
+            <div className = "photo-wrapper">
+                <img src="src/images/developer-photo.jpeg" alt="Justin Hoang" className="developer-image"/>
+            </div>
+        </div>
+    )
+}

src/Pages/Contacts.jsx

@@ -0,0 +1,9 @@
+import React from "react"
+
+export default function Contacts(){
+    return (
+        <div>
+            <h1>Contacts</h1>
+        </div>
+    )
+}

src/Pages/Projects.jsx

@@ -0,0 +1,9 @@
+import React from "react"
+
+export default function Projects(){
+    return(
+        <div>
+            <h1>Projects</h1>
+        </div>
+    )
+}

src/components/Footer.jsx

@@ -1,10 +1,10 @@
-import React from "React"
+import React from "react"
 
 
 export default function Footer() {
     return (
-        <footer>
-            <p>© 2023 - Developeed by Hoang Nhat Truong</p>
+        <footer className = "footer-wrapper">
+            <p>© 2023 - Developed by Hoang Nhat Truong</p>
         </footer>
     )
 }

src/components/Header.jsx

@@ -1,28 +1,28 @@
 import React from "react"
-import { NavLink } from "react-router-dom"
+import { NavLink, Link } from "react-router-dom"
 
 
 export default function Header() {
     const isActiveLink= {
-        textDecoration: "underline",
         fontWeight: "bold",
         color: "green"
 
     }
     return (
         <header>
-            <NavLink to  = "/home" style = {({isActive}) => isActive ? isActiveLink : null } >
-                Home
-            </NavLink>
-            <NavLink to  = "/about" style = {({isActive}) => isActive ? isActiveLink : null }>
-                About
-            </NavLink>
-            <NavLink to  = "/projects" style = {({isActive}) => isActive ? isActiveLink : null } >
-                Projects
-            </NavLink>
-            <NavLink to  = "/album" style = {({isActive}) => isActive ? isActiveLink : null }>
-                Album
-            </NavLink>
+            <Link className = "brand-name" to = "/brand">JustIn</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>
     )
 }