diff --git a/public/ressources/json/skills.json b/public/ressources/json/skills.json
index 94bcb11..fb33c95 100644
--- a/public/ressources/json/skills.json
+++ b/public/ressources/json/skills.json
@@ -127,6 +127,10 @@
 			{
 				"name": "Git",
 				"logo": "/ressources/logos/git.svg"
+			},
+			{
+				"name": "FireBase",
+				"logo": "/ressources/logos/firebase.svg"
 			}
 		]
 	},
diff --git a/public/ressources/logos/firebase.svg b/public/ressources/logos/firebase.svg
new file mode 100644
index 0000000..f7515ed
--- /dev/null
+++ b/public/ressources/logos/firebase.svg
@@ -0,0 +1,6 @@
+<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M213.918 560.499C237.166 569.856 262.387 575.408 288.87 576.333C324.71 577.585 358.792 570.175 389.261 556.099C352.724 541.744 319.634 520.751 291.392 494.651C273.086 523.961 246.01 547.113 213.918 560.499Z" fill="#FF9100"/>
+<path d="M291.389 494.66C226.923 435.038 187.815 348.743 191.12 254.092C191.228 251.019 191.39 247.947 191.58 244.876C180.034 241.89 167.98 240.068 155.576 239.635C137.821 239.015 120.626 241.217 104.393 245.788C87.1838 275.933 76.7989 310.521 75.5051 347.569C72.1663 443.18 130.027 526.723 213.914 560.508C246.007 547.121 273.082 523.998 291.389 494.66Z" fill="#FFC400"/>
+<path d="M291.39 494.657C306.378 470.671 315.465 442.551 316.523 412.254C319.306 332.559 265.731 264.003 191.581 244.873C191.391 247.944 191.229 251.016 191.121 254.089C187.816 348.74 226.924 435.035 291.39 494.657Z" fill="#FF9100"/>
+<path d="M308.231 20.8584C266 54.6908 232.652 99.302 212.475 150.693C200.924 180.129 193.665 211.748 191.546 244.893C265.696 264.023 319.272 332.579 316.489 412.273C315.431 442.57 306.317 470.663 291.355 494.677C319.595 520.804 352.686 541.77 389.223 556.124C462.56 522.224 514.593 449.278 517.606 362.997C519.558 307.096 498.08 257.273 467.731 215.219C435.68 170.742 308.231 20.8584 308.231 20.8584Z" fill="#DD2C00"/>
+</svg>
diff --git a/src/components/otherProjects.vue b/src/components/otherProjects.vue
index 6551b72..7981c50 100644
--- a/src/components/otherProjects.vue
+++ b/src/components/otherProjects.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="project">
 		<div class="other" v-for="(p, id) in projects"
-			:style="'background-color:' + colors[(id + 1) % colors.length] + ';'">
+			:style="'background-color:' + colors[(id + offset) % colors.length] + ';'">
 			<div class="techInfosIcon">
 				<techAndLinks :project="p" class="icons" :only-image="true"
 					style="align-items: flex-start; justify-content: flex-start; padding: 0;" />
@@ -47,6 +47,10 @@ export default defineComponent({
 			type: Number,
 			required: true,
 		},
+		offset: {
+			type: Number,
+			required: true,
+		},
 	},
 	data() {
 		return {
@@ -89,14 +93,18 @@ export default defineComponent({
 	display: flex;
 	justify-content: center;
 	align-content: center;
-	flex-direction: row;
-	flex-wrap: wrap;
+	flex-direction: column;
+	flex-wrap: nowrap;
 	transition: width 0.75s, height 0.75s;
 	gap: max(1vw, 1vh);
 }
 
+.techInfosIcon {
+	width: 100%;
+}
+
 .other {
-	max-width: 40vw;
+	max-width: 100%;
 	display: flex;
 	align-items: flex-start;
 	justify-content: space-between;
@@ -108,7 +116,7 @@ export default defineComponent({
 	padding: min(1vh, 1vw);
 	text-align: center;
 	overflow-y: auto;
-	max-height: 33%;
+	max-height: 100%;
 }
 
 .desc {
@@ -159,28 +167,7 @@ export default defineComponent({
 }
 
 .logo {
-	height: 50%;
-	max-width: 25%;
+	max-width: 10%;
 	padding: min(1vh, 1vw);
 }
-
-@media (orientation: landscape) {
-	@media (max-height: 600px) {
-		.other {
-			max-width: 23vw;
-		}
-	}
-
-	@media (max-height: 900px) and (min-height: 600px) {
-		.other {
-			min-width: 27vw;
-		}
-	}
-
-	@media (min-height: 900px) {
-		.other {
-			min-width: 20vw;
-		}
-	}
-}
 </style>
\ No newline at end of file
diff --git a/src/components/timeline.vue b/src/components/timeline.vue
index b3bb4ec..b73f028 100644
--- a/src/components/timeline.vue
+++ b/src/components/timeline.vue
@@ -1,12 +1,12 @@
 <template>
-	<a id="projects" />
 	<div class="timeLineOuter bg" id="timeLineOuter">
 		<div id="timelineSticky">
 			<div class="timeline bg" id="timeline">
 				<project v-for="(p, id) in projects" :project="p" :fullscreen="fullscreen"
 					:color="COLORS[id % COLORS.length]" />
 				<OtherProjects v-if="nbTotalProjects > nbMaxProjectsFullPage" v-for="(p, id) in splitOtherProjects()"
-					:projects="p" :fullscreen="fullscreen" :colors="COLORS" :bg-color-id="nbMaxProjectsFullPage" />
+					:projects="p" :fullscreen="fullscreen" :colors="COLORS" :bg-color-id="nbMaxProjectsFullPage"
+					:offset="id * nbOtherProjectsByPage" />
 			</div>
 		</div>
 	</div>
@@ -26,7 +26,7 @@ const enum STATUS {
 	INVIEWPORT,
 	AFTERVIEWPORT,
 }
-const COLORS = ["#660708", "#a4161a", "#ba181b", "#e5383b", "#b1a7a6", "#d3d3d3", "#f5f3f4", "#ffffff"]
+const COLORS = ["#660708", "#a4161a", "#ba181b", "#e5383b", "#b1a7a6", "#d3d3d3", "#f5f3f4"]
 
 const nbMaxProjectsFullPage = 5;
 
@@ -134,13 +134,13 @@ export default defineComponent({
 			const w = window.innerWidth;
 			const h = window.innerHeight;
 			if (h <= 800 || w <= 800) {
-				this.nbOtherProjectsByPage = 4;
+				this.nbOtherProjectsByPage = 2;
 			}
 			else if (h <= 1100 || w <= 1100) {
-				this.nbOtherProjectsByPage = 6;
+				this.nbOtherProjectsByPage = 4;
 			}
 			else {
-				this.nbOtherProjectsByPage = 8;
+				this.nbOtherProjectsByPage = 6;
 			}
 			this.calcNbPage();
 		},