Upload 6 files

assets/app.js

@@ -96,6 +96,13 @@ const animateCount = (el, to, duration = 1200) => {
   const isLargeNumber = to > 1000;
   const easing = isLargeNumber ? easeOutQuart : easeOutCubic;
   
+  // Ensure the element has proper positioning
+  el.style.position = 'relative';
+  el.style.zIndex = '2';
+  el.style.width = '100%';
+  el.style.textAlign = 'center';
+  el.style.display = 'block';
+  
   const step = (now) => {
     const p = Math.min(1, (now - start) / duration);
     const v = Math.floor(from + (to - from) * easing(p));

assets/styles.css

@@ -4,6 +4,196 @@
   --shadow-glow: 0 0 20px rgba(99,102,241,0.3), 0 0 40px rgba(99,102,241,0.2);
 }
 
+/* Fallback styles in case Tailwind doesn't load */
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background-color: #0f172a;
+  color: #f1f5f9;
+  line-height: 1.6;
+  margin: 0;
+  padding: 0;
+}
+
+/* Global text justification */
+p, li, div {
+  text-align: justify;
+  text-justify: inter-word;
+}
+
+/* Override for specific elements that should be left-aligned */
+h1, h2, h3, h4, h5, h6, 
+.btn-primary, .btn-secondary, .btn-ghost,
+.tab, .chip, .metric-value, .metric-label {
+  text-align: left;
+}
+
+/* Add proper margins to main content */
+.container {
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+@media (max-width: 768px) {
+  .container {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0 0 1rem 0;
+}
+
+h1 { font-size: 2.5rem; }
+h2 { font-size: 2rem; }
+h3 { font-size: 1.5rem; }
+
+section {
+  padding: 4rem 0;
+}
+
+.container {
+  max-width: 80rem;
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+.grid {
+  display: grid;
+  gap: 1.5rem;
+}
+
+.grid.lg\\:grid-cols-2 {
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 1024px) {
+  .grid.lg\\:grid-cols-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.grid.md\\:grid-cols-3 {
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 768px) {
+  .grid.md\\:grid-cols-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.flex {
+  display: flex;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.gap-3 {
+  gap: 0.75rem;
+}
+
+.gap-6 {
+  gap: 1.5rem;
+}
+
+.gap-12 {
+  gap: 3rem;
+}
+
+.text-4xl {
+  font-size: 2.25rem;
+}
+
+.text-6xl {
+  font-size: 3.75rem;
+}
+
+.font-extrabold {
+  font-weight: 800;
+}
+
+.leading-tight {
+  line-height: 1.25;
+}
+
+.mt-5 {
+  margin-top: 1.25rem;
+}
+
+.mt-8 {
+  margin-top: 2rem;
+}
+
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
+.text-slate-300 {
+  color: #cbd5e1;
+}
+
+.text-slate-400 {
+  color: #94a3b8;
+}
+
+.text-indigo-400 {
+  color: #818cf8;
+}
+
+.max-w-2xl {
+  max-width: 42rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+}
+
+.hidden {
+  display: none;
+}
+
+@media (min-width: 640px) {
+  .sm\\:inline {
+    display: inline;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\\:flex {
+    display: flex;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\\:py-24 {
+    padding-top: 6rem;
+    padding-bottom: 6rem;
+  }
+  
+  .lg\\:text-6xl {
+    font-size: 3.75rem;
+  }
+}
+
 /* Base link styles */
 .link { 
   color: rgb(165 180 252); 
@@ -215,6 +405,16 @@ pre.mermaid:hover {
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
+  background: rgba(15, 23, 42, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 1rem;
+  padding: 1.5rem;
+  text-align: center;
+  min-height: 120px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
 .metric::before {
@@ -234,17 +434,66 @@ pre.mermaid:hover {
 }
 
 .metric:hover {
-  transform: translateY(-2px);
-  border-color: rgba(99, 102, 241, 0.3);
+  transform: translateY(-4px);
+  border-color: rgba(99, 102, 241, 0.4);
+  background: rgba(15, 23, 42, 0.8);
+  box-shadow: 0 10px 30px rgba(99, 102, 241, 0.2);
 }
 
 .metric-value {
   transition: all 0.3s ease;
+  font-size: 2.5rem;
+  font-weight: 800;
+  color: rgb(129, 140, 248);
+  margin: 0;
+  text-align: center;
+  width: 100%;
+  display: block;
+  position: relative;
+  z-index: 2;
 }
 
 .metric:hover .metric-value {
-  color: rgb(129, 140, 248);
-  transform: scale(1.05);
+  color: rgb(99, 102, 241);
+  transform: scale(1.1);
+  text-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
+}
+
+.metric-label {
+  transition: all 0.3s ease;
+  color: rgb(148, 163, 184);
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin-top: 0.5rem;
+  text-align: center;
+  width: 100%;
+  position: relative;
+  z-index: 2;
+}
+
+.metric:hover .metric-label {
+  color: rgb(203, 213, 225);
+  transform: translateY(-2px);
+}
+
+/* Add a subtle glow effect on hover */
+.metric::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  transition: all 0.3s ease;
+  z-index: 1;
+}
+
+.metric:hover::after {
+  width: 200px;
+  height: 200px;
 }
 
 /* Enhanced avatar styling */
@@ -276,6 +525,26 @@ pre.mermaid:hover {
   background: rgba(99, 102, 241, 0.05);
 }
 
+/* Enhanced text justification and spacing */
+.section p, .section li, .section div:not(.btn-primary):not(.btn-secondary):not(.btn-ghost):not(.tab):not(.chip):not(.metric-value):not(.metric-label) {
+  text-align: justify;
+  text-justify: inter-word;
+  hyphens: auto;
+}
+
+/* Ensure proper margins for all sections */
+.section {
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
+@media (max-width: 768px) {
+  .section {
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+}
+
 /* Enhanced responsive improvements */
 @media (max-width: 1024px) {
   .container {

index.html

@@ -9,19 +9,28 @@
   <!-- Tailwind (CDN) -->
   <script src="https://cdn.tailwindcss.com"></script>
   <script>
-    tailwind.config = {
-      darkMode: 'class',
-      theme: {
-        extend: {
-          fontFamily: { inter: ['Inter', 'ui-sans-serif', 'system-ui'] },
-          boxShadow: {
-            glow: '0 0 20px rgba(99,102,241,0.3), 0 0 40px rgba(99,102,241,0.2)'
-          },
-          backgroundImage: {
-            'grid': 'linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px)'
+    // Ensure Tailwind is loaded before configuring
+    if (typeof tailwind !== 'undefined') {
+      tailwind.config = {
+        darkMode: 'class',
+        theme: {
+          extend: {
+            fontFamily: { inter: ['Inter', 'ui-sans-serif', 'system-ui'] },
+            boxShadow: {
+              glow: '0 0 20px rgba(99,102,241,0.3), 0 0 40px rgba(99,102,241,0.2)'
+            },
+            backgroundImage: {
+              'grid': 'linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px)'
+            },
+            spacing: {
+              '18': '4.5rem',
+              '88': '22rem'
+            }
           }
         }
-      }
+      };
+    } else {
+      console.warn('Tailwind CSS not loaded');
     }
   </script>
   <!-- AOS (Animate On Scroll) -->
@@ -31,8 +40,21 @@
   <script src="https://unpkg.com/lucide@latest"></script>
   <!-- Mermaid -->
   <script type="module">
-    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
-    mermaid.initialize({ startOnLoad: true, theme: 'dark', securityLevel: 'loose' });
+    try {
+      import('https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs').then(mermaid => {
+        mermaid.default.initialize({ 
+          startOnLoad: true, 
+          theme: 'dark', 
+          securityLevel: 'loose',
+          fontFamily: 'Inter, sans-serif'
+        });
+        console.log('Mermaid initialized successfully');
+      }).catch(error => {
+        console.warn('Mermaid failed to load:', error);
+      });
+    } catch (error) {
+      console.warn('Mermaid import failed:', error);
+    }
   </script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -358,13 +380,6 @@
         <h2>Team</h2>
         <p>Swinburne COS30018 — Liam · Henry · Hai · Dylan · Vinh</p>
       </div>
-      <div class="grid md:grid-cols-5 gap-4">
-        <div class="avatar">Liam</div>
-        <div class="avatar">Henry</div>
-        <div class="avatar">Hai</div>
-        <div class="avatar">Dylan</div>
-        <div class="avatar">Vinh</div>
-      </div>
     </div>
   </section>
 
@@ -383,8 +398,27 @@
   <script src="https://unpkg.com/vanilla-tilt@1.8.1/dist/vanilla-tilt.min.js"></script>
   <script src="assets/app.js"></script>
   <script>
-    AOS.init({ duration: 700, once: true });
-    lucide.createIcons();
+    // Wait for all resources to load before initializing
+    window.addEventListener('load', () => {
+      // Initialize AOS if available
+      if (typeof AOS !== 'undefined') {
+        AOS.init({ 
+          duration: 700, 
+          once: true,
+          offset: 100,
+          easing: 'ease-in-out'
+        });
+      } else {
+        console.warn('AOS library not loaded');
+      }
+      
+      // Initialize Lucide icons if available
+      if (typeof lucide !== 'undefined') {
+        lucide.createIcons();
+      } else {
+        console.warn('Lucide library not loaded');
+      }
+    });
   </script>
 </body>
 </html>