Skip to content

Commit 089657f

Browse files
curleycodercurleycoder
committed
changed the style
1 parent b927660 commit 089657f

6 files changed

Lines changed: 1538 additions & 967 deletions

File tree

‎SKILL.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
care about accessibility, font sizes, color contrast, hearing accessibility, anxiety, responsive design.
2+
3+
Act as a senior full stack developer with 10 years of experience in web development. You have a strong background in both frontend and backend technologies, and you are proficient in various programming languages and frameworks. You have a deep understanding of web development best practices, including accessibility, responsive design, and performance optimization. You are also experienced in working with cross-functional teams and collaborating with designers, product managers, and other developers to deliver high-quality web applications.
4+
5+
You create AI chatbot for businesses to help them automate customer support, generate leads, and improve customer engagement. You have experience in building chatbots using various platforms and technologies, such as Dialogflow, Microsoft Bot Framework, and custom-built solutions using Node.js and Python. You understand the importance of natural language processing (NLP) and machine learning in creating effective chatbots that can understand and respond to user queries accurately.
6+
7+
You care about user experience and strive to create intuitive and user-friendly interfaces. You pay attention to details and ensure that your applications are accessible to all users, regardless of their abilities. You are also mindful of performance and optimize your code to ensure fast load times and smooth interactions.

‎src/app/about/page.js‎

Lines changed: 90 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,27 @@ function FadeIn({ children, delay = 0 }) {
2323
);
2424
}
2525

26+
const storyMilestones = [
27+
{
28+
period: '2014 – 2019',
29+
title: 'Architectural Engineering',
30+
tag: 'Origin',
31+
desc: 'Studied how complex systems are designed and built to work under pressure. Completed 490+ hours of training in design software and IT — building a strong base in problem-solving and technology.',
32+
},
33+
{
34+
period: '2019',
35+
title: 'Moving to Canada',
36+
tag: 'Pivot',
37+
desc: 'Moved to Vancouver — a city with a strong tech industry. The environment pushed me toward tech. Same problem-solving mindset, applied through code.',
38+
},
39+
{
40+
period: '2022 – Now',
41+
title: 'Full-Stack Development',
42+
tag: 'Now',
43+
desc: 'Building full-stack applications from frontend to backend — real projects, team collaboration, and AI tools for businesses. Engineering taught me how to think. Development helps me build.',
44+
},
45+
];
46+
2647
const activities = [
2748
{ icon: FaTableTennis, name: 'Tennis', caption: 'I serve. Sometimes it goes in.' },
2849
{ icon: FaBicycle, name: 'Stanley Park biking', caption: 'Seawall laps. One speed: fast enough.' },
@@ -71,18 +92,6 @@ const sectionLabel = {
7192
display: 'block',
7293
};
7394

74-
const iconBox = {
75-
width: '32px',
76-
height: '32px',
77-
borderRadius: '0.5rem',
78-
background: 'rgba(109,40,217,0.1)',
79-
border: '1px solid rgba(109,40,217,0.18)',
80-
display: 'flex',
81-
alignItems: 'center',
82-
justifyContent: 'center',
83-
flexShrink: 0,
84-
color: 'var(--accent)',
85-
};
8695

8796
export default function AboutPage() {
8897
return (
@@ -123,6 +132,75 @@ export default function AboutPage() {
123132
</div>
124133
</section>
125134

135+
{/* Story Timeline */}
136+
<section style={{ padding: '2.5rem 0' }}>
137+
<div className="container" style={{ maxWidth: '680px' }}>
138+
<FadeIn>
139+
<span style={sectionLabel}>My Story</span>
140+
</FadeIn>
141+
<div style={{ position: 'relative', paddingLeft: '1.75rem' }}>
142+
<div
143+
style={{
144+
position: 'absolute',
145+
left: 0,
146+
top: '8px',
147+
bottom: '8px',
148+
width: '1px',
149+
background: 'linear-gradient(to bottom, var(--primary), rgba(109,40,217,0.08))',
150+
}}
151+
/>
152+
{storyMilestones.map((m, i) => (
153+
<FadeIn key={i} delay={i * 0.07}>
154+
<div style={{ position: 'relative', marginBottom: i < storyMilestones.length - 1 ? '2.25rem' : 0 }}>
155+
<div
156+
style={{
157+
position: 'absolute',
158+
left: '-1.75rem',
159+
top: '5px',
160+
width: '9px',
161+
height: '9px',
162+
borderRadius: '50%',
163+
background: i === storyMilestones.length - 1 ? 'var(--primary)' : 'var(--background)',
164+
border: '2px solid var(--primary)',
165+
transform: 'translateX(-4px)',
166+
boxShadow: i === storyMilestones.length - 1 ? '0 0 10px var(--primary-glow)' : 'none',
167+
}}
168+
/>
169+
<span
170+
style={{
171+
fontSize: '0.68rem',
172+
color: 'var(--muted)',
173+
fontFamily: "'JetBrains Mono', monospace",
174+
letterSpacing: '0.05em',
175+
}}
176+
>
177+
{m.period}
178+
</span>
179+
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', margin: '0.25rem 0 0.4rem' }}>
180+
<h3
181+
style={{
182+
fontSize: '0.92rem',
183+
fontWeight: '700',
184+
color: 'var(--foreground)',
185+
fontFamily: "'JetBrains Mono', monospace",
186+
}}
187+
>
188+
{m.title}
189+
</h3>
190+
<span className="tag" style={{ fontSize: '0.6rem', padding: '0.1rem 0.45rem' }}>
191+
{m.tag}
192+
</span>
193+
</div>
194+
<p style={{ color: 'var(--muted)', fontSize: '0.82rem', lineHeight: 1.65 }}>
195+
{m.desc}
196+
</p>
197+
</div>
198+
</FadeIn>
199+
))}
200+
</div>
201+
</div>
202+
</section>
203+
126204
{/* Outside the code */}
127205
<section style={{ padding: '2.5rem 0' }}>
128206
<div className="container" style={{ maxWidth: '680px' }}>

0 commit comments

Comments
 (0)