generated from nhcarrigan/template
feat: add About page with library information
Implements comprehensive About page (#51) with the following sections: - Purpose: Explains that this is Naomi's curated collection - Features: Overview of all 6 media types (Books, Games, Manga, Shows, Music, Art) - How to Use: 5-step guide for browsing, liking, commenting, suggesting, and earning achievements - Technology Stack: Details Angular, Fastify, MongoDB, Prisma, and other technologies - Credits: Acknowledges Hikari as the developer and Naomi as the visionary - Contact & Support: Links to Gitea, email, website, and Discord community - Version Information: Current version and licence details Technical implementation: - New AboutComponent with responsive design - Added /about route to app routes - Added "ℹ️ About" link to user dropdown menu - Beautiful purple gradient styling matching the witchy aesthetic - FontAwesome icons for visual appeal - Fully responsive for all device sizes Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -65,6 +65,10 @@ export const appRoutes: Route[] = [
|
||||
path: 'achievements',
|
||||
loadComponent: () => import('./components/achievements/achievements.component').then(m => m.AchievementsComponent)
|
||||
},
|
||||
{
|
||||
path: 'about',
|
||||
loadComponent: () => import('./components/about/about.component').then(m => m.AboutComponent)
|
||||
},
|
||||
{
|
||||
path: '**',
|
||||
redirectTo: ''
|
||||
|
||||
@@ -0,0 +1,194 @@
|
||||
.about-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
background: linear-gradient(135deg, #9d4edd 0%, #c77dff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
h1 fa-icon {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.about-section {
|
||||
background: rgba(157, 78, 221, 0.05);
|
||||
border: 1px solid rgba(157, 78, 221, 0.2);
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.about-section:hover {
|
||||
border-color: rgba(157, 78, 221, 0.4);
|
||||
box-shadow: 0 4px 12px rgba(157, 78, 221, 0.1);
|
||||
}
|
||||
|
||||
.about-section h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #9d4edd;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.about-section p {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 1rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: rgba(199, 125, 255, 0.05);
|
||||
border: 1px solid rgba(199, 125, 255, 0.3);
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-5px);
|
||||
border-color: #c77dff;
|
||||
box-shadow: 0 6px 20px rgba(199, 125, 255, 0.2);
|
||||
}
|
||||
|
||||
.feature-card fa-icon {
|
||||
font-size: 3rem;
|
||||
color: #9d4edd;
|
||||
margin-bottom: 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #c77dff;
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
font-size: 1rem;
|
||||
opacity: 0.85;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.usage-steps {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.usage-step {
|
||||
background: rgba(199, 125, 255, 0.03);
|
||||
border-left: 4px solid #9d4edd;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.usage-step:hover {
|
||||
border-left-color: #c77dff;
|
||||
background: rgba(199, 125, 255, 0.08);
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.usage-step h3 {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 0.75rem;
|
||||
color: #9d4edd;
|
||||
}
|
||||
|
||||
.usage-step p {
|
||||
margin: 0;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.tech-list,
|
||||
.contact-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.tech-list li,
|
||||
.contact-list li {
|
||||
padding: 0.75rem 0;
|
||||
font-size: 1.1rem;
|
||||
border-bottom: 1px solid rgba(157, 78, 221, 0.1);
|
||||
}
|
||||
|
||||
.tech-list li:last-child,
|
||||
.contact-list li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.tech-list li strong,
|
||||
.contact-list li strong {
|
||||
color: #9d4edd;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.about-section a {
|
||||
color: #c77dff;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.about-section a:hover {
|
||||
color: #9d4edd;
|
||||
border-bottom-color: #9d4edd;
|
||||
}
|
||||
|
||||
.version-section {
|
||||
text-align: center;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(157, 78, 221, 0.08) 0%,
|
||||
rgba(199, 125, 255, 0.08) 100%
|
||||
);
|
||||
border: 2px solid rgba(157, 78, 221, 0.3);
|
||||
}
|
||||
|
||||
.version-section p {
|
||||
margin: 0.5rem 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.about-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.about-section {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.about-section h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,216 @@
|
||||
<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@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>
|
||||
@@ -0,0 +1,44 @@
|
||||
/**
|
||||
* @copyright NHCarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
|
||||
import { Component } from "@angular/core";
|
||||
|
||||
import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
|
||||
import {
|
||||
faBook,
|
||||
faCode,
|
||||
faComments,
|
||||
faEnvelope,
|
||||
faGamepad,
|
||||
faHeart,
|
||||
faImage,
|
||||
faInfoCircle,
|
||||
faMusic,
|
||||
faTv,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
@Component({
|
||||
selector: "app-about",
|
||||
standalone: true,
|
||||
imports: [FontAwesomeModule],
|
||||
templateUrl: "./about.component.html",
|
||||
styleUrls: ["./about.component.css"],
|
||||
})
|
||||
export class AboutComponent {
|
||||
public faBook = faBook;
|
||||
public faCode = faCode;
|
||||
public faComments = faComments;
|
||||
public faEnvelope = faEnvelope;
|
||||
public faGamepad = faGamepad;
|
||||
public faHeart = faHeart;
|
||||
public faImage = faImage;
|
||||
public faInfoCircle = faInfoCircle;
|
||||
public faMusic = faMusic;
|
||||
public faTv = faTv;
|
||||
|
||||
public version = "0.0.0";
|
||||
public currentYear = new Date().getFullYear();
|
||||
}
|
||||
@@ -53,6 +53,7 @@ import { ApiService } from '../../services/api.service';
|
||||
<a [routerLink]="['/profile', user.slug || user.id]" class="dropdown-item" (click)="closeDropdown()">My Profile</a>
|
||||
<a routerLink="/settings" class="dropdown-item" (click)="closeDropdown()">Settings</a>
|
||||
<a routerLink="/achievements" class="dropdown-item" (click)="closeDropdown()">🏆 Achievements</a>
|
||||
<a routerLink="/about" class="dropdown-item" (click)="closeDropdown()">ℹ️ About</a>
|
||||
@if (!user.isAdmin) {
|
||||
<a routerLink="/my-suggestions" class="dropdown-item" (click)="closeDropdown()">My Suggestions</a>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user