Refactor About page by modularizing sections into separate components for improved readability

Author: 1046prt

src/assets/styles/about.css

@@ -59,83 +59,6 @@
   transform: translateY(-2px);
 }
 
-/* Hero Section */
-.hero-section {
-  position: relative;
-  text-align: center;
-  padding: 4rem 1rem;
-  margin-bottom: 4rem;
-  border-radius: 1rem;
-  background: light-dark(var(--bg-light), linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-dark) 100%));
-  box-shadow: 2px 5px 10px 3px rgba(0, 0, 0, 0.2);
-  overflow: hidden;
-}
-
-.hero-content {
-  max-width: 800px;
-  margin: 0 auto;
-  z-index: 2;
-  position: relative;
-}
-
-.hero-logo {
-  max-width: 150px;
-  height: auto;
-  margin-bottom: 1.5rem;
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.hero-title {
-  font-size: 2.5rem;
-  margin-bottom: 1.5rem;
-  color: light-dark(var(--text-secondary), var(--text-primary));
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-.hero-text {
-  font-size: 1.25rem;
-  color: light-dark(var(--text-secondary), var(--text-primary));
-  line-height: 1.6;
-  margin-bottom: 2rem;
-}
-
-.hero-buttons {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 1rem;
-  margin-top: 2rem;
-}
-
-.hero-bubbles {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  pointer-events: none;
-}
-
-.bubble {
-  position: absolute;
-  background: light-dark(rgb(226, 223, 223), rgba(59, 130, 246, 0.2));
-  color: light-dark(var(--bg-dark), var(--bg-light));
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: calc(var(--size) * 0.6);
-  animation: float-up 15s linear infinite;
-  animation-delay: calc(var(--i) * 2s);
-  width: var(--size);
-  height: var(--size);
-  bottom: -10%;
-  left: calc(10% + var(--i) * 12%);
-}
-
 /* Sections */
 .section {
   max-width: 1200px;
@@ -148,6 +71,7 @@
   text-align: center;
   margin-bottom: 1rem;
   color: light-dark(var(--text-secondary), var(--text-primary));
+  position: relative;
 }
 
 .section-subtitle {
@@ -170,239 +94,8 @@
   border-radius: 2px;
 }
 
-/* Features Section */
-.features-section {
-  margin-bottom: 4rem;
-}
-
-.features-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 2rem;
-}
-
-.feature-card {
-  background: light-dark(var(--bg-light), var(--bg-secondary));
-  border-radius: 1rem;
-  padding: 2rem;
-  transition: transform 0.3s ease;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
-  border: 1px solid rgba(59, 130, 246, 0.2);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-}
-
-.feature-card:hover {
-  transform: translateY(-10px);
-}
-
-.feature-icon {
-  font-size: 3rem;
-  margin-bottom: 1.5rem;
-  color: var(--accent-color);
-}
-
-.feature-title {
-  font-size: 1.5rem;
-  margin-bottom: 1rem;
-  color: light-dark(var(--primary), var(--text-main));
-}
-
-.feature-desc {
-  color: light-dark(var(--bg-dark), var(--text-primary));
-  line-height: 1.6;
-}
-
-/* Team Section */
-.team-section {
-  margin-bottom: 4rem;
-}
-
-.team-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 2rem;
-}
-
-.team-card {
-  background: light-dark(var(--bg-light), var(--bg-secondary));
-  border-radius: 1rem;
-  padding: 2rem;
-  text-align: center;
-  transition: all 0.3s ease;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.team-card:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 15px 20px -5px rgba(0, 0, 0, 0.3);
-}
-
-.team-image-container {
-  position: relative;
-  width: 140px;
-  height: 140px;
-  margin: 0 auto 1.5rem;
-}
-
-.team-avatar {
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 2.5rem;
-  font-weight: bold;
-  color: white;
-  position: relative;
-  z-index: 2;
-}
-
-.team-image-border {
-  position: absolute;
-  top: -5px;
-  left: -5px;
-  right: -5px;
-  bottom: -5px;
-  border-radius: 50%;
-  background: linear-gradient(45deg, var(--primary), var(--accent));
-  z-index: 1;
-  animation: rotate-border 4s linear infinite;
-}
-
-.team-name {
-  font-size: 1.5rem;
-  margin-bottom: 0.5rem;
-  color: var(--primary-light);
-}
-
-.team-role {
-  color: light-dark(var(--bg-dark), var(--text-main));
-  font-style: italic;
-  margin-bottom: 1rem;
-}
-
-.team-desc {
-  color: light-dark(var(--bg-dark), var(--text-primary));
-  line-height: 1.6;
-}
-
-.team-github-link {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-top: 1rem;
-  color: var(--primary-light);
-  text-decoration: none;
-  transition: color 0.3s ease;
-}
-
-.team-github-link:hover {
-  color: var(--primary);
-}
-
-.github-icon {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-/* Tech Section */
-.tech-section {
-  background: light-dark(var(--bg-light), var(--bg-secondary));
-  box-shadow: 2px 5px 10px 3px rgba(0, 0, 0, 0.2);
-  border-radius: 1rem;
-  padding: 4rem 2rem;
-  text-align: center;
-}
-
-.tech-content {
-  max-width: 800px;
-  margin: 0 auto;
-}
-
-.tech-text {
-  font-size: 1.25rem;
-  color: light-dark(var(--bg-dark), var(--text-primary));
-  margin-bottom: 2rem;
-  line-height: 1.6;
-}
-
-.tech-icons {
-  display: flex;
-  justify-content: center;
-  gap: 2rem;
-  flex-wrap: wrap;
-}
-
-.tech-icon {
-  font-size: 2.5rem;
-  animation: bounce 2s ease infinite;
-  animation-delay: calc(var(--i) * 0.2s);
-}
-
-/* Animations */
-@keyframes float-up {
-  0% {
-    transform: translateY(0) rotate(0deg);
-    opacity: 0;
-  }
-  10% {
-    opacity: 1;
-  }
-  100% {
-    transform: translateY(-100vh) rotate(360deg);
-    opacity: 0;
-  }
-}
-
-@keyframes rotate-border {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes bounce {
-  0%, 100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-10px);
-  }
-}
-
-/* Responsive Styles */
 @media (max-width: 768px) {
-  .hero-logo {
-    max-width: 120px;
-  }
-
-  .hero-title {
-    font-size: 1.8rem;
-  }
-
-  .hero-text {
-    font-size: 1rem;
-  }
-
   .section-title {
     font-size: 1.5rem;
   }
-
-  .team-image-container {
-    width: 120px;
-    height: 120px;
-  }
-
-  .tech-section {
-    padding: 3rem 1rem;
-  }
 }