Add Raspberry Pi Jukebox page

src/App.js

@@ -21,6 +21,7 @@ import Balkon from './Pages/Radio/Balkon';
 
 import Linux from './Pages/Linux/Linux';
 import Footer from './UI/Footer';
+import RaspberryJukebox from './Pages/Software/Projects/RaspberryJukebox';
 
 
 
@@ -37,6 +38,7 @@ function App() {
             <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/software/raspberry-pi-jukebox' element={<RaspberryJukebox />}></Route>
             <Route exact path='/pages/software/kanji-application' element={<KanjiApplication />}></Route>
             <Route exact path='/pages/radio' element={<Radio />}></Route>
             <Route exact path='/pages/radio/components' element={<Components />}></Route>

src/Pages/Software/Projects/RaspberryJukebox.js

@@ -0,0 +1,46 @@
+import React from 'react';
+
+const RaspberryJukebox = () => {
+    return (
+        <div className='row'>
+            <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">Raspberry Pi Jukebox</h1>
+                    <h4 className="text-secondary">Streaming internet radio</h4>
+                    <p>Here I used a <a href="https://www.raspberrypi.org/" target="_blank" rel="noopener noreferrer">Raspberry Pi</a> to stream internet radio. <a href="https://www.python.org/" target="_blank" rel="noopener noreferrer">Python</a> and <a href="https://flask.palletsprojects.com/" target="_blank" rel="noopener noreferrer">Flask</a> were used to create a simple website interface that resided on the Raspberry Pi using the Apache web engine. This simple site had buttons to control the LEDs, the station to stream and to adjust the volume.</p>
+                    <p>The LEDs were controlled using an <a href="https://www.arduino.cc/" target="_blank" rel="noopener noreferrer">Arduino</a> and a <a href="https://www.analog.com/media/en/technical-documentation/data-sheets/max7219-max7221.pdf" target="_blank" rel="noopener noreferrer">Maxim MAX7219 IC</a>.</p>
+                    <picture>
+                        <source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/raspberry-jukebox/disassembly-w240.webp`} />
+                        <source media="(min-width: 800px) and (max-width: 1199px)" srcset={`${process.env.PUBLIC_URL}/images/projects/raspberry-jukebox/disassembly-w480.webp`} />
+                        <source media="(min-width: 1200px)" srcset={`${process.env.PUBLIC_URL}/images/projects/raspberry-jukebox/disassembly.webp`} />
+                        <img alt="Jukebox disassembly" src={`${process.env.PUBLIC_URL}/images/projects/raspberry-jukebox/disassembly.webp`}/>
+                    </picture>
+
+                    <picture>
+                        <source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/raspberry-jukebox/old-interiour-w240.webp`} />
+                        <source media="(min-width: 800px) and (max-width: 1199px)" srcset={`${process.env.PUBLIC_URL}/images/projects/raspberry-jukebox/old-interiour-w480.webp`} />
+                        <source media="(min-width: 1200px)" srcset={`${process.env.PUBLIC_URL}/images/projects/raspberry-jukebox/old-interiour.webp`} />
+                        <img alt="Jukebox old interiour" src={`${process.env.PUBLIC_URL}/images/projects/raspberry-jukebox/old-interiour.webp`}/>
+                    </picture>
+
+                    <picture>
+                        <source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/raspberry-jukebox/led-matrix-w240.webp`} />
+                        <source media="(min-width: 800px) and (max-width: 1199px)" srcset={`${process.env.PUBLIC_URL}/images/projects/raspberry-jukebox/led-matrix-w480.webp`} />
+                        <source media="(min-width: 1200px)" srcset={`${process.env.PUBLIC_URL}/images/projects/raspberry-jukebox/led-matrix.webp`} />
+                        <img alt="L E D Matrix" src={`${process.env.PUBLIC_URL}/images/projects/raspberry-jukebox/led-martix.webp`}/>
+                    </picture>
+
+                    <picture>
+                        <source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/raspberry-jukebox/fully-assembled-w240.webp`} />
+                        <source media="(min-width: 800px) and (max-width: 1199px)" srcset={`${process.env.PUBLIC_URL}/images/projects/raspberry-jukebox/fully-assembled-w480.webp`} />
+                        <source media="(min-width: 1200px)" srcset={`${process.env.PUBLIC_URL}/images/projects/raspberry-jukebox/fully-assembled-w800.webp`} />
+                        <img alt="Fully assembled jukebox with lights" src={`${process.env.PUBLIC_URL}/images/projects/raspberry-jukebox/fully-assembled-w800.webp`}/>
+                    </picture>                    
+                </section>
+                
+            </div>
+        </div>
+    )
+}
+
+export default RaspberryJukebox;

src/Pages/Software/Software.js

@@ -43,6 +43,7 @@ const Software = () => {
                         <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>
                         <li><Link reloadDocument to="/pages/software/kanji-application">Kanji flashcard Android application</Link></li>
+                        <li><Link reloadDocument to="/pages/software/raspberry-pi-jukebox">Raspberry Pi Jukebox</Link></li>
                     </ul>
                 </section>