applied custom css and bootstrap todo-app

package.json

@@ -10,8 +10,10 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/react-router-dom": "^5.1.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"

src/App.tsx

@@ -1,19 +1,33 @@
 import React from "react";
 import "./assets/css/App.css";
-import Header from "./components/Header";
-import Sidebar from "./components/Sidebar";
-import Main from "./components/Main";
-import Footer from "./components/Footer";
+
+import About from "./components/About"
+import Home from "./components/Home"
+import Projects from "./components/Projects"
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route
+} from "react-router-dom";
+
 function App() {
   return (
-    <div> 
-      <Header />
-      <div className="row">
-        <Sidebar />
-        <Main />
+    <Router>
+      <div>
+        <Switch>
+          <Route path="/about">
+            <About />
+          </Route>
+          <Route path="/projects">
+            <Projects />
+          </Route>
+          <Route path="/">
+            <Home />
+          </Route>
+
+        </Switch>
       </div>
-      <Footer />
-    </div>
+    </Router>
   );
 }
 

src/components/About.js

@@ -0,0 +1,15 @@
+import React from "react";
+import Header from "./Header";
+import NavBar from "./Navbar";
+
+const About = () => {
+    return(
+        <div>
+        <Header />
+        <NavBar />
+<h3>About Sylvia Boonabaana</h3>
+</div>
+    )
+}
+
+export default About;

src/components/Footer.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 const Footer = () => (
   <div className="footer">
-    Awesome footer <p> copyright 2021</p>
+    Sylvia Boonabaana Inc. <p> @Copyright 2021</p>
   </div>
 );
 

src/components/Header.tsx

@@ -1,10 +1,12 @@
 import React from "react";
+// import header1 from "../assets/img/header1.JPG"
 
 const Header = () => {
   return (
     <div className="header">
-      <h1>Cypher Bits</h1>
-      <p>code eat sleep.</p>
+      <h1>Sylvia Boonabaana</h1>
+      <p>Life is what you make it</p>
+        {/* <img src={header1} alt="" /> */}
     </div>
   );
 };

src/components/Home.js

@@ -0,0 +1,24 @@
+
+import React from "react";
+import Header from "./Header";
+import Sidebar from "./Sidebar";
+import Main from "./Main";
+import Footer from "./Footer";
+import NavBar from "./Navbar";
+
+const Home = () => {
+    return (
+        <div>
+            <Header />
+            <NavBar />
+            <div className="row">
+                <Sidebar />
+                <Main />
+            </div>
+            <Footer />
+
+        </div>
+    );
+};
+
+export default Home;

src/components/Navbar.tsx

@@ -1,14 +1,18 @@
+import React from 'react';
+import { Link } from 'react-router-dom'
 const NavBar = () => {
-    return (
-      <div className="navbar">
-        <a href="#link">Link</a>
-        <a href="#link">Link</a>
-        <a href="#link">Link</a>
-        <a href="#link" className="right">
-          Link
-        </a>
-      </div>
-    );
-  };
-
-  export default NavBar;
+  return (
+    <div className="navbar">
+
+      <Link to="/">Home</Link>
+      <Link to="/about">About</Link>
+      <Link to="/projects">Projects</Link>
+      <Link to="/blog" className="right">
+        Blog
+        </Link>
+
+    </div>
+  );
+};
+
+export default NavBar;

src/components/Projects.js

@@ -0,0 +1,15 @@
+import React from "react";
+import Header from "./Header";
+import NavBar from "./Navbar";
+
+const Projects = () => {
+    return(
+        <div>
+        <Header />
+        <NavBar />
+<h3>Project By Sylvia Boonabaana</h3>
+</div>
+    )
+}
+
+export default Projects;

src/components/Sidebar.tsx

@@ -1,16 +1,19 @@
 import React from "react";
+import myprofile from "../assets/img/sylvy.jpg"
 
 const Sidebar = () => {
   return (
     <div className="side">
       <h2>About Me</h2>
       <h5>Photo of me:</h5>
       <div className="images">
-        <img src="https://picsum.photos/300/200" width="auto" alt="" />
+        <img src={myprofile} width="300" alt="" />
       </div>
-      <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
-      <h3>More Text</h3>
-      <p>Lorem ipsum dolor sit ame.</p>
+      <p>A dynamic software developer. Analytical problem solver with a talent for thinking outside the box for creative solutions. </p>
+      <h3>Projects Completed</h3>
+      <p>Massajja Division Ufarm</p>
+      <p>African Money Tracker</p>
+      <p>Ultimate Blog App</p>
       <div className="images">
         <img src="https://picsum.photos/301/60" width="auto" alt="" />
       </div>

src/variables/articles.ts

@@ -1,23 +1,23 @@
 export const articles = [
   {
-    user: "John Doe",
-    sub_text: "Some lorem text",
-    title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
-    body: "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",
+    user: "Sylvia Boonabaana",
+    sub_text: "A Web App",
+    title: "Massajja Division Ufarm",
+    body: "A platform to promote and support urban farming practice while easing market access and improving on the family earnings and livelihoods.",
     image: "https://picsum.photos/853/200",
   },
   {
-    user: "Johnathan Doe",
-    title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
-    sub_text: "Some lorem text",
-    body: "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla",
+    user: "Sylvia, Emma",
+    title: "African Money Tracker",
+    sub_text: "A Mobile App",
+    body: "A mobile app to help users track their spending habits so as to better manage expenses and incomes",
     image: "https://picsum.photos/852/200",
   },
   {
-    user: "Johnathan Doe",
-    title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
-    sub_text: "Some lorem text",
-    body: "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla",
+    user: "Sylvia Boonabaana",
+    title: "Ultimate Blog",
+    sub_text: "A Web App",
+    body: "Allows users to publish their blogs, update them. Readers can make reviews and writers may respond.",
     image: "https://picsum.photos/850/200",
   },
 ];