kevin/portfolio
1
0
Fork 0
Code

Update layout with fixed navbar and fixed sidebar

Browse Source
This commit is contained in:
PA4KEV 2022-12-31 11:34:54 +01:00
parent d33606a3be
commit 7e4f615f75
7 changed files with 70 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.css
View File

@ -1,6 +1,5 @@
.container {
max-width: 800px;
background-color: #282c34;
body {
padding-top: 100px;
}
.App {

10
src/App.js
View File

@ -4,16 +4,18 @@ import "bootstrap/dist/js/bootstrap.bundle.min";
import './App.css';
import Navigation from './UI/Navigation';
import ContentItem from './Content/ContentItem';
import Sidebar from './UI/Sidebar';
function App() {
return (
<div>
<div className='row '>
<Navigation />
</div>
<div className='row'>
<Sidebar />
<ContentItem />
<ContentItem />
<ContentItem />
</div>
</div>
);
}

38
src/Content/ContentItem.js
View File

@ -3,13 +3,49 @@ import React from 'react';
const ContentItem = (props) => {
return (
<div>
<div className="col-6 offset-3">
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" className="scrollspy-example" tabIndex="0">
<h4 id="list-item-1">Item 1</h4>
<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>
<p>
We have bigger houses but smaller families. More conveniences, but less time. We have more degrees, but less sense. More knowledge, but less judgment. More experts, but more problems. More medicines, but less healthiness. We’ve been all the way to the moon and back, but have trouble crossing the street to meet the new neighbor. We build more computers to hold more information to produce more copies than ever but have less communication. We have become long on quantity, but short on quality. These are times of fast foods but slow digestion; Tall man but short character; Steep profits but shallow relationships. It’s a time when there is much in the window, but nothing in the room.
</p>
<h4 id="list-item-2">Item 2</h4>
<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>
<p>
We have bigger houses but smaller families. More conveniences, but less time. We have more degrees, but less sense. More knowledge, but less judgment. More experts, but more problems. More medicines, but less healthiness. We’ve been all the way to the moon and back, but have trouble crossing the street to meet the new neighbor. We build more computers to hold more information to produce more copies than ever but have less communication. We have become long on quantity, but short on quality. These are times of fast foods but slow digestion; Tall man but short character; Steep profits but shallow relationships. It’s a time when there is much in the window, but nothing in the room.
</p>
<h4 id="list-item-3">Item 3</h4>
<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>
<p>
We have bigger houses but smaller families. More conveniences, but less time. We have more degrees, but less sense. More knowledge, but less judgment. More experts, but more problems. More medicines, but less healthiness. We’ve been all the way to the moon and back, but have trouble crossing the street to meet the new neighbor. We build more computers to hold more information to produce more copies than ever but have less communication. We have become long on quantity, but short on quality. These are times of fast foods but slow digestion; Tall man but short character; Steep profits but shallow relationships. It’s a time when there is much in the window, but nothing in the room.
</p>
<h4 id="list-item-4">Item 4</h4>
<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>
<p>
We have bigger houses but smaller families. More conveniences, but less time. We have more degrees, but less sense. More knowledge, but less judgment. More experts, but more problems. More medicines, but less healthiness. We’ve been all the way to the moon and back, but have trouble crossing the street to meet the new neighbor. We build more computers to hold more information to produce more copies than ever but have less communication. We have become long on quantity, but short on quality. These are times of fast foods but slow digestion; Tall man but short character; Steep profits but shallow relationships. It’s a time when there is much in the window, but nothing in the room.
</p>
</div>
</div>
)
}

3
src/UI/Navigation.css
View File

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

2
src/UI/Navigation.js
View File

@ -4,7 +4,7 @@ import './Navigation.css';
const Navigation = (props) => {
return (
<nav className="navbar navbar-expand-lg bg-light">
<nav className="navbar navbar-expand-lg fixed-top 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">

2
src/UI/Sidebar.css Normal file
View File

@ -0,0 +1,2 @@
.sidebar {
}

17
src/UI/Sidebar.js Normal file
View File

@ -0,0 +1,17 @@
import React from 'react';
import './Sidebar.css';
const Sidebar = (props) => {
return (
<div className="sidebar col-3 position-fixed">
<div id="list-example" className="list-group">
<a className="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
<a className="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
<a className="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
<a className="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
</div>
)
}
export default Sidebar;