Skip to content

Commit 5c3b588

Browse files
raferdevraferdev
committed
feat(stories): rewrite about, illustration and logo pages
1 parent 0ab9840 commit 5c3b588

9 files changed

Lines changed: 253 additions & 181 deletions

File tree

‎src/stories/content/about/about.mdx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { Meta } from '@storybook/blocks'
2+
3+
import { AboutPage } from './pages/About'
4+
5+
<Meta title="About/About" />
6+
7+
<AboutPage />

‎src/stories/content/about/illustrations.mdx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { Meta } from '@storybook/blocks'
2+
3+
import { IllustrationPage } from './pages/Illustrations'
4+
5+
<Meta title="About/Illustrations" />
6+
7+
<IllustrationPage />

‎src/stories/content/about/intro.mdx‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎src/stories/content/about/pages/About/index.tsx‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
import manInARocket from '@/stories/assets/man-riding-a-rocket.png'
2+
import presentationImage from '@/stories/assets/studying.png'
3+
import { Docs } from '@/stories/components/Docs'
4+
import { IllustrationImg } from '@/stories/components/illustrationImage'
5+
6+
import { __site } from '@/config/site'
7+
import { Link } from '@/components/Link'
8+
9+
const { Container, Content, Header } = Docs
10+
11+
const AboutPage = () => {
12+
return (
13+
<Container className="relative">
14+
<IllustrationImg
15+
src={presentationImage}
16+
className="absolute right-0 top-0"
17+
/>
18+
<Header.Container className="relative">
19+
<div className="flex flex-col items-baseline gap-4">
20+
<Header.Title>About</Header.Title>
21+
<Header.SubTitle>I will give you a brief overview!</Header.SubTitle>
22+
</div>
23+
</Header.Container>
24+
25+
<div className="relative z-20 flex flex-col gap-8 py-16 pl-4 pr-6 pt-6">
26+
<div className="flex flex-col py-14">
27+
<Content.Topic>General</Content.Topic>
28+
<Content.Paragraph>
29+
Storybook is a developer tool that enables the development, testing,
30+
and documentation of UI components in an isolated environment and is
31+
used to create a design system for your company, project, etc.
32+
</Content.Paragraph>
33+
</div>
34+
<div className="flex flex-col pb-14">
35+
<Content.Topic>This App</Content.Topic>
36+
37+
<Content.Paragraph>
38+
Here you will see the documents on the{' '}
39+
<a
40+
className="!font-bold !text-slate-800"
41+
aria-label="Raferdev website"
42+
href={__site.metadata.url}
43+
>
44+
rafer.dev
45+
</a>{' '}
46+
website. It's more about documenting insights about this project
47+
than showing UI and design documents, what this tool is suitable
48+
for, and using this powerful tool to organize ideas.
49+
</Content.Paragraph>
50+
</div>
51+
52+
<div className="flex flex-col pb-14">
53+
<Content.Topic>More</Content.Topic>
54+
55+
<Content.Paragraph>
56+
This project is open source, and you can access this repository
57+
here:{' '}
58+
<a
59+
href={__site.metadata.links.github}
60+
className="!font-bold !text-slate-800"
61+
aria-label="Github Repository"
62+
target="_blank"
63+
>
64+
github.com
65+
</a>
66+
.
67+
</Content.Paragraph>
68+
</div>
69+
<div className="grid h-full w-full grid-cols-1 grid-rows-4 place-items-center gap-4 pb-36 pt-8 md:grid-cols-2 md:grid-rows-2">
70+
<Link
71+
iconFillColor="github"
72+
iconName="Github"
73+
textColor="black"
74+
hover="bgCyan"
75+
className="relative z-20 box-border w-full !font-bold md:min-w-full"
76+
href={__site.links.profile.github}
77+
target="_blank"
78+
>
79+
Github
80+
</Link>
81+
<Link
82+
iconFillColor="youtube"
83+
iconName="Youtube"
84+
textColor="black"
85+
hover="bgCyan"
86+
className="relative z-20 box-border w-full !font-bold md:min-w-full"
87+
href={__site.links.profile.youtube}
88+
target="_blank"
89+
>
90+
Youtube
91+
</Link>
92+
<Link
93+
iconFillColor="linkedin"
94+
iconName="Linkedin"
95+
textColor="black"
96+
hover="bgCyan"
97+
className="relative z-20 box-border w-full !font-bold md:min-w-full"
98+
href={__site.links.profile.linkedin}
99+
target="_blank"
100+
>
101+
Linkedin
102+
</Link>
103+
<Link
104+
iconFillColor="white"
105+
textColor="black"
106+
hover="bgCyan"
107+
iconName="Mail"
108+
className="relative z-20 box-border w-full !font-bold md:min-w-full"
109+
href={__site.links.profile.email.raferdev}
110+
target="_blank"
111+
>
112+
Email
113+
</Link>
114+
<IllustrationImg
115+
src={manInARocket}
116+
className="absolute bottom-0 right-0 justify-center"
117+
/>
118+
</div>
119+
</div>
120+
</Container>
121+
)
122+
}
123+
124+
export { AboutPage }

‎src/stories/content/about/pages/Illustrations/index.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import ideiaLaunch from '@/../public/idea-launch.png'
2+
import hommerOffice from '@/stories/assets/home-office.png'
3+
import manInRocket from '@/stories/assets/man-riding-a-rocket.png'
4+
import studying from '@/stories/assets/studying.png'
5+
import { Docs } from '@/stories/components/Docs'
6+
import { IllustrationImg } from '@/stories/components/illustrationImage'
7+
8+
const { Container, Header } = Docs
9+
10+
const IllustrationPage = () => (
11+
<Container>
12+
<Header.Container className="overflow-visible">
13+
<div className="flex flex-col items-baseline gap-4">
14+
<Header.Title>Illustrations</Header.Title>
15+
<Header.SubTitle>
16+
All the illustrations are sourced by:{' '}
17+
<a
18+
className="!text-lg !font-normal !text-neutral-800 hover:opacity-75 md:!text-xl"
19+
aria-label="Popsy website"
20+
href="https://popsy.co/"
21+
target="_blank"
22+
>
23+
popsy.co
24+
</a>
25+
.
26+
</Header.SubTitle>
27+
</div>
28+
</Header.Container>
29+
30+
<div className="flex flex-row flex-wrap items-center justify-center gap-2 pb-20 pl-4 pr-6">
31+
<IllustrationImg src={hommerOffice} className="flex w-64 p-0 md:p-0" />
32+
<IllustrationImg src={ideiaLaunch} className="flex w-64 p-0 md:p-0" />
33+
<IllustrationImg src={studying} className="flex w-64 p-0 md:p-0" />
34+
<IllustrationImg src={manInRocket} className="flex w-64 p-0 md:p-0" />
35+
</div>
36+
</Container>
37+
)
38+
39+
export { IllustrationPage }

‎src/stories/content/about/pages/Intro/illustrationImg.tsx‎

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎src/stories/content/about/pages/Intro/index.tsx‎

Lines changed: 0 additions & 93 deletions
This file was deleted.

‎src/stories/content/about/pages/Logo/illustrationImg.tsx‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

0 commit comments

Comments
 (0)