Create content for Home and Software pages
This commit is contained in:
PA4KEV
parent
bfed8512c9
commit
347455ed3d
BIN
public/icons/github.png
Normal file
BIN
public/icons/github.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
BIN
public/udemy-certs/UC-0BB6GYJ1.pdf
Normal file
BIN
public/udemy-certs/UC-0BB6GYJ1.pdf
Normal file
Binary file not shown.
BIN
public/udemy-certs/UC-19ac22fe-70fa-47bd-804c-83f3aa4ac218.jpg
Normal file
BIN
public/udemy-certs/UC-19ac22fe-70fa-47bd-804c-83f3aa4ac218.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
public/udemy-certs/UC-9f15ebd2-2a9a-489f-b8ca-7e8b175bc12f.pdf
Normal file
BIN
public/udemy-certs/UC-9f15ebd2-2a9a-489f-b8ca-7e8b175bc12f.pdf
Normal file
Binary file not shown.
@ -2,6 +2,14 @@ body {
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content-item {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -3,51 +3,11 @@ import React from 'react';
|
||||
|
||||
const ContentItem = (props) => {
|
||||
return (
|
||||
<div className="col-6 offset-3">
|
||||
<h1>{props.title}</h1>
|
||||
<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>
|
||||
<div>
|
||||
<h4 id={props.id}>{props.title}</h4>
|
||||
<p>
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
39
src/Pages/Home.js
Normal file
39
src/Pages/Home.js
Normal file
@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom';
|
||||
|
||||
const Home = () => {
|
||||
return (
|
||||
<div className='row'>
|
||||
<div className="col-6 offset-3">
|
||||
<section className="content-section">
|
||||
<h1>Kevin van der Vleuten</h1>
|
||||
<p>Welcome to my simple website.</p>
|
||||
|
||||
<p>I am a software developer and enjoy creating solutions.
|
||||
</p>
|
||||
|
||||
<p>Check out my <Link to="/pages/software">Software</Link> journey.<br/> I also enjoy working with <Link to="/pages/linux">Linux</Link>.</p>
|
||||
|
||||
<p>
|
||||
<a href="https://github.com/PA4KEV" target="_blank" rel="noreferrer">
|
||||
<img src={`${process.env.PUBLIC_URL}/icons/github.png`} alt="github icon"/>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<hr/>
|
||||
|
||||
<p>Aside from software tinkering, check out my other interests here:</p>
|
||||
<ul>
|
||||
<li><Link to="/pages/radio">Radio amateur</Link></li>
|
||||
</ul>
|
||||
|
||||
<hr/>
|
||||
<p class="small">This site was made with: <a href="https://reactjs.org/" target="_blank">React</a>, <a href="https://getbootstrap.com/" target="_blank">Bootstrap</a>, <a href="https://www.nginx.com/" target="_blank">Nginx</a> and <a href="https://www.docker.com/" target="_blank">Docker</a><br/>on <a href="https://www.digitalocean.com/" target="_blank">DigitalOcean</a> cloud droplets.</p>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Home;
|
||||
@ -2,11 +2,23 @@ import React from 'react';
|
||||
import ContentItem from '../../Content/ContentItem';
|
||||
import Sidebar from '../../UI/Sidebar';
|
||||
|
||||
function Linux (){
|
||||
const Linux = () => {
|
||||
return (
|
||||
<div className='row'>
|
||||
<Sidebar />
|
||||
<ContentItem title="Welcome to the Linux page!"/>
|
||||
<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-intro">intro</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="scrollspy-example col-6 offset-3" data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" tabIndex="0">
|
||||
<section className="content-section">
|
||||
<div className='content-item'>
|
||||
<h2 id="list-intro">Linux</h2>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,12 +1,23 @@
|
||||
import React from 'react';
|
||||
import ContentItem from '../../Content/ContentItem';
|
||||
import Sidebar from '../../UI/Sidebar';
|
||||
|
||||
function Radio (){
|
||||
const Radio = () => {
|
||||
return (
|
||||
<div className='row'>
|
||||
<Sidebar />
|
||||
<ContentItem title="Welcome to the Radio page!"/>
|
||||
<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-intro">intro</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="scrollspy-example col-6 offset-3" data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" tabIndex="0">
|
||||
<section className="content-section">
|
||||
<div className='content-item'>
|
||||
<h2 id="list-intro">Radio amateur</h2>
|
||||
<p>My callsign is: PA4KEV</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,12 +1,103 @@
|
||||
import React from 'react';
|
||||
import ContentItem from '../../Content/ContentItem';
|
||||
import Sidebar from '../../UI/Sidebar';
|
||||
|
||||
function Software (){
|
||||
const Software = () => {
|
||||
return (
|
||||
<div className='row'>
|
||||
<Sidebar />
|
||||
<ContentItem title="Welcome to the Software page!"/>
|
||||
<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-education">Education</a>
|
||||
<a className="list-group-item list-group-item-action" href="#list-certification">Certification</a>
|
||||
<a className="list-group-item list-group-item-action" href="#list-courses">Courses</a>
|
||||
<a className="list-group-item list-group-item-action" href="#list-skills">Skills</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="scrollspy-example col-6 offset-3" data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" tabIndex="0">
|
||||
<section className="content-section">
|
||||
<div className='content-item'>
|
||||
<h2 id="list-education">Education</h2>
|
||||
<hr/>
|
||||
<h4 class="mb-0">Computer engineering of applied computer science</h4>
|
||||
<h6>Bachelor of computer science</h6>
|
||||
<p class="mb-3">Avans Hogeschool - Breda, Netherlands</p>
|
||||
<span class="text-primary">2012 - 2016</span>
|
||||
</div>
|
||||
|
||||
<div className='content-item'>
|
||||
<h4 class="mb-0">Interactive media design</h4>
|
||||
<h6>MBO diploma</h6>
|
||||
<p class="mb-3">Eindhovenseschool / Sint Lucas - Eindhoven, Netherlands</p>
|
||||
<span class="text-primary">2009 - 2012</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section className="content-section">
|
||||
<h2 id="list-certification">Certification</h2>
|
||||
<hr/>
|
||||
<div className='content-item'>
|
||||
<h4 class="mb-0">LPIC-1</h4>
|
||||
<h6>Linux professional institute certification</h6>
|
||||
<p><a target="_blank" rel="noreferrer" href="https://www.lpi.org/our-certifications/lpic-1-overview">lpi.org</a></p>
|
||||
<span class="text-primary">2022 (expires in 2027)</span>
|
||||
</div>
|
||||
<div className='content-item'>
|
||||
<h4 class="mb-0">Drupal 9 Site Builder</h4>
|
||||
<p><a target="_blank" rel="noreferrer" href="https://certification.acquia.com/user/18196">acquia.com</a></p>
|
||||
<span class="text-primary">2022</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section className="content-section">
|
||||
<h2 id="list-courses">Courses</h2>
|
||||
<hr/>
|
||||
<div className='content-item'>
|
||||
<h6 class="mb-0">Docker Mastery: Kubernetes + Swarm from a Docker Captain</h6>
|
||||
<p>
|
||||
<a target="_blank" rel="noreferrer" href="https://www.udemy.com/course/docker-mastery/">udemy.com</a>
|
||||
|
|
||||
<a href={`${process.env.PUBLIC_URL}/udemy-certs/UC-19ac22fe-70fa-47bd-804c-83f3aa4ac218.jpg`}>certificate</a>
|
||||
</p>
|
||||
<span class="text-primary">2021</span>
|
||||
</div>
|
||||
<div className='content-item'>
|
||||
<h6 class="mb-0">Beginning C++ Programming From Beginner to Beyond</h6>
|
||||
<p>
|
||||
<a target="_blank" rel="noreferrer" href="https://www.udemy.com/course/beginning-c-plus-plus-programming/">udemy.com</a>
|
||||
|
|
||||
<a href={`${process.env.PUBLIC_URL}/udemy-certs/UC-9f15ebd2-2a9a-489f-b8ca-7e8b175bc12f.pdf`}>certificate</a>
|
||||
</p>
|
||||
<span class="text-primary">2020</span>
|
||||
</div>
|
||||
<div className='content-item'>
|
||||
<h6 class="mb-0">Learn Linux in 5 Days and Level Up Your Career</h6>
|
||||
<p>
|
||||
<a target="_blank" rel="noreferrer" href="https://www.udemy.com/course/learn-linux-in-5-days/">udemy.com</a>
|
||||
|
|
||||
<a href={`${process.env.PUBLIC_URL}/udemy-certs/UC-0BB6GYJ1.pdf`}>certificate</a>
|
||||
</p>
|
||||
<span class="text-primary">2019</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section className="content-section">
|
||||
<h2 id="list-skills">Skills</h2>
|
||||
<hr/>
|
||||
<h4>Programming languages & Tools</h4>
|
||||
<ul>
|
||||
<li>Python</li>
|
||||
<li>PHP</li>
|
||||
<li>Docker</li>
|
||||
<li>C#</li>
|
||||
<li>JavaScript</li>
|
||||
<li>Node JS</li>
|
||||
<li>Git</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,14 +0,0 @@
|
||||
import React from 'react';
|
||||
import ContentItem from '../Content/ContentItem';
|
||||
import Sidebar from '../UI/Sidebar';
|
||||
|
||||
function Test (){
|
||||
return (
|
||||
<div className='row'>
|
||||
<Sidebar />
|
||||
<ContentItem title="Welcome to the Test page!"/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Test;
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom';
|
||||
|
||||
import Test from '../Pages/Test';
|
||||
import Home from '../Pages/Home';
|
||||
import Linux from '../Pages/Linux/Linux';
|
||||
import Radio from '../Pages/Radio/Radio';
|
||||
import Software from '../Pages/Software/Software';
|
||||
@ -14,28 +14,25 @@ const Navigation = (props) => {
|
||||
<Router>
|
||||
<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>
|
||||
<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">
|
||||
<Link to="/test" className="nav-link active" aria-current="page" href="#!">Test</Link>
|
||||
</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">
|
||||
<a className="nav-link dropdown-toggle active" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Portal
|
||||
</a>
|
||||
<ul className="dropdown-menu">
|
||||
<li><Link to="/pages/software" className="dropdown-item" href="#!">Software</Link></li>
|
||||
<li><Link to="/pages/software" className="dropdown-item">Software</Link></li>
|
||||
<li><hr className="dropdown-divider"/></li>
|
||||
<li><Link to="/pages/radio" className="dropdown-item" href="#!">Radio Amateur</Link></li>
|
||||
<li><Link to="/pages/radio" className="dropdown-item">Radio Amateur</Link></li>
|
||||
<li><hr className="dropdown-divider"/></li>
|
||||
<li><Link to="/pages/linux" className="dropdown-item" href="#!">Linux</Link></li>
|
||||
<li><Link to="/pages/linux" className="dropdown-item">Linux</Link></li>
|
||||
</ul>
|
||||
</li>
|
||||
{/* <li className="nav-item">
|
||||
@ -50,10 +47,10 @@ const Navigation = (props) => {
|
||||
</div>
|
||||
</nav>
|
||||
<Routes>
|
||||
<Route exact path='/test' element={< Test />}></Route>
|
||||
<Route exact path='/pages/software' element={< Software />}></Route>
|
||||
<Route exact path='/pages/radio' element={< Radio />}></Route>
|
||||
<Route exact path='/pages/linux' element={< Linux />}></Route>
|
||||
<Route exact path='/' element={<Home />}></Route>
|
||||
<Route exact path='/pages/software' element={<Software />}></Route>
|
||||
<Route exact path='/pages/radio' element={<Radio />}></Route>
|
||||
<Route exact path='/pages/linux' element={<Linux />}></Route>
|
||||
</Routes>
|
||||
</Router>
|
||||
)
|
||||
|
||||
@ -5,10 +5,7 @@ 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>
|
||||
<a className="list-group-item list-group-item-action" href={"#" + props.id}>{props.title}</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user