Add basic navigation and content item components

src/App.css

@@ -1,3 +1,8 @@
+.container {
+  max-width: 800px;
+  background-color: #282c34;
+}
+
 .App {
   text-align: center;
 }

src/App.js

@@ -1,29 +1,21 @@
-import logo from './logo.svg';
-import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
+import "bootstrap/dist/js/bootstrap.bundle.min";
+
+import './App.css';
+import Navigation from './UI/Navigation';
+import ContentItem from './Content/ContentItem';
 
 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>
-        <p>
-          <button type="button" class="btn btn-primary">Primary</button>
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    return (
+    <div>
+      <Navigation />
+
+      <ContentItem />
+      <ContentItem />
+      <ContentItem />
+
     </div>
-  );
+    );
 }
 
-export default App;
+export default App;

src/Content/ContentItem.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+
+const ContentItem = (props) => {
+    return (
+        <div>
+            <p>
+            Whether we like it or not, we have all been born on this earth as part of one great human family. Rich or poor, educated or uneducated, belonging to one nation or another, to one religion or another, adhering to this ideology or that, ultimately each of us is just a human being like everyone else: we all desire happiness and do not want suffering. Furthermore, each of us has an equal right to pursue these goals.
+            </p>
+            <p>
+            Let us cultivate love and compassion, both of which give life true meaning. This is the religion I preach. It is simple. Its temple is the heart. Its teaching is love and compassion. Its moral values are loving and respecting others, whoever they may be. Whether one is a lay person or a monastic, we have no other option if we wish to survive in this world.
+            </p>
+        </div>
+    )
+}
+
+export default ContentItem;

src/UI/Navigation.css

@@ -0,0 +1,3 @@
+.logo-sub {
+    font-size: 10pt;
+}

src/UI/Navigation.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import './Navigation.css';
+
+
+const Navigation = (props) => {
+    return (                
+        <nav className="navbar navbar-expand-lg bg-light">
+            <div className="container-fluid">
+                <a className="navbar-brand" href="#!">Kevin Matsubara<br/><span className='logo-sub'>Software Developer</span></a>
+                <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span className="navbar-toggler-icon"></span>
+                </button>
+                <div className="collapse navbar-collapse" id="navbarSupportedContent">
+                <ul className="navbar-nav me-auto mb-2 mb-lg-0">
+                    <li className="nav-item">
+                    <a className="nav-link active" aria-current="page" href="#!">About</a>
+                    </li>
+                    {/* <li className="nav-item">
+                    <a className="nav-link" href="#!">Link</a>
+                    </li> */}
+                    <li className="nav-item dropdown">
+                    <a className="nav-link dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                        Portal
+                    </a>
+                    <ul className="dropdown-menu">
+                        <li><a className="dropdown-item" href="#!">Software</a></li>
+                        <li><hr className="dropdown-divider"/></li>
+                        <li><a className="dropdown-item" href="#!">Radio Amateur</a></li>
+                        <li><hr className="dropdown-divider"/></li>
+                        <li><a className="dropdown-item" href="#!">Linux</a></li>
+                    </ul>
+                    </li>
+                    {/* <li className="nav-item">
+                    <a href="#!" className="nav-link disabled">Disabled</a>
+                    </li> */}
+                </ul>
+                {/* <form className="d-flex" role="search">
+                    <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
+                    <button className="btn btn-outline-success" type="submit">Search</button>
+                </form> */}
+                </div>
+            </div>
+        </nav>
+    )
+}
+
+export default Navigation;