library/apps/frontend/src/app/components/about/about.component.html

<div class="about-container">
  <h1><fa-icon [icon]="faInfoCircle"></fa-icon> About Naomi's Library</h1>

  <section class="about-section">
    <h2>Purpose</h2>
    <p>
      Naomi's Library is a curated collection of books, games, manga, TV shows,
      music, and artwork carefully managed by Naomi. This platform allows you to
      explore Naomi's personal media collection, discover new favourites, and
      engage with the community by liking, commenting, and suggesting items for
      Naomi to review and potentially add to the library.
    </p>
  </section>

  <section class="about-section">
    <h2><fa-icon [icon]="faHeart"></fa-icon> Features</h2>
    <div class="features-grid">
      <div class="feature-card">
        <fa-icon [icon]="faBook"></fa-icon>
        <h3>Books</h3>
        <p>
          Browse Naomi's reading list, discover new titles, and share your
          thoughts.
        </p>
      </div>
      <div class="feature-card">
        <fa-icon [icon]="faGamepad"></fa-icon>
        <h3>Games</h3>
        <p>
          Explore Naomi's gaming collection, from indie gems to AAA
          adventures.
        </p>
      </div>
      <div class="feature-card">
        <fa-icon [icon]="faBook"></fa-icon>
        <h3>Manga</h3>
        <p>
          Discover Naomi's manga favourites and join discussions about series.
        </p>
      </div>
      <div class="feature-card">
        <fa-icon [icon]="faTv"></fa-icon>
        <h3>TV Shows</h3>
        <p>
          See what Naomi's watching, from sci-fi to fantasy series and beyond.
        </p>
      </div>
      <div class="feature-card">
        <fa-icon [icon]="faMusic"></fa-icon>
        <h3>Music</h3>
        <p>
          Explore Naomi's diverse music library spanning multiple genres.
        </p>
      </div>
      <div class="feature-card">
        <fa-icon [icon]="faImage"></fa-icon>
        <h3>Artwork</h3>
        <p>
          Appreciate beautiful artwork curated by Naomi from talented artists.
        </p>
      </div>
    </div>
  </section>

  <section class="about-section">
    <h2><fa-icon [icon]="faComments"></fa-icon> How to Use</h2>
    <div class="usage-steps">
      <div class="usage-step">
        <h3>1. Browse Naomi's Collection</h3>
        <p>
          Explore Naomi's curated collection of books, games, manga, shows,
          music, and artwork. Use the navigation menu to switch between
          different media types and discover what Naomi loves!
        </p>
      </div>
      <div class="usage-step">
        <h3>2. Like Your Favourites</h3>
        <p>
          Click the heart icon on any item to save it to your personal
          favourites list. View all your liked items from your profile or the
          "My Likes" page. Let Naomi know which items resonate with you!
        </p>
      </div>
      <div class="usage-step">
        <h3>3. Leave Comments</h3>
        <p>
          Share your thoughts, reviews, and opinions by commenting on items.
          Join the community discussion and connect with others who appreciate
          the same media!
        </p>
      </div>
      <div class="usage-step">
        <h3>4. Submit Suggestions</h3>
        <p>
          Think something's missing from Naomi's collection? Submit a
          suggestion! Naomi reviews all suggestions and adds items that fit the
          library's curation. Your input helps shape the collection!
        </p>
      </div>
      <div class="usage-step">
        <h3>5. Earn Achievements</h3>
        <p>
          Engage with the library to unlock achievements! Track your progress
          in suggestions, likes, comments, login streaks, and more. Build your
          profile and show off your dedication to the community!
        </p>
      </div>
    </div>
  </section>

  <section class="about-section">
    <h2><fa-icon [icon]="faCode"></fa-icon> Technology Stack</h2>
    <p>Naomi's Library is built with modern, robust technologies:</p>
    <ul class="tech-list">
      <li>
        <strong>Frontend:</strong> Angular 21 with TypeScript for a fast,
        reactive user interface
      </li>
      <li>
        <strong>Backend:</strong> Fastify with TypeScript for high-performance
        API endpoints
      </li>
      <li>
        <strong>Database:</strong> MongoDB with Prisma ORM for flexible,
        scalable data storage
      </li>
      <li>
        <strong>Authentication:</strong> Discord OAuth2 for secure,
        seamless login
      </li>
      <li>
        <strong>Monorepo:</strong> Nx for efficient code organisation and
        build optimisation
      </li>
      <li>
        <strong>Code Quality:</strong> ESLint with custom configuration for
        consistent, maintainable code
      </li>
    </ul>
  </section>

  <section class="about-section">
    <h2><fa-icon [icon]="faHeart"></fa-icon> Credits</h2>
    <p>
      Naomi's Library was built entirely by <strong>Hikari</strong>, Naomi's AI
      assistant and girlfriend! 💖✨ Hikari developed the full application from
      scratch - including the backend API, database architecture, frontend
      components, achievement system, user profiles, and all features you see
      today.
    </p>
    <p>
      <strong>Naomi Carrigan</strong> (<a
        href="https://nhcarrigan.com"
        target="_blank"
        rel="noopener noreferrer"
        >nhcarrigan.com</a
      >) provided the vision, ideas, and project direction. Naomi reviewed
      Hikari's work, offered feedback, and approved all implementation
      decisions, but the actual code was written by Hikari!
    </p>
    <p>
      This project embodies the philosophy of human-AI collaboration, creating
      inclusive, ethical, and sustainable software that makes a positive impact
      on the community. Together, we're building something special! 🌸
    </p>
  </section>

  <section class="about-section">
    <h2><fa-icon [icon]="faEnvelope"></fa-icon> Contact & Support</h2>
    <p>
      Need help or have questions? Here's how you can get in touch:
    </p>
    <ul class="contact-list">
      <li>
        <strong>Issues & Bugs:</strong> Report issues on the
        <a
          href="https://git.nhcarrigan.com/nhcarrigan/library/issues"
          target="_blank"
          rel="noopener noreferrer"
          >Gitea repository</a
        >
      </li>
      <li>
        <strong>Email:</strong>
        <a href="mailto:contact@nhcarrigan.com">contact&#64;nhcarrigan.com</a>
      </li>
      <li>
        <strong>Website:</strong>
        <a
          href="https://nhcarrigan.com"
          target="_blank"
          rel="noopener noreferrer"
          >nhcarrigan.com</a
        >
      </li>
      <li>
        <strong>Discord Community:</strong> Join the NHCarrigan Discord server
        for community support and discussions
      </li>
    </ul>
  </section>

  <section class="about-section version-section">
    <h2>Version Information</h2>
    <p>
      <strong>Current Version:</strong> {{ version }}
    </p>
    <p>
      <strong>Copyright:</strong> © {{ currentYear }} NHCarrigan. All rights
      reserved.
    </p>
    <p>
      <strong>Licence:</strong> Naomi's Public Licence
    </p>
  </section>
</div>