link to myevent website & upgraded menu

ui/css/mainstyle.css

@@ -59,11 +59,13 @@ body {
 	font-size: 100%;
 	text-decoration: none;
 	color: black;
+	transition: 1s;
 }
 
 .textlink:hover {
 	color: darkblue;
-	font-size: 120%;
+	font-size: 115%;
+	transition: 0.3s;
 }
 
 .linkbutton {
@@ -72,11 +74,14 @@ body {
 	padding: 20px;
 	color: white;
 	background-color:rgba(0, 40, 131, 1);
-	border-radius: 20px;
+	border-radius: 25px;
+	transition: 1s;
 }
 
 .linkbutton:hover {
   background-color: darkblue;
+  border-radius: 5px;
+  transition: 0.3s;
 }
 
 .references {

ui/css/menustyle.css

@@ -64,11 +64,13 @@
 	width: 80%;
 	display: block;
 	padding: 2%;
-	color: white
+	color: white;
+	transition: 0.6s;
 }
 
 .menubutton:hover {
 	background-color: darkblue;
+	transition: 0.2s;
 }
 
 @media only screen and (min-width: 999px) {
@@ -87,13 +89,6 @@
 		justify-content: center;
 	}
 	
-	.stickybox {
-		display: inline;
-		position: sticky;
-		position: -webkit-sticky;
-		top: 0px;
-	}
-	
 	.menubutton {
 		text-decoration: none;
 		display: inline-block;
@@ -102,19 +97,13 @@
 		color: white;
 		border-radius: 0%;
 		background-color: rgba(0,0,0,0);
+		transition: 0.6s;
 	}
 
 	.menubutton:hover {
 		border-radius: 0%;
-		animation-name: fadein;
-		animation-duration: 300ms;
-		background-color: darkblue;
-	}
-	
-	.subitems:hover {
-		animation-name: fadein;
-		animation-duration: 300ms;
 		background-color: darkblue;
+		transition: 0.3s;
 	}
 	
 	.dropdown-menu {
@@ -125,40 +114,22 @@
 		list-style-type: none;
 		position: absolute;
 		min-width: 200px;
-	}
+		transform-origin: top center;
-	
+		flex-direction: column;
-	@keyframes fadein {
-		0%  {opacity: 0;}
-		100% {opacity: 1;}
 	}
 	
 	@keyframes growDown {
 		0% {
-			transform: scaleY(0)
+			transform: scaleY(0);
-		}
-		80% {
-			transform: scaleY(1.1)
 		}
 		100% {
-			transform: scaleY(1)
+			transform: scaleY(1);
-		}
-	}
-	
-	@keyframes rotateMenu {
-		0% {
-			transform: rotateX(-90deg)
-		}
-		70% {
-			transform: rotateX(20deg) 
-		}
-		100% {
-			transform: rotateX(0deg) 
 		}
 	}
 	
 	.dropdown:hover .dropdown-menu {
-		display: block;
+		display: flex;
-		animation: rotateMenu 300ms ease-in-out forwards;
+		animation: growDown 0.3s ease-in-out;
 	}
 	
 	.mainitems {

ui/index.html

@@ -42,6 +42,13 @@
 					<a href="https://github.com/simplePCBuilding" class="linkbutton">GitHub</a>
 				</div>
 			</div>
+			<div class="sidebyside">
+				<div class="element">
+					<h3>myevent</h3>
+					<p>My biggest personal project yet. A fully free open source event management solution</p>
+					<a href="https://myevent.janishutz.com" class="linkbutton">Learn more</a>
+				</div>
+			</div>
 		</div>
 		<div class="bottom">
 			<h2 class="content-title">Check out my projects!</h2>

ui/js/basicanimations.js

@@ -1,22 +1,6 @@
 $( document ).ready( function() {
     $( '#ContentToInclude' ).load( '/menu.html' );
     $( '#Footer' ).load('/footer.html');
-    $( '.linkbutton').mouseenter(function() {
-        $( this ).stop();
-        $( this ).animate( { 'border-radius': '0px', 'background-color': 'darkblue' }, 200 );
-    });
-    $( '.linkbutton').mouseleave(function() {
-        $( this ).stop();
-        $( this ).animate( { 'border-radius': '20px', 'background-color': 'rgba(0,0,0,0)' }, 200 );
-    });
-    $( '.textlink' ).mouseenter(function() {
-        $( this ).stop();
-        $(this ).animate( { 'color': 'darkblue', 'font-size': '120%' }, 200 );
-    });
-    $( '.textlink' ).mouseleave(function() {
-        $( this ).stop();
-        $( this ).animate( { 'color': 'black', 'font-size': '100%' }, 200);
-    });
     setTimeout( highlightLocation, 200 );
 } );
 

ui/menu.html

@@ -16,26 +16,26 @@
             <li class="dropdown mainitems">
                 <a class="menubutton" id="projects" href="/projects.html">Projects</a>
                 <ul class="dropdown-menu">
-                    <li class="subitems"><a class="menubutton" href="/projects/qrinsight.html">QR & Barcode Insight</a></li>
+                    <a class="menubutton" href="/projects/qrinsight.html">QR & Barcode Insight</a>
-                    <li class="subitems"><a class="menubutton" href="/projects/storagemanager.html">StorageManager</a></li>
+                    <a class="menubutton" href="/projects/storagemanager.html">StorageManager</a>
-                    <li class="subitems"><a class="menubutton" href="/projects/imagescaler.html">FSR Image & Video Upscaler Frontend</a></li>
+                    <a class="menubutton" href="/projects/imagescaler.html">FSR Image & Video Upscaler Frontend</a>
-                    <li class="subitems"><a class="menubutton" href="/projects/musiplayer.html">MusicPlayer</a></li>
+                    <a class="menubutton" href="/projects/musiplayer.html">MusicPlayer</a>
-                    <li class="subitems"><a class="menubutton" href="/projects/bgac.html">BiogasControllerApp</a></li>
+                    <a class="menubutton" href="/projects/bgac.html">BiogasControllerApp</a>
-                    <li class="subitems"><a class="menubutton" href="https://myevent.janishutz.com">BiogasControllerApp</a></li>
+                    <a class="menubutton" href="https://myevent.janishutz.com">myevent</a>
                 </ul>
             </li>
             <li class="dropdown mainitems">
                 <a class="menubutton" id="about" href="/aboutPage.html">About</a>
                 <ul class="dropdown-menu">
-                    <li class="subitems"><a class="menubutton" href="/privacypolicy.html">Privacy Policy</a></li>
+                    <a class="menubutton" href="/privacypolicy.html">Privacy Policy</a>
-                    <li class="subitems"><a class="menubutton" href="/about.html">About me</a></li>
+                    <a class="menubutton" href="/about.html">About me</a>
                 </ul>
             </li>
             <li class="dropdown mainitems">
                 <a class="menubutton" id="services" href="/services.html">Services</a>
                 <ul class="dropdown-menu">
-                    <li class="subitems"><a class="menubutton" href="https://pcbuilding.janishutz.com">PC Building</a></li>
+                    <a class="menubutton" href="https://pcbuilding.janishutz.com">PC Building</a>
-                    <li class="subitems"><a class="menubutton" href="https://development.janishutz.com">Custom Websites</a></li>
+                    <a class="menubutton" href="https://development.janishutz.com">Custom Websites</a>
                 </ul>
             </li>
             <li class="mainitems"><a class="menubutton" id="support" href="/support">Support</a></li>

ui/projects.html

@@ -27,10 +27,11 @@
 				</ul>
 				<h3>JavaScript, HTML, CSS (Webapps / Websites)</h3>
 				<ul>
+					<li><a class="textlink" href="https://myevent.janishutz.com">myevent</a></li>
 					<li><a class="textlink" href="/">This website</a></li>
 					<li><a class="textlink" href="https://myevent.janishutz.com">myevent - free & open source self-hosted event management solution</a></li>
 					<li><a class="textlink" href="https://booking.languageschoolhossegor.com">Booking system for Language School Hossegor (Not yet up, in development)</a></li>
-					<li><a class="textlink" href="https://impress-testing.janishutz.com">Impress.js website (Not yet up, in development)</a></li>
+					<li><a class="textlink" href="https://impress-testing.janishutz.com/">Impress.js website (Not yet up, in development)</a></li>
 				</ul>
 			</div>
 		<div id="Footer"></div>