Skip to content

Commit 30f635b

Browse files
flaming-codesflaming-codes
authored
feat: updated about-page (#239)
1 parent a0b1737 commit 30f635b

File tree

4 files changed

+149
-51
lines changed

4 files changed

+149
-51
lines changed

‎web/app/routes/_page.about._index.tsx‎

Lines changed: 147 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,50 @@ import { PlausibleChoicePillButton } from "../modules/plausible";
1717
import { mergeMeta } from "../modules/meta";
1818
import { LicenseTable } from "../modules/licenses";
1919

20-
const anchors = ["Mission", "Team", "Analytics", "Source Code", "Licenses"];
20+
const anchors = ["Creators", "Mission", "Analytics", "Source Code", "Licenses"];
21+
22+
const creatorSpotlight = [
23+
{
24+
name: "Lukas Schönmann",
25+
role: "Bioinformatics & R Development",
26+
location: "Vienna, Austria",
27+
portrait: "/images/we/lukas_v2.webp",
28+
tagline:
29+
"Specializes in Bioinformatics with a master's from the University of Life Sciences in Vienna, working at the intersection of R research and data analysis.",
30+
bio: [
31+
"Lukas brings expertise in Bioinformatics, combining his master's degree from the University of Life Sciences in Vienna with practical R development skills.",
32+
"He focuses on data analysis and research applications, bridging the gap between biological data and computational insights through R programming.",
33+
],
34+
focusAreas: ["Bioinformatics", "R programming", "Data analysis"],
35+
links: [
36+
{
37+
href: "https://www.linkedin.com/in/lukas-schönmann-70781a215/",
38+
copy: "Connect with Lukas",
39+
icon: <RiLinkedinFill size={16} />,
40+
},
41+
],
42+
},
43+
{
44+
name: "Tom Schönmann",
45+
role: "Informatics & TypeScript Development",
46+
location: "Vienna, Austria",
47+
portrait: "/images/we/tom_v2.webp",
48+
tagline:
49+
"Works in informatics with a focus on TypeScript development, turning raw CRAN data into lightning-fast search experiences.",
50+
bio: [
51+
"Tom specializes in informatics and TypeScript development, architecting the infrastructure that indexes and hydrates tens of thousands of R packages.",
52+
"He focuses on technical implementation and performance optimization, ensuring the search functionality works seamlessly across the platform.",
53+
],
54+
focusAreas: ["Informatics", "TypeScript", "Search architecture"],
55+
links: [
56+
{
57+
href: "https://www.linkedin.com/in/tom-schönmann-487b97164/",
58+
copy: "Connect with Tom",
59+
icon: <RiLinkedinFill size={16} />,
60+
},
61+
],
62+
},
63+
];
2164

2265
export const meta = mergeMeta(() => {
2366
return [
@@ -44,61 +87,116 @@ export default function PrivacyPage() {
4487
</Anchors>
4588

4689
<PageContent>
47-
<PageContentSection headline="Mission" fragment="mission">
48-
<p>
49-
CRAN/E is a modern PWA (Progressive Web App) that serves as a search
50-
engine and information display for packages hosted on CRAN. CRAN/E
51-
means The Comprehensive R Archive Network, Enhanced. None of our
52-
provided services host any of the packages. The only mission of this
53-
application is to make R-packages hosted on CRAN easier to find and
54-
better to read. CRAN/E services only store metadata associated to
55-
the packages for the purpose of searching and displaying
56-
information.
57-
</p>
90+
<PageContentSection
91+
headline="Mission"
92+
fragment="mission"
93+
className="gap-10"
94+
>
95+
<div className="grid gap-10 lg:grid-cols-[1.15fr_0.85fr]">
96+
<div className="text-gray-normal space-y-6 text-lg leading-relaxed">
97+
<p>
98+
CRAN/E is a modern PWA (Progressive Web App) that serves as a
99+
search engine and information display for the incredible
100+
catalogue of packages hosted on CRAN. CRAN/E means The
101+
Comprehensive R Archive Network, Enhanced.
102+
</p>
103+
<p>
104+
None of our provided services host any of the packages. Our
105+
mission is to make R-packages easier to find and better to read.
106+
We only store metadata associated to the packages for the
107+
purpose of searching and displaying information.
108+
</p>
109+
</div>
110+
</div>
58111
</PageContentSection>
59112

60113
<Separator />
61114

62-
<PageContentSection headline="Team" fragment="team">
63-
<div className="flex gap-6 md:justify-center md:gap-16">
64-
{["Lukas", "Tom"].map((name) => (
65-
<figure
66-
key={name}
67-
className="text-gray-dim space-y-2 text-center text-sm"
115+
<PageContentSection
116+
headline="Creators"
117+
fragment="creators"
118+
subline="Portraits, bios, and the craft that keeps CRAN/E alive."
119+
className="gap-14"
120+
>
121+
<div className="grid gap-10 xl:grid-cols-2">
122+
{creatorSpotlight.map((creator) => (
123+
<article
124+
key={creator.name}
125+
className="group border-gray-6/30 dark:border-gray-1/20 dark:bg-gray-12/40 overflow-hidden rounded-3xl border bg-white/80 shadow-[0_35px_120px_-60px_rgba(15,23,42,0.9)] backdrop-blur-xl"
68126
>
69-
<img
70-
src={`/images/we/${name.toLowerCase()}.webp`}
71-
alt={`A portrait of ${name}`}
72-
className="hover:animate-wiggle hover:animate-infinite aspect-square w-20 rounded-full"
73-
/>
74-
<figcaption>{name}</figcaption>
75-
</figure>
127+
<div className="relative h-[360px] w-full overflow-hidden lg:h-[420px]">
128+
<img
129+
src={creator.portrait}
130+
alt={`Portrait of ${creator.name}`}
131+
className="size-full object-cover transition duration-700 group-hover:scale-105"
132+
/>
133+
<div className="from-gray-12/80 via-gray-12/20 dark:from-gray-12/80 pointer-events-none absolute inset-0 bg-linear-to-t to-transparent" />
134+
<div className="dark:bg-gray-12/60 border-gray-6/40 dark:border-gray-1/40 absolute inset-x-0 bottom-0 flex flex-col gap-1 border-t bg-white/5 px-8 pt-5 pb-5 text-white backdrop-blur-md">
135+
<p className="text-2xl leading-tight font-semibold">
136+
{creator.name}
137+
</p>
138+
</div>
139+
</div>
140+
141+
<div className="flex flex-col gap-6 p-8">
142+
<p className="text-gray-normal text-lg leading-relaxed">
143+
{creator.tagline}
144+
</p>
145+
<div className="text-gray-normal space-y-4 text-base leading-relaxed">
146+
{creator.bio.map((paragraph, index) => (
147+
<p key={`${creator.name}-bio-${index}`}>{paragraph}</p>
148+
))}
149+
</div>
150+
<div className="flex flex-wrap gap-3">
151+
{creator.focusAreas.map((focus) => (
152+
<span
153+
key={`${creator.name}-${focus}`}
154+
className="border-gray-6/40 text-gray-dim dark:border-gray-1/40 dark:bg-gray-12/20 dark:text-gray-3 rounded-full border bg-white/60 px-4 py-1 text-xs tracking-[0.2em] uppercase"
155+
>
156+
{focus}
157+
</span>
158+
))}
159+
</div>
160+
<div className="flex flex-wrap gap-3">
161+
{creator.links.map((link) => (
162+
<ExternalLink key={link.href} href={link.href}>
163+
<InfoPill variant="sand" label={link.icon}>
164+
{link.copy}
165+
<RiExternalLinkLine
166+
size={16}
167+
className="text-gray-dim ml-2"
168+
/>
169+
</InfoPill>
170+
</ExternalLink>
171+
))}
172+
</div>
173+
</div>
174+
</article>
76175
))}
77176
</div>
78-
<p>
79-
Our names are Lukas and Tom and we&apos;re two developers from
80-
Austria. Our passion for coding (the one in R, the other in
81-
TypeScript) led us to the discovery of the original CRAN-site.
82-
Seeing the desperate visual state the site was in, we decided to
83-
give it a facelift. We&apos;re not affiliated with CRAN or RStudio
84-
in any way. CRAN/E is the culmination of our efforts to make the
85-
site more modern and user-friendly and we hope you enjoy it as much
86-
as we do! Our main focus was ease of use and accessibility,
87-
especially for lightning fast searches.
88-
</p>
89-
<div className="flex flex-wrap gap-4">
90-
<ExternalLink href="https://www.linkedin.com/in/lukas-schönmann-70781a215/">
91-
<InfoPill variant="slate" label={<RiLinkedinFill size={16} />}>
92-
Lukas&apos; LinkedIn
93-
<RiExternalLinkLine size={16} className="text-gray-dim ml-2" />
94-
</InfoPill>
95-
</ExternalLink>
96-
<ExternalLink href="https://www.linkedin.com/in/tom-schönmann-487b97164/">
97-
<InfoPill variant="slate" label={<RiLinkedinFill size={16} />}>
98-
Tom&apos;s LinkedIn
99-
<RiExternalLinkLine size={16} className="text-gray-dim ml-2" />
100-
</InfoPill>
101-
</ExternalLink>
177+
<div className="border-gray-6/30 from-sand-3/50 via-amber-2/40 text-gray-normal dark:border-gray-1/20 dark:from-sand-9/40 dark:via-amber-9/20 dark:to-gray-12/40 dark:text-gray-2 space-y-4 rounded-2xl border bg-linear-to-br to-white/60 p-8 text-base leading-relaxed shadow-[0_25px_90px_-60px_rgba(15,23,42,0.75)]">
178+
<p className="text-gray-dim text-xs font-semibold tracking-[0.35em] uppercase">
179+
Our story
180+
</p>
181+
<p className="text-gray-normal mt-1 text-2xl font-semibold">
182+
Two developers from Austria passionate about coding.
183+
</p>
184+
<p>
185+
Our names are Lukas and Tom and we&apos;re two developers from
186+
Austria. Our passion for coding (the one in R, the other in
187+
TypeScript) led us to the discovery of the original CRAN-site.
188+
</p>
189+
<p>
190+
Seeing the desperate visual state the site was in, we decided to
191+
give it a facelift. We&apos;re not affiliated with CRAN or RStudio
192+
in any way. CRAN/E is the culmination of our efforts to make the
193+
site more modern and user-friendly and we hope you enjoy it as
194+
much as we do!
195+
</p>
196+
<p>
197+
Our main focus was ease of use and accessibility, especially for
198+
lightning fast searches.
199+
</p>
102200
</div>
103201
</PageContentSection>
104202

‎web/package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/public/images/we/lukas_v2.webp‎

19 KB
Loading

‎web/public/images/we/tom_v2.webp‎

17 KB
Loading

0 commit comments

Comments
 (0)