Skip to content

Commit 117147d

Browse files
dconcodconco
authored
Merge pull request #2 from dconco/copilot/fix-d0093464-c62f-42fd-b7d4-7c15256805dc
Add AI Bot section and enhance portfolio with GoLang tech stack
2 parents d1a1124 + c2076fb commit 117147d

File tree

3 files changed

+252
-3
lines changed

3 files changed

+252
-3
lines changed

‎css/style.css‎

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -305,6 +305,188 @@ nav .container {
305305
font-size: 0.8em;
306306
}
307307

308+
/* AI Bot Section */
309+
.ai-bot {
310+
padding: 100px 0;
311+
background:
312+
linear-gradient(rgba(15, 15, 35, 0.95), rgba(26, 26, 62, 0.95)),
313+
url('https://images.unsplash.com/photo-1676299081847-824916de030a?q=80&w=2340&auto=format&fit=crop')
314+
center/cover;
315+
text-align: center;
316+
position: relative;
317+
}
318+
319+
.ai-bot::before {
320+
content: '';
321+
position: absolute;
322+
top: 0;
323+
left: 0;
324+
right: 0;
325+
bottom: 0;
326+
background:
327+
radial-gradient(circle at 30% 40%, rgba(100, 255, 218, 0.1) 0%, transparent 50%),
328+
radial-gradient(circle at 70% 60%, rgba(0, 212, 170, 0.08) 0%, transparent 50%);
329+
pointer-events: none;
330+
}
331+
332+
.ai-bot-content {
333+
max-width: 700px;
334+
margin: 0 auto;
335+
position: relative;
336+
z-index: 2;
337+
}
338+
339+
.ai-bot-card {
340+
background: rgba(26, 26, 62, 0.9);
341+
border-radius: 25px;
342+
padding: 50px 40px;
343+
border: 1px solid rgba(100, 255, 218, 0.2);
344+
position: relative;
345+
overflow: hidden;
346+
transition: all 0.3s ease;
347+
backdrop-filter: blur(10px);
348+
}
349+
350+
.ai-bot-card::before {
351+
content: '';
352+
position: absolute;
353+
top: 0;
354+
left: 0;
355+
right: 0;
356+
height: 4px;
357+
background: linear-gradient(135deg, #25D366, #64ffda);
358+
}
359+
360+
.ai-bot-card:hover {
361+
transform: translateY(-10px);
362+
border-color: rgba(100, 255, 218, 0.4);
363+
box-shadow: 0 25px 50px rgba(37, 211, 102, 0.2);
364+
}
365+
366+
.ai-bot-icon {
367+
width: 80px;
368+
height: 80px;
369+
background: linear-gradient(135deg, #25D366, #128C7E);
370+
border-radius: 50%;
371+
display: flex;
372+
align-items: center;
373+
justify-content: center;
374+
margin: 0 auto 30px;
375+
font-size: 2.5em;
376+
color: white;
377+
animation: pulse 2s infinite;
378+
box-shadow: 0 15px 30px rgba(37, 211, 102, 0.3);
379+
}
380+
381+
@keyframes pulse {
382+
0%, 100% {
383+
transform: scale(1);
384+
box-shadow: 0 15px 30px rgba(37, 211, 102, 0.3);
385+
}
386+
50% {
387+
transform: scale(1.05);
388+
box-shadow: 0 20px 40px rgba(37, 211, 102, 0.4);
389+
}
390+
}
391+
392+
.ai-bot-card h2 {
393+
color: #ccd6f6;
394+
font-size: 2.2em;
395+
margin-bottom: 20px;
396+
line-height: 1.3;
397+
font-weight: 700;
398+
}
399+
400+
.ai-bot-card > p {
401+
color: #8892b0;
402+
font-size: 1.2em;
403+
margin-bottom: 30px;
404+
line-height: 1.6;
405+
}
406+
407+
.ai-bot-features {
408+
display: grid;
409+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
410+
gap: 20px;
411+
margin-bottom: 40px;
412+
}
413+
414+
.feature-item {
415+
display: flex;
416+
align-items: center;
417+
gap: 12px;
418+
color: #8892b0;
419+
font-size: 0.95em;
420+
padding: 15px;
421+
background: rgba(100, 255, 218, 0.05);
422+
border-radius: 12px;
423+
border: 1px solid rgba(100, 255, 218, 0.1);
424+
transition: all 0.3s ease;
425+
}
426+
427+
.feature-item:hover {
428+
background: rgba(100, 255, 218, 0.1);
429+
border-color: rgba(100, 255, 218, 0.2);
430+
transform: translateY(-2px);
431+
}
432+
433+
.feature-item i {
434+
color: #64ffda;
435+
font-size: 1.2em;
436+
min-width: 20px;
437+
}
438+
439+
.btn-whatsapp {
440+
background: linear-gradient(135deg, #25D366, #128C7E);
441+
color: white;
442+
padding: 18px 35px;
443+
border-radius: 50px;
444+
text-decoration: none;
445+
font-weight: 600;
446+
font-size: 1.1em;
447+
display: inline-flex;
448+
align-items: center;
449+
gap: 12px;
450+
transition: all 0.3s ease;
451+
border: 2px solid transparent;
452+
margin-bottom: 25px;
453+
box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3);
454+
}
455+
456+
.btn-whatsapp:hover {
457+
transform: translateY(-3px);
458+
box-shadow: 0 15px 35px rgba(37, 211, 102, 0.4);
459+
background: linear-gradient(135deg, #128C7E, #25D366);
460+
}
461+
462+
.btn-whatsapp i {
463+
font-size: 1.3em;
464+
animation: bounce 2s infinite;
465+
}
466+
467+
@keyframes bounce {
468+
0%, 20%, 50%, 80%, 100% {
469+
transform: translateY(0);
470+
}
471+
40% {
472+
transform: translateY(-5px);
473+
}
474+
60% {
475+
transform: translateY(-3px);
476+
}
477+
}
478+
479+
.ai-bot-cta {
480+
color: #8892b0;
481+
font-size: 0.95em;
482+
line-height: 1.6;
483+
margin-top: 20px;
484+
padding: 20px;
485+
background: rgba(100, 255, 218, 0.05);
486+
border-radius: 12px;
487+
border-left: 4px solid #64ffda;
488+
}
489+
308490
/* Resume Section */
309491
.resume {
310492
padding: 100px 0;
@@ -697,6 +879,30 @@ footer p {
697879
.cta-buttons {
698880
justify-content: center;
699881
}
882+
883+
.ai-bot-card {
884+
padding: 40px 25px;
885+
margin: 0 10px;
886+
}
887+
888+
.ai-bot-card h2 {
889+
font-size: 1.8em;
890+
}
891+
892+
.ai-bot-features {
893+
grid-template-columns: 1fr;
894+
gap: 15px;
895+
}
896+
897+
.feature-item {
898+
padding: 12px;
899+
font-size: 0.9em;
900+
}
901+
902+
.btn-whatsapp {
903+
padding: 16px 30px;
904+
font-size: 1em;
905+
}
700906
}
701907

702908
/* Animations */

‎index.html‎

Lines changed: 45 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
<ul class="nav-links">
3737
<li><a href="#home">Home</a></li>
3838
<li><a href="#about">About</a></li>
39+
<li><a href="#ai-bot">AI Bot</a></li>
3940
<li><a href="#resume">Resume</a></li>
4041
<li><a href="#projects">Projects</a></li>
4142
<li><a href="#contact">Contact</a></li>
@@ -53,8 +54,8 @@ <h1>Hi, I'm <span class="highlight">Dave Conco</span></h1>
5354
</p>
5455
<p>
5556
I build amazing web applications and mobile apps using PHP,
56-
C++, Node.js, and React. I love creating custom frameworks
57-
and tools that make development faster and more enjoyable.
57+
C++, Node.js, and React. I train AI models and created a WhatsApp bot.
58+
I love creating custom frameworks and tools that make development faster and more enjoyable.
5859
</p>
5960
<div class="cta-buttons">
6061
<a href="#projects" class="btn btn-primary"
@@ -109,6 +110,7 @@ <h3>Backend</h3>
109110
<li>PHP & Custom Frameworks</li>
110111
<li>C++ & System Tools</li>
111112
<li>Node.js & Express</li>
113+
<li>GoLang</li>
112114
<li>MySQL & MongoDB</li>
113115
</ul>
114116
</div>
@@ -135,6 +137,47 @@ <h3>Tools & Others</h3>
135137
</div>
136138
</section>
137139

140+
<section id="ai-bot" class="ai-bot">
141+
<div class="container">
142+
<div class="ai-bot-content">
143+
<div class="ai-bot-card">
144+
<div class="ai-bot-icon">
145+
<i class="fab fa-whatsapp"></i>
146+
</div>
147+
<h2>Want to test my AI bot that talks like me? 🚀</h2>
148+
<p>
149+
It's fun, smart, and knows everything about my work, projects, and dev journey.
150+
</p>
151+
<div class="ai-bot-features">
152+
<div class="feature-item">
153+
<i class="fas fa-robot"></i>
154+
<span>Trained on my portfolio & experience</span>
155+
</div>
156+
<div class="feature-item">
157+
<i class="fas fa-lightning-bolt"></i>
158+
<span>Instant responses 24/7</span>
159+
</div>
160+
<div class="feature-item">
161+
<i class="fas fa-brain"></i>
162+
<span>Knows all my projects & skills</span>
163+
</div>
164+
</div>
165+
<a href="https://wa.me/2349064772574?text=Hi%20Dave!%20I%20want%20to%20chat%20with%20your%20AI%20bot"
166+
class="btn btn-whatsapp"
167+
target="_blank"
168+
rel="noopener noreferrer">
169+
<i class="fab fa-whatsapp"></i>
170+
Chat on WhatsApp
171+
</a>
172+
<p class="ai-bot-cta">
173+
⚡ Try it now → Ask me about my projects, frameworks, or even request help on your next idea.<br>
174+
I'll reply instantly (through my bot, but it is me 😉).
175+
</p>
176+
</div>
177+
</div>
178+
</div>
179+
</section>
180+
138181
<section id="resume" class="resume">
139182
<div class="container">
140183
<h2 class="section-title">My Resume</h2>

‎js/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,6 @@ const observer = new IntersectionObserver(entries => {
3636
})
3737
}, observerOptions)
3838

39-
document.querySelectorAll('.project-card, .skill-category').forEach(el => {
39+
document.querySelectorAll('.project-card, .skill-category, .ai-bot-card').forEach(el => {
4040
observer.observe(el)
4141
})

0 commit comments

Comments
 (0)