Added collapsable entries for projects

assets/css/main.css

@@ -2818,6 +2818,61 @@ input, select, textarea {
 				border-top: 0;
 			}
 
+/* Accordion */ 
+
+	.accordion {
+		/*border: solid 1px rgba(255, 255, 255, 0.3);
+		border-left: 0;
+		border-right: 0;*/
+
+		/*background-color: rgba(255, 255, 255, 0.075);*/
+		background-color: transparent;
+		color: #ffffff;
+		cursor: pointer;
+		
+		padding: 18px;
+		width: 100%;
+		border: none;
+		text-align: left;
+		outline: none;
+		/*font-size: 15px;*/
+
+		font-size: 0.9em;
+		font-weight: 300;
+		transition: 0.4s;/*
+		border-top: solid 1px rgba(255, 255, 255, 0.3);
+		border-bottom: solid 1px rgba(255, 255, 255, 0.3);*/
+		border-collapse: separate;
+	}
+	
+	.active, .accordion:hover {
+		border: solid 1px rgba(255, 255, 255, 0.3);
+		border-left: 0;
+		border-right: 0;
+		background-color: rgba(255, 255, 255, 0.15);
+	}
+	
+	.accordion:after {
+		content: '\002B';
+		color: #777;
+		font-weight: bold;
+		float: left;
+		margin-right: 15px;
+	}
+	
+	.active:after {
+		content: "\2212";
+	}
+	
+	.panel {
+		padding: 0 18px;
+		font-size: 0.9em;
+		font-weight: 300;
+		max-height: 0;
+		overflow: hidden;
+		transition: max-height 0.2s ease-out;
+	}
+
 /* Button */
 
 	input[type="submit"],

assets/js/accordion.js

@@ -0,0 +1,18 @@
+var acc = document.getElementsByClassName("accordion");
+var i;
+
+for (i = 0; i < acc.length; i++) {
+  acc[i].addEventListener("click", function() {
+    /* Toggle between adding and removing the "active" class,
+    to highlight the button that controls the panel */
+    this.classList.toggle("active");
+
+    /* Toggle between hiding and showing the active panel */
+    var panel = this.nextElementSibling;
+    if (panel.style.maxHeight) {
+      panel.style.maxHeight = null;
+    } else {
+      panel.style.maxHeight = panel.scrollHeight + "px";
+    } 
+  });
+}

projects.html

@@ -45,317 +45,218 @@
                             <h2 style="color: #e44c65;">Robotics</h2>
 							<p style="margin-top: -20px;">Here there is a collection of all the projects that are strictly related to the design, development and functioning of robots:</p>
 
-							<!-- Master Thesis -->
+							<button class="accordion"><b>Voice Controlled Mobile Robot for Indoor Applications</b></button>
-							<table>
+							<div class="panel">
-								<td><b>Voice Controlled Mobile Robot for Indoor Applications</b></td>
-								<td style="text-align:right">
-									&nbsp;	
 								<i class="icon"><a target="_blank" rel="noopener noreferrer" href="https://drive.google.com/drive/folders/1Y7TJJN8z1llCkSTnpVHMELD3PqsX8VF9?usp=sharing" class="icon alt far fa-file-pdf"><span class="label">Slideshow</span></a></i>
 								<i class="fa-stack">
 									<i class="fa icon brands alt fa-github fa-stack-1x"></i>
 									<i class="fa alt fa-slash fa-stack-1x "></i>
 								</i>
-								</td>
+								<p>This thesis proposes a design from scratch for a small mobile robot controlled by voice using ROS.
-							</table>
-							<p style="margin-top: -20px;">
-								This thesis proposes a design from scratch for a small mobile robot controlled by voice using ROS.
 									The results obtained show both the feasibility of using low power boards and some of their limitations.
 									(Research publication in preparation)
 								</p>
+							</div>
 
 							<!-- Recharge Electric Car -->
-							<table>
+							<button class="accordion"><b> Recharging Electric Cars with a Mobile Robot </b></button>
-								<td>
+						<div class="panel">
-									<b>
-										Recharging Electric Cars with a Mobile Robot
-									</b>
-								</td>
-								<td style="text-align:right">
-									&nbsp;	
 							<i class="icon"><a target="_blank" rel="noopener noreferrer" href="https://drive.google.com/file/d/1wBfvAzy9N8uChNxNj9Kd_hcvI0Qq3uQj/view?usp=sharing" class="icon alt far fa-file-pdf"><span class="label">Slideshow</span></a></i>
 							<i class="fa-stack">
 								<i class="fa icon brands alt fa-github fa-stack-1x"></i>
 								<i class="fa alt fa-slash fa-stack-1x "></i>	
 							</i> 
-								</td>
+							<p>
-							</table>
-							<p style="margin-top: -20px;">
 								The aim of this project was to prove the possibility to design an autonomous mobile robot whose task was to recharge electric cars in a parking lot.
 								This was done in simulation, using the Gazebo and ROS.
 							</p>
+							</div>
 
 							<!-- EKF Matlab -->
-							<table>
+							<button class="accordion"><b>
-								<td>
-									<b>
 								Mobile Robot Self-Localization
-									</b>
+							</b></button>
-								</td>
+							<div class="panel">
-								<td style="text-align:right">
-									&nbsp;	
 								<i class="icon"><a target="_blank" rel="noopener noreferrer" href="https://drive.google.com/file/d/1BgPj-fgtYDDEsFHmDk2fGVm7DCPFWEeN/view?usp=sharing" class="icon alt far fa-file-pdf"><span class="label">Slideshow</span></a></i>
 								&nbsp;&nbsp;
 								<i class="icon"><a target="_blank" rel="noopener noreferrer" href="https://github.com/m-tartari/ekf_matlab" class="icon brands alt fa-github"><span class="label">GitHub</span></a></i>
-									&nbsp;&nbsp;
+								<p>
-								</td>
-							</table>
-							<p style="margin-top: -20px;">
 									For this project we worked using Matlab on data retrieved from a differential drive robot for its localization in a certain area by the means of the Extended Kalman filter (EKF).
 								</p>
+							</div>
 
 							<!-- Biorobotics -->
-							<table>
+							<button class="accordion"><b> Onychophora-Inspired Firefighting Robot</b></button>
-								<td>
+							<div class="panel">
-									<b>
-										Onychophora-Inspired Firefighting Robot
-									</b>
-								</td>
-								<td style="text-align:right">
-									&nbsp;	
 								<i class="icon"><a target="_blank" rel="noopener noreferrer" href="https://drive.google.com/open?id=1a_ZvgaQjzvedeo296zrDpdvNL_VJDWTX" class="icon alt far fa-file-pdf"><span class="label">Slideshow</span></a></i>
 								&nbsp;&nbsp;
 								<i class="icon"><a target="_blank" rel="noopener noreferrer" href="https://github.com/m-tartari/firebot" class="icon brands alt fa-github"><span class="label">GitHub</span></a></i>
-									&nbsp;&nbsp;
+								<p>
-								</td>
-							</table>
-							<p style="margin-top: -20px;">
 									This project proposes a conceptual design for a firefighting robot suitable for indoor environments by taking inspiration from the biological world.
 								</p>
+							</div>
 
 							<!-- DESRO -->
-							<table>
+							<button class="accordion"><b> 3RRR Planar Parallel Manipulator </b></button>
-								<td>
+							<div class="panel">	
-									<b>
-										3RRR Planar Parallel Manipulator
-									</b>
-								</td>
-								<td style="text-align:right">
-									&nbsp;	
 								<i class="icon"><a target="_blank" rel="noopener noreferrer" href="https://drive.google.com/open?id=11lCJM3EjVsua379BKD5NcEDHQLL4jdQn" class="icon alt far fa-file-pdf"><span class="label">Slideshow</span></a></i>
 								&nbsp;&nbsp;
 								<i class="icon"><a target="_blank" rel="noopener noreferrer" href="https://github.com/m-tartari/3RRR_planar_parallel_manipulator" class="icon brands alt fa-github"><span class="label">GitHub</span></a></i>
-									&nbsp;&nbsp;
+								<p>
-								</td>
-							</table>
-							<p style="margin-top: -20px;">
 										This project concerns the design and optimization of a 3RRR planar parallel manipulator using MATLAB and CATIA 
 								</p>
+							</div>
 
 							<!-- OPTEC -->
-							<table>
+							<button class="accordion"><b> Point-to-Point Trajectory Optimization </b></button>
-								<td>
+							<div class="panel">
-									<b>
-										Point-to-Point Trajectory Optimization
-									</b>
-								</td>
-								<td style="text-align:right">
-									&nbsp;	
 								<i class="icon"><a target="_blank" rel="noopener noreferrer" href="https://drive.google.com/open?id=11m7r7fLda_jpDEZ-9qAWvnfRN2kLkhlA" class="icon alt far fa-file-pdf"><span class="label">Slideshow</span></a></i>
 								&nbsp;&nbsp;
 								<i class="icon"><a target="_blank" rel="noopener noreferrer" href="https://github.com/m-tartari/simple_trajectory_optimization" class="icon brands alt fa-github"><span class="label">GitHub</span></a></i>
-									&nbsp;&nbsp;
+								<p>
-								</td>
-							</table>
-							<p style="margin-top: -20px;">
 									For this project we worked to find the optimal trajectory for a simple model of a robot performing point-to-point navigation in a room with some obstacles using MATLAB.
 								</p>
+							</div>
 
 							<!-- SOFAR -->
-							<table>
+							<button class="accordion"><b> Simple Swarm </b></button>
-								<td>
+							<div class="panel">
-									<b>
-										Simple Swarm
-									</b>
-								</td>
-								<td style="text-align:right">
 								<i class="icon"><a target="_blank" rel="noopener noreferrer" href="https://github.com/m-tartari/simple_swarm" class="icon brands alt fa-github"><span class="label">GitHub</span></a></i>
 								&nbsp;&nbsp;
-								</td>
+								<p>
-							</table>
-							<p style="margin-top: -20px;">
 									Simple simulation and visualization of swarms of differential drive robots following a leader. Developed using C++ and ROS.
 								</p>
+							</div>
 
 							<!-- ARPRO-IRP -->
-							<table>
+							<button class="accordion"><b> Industrial Robot Programming </b></button>
-								<td>
+							<div class="panel">
-									<b>
-										Industrial Robot Programming
-									</b>
-								</td>
-								<td style="text-align:right">
 									<i class="icon"><a target="_blank" rel="noopener noreferrer" href="https://github.com/m-tartari/industrial_robot_programming" class="icon brands alt fa-github"><span class="label">GitHub</span></a></i>
-									&nbsp;&nbsp;
+								<p>
-								</td>
-							</table>
-							<p style="margin-top: -20px;">
 									Industrial Robot Programming using VAL II and V+ tested on a PUMA and a RX90 robots.
 								</p>
+							</div>
 
-							<!-- MOBRO -->
+							<!-- MOCOM -->
-							<table>
+							<button class="accordion"><b> Modelling and Control of Manipulators </b></button>
-								<td>
+							<div class="panel">
-									<b>
-										Modelling and Control of Manipulators
-									</b>
-								</td>
-								<td style="text-align:right">
 								<i class="icon"><a target="_blank" rel="noopener noreferrer" href="https://github.com/m-tartari/modelling_and_control_of_manipulators" class="icon brands alt fa-github"><span class="label">GitHub</span></a></i>
-									&nbsp;&nbsp;
+								<p>
-								</td>
-							</table>
-							<p style="margin-top: -20px;">
 									This contains several projects regarding modelling and control of various manipulators using MATLAB, Simulink and ADAMS.
 								</p>
+							</div>
+
                         </section>
 						<hr />
 	
+
 						<!-- Engineering Projects -->
 						<section id="engineering">
 							<h2 style="color: #e44c65;">Engineering</h2>
 							<p style="margin-top: -20px;">Here there is a collection of all the projects that are related to all the other fields of engineering:</p>
 
 							<!-- Tongji Theis -->
-							<table>
+							<button class="accordion">
-								<td><b>Solar Panel Fault Detection Method Based on Infrared Image Processing</b></td>
+								<b>
-								<td style="text-align:right">
+									Solar Panel Fault Detection Method Based on Infrared Image Processing
-									&nbsp;	
+								</b>
+							</button>
+							<div class="panel">
 								<i class="icon"><a target="_blank" rel="noopener noreferrer" href="https://drive.google.com/file/d/0B1z42QMR-0UtYzBYSVhRV3ZPWk0/view?usp=sharing" class="icon alt far fa-file-pdf"><span class="label">Slideshow</span></a></i>
 								<i class="fa-stack">
 									<i class="fa icon brands alt fa-github fa-stack-1x"></i>
 									<i class="fa alt fa-slash fa-stack-1x "></i>
 								</i>
-								</td>
+								<p>
-							</table>
-							<p style="margin-top: -20px;">
 									My Chinese bachelor thesis that proposes a method to detect malfunctioning solar panels by processing thermal images using MATLAB.
 								</p>
+							</div>
 
 							<!-- Unibo Thesis -->
-							<table>
+							<button class="accordion">
-									<td><b>Design of a Testing Machine for Flexure Hinges</b></td>
+								<b>
-									<td style="text-align:right">
+									Design of a Testing Machine for Flexure Hinges
-										&nbsp;	
+								</b>
+							</button>
+							<div class="panel">
 									<i class="icon"><a target="_blank" rel="noopener noreferrer" href="https://drive.google.com/file/d/0B1z42QMR-0UtSkxRVzJPTk1IX0k/view?usp=sharing" class="icon alt far fa-file-pdf"><span class="label">Slideshow</span></a></i>
 									<i class="fa-stack">
 										<i class="fa icon brands alt fa-github fa-stack-1x"></i>
 										<i class="fa alt fa-slash fa-stack-1x "></i>
 									</i>
-									</td>
+								<p>
-								</table>
-								<p style="margin-top: -20px;">
 									My Italian bachelor thesis that proposes a design from scratch of a machine for the empirical characterization of flexure hinges.
 								</p>
+							</div>
 
 							<!-- NOLCO -->
-							<table>
+							<button class="accordion"><b> Control of a Nonlinear System </b></button>
-								<td>
+							<div class="panel">
-									<b>
-										Control of a Nonlinear System
-									</b>
-								</td>
-								<td style="text-align:right">
-									&nbsp;	
 								<i class="icon"><a target="_blank" rel="noopener noreferrer" href="https://drive.google.com/file/d/1TE3TWkXZjVq8OuBkLl497c_MQSs3MiLQ/view?usp=sharing" class="icon alt far fa-file-pdf"><span class="label">Slideshow</span></a></i>
 								&nbsp;&nbsp;
 								<i class="icon"><a target="_blank" rel="noopener noreferrer" href="https://github.com/m-tartari/modelling_and_control_of_manipulators" class="icon brands alt fa-github"><span class="label">GitHub</span></a></i>
-									&nbsp;&nbsp;
+								<p>
-								</td>
-							</table>
-							<p style="margin-top: -20px;">
 									The aim of this project was to implement control laws for a nonlinear system (based on the model of a PVTOL aircraft).
 								</p>
+							</div>
 
 							<!-- Multi-body -->
-							<table>
+							<button class="accordion"><b> Multi-Body System’s Kinematic Analysis </b></button>
-								<td>
+							<div class="panel">
-									<b>
-										Multi-Body System’s Kinematic Analysis
-									</b>
-								</td>
-								<td style="text-align:right">
-									&nbsp;	
 								<i class="icon"><a target="_blank" rel="noopener noreferrer" href="https://drive.google.com/file/d/1TE3TWkXZjVq8OuBkLl497c_MQSs3MiLQ/view?usp=sharing" class="icon alt far fa-file-pdf"><span class="label">Slideshow</span></a></i>
 								&nbsp;&nbsp;
 								<i class="icon"><a target="_blank" rel="noopener noreferrer" href="https://github.com/m-tartari/multi-body-kinematics" class="icon brands alt fa-github"><span class="label">GitHub</span></a></i>
-									&nbsp;&nbsp;
+								<p>
-								</td>
-							</table>
-							<p style="margin-top: -20px;">
 									For this project the kinematic analysis has been performed upon agiven mechanism using MATLAB. 
 									It has been then validated by comparing it to the ADAMS model of the same mechanism.
 								</p>
+							</div>
 
 							<!-- SIPRO -->
-							<table>
+							<button class="accordion"><b> Signal Processing </b></button>
-								<td>
+							<div class="panel">
-									<b>
-										Signal Processing
-									</b>
-								</td>
-								<td style="text-align:right">
 								<i class="icon"><a target="_blank" rel="noopener noreferrer" href="https://github.com/m-tartari/signal_processing" class="icon brands alt fa-github"><span class="label">GitHub</span></a></i>
 								&nbsp;&nbsp;
-								</td>
+								<p>
-							</table>
-							<p style="margin-top: -20px;">
 								Several Signal processing projects developed using MATLAB.  
 								</p>
+							</div>
 
 							<!-- RETSY -->
-							<table>
+							<button class="accordion"><b> Real Time Systems </b></button>
-								<td>
+							<div class="panel">
-									<b>
-										Real Time Systems
-									</b>
-								</td>
-								<td style="text-align:right">
 								<i class="icon"><a target="_blank" rel="noopener noreferrer" href="https://github.com/m-tartari/real_time_systems" class="icon brands alt fa-github"><span class="label">GitHub</span></a></i>
 								&nbsp;&nbsp;
-								</td>
+								<p>
-							</table>
-							<p style="margin-top: -20px;">
 									Several real-time systems' projects developed using C++ and OIL, and run using Trampoline RTOS on a Teensy board. 
 								</p>
+							</div>
 						</section>
 						<hr />
 	
+
 						<!-- Hobbies -->
 						<section id="hobbies">
 								<h2 style="color: #e44c65;">Hobbies</h2>
 								<p style="margin-top: -20px;">Here there is a collection of projects related to things I do for fun:</p>
 	
 								<!-- Medieval Furniture -->
-							<table>
+								<button class="accordion"><b>Medieval Furniture</b></button>
-								<td>
+								<div class="panel">
-									<b>
-										Medieval Furniture
-									</b>
-								</td>
-								<td style="text-align:right">
 									<i class="icon"><a target="_blank" rel="noopener noreferrer" href="https://github.com/m-tartari/medieval_furniture" class="icon brands alt fa-github"><span class="label">GitHub</span></a></i>
-									&nbsp;&nbsp;
+									<p>
-								</td>
-							</table>
-							<p style="margin-top: -20px;">
 										A collection of pdf and CAD models to create late XIV century furniture and medieval camp equipment. These objects are being realized by <a target="_blank" rel="noopener noreferrer" href="http://www.compagniadarmedelsantoluca.it/">Compagnia d'Arme del Santo Luca</a>.
 									</p>
+								</div>
 
 								<!-- Pinterest -->
-							<table>
+								<button class="accordion"><b>Pinterest Pinner</b></button>
-								<td>
+								<div class="panel">
-									<b>
-										Pinterest Pinner
-									</b>
-								</td>
-								<td style="text-align:right">
 										<i class="icon"><a target="_blank" rel="noopener noreferrer" href="https://github.com/m-tartari/pinterest_pinner" class="icon brands alt fa-github"><span class="label">GitHub</span></a></i>
-									&nbsp;&nbsp;
+									<p>
-								</td>
-							</table>
-							<p style="margin-top: -20px;">
 											Publishes all photos from a <a target="_blank" rel="noopener noreferrer" href="http://www.compagniadarmedelsantoluca.it/">selected website</a> into a target Pinterest board using Python3 and the Pinterest API. 
 									</p>
+								</div>
 							</section>
 						<hr />
 
@@ -376,6 +277,7 @@
 		</div>
 
 	<!-- Scripts -->
+		<script src="assets/js/accordion.js"></script>
 		<script src="assets/js/jquery.min.js"></script>
 		<script src="assets/js/jquery.scrolly.min.js"></script>
 		<script src="assets/js/jquery.dropotron.min.js"></script>