Add festival crowd simulator page

src/App.js

@@ -20,6 +20,7 @@ import TeslaMaze from './Pages/Software/Projects/TeslaMaze';
 import EmbeddedInternetRadio from './Pages/Software/Projects/EmbeddedInternetRadio';
 import Windows10Cookbook from './Pages/Software/Projects/Windows10Cookbook';
 import IOSAirports from './Pages/Software/Projects/IOSAirports';
+import FestivalSimulator from './Pages/Software/Projects/FestivalSimulator';
 
 import Radio from './Pages/Radio/Radio';
 import Components from './Pages/Radio/Components';
@@ -50,6 +51,7 @@ function App() {
             <Route exact path='/pages/software/embedded-internet-radio' element={<EmbeddedInternetRadio />}></Route>
             <Route exact path='/pages/software/windows10-cookbook' element={<Windows10Cookbook />}></Route>
             <Route exact path='/pages/software/ios-airports' element={<IOSAirports />}></Route>
+            <Route exact path='/pages/software/festival-simulator' element={<FestivalSimulator />}></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/FestivalSimulator.js

@@ -0,0 +1,90 @@
+import React from 'react';
+
+const FestivalSimulator = () => {
+    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">SimFest Tycoon</h1>
+                    <h4 className="text-secondary">Festival crowd simulator</h4>
+
+                    <p>A team project in which a festival can be simulated to view how crowds of people behave. The user can build festivals, roads, snackbars and assign time periods when a band plays at a stage. The project was programmed in Java. A school project made by four people. The software allows users to build their own festival grounds. Snackbarstands, toilets, roads and stages can be placed to view how people form crowds and bottlenecks in certain areas. The user can also assign a band that plays for a certain time at a stage using a scheduler. </p>
+                    <p>The band has a timeperiod and popularity, which affects the amount of people visiting that stage. The goal of this software is create an overview of potential bottlenecks and overcrowded areas.</p>
+
+
+                    <picture>
+                        <source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft2-w240.webp`} />
+                        <source media="(min-width: 800px) and (max-width: 1199px)" srcset={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft2-w480.webp`} />
+                        <source media="(min-width: 1200px) and (max-width: 1799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft2-w800.webp`} />
+                        <source media="(min-width: 1800px)" srcset={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft2.webp`} />
+                        <img alt="Screenshot festival simulator" src={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft2.webp`}/>
+                    </picture>
+
+                    <p></p>
+
+                    <picture>
+                        <source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft4-w240.webp`} />
+                        <source media="(min-width: 800px) and (max-width: 1199px)" srcset={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft4-w480.webp`} />
+                        <source media="(min-width: 1200px) and (max-width: 1799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft4-w800.webp`} />
+                        <source media="(min-width: 1800px)" srcset={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft4.webp`} />
+                        <img alt="Screenshot festival simulator" src={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft4.webp`}/>
+                    </picture>
+
+                    <p></p>
+
+                    <picture>
+                        <source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft5-w240.webp`} />
+                        <source media="(min-width: 800px) and (max-width: 1199px)" srcset={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft5-w480.webp`} />
+                        <source media="(min-width: 1200px) and (max-width: 1799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft5-w800.webp`} />
+                        <source media="(min-width: 1800px)" srcset={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft5.webp`} />
+                        <img alt="Screenshot festival simulator" src={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft5.webp`}/>
+                    </picture>
+
+                    <p></p>
+
+                    <picture>
+                        <source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft7-w240.webp`} />
+                        <source media="(min-width: 800px) and (max-width: 1199px)" srcset={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft7-w480.webp`} />
+                        <source media="(min-width: 1200px) and (max-width: 1799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft7-w800.webp`} />
+                        <source media="(min-width: 1800px)" srcset={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft7.webp`} />
+                        <img alt="Screenshot festival simulator" src={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft7.webp`}/>
+                    </picture>
+
+                    <p></p>
+
+                    <picture>
+                        <source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft8-w240.webp`} />
+                        <source media="(min-width: 800px) and (max-width: 1199px)" srcset={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft8-w480.webp`} />
+                        <source media="(min-width: 1200px) and (max-width: 1799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft8-w800.webp`} />
+                        <source media="(min-width: 1800px)" srcset={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft8.webp`} />
+                        <img alt="Screenshot festival simulator" src={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft8.webp`}/>
+                    </picture>
+
+                    <p></p>
+
+                    <picture>
+                        <source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft9-w240.webp`} />
+                        <source media="(min-width: 800px) and (max-width: 1199px)" srcset={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft9-w480.webp`} />
+                        <source media="(min-width: 1200px) and (max-width: 1799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft9-w800.webp`} />
+                        <source media="(min-width: 1800px)" srcset={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft9.webp`} />
+                        <img alt="Screenshot festival simulator" src={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft9.webp`}/>
+                    </picture>
+
+                    <p></p>
+
+                    <picture>
+                        <source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft10-w240.webp`} />
+                        <source media="(min-width: 800px) and (max-width: 1199px)" srcset={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft10-w480.webp`} />
+                        <source media="(min-width: 1200px) and (max-width: 1799px)" srcset={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft10-w800.webp`} />
+                        <source media="(min-width: 1800px)" srcset={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft10.webp`} />
+                        <img alt="Screenshot festival simulator" src={`${process.env.PUBLIC_URL}/images/projects/festival-simulator/sft10.webp`}/>
+                    </picture>
+
+                </section>
+            </div>
+        </div>
+    )
+}
+
+export default FestivalSimulator;

src/Pages/Software/Software.js

@@ -49,6 +49,7 @@ const Software = () => {
                         <li><Link reloadDocument to="/pages/software/embedded-internet-radio">Embedded Internet Radio</Link></li>
                         <li><Link reloadDocument to="/pages/software/windows10-cookbook">Windows 10 Cookbook</Link></li>
                         <li><Link reloadDocument to="/pages/software/ios-airports">iOS Airports mobile application</Link></li>
+                        <li><Link reloadDocument to="/pages/software/festival-simulator">Java festival crowd simulator</Link></li>
                     </ul>
                 </section>