Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 9de983a

Browse files
rccyxrccyx
committed
feat: configure SEO for about page
1 parent f1bc7f0 commit 9de983a

File tree

5 files changed

+279
-195
lines changed

5 files changed

+279
-195
lines changed

‎src/app/(pages)/about/_about.tsx‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
'use client';
2+
3+
import Footer from '@/app/components/footer/footer';
4+
import { GlowingText } from '@/app/components/reusables/content';
5+
import { REPO_SOURCE, SITE_NAME } from '@/lib/constants';
6+
import { cn } from '@/lib/utils';
7+
import { motion } from 'framer-motion';
8+
import NextLink from 'next/link';
9+
import React from 'react';
10+
import { ReactNode } from 'react';
11+
12+
const ThisSiteTools = [
13+
'TypeScript',
14+
'ReactJS',
15+
'NextJS',
16+
'Framer-motion',
17+
'TailwindCSS',
18+
'MDX',
19+
'GitHub Actions',
20+
'Terraform',
21+
'AWS',
22+
'Playwright',
23+
'Jest',
24+
'Docker',
25+
];
26+
27+
interface CardProps extends React.HTMLProps<HTMLDivElement> {
28+
title: string;
29+
}
30+
31+
const Card: React.FC<CardProps> = ({ title, children }) => {
32+
return (
33+
<motion.div
34+
animate={{
35+
opacity: 1,
36+
y: 0,
37+
}}
38+
initial={{
39+
opacity: 0,
40+
y: -20,
41+
}}
42+
transition={{
43+
duration: 0.4,
44+
ease: 'easeInOut',
45+
}}
46+
className="border border-white/10 p-4 rounded-[2rem]"
47+
>
48+
<div className="flex flex-col gap-2 items-center text-xl">
49+
<div className=" text-center dimmed-3 max-w-[370px] sm:max-w-[550px] md:max-w-[650px] lg:max-w-[850px]">
50+
<h3 className=" glows-dimmed dimmed-4 text-2xl font-bold">{title}</h3>
51+
<div>{children}</div>
52+
</div>
53+
</div>
54+
</motion.div>
55+
);
56+
};
57+
export default function Page() {
58+
return (
59+
<>
60+
<div className="mt-12"></div>
61+
<div className="flex flex-col items-center justify-center gap-6 mt-8 md:mt-20">
62+
<code>
63+
<MajorHeading title="whomai" />
64+
</code>
65+
<Card title="">
66+
<p>
67+
I&apos;m a software developer and technical educator, and I do work
68+
for <Link href="/contact" name="hire." />
69+
</p>
70+
</Card>
71+
<div className="hidden">
72+
<Card title="">
73+
<p>
74+
I&apos;ve been programming since I was 12 years old, getting
75+
professionally paid for it for 4 years now, where I&apos;ve had
76+
the privilge to collaborate with numerous individuals, teams and
77+
startups worldwide, to build, scale, and lead software projects.
78+
</p>
79+
</Card>
80+
</div>
81+
82+
<Card title="">
83+
<p>
84+
You can learn more about me from my blogs than I can convey here.
85+
<br /> But in short, I believe in
86+
<Link href="/blog/tag/quality" name="quality" /> code,
87+
<Link href="/blog/tag/skill-issues" name="high-performing" />
88+
teams, and effective
89+
<Link href="/blog/tag/management" name="management." />
90+
<br /> And I do offer services aimed at enhancing these aspects for
91+
software teams.
92+
</p>
93+
</Card>
94+
<MajorHeading id="stack" title="Stack" />
95+
<Card title="">
96+
<p>
97+
While I have experience spanning all the way from bare-metal to
98+
front-end development, I now specialize primarily in Python and
99+
TypeScript, with a heavy focus on web-related technologies (HTTP,
100+
WebSockets, RPC, microservices, containers, cloud architecture...)
101+
</p>
102+
</Card>
103+
<div id="hiden" className="hidden">
104+
<MinorHeading title="A wise man once said" />
105+
<Card title="">
106+
<p>
107+
<span className="italic">
108+
&quot;Before you learn an ephemeral web framework, learn HTTP
109+
instead, that way you have learned every web framework to ever
110+
exist&quot;
111+
</span>
112+
</p>
113+
</Card>
114+
<Card title="">
115+
<p>
116+
Frameworks and libraries don&apos;t matter they come and go.
117+
Fundamentals are key. But if you&apos;re interested in knowing the
118+
exact tools I use you can check out my
119+
<Link href="#" name="cv" /> (it&apos;s too long), or, you might
120+
want to check out my
121+
<Link href="#" name="resume" /> to get a glimpse instead.
122+
</p>
123+
</Card>
124+
<MajorHeading title={SITE_NAME || 'About The Website'} />
125+
<Card title="">
126+
<p>
127+
This site is open <Link href={REPO_SOURCE} name="source" /> and
128+
made using the following technologies for provisioning,
129+
development, testing, and deployment.
130+
</p>
131+
</Card>
132+
<Card title="">
133+
<div className="flex flex-wrap justify-center items-center gap-[0.625rem] text-sm dimmed-4">
134+
{ThisSiteTools.map((tech) => (
135+
<span
136+
key={tech}
137+
className="relative rounded-full px-2 py-1 border border-white/10"
138+
>
139+
{tech}
140+
</span>
141+
))}
142+
</div>
143+
</Card>
144+
</div>
145+
</div>
146+
<div className="mt-10"></div>
147+
<Footer></Footer>
148+
</>
149+
);
150+
}
151+
152+
interface BaseHeadingProps {
153+
children: ReactNode;
154+
className?: string;
155+
id?: string;
156+
}
157+
const BaseHeading = (props: BaseHeadingProps) => {
158+
return (
159+
<motion.h2
160+
id={props.id}
161+
animate={{
162+
opacity: 1,
163+
x: 0,
164+
}}
165+
initial={{
166+
opacity: 0,
167+
x: -30,
168+
}}
169+
transition={{
170+
duration: 0.2,
171+
ease: 'easeInOut',
172+
}}
173+
className={cn(props.className)}
174+
>
175+
{props.children}
176+
</motion.h2>
177+
);
178+
};
179+
180+
type HeadingProps = { title: string; id?: string };
181+
const MinorHeading = ({ title, id }: HeadingProps) => {
182+
return (
183+
<BaseHeading id={id} className="glows-dimmed dimmed-4 text-1xl font-bold">
184+
{title}
185+
</BaseHeading>
186+
);
187+
};
188+
189+
const MajorHeading = ({ title, id }: HeadingProps) => {
190+
return (
191+
<BaseHeading id={id} className=" glows-dimmed dimmed-4 text-2xl font-bold">
192+
{title}
193+
</BaseHeading>
194+
);
195+
};
196+
197+
const Link = ({ href, name }: { href: string; name: string }) => {
198+
return (
199+
<NextLink href={href}>
200+
<GlowingText>{name}</GlowingText>
201+
</NextLink>
202+
);
203+
};

0 commit comments

Comments
 (0)