Add SWIV for Pi software project page

src/App.js

@@ -11,6 +11,7 @@ import Home from './Pages/Home';
 import Software from './Pages/Software/Software';
 import DXPDevelopment from './Pages/Software/Projects/DXPDevelopment';
 import ConfigAutomation from './Pages/Software/Projects/ConfigAutomation';
+import SwivForPi from './Pages/Software/Projects/SwivForPi';
 import WifiPrototype from './Pages/Software/Projects/WifiPrototype';
 
 import Radio from './Pages/Radio/Radio';
@@ -21,6 +22,7 @@ import Linux from './Pages/Linux/Linux';
 import Footer from './UI/Footer';
 
 
+
 function App() {
     return (
     <Router>
@@ -33,6 +35,7 @@ function App() {
             <Route exact path='/pages/software/dxp-development' element={<DXPDevelopment />}></Route>
             <Route exact path='/pages/software/configuration-automation' element={<ConfigAutomation />}></Route>
             <Route exact path='/pages/software/wifi-prototype' element={<WifiPrototype />}></Route>
+            <Route exact path='/pages/software/embedded-game' element={<SwivForPi />}></Route>
             <Route exact path='/pages/radio' element={<Radio />}></Route>
             <Route exact path='/pages/radio/components' element={<Components />}></Route>
             <Route exact path='/pages/radio/balcony' element={<Balkon />}></Route>

src/Pages/Software/Projects/SwivForPi.js

@@ -0,0 +1,52 @@
+import React from 'react';
+
+const SwivForPi = () => {
+    return (
+        <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 list-group-item-primary" href="#list-intro">intro</a>
+                    <a className="list-group-item list-group-item-action list-group-item-primary" href="#list-hardware">Hardware</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 id="list-intro" className="content-section">
+                    <h1 className="text-primary">Embedded Game</h1>
+                    <h4 className="text-secondary">Vertical shooter</h4>
+                    <p>A simple vertical space shooter created for the <a href="https://www.raspberrypi.org/" target="_blank" rel="noopener noreferrer">Raspberry Pi</a>. The game is played with regular keyboard and a custom joystick setup. The game was programmed in Python using the <a href="https://www.pygame.org/" target="_blank" rel="noopener noreferrer">PyGame</a> library. This project was mainly to create small game and interface it with a custom hardware setup. The setup uses an analog joystick to control the player's helicopter. An <a href="https://en.wikipedia.org/wiki/Analog-to-digital_converter" target="_blank" rel="noopener noreferrer">ADC (Analog Digital Converter)</a> samples the analog data into digital data so that the Raspberry Pi (version 1, type B) could parse the data.</p>
+                    <img src={`${process.env.PUBLIC_URL}/images/projects/swivforpi/title.webp`} alt="S W I V for Pi title screen"/>
+                    <img src={`${process.env.PUBLIC_URL}/images/projects/swivforpi/screenshot.webp`} alt="S W I V for Pi screenshot"/>
+                </section>
+
+                <section id="list-hardware" className="content-section">
+                    <h2 className="text-primary">Hardware</h2>
+                    <p>Simple components were placed onto a breadboard and the joystick's analog resistive data would be converted into digital data. This data would be read by the GPIO pins and used to determine how the helicopter moves over the X- and Y-axis. To help with understanding electronic logic, an oscilloscope was used.</p>
+                    <picture>
+                        <source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/swivforpi/breadboard-top-view-w240.webp`} />
+                        <source media="(min-width: 800px) and (max-width: 1199px)" srcset={`${process.env.PUBLIC_URL}/images/projects/swivforpi/breadboard-top-view-w480.webp`} />
+                        <source media="(min-width: 1200px)" srcset={`${process.env.PUBLIC_URL}/images/projects/swivforpi/breadboard-top-view-w800.webp`} />
+                        <img alt="Breadboard with components top view" src={`${process.env.PUBLIC_URL}/images/projects/swivforpi/breadboard-top-view-w800.webp`}/>
+                    </picture>
+
+                    <picture>
+                        <source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/swivforpi/breadboard-front-view-w240.webp`} />
+                        <source media="(min-width: 800px) and (max-width: 1199px)" srcset={`${process.env.PUBLIC_URL}/images/projects/swivforpi/breadboard-front-view-w480.webp`} />
+                        <source media="(min-width: 1200px)" srcset={`${process.env.PUBLIC_URL}/images/projects/swivforpi/breadboard-front-view-w800.webp`} />
+                        <img alt="Breadboard with components front view" src={`${process.env.PUBLIC_URL}/images/projects/swivforpi/breadboard-front-view-w800.webp`}/>
+                    </picture>
+
+                    <picture>
+                        <source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/swivforpi/oscilloscope-w240.webp`} />
+                        <source media="(min-width: 800px) and (max-width: 1199px)" srcset={`${process.env.PUBLIC_URL}/images/projects/swivforpi/oscilloscope-w480.webp`} />
+                        <source media="(min-width: 1200px)" srcset={`${process.env.PUBLIC_URL}/images/projects/swivforpi/oscilloscope-w800.webp`} />
+                        <img alt="Breadboard with components top view" src={`${process.env.PUBLIC_URL}/images/projects/swivforpi/oscilloscope-w800.webp`}/>
+                    </picture>
+                </section>
+            </div>
+
+        </div>
+    )
+}
+
+export default SwivForPi;

src/Pages/Software/Software.js

@@ -41,6 +41,7 @@ const Software = () => {
                         <li><Link reloadDocument to="/pages/software/dxp-development">DXP development- OPPLE catalog generator</Link></li>
                         <li><Link reloadDocument to="/pages/software/configuration-automation">Configuration automation</Link></li>
                         <li><Link reloadDocument to="/pages/software/wifi-prototype">Wi-Fi prototype</Link></li>
+                        <li><Link reloadDocument to="/pages/software/embedded-game">Embedded Game</Link></li>
                     </ul>
                 </section>