Skip to content

Commit c8cf470

Browse files
SoeukBondol-aiSoeukBondol-ai
committed
Add bg-remove-bg
1 parent 824c8f7 commit c8cf470

10 files changed

Lines changed: 3177 additions & 907 deletions

File tree

‎src/components/Contact.astro‎

Lines changed: 246 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
---
2+
23
---
4+
35
<section class="contact" id="contact">
46
<div class="contact-inner">
57
<div class="sec-eye reveal">
@@ -11,14 +13,14 @@
1113
<div class="contact-layout">
1214
<div class="cl reveal">
1315
<h2 class="ct-big">
14-
LET'S<br/>
15-
<span class="stroke">BUILD</span><br/>
16+
LET'S<br />
17+
<span class="stroke">BUILD</span><br />
1618
<em>SOMETHING.</em>
1719
</h2>
1820
<p class="ct-desc">
19-
Open to data science roles, ML consulting, freelance projects,
20-
and interesting collaborations. Based in Cambodia — available remotely worldwide.
21-
I reply to everything.
21+
Open to data science roles, ML consulting, freelance projects, and
22+
interesting collaborations. Based in Cambodia — available remotely
23+
worldwide. I reply to everything.
2224
</p>
2325
<a href="mailto:soeukbondolcc@gmail.com" class="email-cta">
2426
<span class="ec-label font-mono">Send me an email</span>
@@ -29,11 +31,23 @@
2931

3032
<div class="cr reveal" style="transition-delay:0.15s">
3133
<div class="socials">
32-
33-
<a href="https://github.com/SoeukBondol-ai" target="_blank" rel="noopener" class="soc">
34+
<a
35+
href="https://github.com/SoeukBondol-ai"
36+
target="_blank"
37+
rel="noopener"
38+
class="soc"
39+
>
3440
<div class="soc-left">
3541
<div class="soc-ico">
36-
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/></svg>
42+
<svg
43+
width="18"
44+
height="18"
45+
viewBox="0 0 24 24"
46+
fill="currentColor"
47+
><path
48+
d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"
49+
></path></svg
50+
>
3751
</div>
3852
<div>
3953
<div class="soc-name">GitHub</div>
@@ -46,7 +60,16 @@
4660
<a href="mailto:soeukbondolcc@gmail.com" class="soc">
4761
<div class="soc-left">
4862
<div class="soc-ico">
49-
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
63+
<svg
64+
width="18"
65+
height="18"
66+
viewBox="0 0 24 24"
67+
fill="none"
68+
stroke="currentColor"
69+
stroke-width="1.8"
70+
><rect x="2" y="4" width="20" height="16" rx="2"></rect><path
71+
d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg
72+
>
5073
</div>
5174
<div>
5275
<div class="soc-name">Gmail</div>
@@ -55,7 +78,6 @@
5578
</div>
5679
<span class="soc-arr">↗</span>
5780
</a>
58-
5981
</div>
6082

6183
<!-- availability card -->
@@ -65,10 +87,24 @@
6587
<span class="avail-status">Available for opportunities</span>
6688
</div>
6789
<div class="avail-details">
68-
<div class="ad-row"><span class="adk">Type</span><span class="adv">Full-time · Freelance · Contract</span></div>
69-
<div class="ad-row"><span class="adk">Mode</span><span class="adv">Remote worldwide</span></div>
70-
<div class="ad-row"><span class="adk">TZ</span><span class="adv">ICT (UTC+7)</span></div>
71-
<div class="ad-row"><span class="adk">Response</span><span class="adv acid">&lt; 24h</span></div>
90+
<div class="ad-row">
91+
<span class="adk">Type</span><span class="adv"
92+
>Full-time · Freelance · Contract</span
93+
>
94+
</div>
95+
<div class="ad-row">
96+
<span class="adk">Mode</span><span class="adv"
97+
>Remote worldwide</span
98+
>
99+
</div>
100+
<div class="ad-row">
101+
<span class="adk">TZ</span><span class="adv">ICT (UTC+7)</span>
102+
</div>
103+
<div class="ad-row">
104+
<span class="adk">Response</span><span class="adv acid"
105+
>&lt; 24h</span
106+
>
107+
</div>
72108
</div>
73109
</div>
74110
</div>
@@ -77,67 +113,205 @@
77113
</section>
78114

79115
<style>
80-
.contact { position:relative; z-index:1; padding:5rem 1.5rem 6rem; border-top:1px solid var(--border); }
81-
@media(min-width:640px){ .contact{ padding:7rem 2.5rem 7rem; } }
82-
.contact-inner { max-width:1200px; margin:0 auto; }
116+
.contact {
117+
position: relative;
118+
z-index: 1;
119+
padding: 4rem 1.25rem 4.5rem;
120+
border-top: 1px solid var(--border);
121+
}
122+
@media (min-width: 640px) {
123+
.contact {
124+
padding: 5.25rem 2rem 5.5rem;
125+
}
126+
}
127+
.contact-inner {
128+
max-width: 1200px;
129+
margin: 0 auto;
130+
}
83131

84-
.contact-layout {
85-
display:grid; grid-template-columns:1fr; gap:4rem; align-items:start;
86-
}
87-
@media(min-width:900px){ .contact-layout{ grid-template-columns:1fr 1fr; gap:6rem; } }
132+
.contact-layout {
133+
display: grid;
134+
grid-template-columns: 1fr;
135+
gap: 2.5rem;
136+
align-items: start;
137+
}
138+
@media (min-width: 900px) {
139+
.contact-layout {
140+
grid-template-columns: 1fr 1fr;
141+
gap: 3.5rem;
142+
}
143+
}
88144

89-
.ct-big {
90-
font-family:'Bebas Neue',sans-serif;
91-
font-size:clamp(3.5rem,9vw,7.5rem); line-height:0.88; margin-bottom:1.75rem;
92-
}
93-
.stroke { color:transparent; -webkit-text-stroke:2px rgba(232,234,242,0.25); }
94-
.ct-big em { color:var(--acid); font-style:normal; }
95-
.ct-desc { font-size:0.83rem; color:var(--muted); line-height:1.85; margin-bottom:2.5rem; max-width:420px; }
145+
.ct-big {
146+
font-family: "Bebas Neue", sans-serif;
147+
font-size: clamp(3.5rem, 9vw, 7.5rem);
148+
line-height: 0.88;
149+
margin-bottom: 1.75rem;
150+
}
151+
.stroke {
152+
color: transparent;
153+
-webkit-text-stroke: 2px rgba(232, 234, 242, 0.25);
154+
}
155+
.ct-big em {
156+
color: var(--acid);
157+
font-style: normal;
158+
}
159+
.ct-desc {
160+
font-size: 0.83rem;
161+
color: var(--muted);
162+
line-height: 1.85;
163+
margin-bottom: 2.5rem;
164+
max-width: 420px;
165+
}
96166

97-
.email-cta {
98-
display:flex; flex-direction:column; gap:0.4rem;
99-
padding:1.25rem 1.5rem;
100-
border:1px solid rgba(200,255,87,0.25); border-radius:8px;
101-
background:rgba(200,255,87,0.04); text-decoration:none;
102-
transition:background 0.2s, border-color 0.2s; position:relative;
103-
}
104-
.email-cta:hover { background:rgba(200,255,87,0.08); border-color:rgba(200,255,87,0.5); }
105-
.ec-label { font-size:0.56rem; color:var(--muted); letter-spacing:0.12em; text-transform:uppercase; }
106-
.ec-addr { font-size:0.9rem; color:var(--acid); font-family:'JetBrains Mono',monospace; }
107-
.ec-arrow { position:absolute; top:1.25rem; right:1.25rem; color:var(--acid); font-size:1.1rem; }
167+
.email-cta {
168+
display: flex;
169+
flex-direction: column;
170+
gap: 0.4rem;
171+
padding: 1.25rem 1.5rem;
172+
border: 1px solid rgba(200, 255, 87, 0.25);
173+
border-radius: 8px;
174+
background: rgba(200, 255, 87, 0.04);
175+
text-decoration: none;
176+
transition:
177+
background 0.2s,
178+
border-color 0.2s;
179+
position: relative;
180+
}
181+
.email-cta:hover {
182+
background: rgba(200, 255, 87, 0.08);
183+
border-color: rgba(200, 255, 87, 0.5);
184+
}
185+
.ec-label {
186+
font-size: 0.56rem;
187+
color: var(--muted);
188+
letter-spacing: 0.12em;
189+
text-transform: uppercase;
190+
}
191+
.ec-addr {
192+
font-size: 0.9rem;
193+
color: var(--acid);
194+
font-family: "JetBrains Mono", monospace;
195+
}
196+
.ec-arrow {
197+
position: absolute;
198+
top: 1.25rem;
199+
right: 1.25rem;
200+
color: var(--acid);
201+
font-size: 1.1rem;
202+
}
108203

109-
.socials { display:flex; flex-direction:column; gap:0.75rem; margin-bottom:1.25rem; }
110-
.soc {
111-
display:flex; align-items:center; justify-content:space-between;
112-
padding:1rem 1.25rem; background:var(--surface); border:1px solid var(--border2);
113-
border-radius:8px; text-decoration:none; color:var(--ink); transition:all 0.2s;
114-
}
115-
.soc:hover { border-color:rgba(200,255,87,0.25); background:var(--lift); }
116-
.soc-left { display:flex; align-items:center; gap:0.9rem; }
117-
.soc-ico {
118-
width:36px; height:36px; background:var(--lift); border-radius:7px;
119-
display:flex; align-items:center; justify-content:center; color:var(--muted);
120-
transition:color 0.2s;
121-
}
122-
.soc:hover .soc-ico { color:var(--acid); }
123-
.soc-name { font-size:0.75rem; font-weight:500; margin-bottom:0.18rem; }
124-
.soc-sub { font-size:0.58rem; color:var(--muted); }
125-
.soc-arr { color:var(--muted); transition:color 0.2s, transform 0.2s; }
126-
.soc:hover .soc-arr { color:var(--acid); transform:translate(2px,-2px); }
204+
.socials {
205+
display: flex;
206+
flex-direction: column;
207+
gap: 0.75rem;
208+
margin-bottom: 1.25rem;
209+
}
210+
.soc {
211+
display: flex;
212+
align-items: center;
213+
justify-content: space-between;
214+
padding: 1rem 1.25rem;
215+
background: var(--surface);
216+
border: 1px solid var(--border2);
217+
border-radius: 8px;
218+
text-decoration: none;
219+
color: var(--ink);
220+
transition: all 0.2s;
221+
}
222+
.soc:hover {
223+
border-color: rgba(200, 255, 87, 0.25);
224+
background: var(--lift);
225+
}
226+
.soc-left {
227+
display: flex;
228+
align-items: center;
229+
gap: 0.9rem;
230+
}
231+
.soc-ico {
232+
width: 36px;
233+
height: 36px;
234+
background: var(--lift);
235+
border-radius: 7px;
236+
display: flex;
237+
align-items: center;
238+
justify-content: center;
239+
color: var(--muted);
240+
transition: color 0.2s;
241+
}
242+
.soc:hover .soc-ico {
243+
color: var(--acid);
244+
}
245+
.soc-name {
246+
font-size: 0.75rem;
247+
font-weight: 500;
248+
margin-bottom: 0.18rem;
249+
}
250+
.soc-sub {
251+
font-size: 0.58rem;
252+
color: var(--muted);
253+
}
254+
.soc-arr {
255+
color: var(--muted);
256+
transition:
257+
color 0.2s,
258+
transform 0.2s;
259+
}
260+
.soc:hover .soc-arr {
261+
color: var(--acid);
262+
transform: translate(2px, -2px);
263+
}
127264

128-
.avail {
129-
background:var(--surface); border:1px solid var(--border2); border-radius:8px; overflow:hidden;
130-
}
131-
.avail-top {
132-
display:flex; align-items:center; gap:0.6rem;
133-
padding:0.85rem 1.1rem; border-bottom:1px solid var(--border);
134-
background:rgba(200,255,87,0.04);
135-
}
136-
.avail-dot { width:7px; height:7px; border-radius:50%; background:var(--acid); animation:pulse 2s ease infinite; }
137-
.avail-status { font-size:0.6rem; color:var(--acid); letter-spacing:0.1em; text-transform:uppercase; }
138-
.avail-details { padding:1rem 1.1rem; display:flex; flex-direction:column; gap:0.5rem; }
139-
.ad-row { display:flex; gap:1rem; align-items:baseline; }
140-
.adk { font-size:0.56rem; color:var(--muted); width:64px; flex-shrink:0; letter-spacing:0.06em; }
141-
.adv { font-size:0.62rem; color:var(--ink); }
142-
.adv.acid { color:var(--acid); }
265+
.avail {
266+
background: var(--surface);
267+
border: 1px solid var(--border2);
268+
border-radius: 8px;
269+
overflow: hidden;
270+
}
271+
.avail-top {
272+
display: flex;
273+
align-items: center;
274+
gap: 0.6rem;
275+
padding: 0.85rem 1.1rem;
276+
border-bottom: 1px solid var(--border);
277+
background: rgba(200, 255, 87, 0.04);
278+
}
279+
.avail-dot {
280+
width: 7px;
281+
height: 7px;
282+
border-radius: 50%;
283+
background: var(--acid);
284+
animation: pulse 2s ease infinite;
285+
}
286+
.avail-status {
287+
font-size: 0.6rem;
288+
color: var(--acid);
289+
letter-spacing: 0.1em;
290+
text-transform: uppercase;
291+
}
292+
.avail-details {
293+
padding: 1rem 1.1rem;
294+
display: flex;
295+
flex-direction: column;
296+
gap: 0.5rem;
297+
}
298+
.ad-row {
299+
display: flex;
300+
gap: 1rem;
301+
align-items: baseline;
302+
}
303+
.adk {
304+
font-size: 0.56rem;
305+
color: var(--muted);
306+
width: 64px;
307+
flex-shrink: 0;
308+
letter-spacing: 0.06em;
309+
}
310+
.adv {
311+
font-size: 0.62rem;
312+
color: var(--ink);
313+
}
314+
.adv.acid {
315+
color: var(--acid);
316+
}
143317
</style>

0 commit comments

Comments
 (0)