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

Skip to content

Commit 362e5c7

Browse files
rccyxrccyx
committed
feat: finish the about page
1 parent eab8006 commit 362e5c7

File tree

7 files changed

+254
-76
lines changed

7 files changed

+254
-76
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,4 +80,4 @@
8080
"tailwindcss-animate": "^1.0.7",
8181
"typed.js": "^2.1.0"
8282
}
83-
}
83+
}

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

Lines changed: 236 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,236 @@
1-
import AboutMe2 from '@/app/components/protos/about-me2';
2-
export default AboutMe2;
1+
'use client';
2+
import { PUBLIC_BLOG_IMAGES_SOURCE } from '@/lib/constants';
3+
import Footer from '@/app/components/footer/footer';
4+
import { motion } from 'framer-motion';
5+
import { Skeleton } from '@/app/components/ui/skeleton';
6+
import { cn } from '@/lib/utils';
7+
import { Suspense } from 'react';
8+
import { SITE_NAME } from '@/lib/constants';
9+
import { GlowingText } from '@/app/components/reusables/content';
10+
import NextLink from 'next/link';
11+
12+
const FrontEnd = [
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-sm 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+
<motion.div
62+
animate={{
63+
opacity: 1,
64+
x: 0,
65+
}}
66+
initial={{
67+
opacity: 0,
68+
x: 20,
69+
}}
70+
transition={{
71+
duration: 0.2,
72+
ease: 'easeInOut',
73+
}}
74+
className="mx-auto w-full px-5 max-w-[1065px] brightness-90"
75+
>
76+
<Suspense fallback={<Skeleton />}>
77+
<div className="relative">
78+
<img
79+
className="rounded-3xl"
80+
alt="niko"
81+
src={PUBLIC_BLOG_IMAGES_SOURCE + 'winston-wolf.png'}
82+
/>
83+
<div className="absolute bottom-4 left-4 text-white opacity-40 font-bold text-sm">
84+
Pulp Fiction (1994) by Quentin Tarantino
85+
</div>
86+
</div>
87+
</Suspense>
88+
</motion.div>
89+
<div className="flex flex-col items-center justify-center my-7 md:mt-20">
90+
<motion.h2
91+
viewport={{ once: true }} // only run once per load
92+
whileInView={{
93+
opacity: 1,
94+
scale: 1,
95+
}}
96+
initial={{
97+
opacity: 0,
98+
scale: 0.7,
99+
}}
100+
transition={{
101+
duration: 0.2,
102+
ease: 'easeInOut',
103+
}}
104+
className="text-center italic text-2xl md:text-3xl font-bold dimmed-4"
105+
>
106+
- &quot;Hi, I&apos;m Winston Wolf, I solve problems&quot;
107+
</motion.h2>
108+
</div>
109+
<div className="flex flex-col items-center justify-center gap-6 mt-8 md:mt-20">
110+
<Card title="">
111+
<p>
112+
I&apos;m a software developer and technical educator, and I do work
113+
for hire. <br />
114+
Over the past 7 years I&apos;ve had the privilge to collaborate with
115+
numerous individuals, teams and startups worldwide, to build, scale,
116+
and lead software projects.
117+
</p>
118+
</Card>
119+
<Card title="">
120+
<p>
121+
You can learn more about me from my blogs than I can convey here.
122+
<br /> I believe in
123+
<Link href="/blog/tag/quality" name="quality" /> code,
124+
<Link href="/blog/tag/skill-issues" name="high-performing" />
125+
teams, and effective
126+
<Link href="/blog/tag/management" name="management" />. And my
127+
services are aimed at enhancing these aspects for my clients.
128+
</p>
129+
</Card>
130+
<MajorHeading title="Stack" />
131+
<Card title="">
132+
<p>
133+
While I have experience with many technologies, I specialize and
134+
work mostly in Python and TypeScript, with a heavy focus on
135+
everything web related (HTTP, gRPC, GraphQL, microservices,
136+
containers, cloud architecture...)
137+
</p>
138+
</Card>
139+
<MinorHeading title="A wise man once said" />
140+
<Card title="">
141+
<p>
142+
<span className="italic">
143+
&quot;Before you learn an ephemeral web framework, learn HTTP
144+
instead, that way you have learned every web framework to ever
145+
exist&quot;
146+
</span>
147+
</p>
148+
</Card>
149+
<Card title="">
150+
<p>
151+
Frameworks and libraries don&apos;t matter they come and go.
152+
Fundamentals are key. But if you&apos;re interested in knowing the
153+
exact tools I use you can check out my
154+
<Link href="/blog/tag/management" name="cv" /> (it&apos;s too long),
155+
or, you might want to check out my
156+
<Link href="/blog/tag/management" name="resume" /> to get a glimpse
157+
instead. Speaking of tools
158+
</p>
159+
</Card>
160+
<MajorHeading title="About The Website" />
161+
<Card title="">
162+
<p>
163+
<code>{SITE_NAME}</code> is open{' '}
164+
<Link href="/blog/tag/management" name="source" /> and made with the
165+
following technologies and a sprinkle of creativity
166+
</p>
167+
</Card>
168+
<Card title="">
169+
<div className="flex flex-wrap justify-center items-center gap-[0.625rem] text-sm dimmed-4">
170+
{FrontEnd.map((tech) => (
171+
<span
172+
key={tech}
173+
className="relative rounded-full px-2 py-1 border border-white/10"
174+
>
175+
{tech}
176+
</span>
177+
))}
178+
</div>
179+
</Card>
180+
</div>
181+
<div className="mt-10"></div>
182+
<Footer></Footer>
183+
</>
184+
);
185+
}
186+
187+
export const BaseHeading: React.FC<React.HTMLProps<HTMLHeadingElement>> = (
188+
props
189+
) => {
190+
const { className, children, ...otherProps } = props;
191+
192+
return (
193+
<div {...otherProps}>
194+
<motion.h2
195+
animate={{
196+
opacity: 1,
197+
x: 0,
198+
}}
199+
initial={{
200+
opacity: 0,
201+
x: -30,
202+
}}
203+
transition={{
204+
duration: 0.2,
205+
ease: 'easeInOut',
206+
}}
207+
className={cn(className)}
208+
>
209+
{children}
210+
</motion.h2>
211+
</div>
212+
);
213+
};
214+
const MinorHeading = ({ title }: { title: string }) => {
215+
return (
216+
<BaseHeading className="glows-dimmed dimmed-4 text-1xl font-bold">
217+
{title}
218+
</BaseHeading>
219+
);
220+
};
221+
222+
const MajorHeading = ({ title }: { title: string }) => {
223+
return (
224+
<BaseHeading className=" glows-dimmed dimmed-4 text-2xl font-bold">
225+
{title}
226+
</BaseHeading>
227+
);
228+
};
229+
230+
const Link = ({ href, name }: { href: string; name: string }) => {
231+
return (
232+
<NextLink href={href}>
233+
<GlowingText>{name}</GlowingText>
234+
</NextLink>
235+
);
236+
};

‎src/app/(pages)/services/page.tsx‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -47,11 +47,10 @@ export default function Component() {
4747
className="dimmed-1 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed"
4848
>
4949
If you use my
50-
<GlowingText className="underline">stack</GlowingText>
51-
I&apos;m here to help. From architecting scalable APIs and
52-
designing beautiful user interfaces to writing quality code,
53-
I&apos;ve got the skills and experience to bring your ideas to
54-
life.
50+
<GlowingText className="underline">stack</GlowingText>I got
51+
you. From architecting scalable APIs and designing beautiful
52+
user interfaces to quality code, I&apos;ve got the skills and
53+
experience to bring your ideas to life.
5554
</motion.p>
5655
</div>
5756
</div>
@@ -78,13 +77,12 @@ export default function Component() {
7877
Consulting
7978
</h3>
8079
<p className="text-center md:text-base/relaxed dimmed-1">
81-
Invite me to become an extension of your team. Working
82-
directly with you on a daily basis, from technical advice,
83-
code
80+
Code
8481
<Link href="/services/code-audits">
85-
<GlowingText>audits</GlowingText>
82+
<GlowingText>audits,</GlowingText>
8683
</Link>
87-
to development
84+
, team guidance, bug hunting, testing, security and best
85+
practices recommendations, anything Python and TypeScript
8886
</p>
8987
</div>
9088
</div>
@@ -96,8 +94,11 @@ export default function Component() {
9694
</h3>
9795
<p className="text-center md:text-base/relaxed dimmed-1">
9896
Book me for both on-site and virtual presentations, training
99-
and coaching to share my expertise and domain knowledge with
100-
your team.
97+
and coaching to share my
98+
<Link href="/blog/tag/skill-issues">
99+
<GlowingText>skills</GlowingText>
100+
</Link>
101+
and domain knowledge with your team.
101102
</p>
102103
</div>
103104
</div>

‎src/app/(pages)/w/page.tsx‎

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

‎src/app/(pages)/z/page.tsx‎

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

‎src/lib/constants.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { pub, nextJS } from '@/lib/env';
2+
import { getSiteName } from './funcs/site-name';
23
export const BLOG_CONTENT_PATH = '/public/blogs';
34
export const BUSINESS_CONTENT_PATH = '/public/services';
45
export const BLOG_URI = '/blog';
@@ -18,3 +19,5 @@ export const GPG_PUBLIC_KEY_EXTERNAL_URL = 'https://github.com/ashgw.gpg';
1819
export const GPG_PUBLIC_KEY_INTERNAL_URL = SITE_URL + DEFAULT_API_URI + '/gpg';
1920
export const PUBLIC_BLOG_IMAGES_SOURCE =
2021
'https://ashgw-blog-public-images.s3.us-east-2.amazonaws.com/';
22+
23+
export const SITE_NAME = getSiteName(pub.SITE_URL_PROD);

‎src/lib/env.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export const nextJS = {
1313
};
1414

1515
export const pub = {
16-
SITE_URL_PROD: 'http://localhost:3000',
16+
SITE_URL_PROD: 'https://ashgw.me',
1717
SITE_URL_DEV: 'http://localhost:3000',
1818
EMAIL: process.env.EMAIL as string,
1919
};

0 commit comments

Comments
 (0)