portfolio/app/components/About.vue

<!-- eslint-disable vue/multi-word-component-names -->

<template>
  <div class="h-full overflow-auto p-6">
    <h1 class="text-3xl font-bold mb-6 text-[#000080] border-b-2 border-[#808080] pb-3">About Me</h1>

    <!-- Profile Card -->
    <div class="bg-white border-2 border-[#808080] p-4 md:p-6 shadow-md mb-6">
      <div class="flex flex-col sm:flex-row items-start gap-4 md:gap-6 mb-6">
        <div class="profile-avatar w-24 h-24 md:w-32 md:h-32 bg-[#000080] border-2 border-[#808080] flex items-center justify-center flex-shrink-0">
          <User :size="64" color="#ffffff" class="w-12 h-12 md:w-16 md:h-16" />
        </div>
        <div class="flex-1 min-w-0">
          <h2 class="text-2xl md:text-3xl font-bold text-[#000080] mb-2">SticksDev</h2>
          <p class="text-lg md:text-xl text-gray-700 mb-3">Tanner Sommers</p>
          <div class="space-y-2 text-sm md:text-base text-gray-700">
            <div class="flex items-center gap-2">
              <span class="font-semibold min-w-20 md:min-w-25">Age:</span>
              <span>22</span>
            </div>
            <div class="flex items-center gap-2">
              <span class="font-semibold min-w-20 md:min-w-25">Location:</span>
              <span class="break-words">United States (UTC-5)</span>
            </div>
            <div class="flex items-center gap-2">
              <span class="font-semibold min-w-20 md:min-w-25">Occupation:</span>
              <span class="break-words">Software Engineer / Freelancer</span>
            </div>
          </div>
        </div>
      </div>

      <div class="border-t-2 border-[#808080] pt-4">
        <p class="text-gray-700 leading-relaxed">
          Hi! I'm Tanner, a software engineer and freelancer from the US. I love coding, gaming, and learning new things.
          I'm always looking for opportunities to grow and expand my skillset. Feel free to reach out to me if you have any
          questions or just want to chat!
        </p>
      </div>
    </div>

    <!-- Skills Section -->
    <div class="bg-white border-2 border-[#808080] p-6 shadow-md mb-6">
      <h3 class="text-xl font-bold  mb-4 flex items-center gap-2">
        <Code :size="20" />
        Technical Skills
      </h3>
      <div class="flex flex-wrap gap-2">
        <span
          v-for="skill in skills"
          :key="skill"
          class="skill-badge"
        >
          {{ skill }}
        </span>
      </div>
    </div>

    <!-- Interests & Hobbies -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div class="bg-white border-2 border-[#808080] p-5 shadow-md">
        <h3 class="text-lg font-bold mb-3 flex items-center gap-2">
          <Target :size="18" />
          Interests
        </h3>
        <ul class="space-y-2">
          <li
            v-for="interest in interests"
            :key="interest"
            class="flex items-center gap-2 text-gray-700"
          >
            <ChevronRight :size="14" class="text-[#000080]" />
            {{ interest }}
          </li>
        </ul>
      </div>

      <div class="bg-white border-2 border-[#808080] p-5 shadow-md">
        <h3 class="text-lg font-bold mb-3 flex items-center gap-2">
          <Gamepad2 :size="18" />
          Hobbies
        </h3>
        <ul class="space-y-2">
          <li
            v-for="hobby in hobbies"
            :key="hobby"
            class="flex items-center gap-2 text-gray-700"
          >
            <ChevronRight :size="14" class="text-[#000080]" />
            {{ hobby }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { User, Code, Target, Gamepad2, ChevronRight } from 'lucide-vue-next'

const skills = ['JavaScript', 'TypeScript', 'Vue.js', 'React', 'Node.js', 'Python', 'C#', 'Java']
const interests = ['Web Development', 'Game Development', 'Cybersecurity']
const hobbies = ['Coding', 'Gaming', 'Chess', 'Music']
</script>

<style scoped>
.profile-avatar {
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
}

.skill-badge {
  color: #ffffff;
  padding: 0.375rem 0.75rem;
  border: 2px solid #808080;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
  transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.skill-badge:hover {
  background-color: #1084d0;
  transform: translateY(-1px);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
}
</style>