kevin/portfolio
1
0
Fork 0
Code

Apply primary and secondary colours and change favicon

Browse Source
This commit is contained in:
PA4KEV 2023-01-03 22:28:58 +01:00
parent fcc3e7e1e6
commit 6fec46c8bc
9 changed files with 35 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 24 KiB

2
src/App.js
View File

@ -1,4 +1,4 @@
import 'bootstrap/dist/css/bootstrap.min.css';
import './overrides.scss';
import "bootstrap/dist/js/bootstrap.bundle.min";
import './App.css';

4
src/Pages/Home.js
View File

@ -6,8 +6,8 @@ const Home = () => {
<div className='row'>
<div className="col-6 offset-3">
<section className="content-section">
<h1>Hallo, my name is Kevin.</h1>
<h3>Nice to meet you! :)</h3>
<h1 className="text-primary">Hallo, my name is Kevin.</h1>
<h3 className="text-secondary">Nice to meet you! :)</h3>
<p>I have done <Link reloadDocument to="/pages/software/configuration-automation">configuration automation</Link>, <Link reloadDocument to="/pages/software/dxp-development">DXP development</Link> and ...</p>
<p>When it comes to technology and engineering, I am always curious and eager to learn and adept myself. One of the things I enjoy the most is being able to teach others. Interns who enthousiastically become better programmers themselves through my knowledge is amazing! Check out my <Link reloadDocument to="/pages/software">Software</Link> journey.</p>
<p>My other interests are:</p>

4
src/Pages/Linux/Linux.js
View File

@ -7,14 +7,14 @@ const Linux = () => {
<div className='row'>
<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>
<a className="list-group-item list-group-item-action list-group-item-primary" 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>
<h1 id="list-intro" className="text-primary">Linux</h1>
</div>
</section>
</div>

4
src/Pages/Radio/Radio.js
View File

@ -5,14 +5,14 @@ const Radio = () => {
<div className='row'>
<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>
<a className="list-group-item list-group-item-action list-group-item-primary" 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>
<h1 id="list-intro" className="text-primary">Radio amateur</h1>
<p>My callsign is: PA4KEV</p>
</div>
</section>

20
src/Pages/Software/Projects/ConfigAutomation.js
View File

@ -5,24 +5,24 @@ const ConfigAutomation = () => {
<div className='row'>
<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-config-automation">Config automation</a>
<a className="list-group-item list-group-item-action" href="#list-development">Development</a>
<a className="list-group-item list-group-item-action" href="#list-deployment">Deployment</a>
<a className="list-group-item list-group-item-action" href="#list-feedback">Feedback</a>
<a className="list-group-item list-group-item-action" href="#list-lessons-learnt">Lessons learnt</a>
<a className="list-group-item list-group-item-action list-group-item-primary" href="#list-config-automation">Config automation</a>
<a className="list-group-item list-group-item-action list-group-item-primary" href="#list-development">Development</a>
<a className="list-group-item list-group-item-action list-group-item-primary" href="#list-deployment">Deployment</a>
<a className="list-group-item list-group-item-action list-group-item-primary" href="#list-feedback">Feedback</a>
<a className="list-group-item list-group-item-action list-group-item-primary" href="#list-lessons-learnt">Lessons learnt</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">
<h1 id="list-config-automation">Configuration automation</h1>
<h1 id="list-config-automation"className="text-primary">Configuration automation</h1>
<p>At <a href="https://www.hitachivantara.com/" target="_blank" rel="noopener">Hitachi Vantara</a> I worked with other developers on automating a configuration process using <a href="https://www.python.org/" target="_blank" rel="noopener">Python</a> and several external API.</p>
<p>Products would be picked, assembled, configured and finally packaged for shipping at the distribution centre where I collaborated on this project. Configuration happend by connecting a Windows laptop to the product and apply settings. This related to the product's operating system, network and storage settings.</p>
<img src={`${process.env.PUBLIC_URL}/images/projects/hitachi/cto-config.webp`} alt="CTO config"/>
</section>
<section className="content-section">
<h3 id="list-development">Development</h3>
<h3 id="list-development" className="text-primary">Development</h3>
<p>This project started as a local Python 2 script when it started, to only automate very specific settings. It later moved to USB drives and eventually to a VM on a network.</p>
<p>It eventually grew to support multiple product lines and at this moment I joined the other programmer to further extend this software after my internship.</p>
<p>Here I learnt working properly with Git and designing software architecture. I also learnt how to create automation by interfacing by GUI automation with <a href="https://www.autohotkey.com/" target="_blank" rel="noopener">AutoHotkey</a> and combine multiple APIs to achieve results.</p>
@ -32,7 +32,7 @@ const ConfigAutomation = () => {
</section>
<section className="content-section">
<h3 id="list-deployment">Deployment</h3>
<h3 id="list-deployment" className="text-primary">Deployment</h3>
<p>Creating the release of this software had to be done by running a batch script to create a bundled set of Python files. These files were then uploaded to the VM located in a European distribution center in the Netherlands. This VM is then used to run the software from on a local network on which all configuration laptops were connected to. A WinSCP script would then sync the contents of all VM's in distribution centres located in Singapore, United States and China in 24 hours.</p>
<p>A script (stub) on the configuration laptop would connect to the VM and run Python locally to receive instructions. The technician selects the product through a CLI menu and automated configuration starts.</p>
<p>Dedicated storage managing software had to be installed, so communicating with the Japanese supplier was always important. This software and other assets were separately deployed to create a stable configuration process.</p>
@ -40,14 +40,14 @@ const ConfigAutomation = () => {
</section>
<section className="content-section">
<h3 id="list-feedback">Feedback</h3>
<h3 id="list-feedback" className="text-primary">Feedback</h3>
<p>The application generated log files with each configuration and then upload these back to the VM after configuration was complete or halted. These logs were sorted under product name and the order number. But quite often, I found it very productive to go to the configuration area and simply talk with the technician to figure out what went wrong. Depending on the severity of the problem, it would get documented in Gitlab issues. On a weekly basis, issues would get assigned among developers.</p>
<p>Communication is always import and essential for proper DevOps. The people who operate and configure these machines daily often know a lot more details that can be used to optimize the software. But be certain to make them realize that they also contribute to profit, rather than believing their job may become obsolete.</p>
<img src={`${process.env.PUBLIC_URL}/images/projects/hitachi/hitachi-banner.webp`} alt="Hitachi banner"/>
</section>
<section className="content-section">
<h3 id="list-lessons-learnt">Lessons learnt</h3>
<h3 id="list-lessons-learnt" className="text-primary">Lessons learnt</h3>
<p>Being a programmer, I was mostly concerned with the software. But it requires hardware to run on. When the software does not work because of differences in the platform the software run on, what is there to do? I eventually started managing around 40 configuration laptops, using <a href="https://clonezilla.org/" target="_blank" rel="noopener">Clonezilla</a> to create identical machines.</p>
<p>Docker would have been an ideal solution, but I did not know much of it at the time.</p>
<p>Also my many points of learning in git merges, creating release tags, deploying broken versions of the software and immediatly needing to patch with hotfixes, all contributed to my learning of software development.</p>

14
src/Pages/Software/Projects/DXPDevelopment.js
View File

@ -5,16 +5,16 @@ const DXPDevelopment = () => {
<div className='row'>
<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-dxp">DXP</a>
<a className="list-group-item list-group-item-action" href="#list-legacy">Legacy</a>
<a className="list-group-item list-group-item-action" href="#list-improvement">Improvement</a>
<a className="list-group-item list-group-item-action list-group-item-primary" href="#list-dxp">DXP</a>
<a className="list-group-item list-group-item-action list-group-item-primary" href="#list-legacy">Legacy</a>
<a className="list-group-item list-group-item-action list-group-item-primary" href="#list-improvement">Improvement</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">
<h1 id="list-dxp">DXP Development</h1>
<h3>OPPLE Catalog Generator</h3>
<h1 id="list-dxp" className="text-primary">DXP Development</h1>
<h4 className="text-secondary">OPPLE Catalog Generator</h4>
<p>What is DXP? It stands for Digital Experience Platform and is basically interactive software where data can be maintained. One such DXP I loved working on was for <a href="https://www.opple.eu/" target="_blank" rel="noopener">OPPLE</a>. They are a brand of lighting products and have over 14000 different items.</p>
<p>My contributions were taking ownership of their catalog generator tool and maintaining the data of their products in <a href="https://www.drupal.org/" target="_blank" rel="noopener">Drupal</a> on their website.</p>
<p>You can view the catalog here: <a href="https://www.opple.nl/en/product-catalogue-np" target="_blank" rel="noopener">https://www.opple.nl/en/product-catalogue-np</a></p>
@ -24,13 +24,13 @@ const DXPDevelopment = () => {
</section>
<section className="content-section">
<h3 id="list-legacy">Legacy</h3>
<h3 id="list-legacy" className="text-primary">Legacy</h3>
<p>This project was handed to me as a <a href="https://en.wikipedia.org/wiki/Monolithic_application" target="_blank" rel="noopener">monolithic source</a>, with only 1 PHP file containing all the rendering logic and handling exceptions (as in, many products had their own unique, exceptional attributes). This was a project that had outgrown itself and was hard to scale further due to the current structure. I had to improve the code base, while retaining the legacy functions. But because everything was so tightly coupled I had to make sure a change did not break functionality elsewhere. The key is to write new code and provide "safety nets" for older code.</p>
<p>A common misconception is to think by creating quick code, is easy gain. Not much effort, just copy and paste the existing logic and adjust it a bit. Then put it in the same file, no need to document it. But by building up <a href="https://en.wikipedia.org/wiki/Technical_debt" target="_blank" rel="noopener">Technical Dept</a>, you will either leave this code behind or you will forget how everything works. Making code scalable, is essential. Even for "small" or "temporary" projects. Do not take shortcuts, thinking it will save time or meet the deadline.</p>
</section>
<section className="content-section">
<h3 id="list-improvement">Improvement</h3>
<h3 id="list-improvement" className="text-primary">Improvement</h3>
<p>Restructuring code built as such requires mostly patience. You cannot instantly restart everything, as this tool is used in production. You cannot create a new architecture complete with diagrams, there is currently no time. It is not the only project I work on, there are 20 other projects that also require attention. Instead, I started by moving functions around every time I worked on a new feature for the tool. Dedicating existing functions to separate module files was the start. Creating object-oriented code for new features was the next step. Applying unit tests came next. As long as a new feature request did not exceed in time, it could be slowly prepared to grow by having prework done every time.</p>
<p>Eventually, it became a tool with composed logic, making future maintenance and feature requests a lot more simple.</p>
<p>Moving forward with a structured tool, I am proud to have collaborated on this project!</p>

20
src/Pages/Software/Software.js
View File

@ -7,18 +7,18 @@ const Software = () => {
<div className='row'>
<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-skills">Skills</a>
<a className="list-group-item list-group-item-action" href="#list-projects">Projects</a>
<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 list-group-item-primary" href="#list-skills">Skills</a>
<a className="list-group-item list-group-item-action list-group-item-primary" href="#list-projects">Projects</a>
<a className="list-group-item list-group-item-action list-group-item-primary" href="#list-education">Education</a>
<a className="list-group-item list-group-item-action list-group-item-primary" href="#list-certification">Certification</a>
<a className="list-group-item list-group-item-action list-group-item-primary" href="#list-courses">Courses</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">
<h2 id="list-skills">Skills</h2>
<h2 id="list-skills" className="text-primary">Skills</h2>
<hr/>
<h4>Programming languages & Tools</h4>
<ul>
@ -33,7 +33,7 @@ const Software = () => {
</section>
<section className="content-section">
<h2 id="list-projects">Projects</h2>
<h2 id="list-projects" className="text-primary">Projects</h2>
<hr/>
<p>Projects I have worked on:</p>
<ul>
@ -44,7 +44,7 @@ const Software = () => {
<section className="content-section">
<div className='content-item'>
<h2 id="list-education">Education</h2>
<h2 id="list-education" className="text-primary">Education</h2>
<hr/>
<h4 class="mb-0">Computer engineering of applied computer science</h4>
<h6>Bachelor of computer science</h6>
@ -62,7 +62,7 @@ const Software = () => {
<section className="content-section">
<h2 id="list-certification">Certification</h2>
<h2 id="list-certification" className="text-primary">Certification</h2>
<hr/>
<div className='content-item'>
<h4 class="mb-0">LPIC-1</h4>
@ -79,7 +79,7 @@ const Software = () => {
<section className="content-section">
<h2 id="list-courses">Courses</h2>
<h2 id="list-courses" className="text-primary">Courses</h2>
<hr/>
<div className='content-item'>
<h6 class="mb-0">Docker Mastery: Kubernetes + Swarm from a Docker Captain</h6>

2
src/UI/Navigation.js
View File

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