diff --git a/css/main.css b/css/main.css
index 9c5b7fb..3ee473e 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,63 +1,101 @@
-/* 
- * This theme was created for the RMIT Programming Club to use in a Web Programming workshop. 
- * simpleProfile Template by Patrick Mifsud
- */
- 
- 
 html {
+  scroll-behavior: smooth;
   background-color: lightgrey;
 }
 
 body {
-    /* Fonts listed in font family are system defualts for macOS, iOS, Android, Ubuntu, etc */
-    font-family:  -apple-system, BlinkMacSystemFont, “Segoe UI”, “Roboto”, “Oxygen”, “Ubuntu”, “Cantarell”, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, sans-serif;
-    text-align: center; /* alternatively you can use left, right or justify */
-    margin: 2% 15%;
-    background-color: white;
-    border-radius: 15px;
-    padding: 5px 20px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", sans-serif;
+  text-align: center;
+  margin: 2% 15%;
+  background-color: white;
+  border-radius: 15px;
+  padding: 5px 20px;
 }
 
 h1 {
-	color: #003B6F;
-	text-decoration: underline;
+  color: #003B6F;
+  text-decoration: underline;
 }
 
 a {
-    color:  #E60028;
-    text-decoration: none;
+  color: #E60028;
+  text-decoration: none;
 }
 
 a:hover {
-    text-decoration: underline !important;
+  text-decoration: underline !important;
 }
 
-
-#location {
-	color: #373940;
-	font-size: 19px;
+#location, #tagline {
+  color: #373940;
 }
 
 #profile-img {
-	border-radius: 50%; /* This creates a circle image, lower the radius to get a Squircle */
+  border-radius: 50%;
+  width: 200px;
+  transition: transform 0.3s ease;
+}
+
+#profile-img:hover {
+  transform: scale(1.05);
+}
+
+#profile-social-icons .fab {
+  font-size: 26px;
+  color: #373940;
+  padding: 10px;
+  transition: transform 0.3s ease, color 0.3s ease;
+}
+
+#profile-social-icons .fab:hover {
+  transform: scale(1.2);
+  color: #E60028;
+}
+
+nav {
+  margin: 20px 0;
 }
 
-#tagline {
-	color: #373940;
+nav a {
+  margin: 0 10px;
+  font-weight: bold;
 }
 
 #content {
-	text-align: left !important;
+  text-align: left !important;
 }
 
-#profile-social-icons .fab, .fa {
-	/* !important Overrides existing internal or external CSS */
-	font-size: 26px !important; 
-	color: #373940;
-	padding-bottom: 15px;
+/* 🧠 Skill Progress Bars */
+.skill {
+  margin-bottom: 15px;
+}
+
+.skill label {
+  display: block;
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+
+.bar {
+  background-color: #ddd;
+  border-radius: 20px;
+  overflow: hidden;
+  height: 20px;
+}
+
+.fill {
+  background-color: #003B6F;
+  height: 100%;
+  width: 0;
+  animation: fillBar 2s ease forwards;
+}
+
+@keyframes fillBar {
+  from { width: 0; }
+  to { width: var(--target-width); }
 }
 
 footer {
-	padding: 5px 0;
-	border-top: 1px dotted #373940;
-}
\ No newline at end of file
+  padding: 5px 0;
+  border-top: 1px dotted #373940;
+}