feat: Added /about page with three content sections (what, how, who) an…
- "frontend/src/pages/About.tsx" - "frontend/src/App.tsx" - "frontend/src/components/AppFooter.tsx" - "frontend/src/App.css" GSD-Task: S02/T01
This commit is contained in:
jlightner
parent
5f7a8a6f77
commit
5a959cc9b2
5 changed files with 228 additions and 1 deletions
|
|
@ -3354,3 +3354,126 @@ a.app-footer__repo:hover {
|
|||
gap: 0.3rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* ── About page ───────────────────────────────────────────────────────────── */
|
||||
|
||||
.about {
|
||||
max-width: 44rem;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 1.5rem 3rem;
|
||||
}
|
||||
|
||||
.about-hero {
|
||||
text-align: center;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.about-hero__title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-text-primary);
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.about-hero__subtitle {
|
||||
font-size: 1.05rem;
|
||||
color: var(--color-text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.about-section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.about-section__heading {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
.about-section__text {
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.7;
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
.about-pipeline {
|
||||
list-style: none;
|
||||
counter-reset: pipeline;
|
||||
padding: 0;
|
||||
margin: 1rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.about-pipeline__step {
|
||||
counter-increment: pipeline;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.75rem;
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.6;
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--color-bg-surface);
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.about-pipeline__step::before {
|
||||
content: counter(pipeline);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-accent);
|
||||
background: var(--color-accent-subtle);
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.about-pipeline__step strong {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.about-link {
|
||||
color: var(--color-accent);
|
||||
text-decoration: none;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.about-link:hover {
|
||||
color: var(--color-accent-hover);
|
||||
}
|
||||
|
||||
.about-cta {
|
||||
text-align: center;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.about-cta__btn {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Footer about link */
|
||||
|
||||
.app-footer__about {
|
||||
color: var(--color-text-muted);
|
||||
text-decoration: none;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
a.app-footer__about:hover,
|
||||
.app-footer__about:hover {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.about-hero__title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import CreatorDetail from "./pages/CreatorDetail";
|
|||
import TopicsBrowse from "./pages/TopicsBrowse";
|
||||
import AdminReports from "./pages/AdminReports";
|
||||
import AdminPipeline from "./pages/AdminPipeline";
|
||||
import About from "./pages/About";
|
||||
import AdminDropdown from "./components/AdminDropdown";
|
||||
import AppFooter from "./components/AppFooter";
|
||||
|
||||
|
|
@ -43,6 +44,9 @@ export default function App() {
|
|||
<Route path="/admin/reports" element={<AdminReports />} />
|
||||
<Route path="/admin/pipeline" element={<AdminPipeline />} />
|
||||
|
||||
{/* Info routes */}
|
||||
<Route path="/about" element={<About />} />
|
||||
|
||||
{/* Fallback */}
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</Routes>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
const REPO_URL = "https://github.com/xpltdco/chrysopedia";
|
||||
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
export default function AppFooter() {
|
||||
const commitUrl =
|
||||
__GIT_COMMIT__ !== "dev"
|
||||
|
|
@ -37,6 +39,10 @@ export default function AppFooter() {
|
|||
>
|
||||
GitHub
|
||||
</a>
|
||||
<span className="app-footer__sep">·</span>
|
||||
<Link to="/about" className="app-footer__about">
|
||||
About
|
||||
</Link>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
94
frontend/src/pages/About.tsx
Normal file
94
frontend/src/pages/About.tsx
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
import { Link } from "react-router-dom";
|
||||
|
||||
export default function About() {
|
||||
return (
|
||||
<div className="about">
|
||||
<section className="about-hero">
|
||||
<h1 className="about-hero__title">About Chrysopedia</h1>
|
||||
<p className="about-hero__subtitle">
|
||||
A structured knowledge base for music production techniques
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="about-section">
|
||||
<h2 className="about-section__heading">What Is Chrysopedia?</h2>
|
||||
<p className="about-section__text">
|
||||
Chrysopedia turns long-form music production tutorials into a
|
||||
searchable, structured knowledge base. Instead of scrubbing through
|
||||
hours of video looking for the one technique you need, you can search
|
||||
by topic, creator, or keyword and jump straight to the insight.
|
||||
</p>
|
||||
<p className="about-section__text">
|
||||
The name comes from <em>chrysopoeia</em> — the art of transmutation.
|
||||
We transmute raw video content into distilled, accessible knowledge.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="about-section">
|
||||
<h2 className="about-section__heading">How Content Is Extracted</h2>
|
||||
<p className="about-section__text">
|
||||
Videos are processed through a multi-stage pipeline that transcribes
|
||||
audio, identifies key moments, classifies topics, and generates
|
||||
structured technique pages — all using a combination of speech
|
||||
recognition and large language models.
|
||||
</p>
|
||||
<ol className="about-pipeline">
|
||||
<li className="about-pipeline__step">
|
||||
<strong>Transcription</strong> — Audio is converted to timestamped
|
||||
text
|
||||
</li>
|
||||
<li className="about-pipeline__step">
|
||||
<strong>Key Moment Detection</strong> — The transcript is analyzed
|
||||
to find discrete techniques and insights
|
||||
</li>
|
||||
<li className="about-pipeline__step">
|
||||
<strong>Topic Classification</strong> — Each moment is tagged with
|
||||
categories and sub-topics
|
||||
</li>
|
||||
<li className="about-pipeline__step">
|
||||
<strong>Page Generation</strong> — Structured technique pages are
|
||||
written with context, steps, and creator attribution
|
||||
</li>
|
||||
<li className="about-pipeline__step">
|
||||
<strong>Indexing</strong> — Content is embedded for semantic search
|
||||
</li>
|
||||
</ol>
|
||||
<p className="about-section__text">
|
||||
Every technique page links back to its source video and creator,
|
||||
preserving attribution throughout.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="about-section">
|
||||
<h2 className="about-section__heading">Who Maintains This</h2>
|
||||
<p className="about-section__text">
|
||||
Chrysopedia is built and maintained by{" "}
|
||||
<a
|
||||
href="https://github.com/xpltdco"
|
||||
className="about-link"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
xpltd
|
||||
</a>
|
||||
. The project is open source on{" "}
|
||||
<a
|
||||
href="https://github.com/xpltdco/chrysopedia"
|
||||
className="about-link"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div className="about-cta">
|
||||
<Link to="/" className="btn about-cta__btn">
|
||||
Start Exploring
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1 +1 @@
|
|||
{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/public-client.ts","./src/components/AdminDropdown.tsx","./src/components/AppFooter.tsx","./src/components/CategoryIcons.tsx","./src/components/CopyLinkButton.tsx","./src/components/CreatorAvatar.tsx","./src/components/ReportIssueModal.tsx","./src/pages/AdminPipeline.tsx","./src/pages/AdminReports.tsx","./src/pages/CreatorDetail.tsx","./src/pages/CreatorsBrowse.tsx","./src/pages/Home.tsx","./src/pages/SearchResults.tsx","./src/pages/TechniquePage.tsx","./src/pages/TopicsBrowse.tsx"],"version":"5.6.3"}
|
||||
{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/public-client.ts","./src/components/AdminDropdown.tsx","./src/components/AppFooter.tsx","./src/components/CategoryIcons.tsx","./src/components/CopyLinkButton.tsx","./src/components/CreatorAvatar.tsx","./src/components/ReportIssueModal.tsx","./src/pages/About.tsx","./src/pages/AdminPipeline.tsx","./src/pages/AdminReports.tsx","./src/pages/CreatorDetail.tsx","./src/pages/CreatorsBrowse.tsx","./src/pages/Home.tsx","./src/pages/SearchResults.tsx","./src/pages/TechniquePage.tsx","./src/pages/TopicsBrowse.tsx"],"version":"5.6.3"}
|
||||
Loading…
Add table
Reference in a new issue