diff --git a/apps/frontend/src/app/app.routes.ts b/apps/frontend/src/app/app.routes.ts index 139b7ad..4e07a5a 100644 --- a/apps/frontend/src/app/app.routes.ts +++ b/apps/frontend/src/app/app.routes.ts @@ -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: '' diff --git a/apps/frontend/src/app/components/about/about.component.css b/apps/frontend/src/app/components/about/about.component.css new file mode 100644 index 0000000..1a2448b --- /dev/null +++ b/apps/frontend/src/app/components/about/about.component.css @@ -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; + } +} diff --git a/apps/frontend/src/app/components/about/about.component.html b/apps/frontend/src/app/components/about/about.component.html new file mode 100644 index 0000000..3b5b902 --- /dev/null +++ b/apps/frontend/src/app/components/about/about.component.html @@ -0,0 +1,216 @@ +
+

About Naomi's Library

+ +
+

Purpose

+

+ 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. +

+
+ +
+

Features

+
+
+ +

Books

+

+ Browse Naomi's reading list, discover new titles, and share your + thoughts. +

+
+
+ +

Games

+

+ Explore Naomi's gaming collection, from indie gems to AAA + adventures. +

+
+
+ +

Manga

+

+ Discover Naomi's manga favourites and join discussions about series. +

+
+
+ +

TV Shows

+

+ See what Naomi's watching, from sci-fi to fantasy series and beyond. +

+
+
+ +

Music

+

+ Explore Naomi's diverse music library spanning multiple genres. +

+
+
+ +

Artwork

+

+ Appreciate beautiful artwork curated by Naomi from talented artists. +

+
+
+
+ +
+

How to Use

+
+
+

1. Browse Naomi's Collection

+

+ 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! +

+
+
+

2. Like Your Favourites

+

+ 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! +

+
+
+

3. Leave Comments

+

+ Share your thoughts, reviews, and opinions by commenting on items. + Join the community discussion and connect with others who appreciate + the same media! +

+
+
+

4. Submit Suggestions

+

+ 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! +

+
+
+

5. Earn Achievements

+

+ 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! +

+
+
+
+ +
+

Technology Stack

+

Naomi's Library is built with modern, robust technologies:

+ +
+ +
+

Credits

+

+ Naomi's Library was built entirely by Hikari, 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. +

+

+ Naomi Carrigan (nhcarrigan.com) 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! +

+

+ 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! 🌸 +

+
+ +
+

Contact & Support

+

+ Need help or have questions? Here's how you can get in touch: +

+ +
+ +
+

Version Information

+

+ Current Version: {{ version }} +

+

+ Copyright: Š {{ currentYear }} NHCarrigan. All rights + reserved. +

+

+ Licence: Naomi's Public Licence +

+
+
diff --git a/apps/frontend/src/app/components/about/about.component.ts b/apps/frontend/src/app/components/about/about.component.ts new file mode 100644 index 0000000..b37164c --- /dev/null +++ b/apps/frontend/src/app/components/about/about.component.ts @@ -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(); +} diff --git a/apps/frontend/src/app/components/header/header.component.ts b/apps/frontend/src/app/components/header/header.component.ts index 97db707..735336a 100644 --- a/apps/frontend/src/app/components/header/header.component.ts +++ b/apps/frontend/src/app/components/header/header.component.ts @@ -53,6 +53,7 @@ import { ApiService } from '../../services/api.service'; My Profile Settings 🏆 Achievements + ℹī¸ About @if (!user.isAdmin) { My Suggestions }