Skip to content

Commit 0c3b370

Browse files
coding-cryingcoding-crying
committed
Professional site redesign - improve contrast and remove unprofessional elements
- Fix Get In Touch button visibility with white text and border - Improve footer contrast with dark background and white text - Remove animated skill bars and replace with clean skills grid - Update experience section with recent AI/ML work - Remove outdated restaurant host position - Focus on tech-relevant experience and achievements - Improve overall color contrast and professional appearance - Streamline design for corporate-friendly presentation
1 parent 024ac5f commit 0c3b370

File tree

3 files changed

+93
-191
lines changed

3 files changed

+93
-191
lines changed

‎about.html‎

Lines changed: 56 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -80,119 +80,54 @@ <h2>Who Am I?</h2>
8080

8181
<section class="skills-detailed">
8282
<div class="container">
83-
<h2>Core Competencies</h2>
83+
<h2>Technical Skills</h2>
8484

85-
<div class="skills-section">
86-
<h3>Artificial Intelligence & Machine Learning</h3>
87-
<div class="skill-bars">
88-
<div class="skill-item">
89-
<div class="skill-name">Python / TensorFlow / Scikit-learn</div>
90-
<div class="skill-bar">
91-
<div class="skill-progress" data-width="95%"></div>
92-
</div>
93-
</div>
94-
<div class="skill-item">
95-
<div class="skill-name">AI Agentic Architecting</div>
96-
<div class="skill-bar">
97-
<div class="skill-progress" data-width="90%"></div>
98-
</div>
99-
</div>
100-
<div class="skill-item">
101-
<div class="skill-name">Computer Vision / NLP</div>
102-
<div class="skill-bar">
103-
<div class="skill-progress" data-width="85%"></div>
104-
</div>
105-
</div>
106-
<div class="skill-item">
107-
<div class="skill-name">Research & Publication</div>
108-
<div class="skill-bar">
109-
<div class="skill-progress" data-width="80%"></div>
110-
</div>
111-
</div>
85+
<div class="skills-grid">
86+
<div class="skill-category">
87+
<h4>AI & Machine Learning</h4>
88+
<ul>
89+
<li>Python / TensorFlow / PyTorch</li>
90+
<li>Scikit-learn / NumPy / Pandas</li>
91+
<li>AI Agentic Architecting</li>
92+
<li>Computer Vision / NLP</li>
93+
<li>Research & Publication</li>
94+
<li>Neo4j Graph Databases</li>
95+
<li>RAG Systems Development</li>
96+
</ul>
11297
</div>
113-
</div>
11498

115-
<div class="skills-section">
116-
<h3>Design & Engineering</h3>
117-
<div class="skill-bars">
118-
<div class="skill-item">
119-
<div class="skill-name">SolidWorks CAD Design</div>
120-
<div class="skill-bar">
121-
<div class="skill-progress" data-width="90%"></div>
122-
</div>
123-
</div>
124-
<div class="skill-item">
125-
<div class="skill-name">3D Printing / Laser Cutting</div>
126-
<div class="skill-bar">
127-
<div class="skill-progress" data-width="85%"></div>
128-
</div>
129-
</div>
130-
<div class="skill-item">
131-
<div class="skill-name">Rapid Prototyping</div>
132-
<div class="skill-bar">
133-
<div class="skill-progress" data-width="90%"></div>
134-
</div>
135-
</div>
136-
<div class="skill-item">
137-
<div class="skill-name">Product Design & Innovation</div>
138-
<div class="skill-bar">
139-
<div class="skill-progress" data-width="85%"></div>
140-
</div>
141-
</div>
99+
<div class="skill-category">
100+
<h4>Web Development</h4>
101+
<ul>
102+
<li>Next.js / React / TypeScript</li>
103+
<li>Node.js / FastAPI</li>
104+
<li>WebRTC / Real-time Communication</li>
105+
<li>Docker / Containerization</li>
106+
<li>Redis / Caching Systems</li>
107+
<li>RESTful API Design</li>
108+
</ul>
142109
</div>
143-
</div>
144110

145-
<div class="skills-section">
146-
<h3>Business & Consulting</h3>
147-
<div class="skill-bars">
148-
<div class="skill-item">
149-
<div class="skill-name">Tech Consulting & Support</div>
150-
<div class="skill-bar">
151-
<div class="skill-progress" data-width="95%"></div>
152-
</div>
153-
</div>
154-
<div class="skill-item">
155-
<div class="skill-name">Client Relationship Management</div>
156-
<div class="skill-bar">
157-
<div class="skill-progress" data-width="90%"></div>
158-
</div>
159-
</div>
160-
<div class="skill-item">
161-
<div class="skill-name">Product Development</div>
162-
<div class="skill-bar">
163-
<div class="skill-progress" data-width="85%"></div>
164-
</div>
165-
</div>
166-
<div class="skill-item">
167-
<div class="skill-name">Patent Consultation</div>
168-
<div class="skill-bar">
169-
<div class="skill-progress" data-width="75%"></div>
170-
</div>
171-
</div>
111+
<div class="skill-category">
112+
<h4>Design & Engineering</h4>
113+
<ul>
114+
<li>SolidWorks CAD Design</li>
115+
<li>3D Printing / Laser Cutting</li>
116+
<li>Rapid Prototyping</li>
117+
<li>Product Design & Innovation</li>
118+
<li>Patent Design & Documentation</li>
119+
</ul>
172120
</div>
173-
</div>
174121

175-
<div class="skills-section">
176-
<h3>Technical Systems</h3>
177-
<div class="skill-bars">
178-
<div class="skill-item">
179-
<div class="skill-name">React / Full Stack Development</div>
180-
<div class="skill-bar">
181-
<div class="skill-progress" data-width="80%"></div>
182-
</div>
183-
</div>
184-
<div class="skill-item">
185-
<div class="skill-name">Docker / Linux Systems</div>
186-
<div class="skill-bar">
187-
<div class="skill-progress" data-width="85%"></div>
188-
</div>
189-
</div>
190-
<div class="skill-item">
191-
<div class="skill-name">Cybersecurity & Penetration Testing</div>
192-
<div class="skill-bar">
193-
<div class="skill-progress" data-width="75%"></div>
194-
</div>
195-
</div>
122+
<div class="skill-category">
123+
<h4>Business & Consulting</h4>
124+
<ul>
125+
<li>Tech Consulting & Support</li>
126+
<li>Client Relations & Communication</li>
127+
<li>Patent Consultation</li>
128+
<li>Cybersecurity Advisory</li>
129+
<li>Project Management</li>
130+
</ul>
196131
</div>
197132
</div>
198133
</div>
@@ -237,6 +172,17 @@ <h3>High School Diploma</h3>
237172

238173
<div class="experience">
239174
<h2>Experience</h2>
175+
<div class="timeline-item">
176+
<h3>AI Research & Development</h3>
177+
<p class="company">Independent Projects</p>
178+
<p class="date">2023 - Present</p>
179+
<p class="description">
180+
Developed comprehensive AI-powered language learning platform with Neo4j graph database
181+
and real-time voice interaction. Created federated learning systems for privacy-preserving
182+
recommendations. Built local advertisement content generation systems using multi-modal AI.
183+
</p>
184+
</div>
185+
240186
<div class="timeline-item">
241187
<h3>Sole Proprietor</h3>
242188
<p class="company">Silicon Valley Tech Help (SVTH)</p>
@@ -249,23 +195,13 @@ <h3>Sole Proprietor</h3>
249195
</div>
250196

251197
<div class="timeline-item">
252-
<h3>Designer / 3D Modeler</h3>
198+
<h3>Product Designer & Patent Holder</h3>
253199
<p class="company">Purple Mountain Innovations</p>
254200
<p class="date">2018 - Mar 2022</p>
255201
<p class="description">
256-
Designed innovative casterboard products with focus on
257-
manufacturability. Consulted on patent prosecution and
258-
developed rapid prototyping expertise.
259-
</p>
260-
</div>
261-
262-
<div class="timeline-item">
263-
<h3>Host</h3>
264-
<p class="company">Old Port Lobster Shack</p>
265-
<p class="date">Jan 2021 - Apr 2022</p>
266-
<p class="description">
267-
Managed front-of-house operations and customer experience
268-
in high-pressure service environment.
202+
Led CAD design and created all patent drawings for innovative braking system
203+
for wheeled recreational devices. Successfully obtained U.S. Patent #11,220,244.
204+
Developed rapid prototyping and manufacturing expertise.
269205
</p>
270206
</div>
271207
</div>

‎css/style.css‎

Lines changed: 35 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -170,17 +170,17 @@ header {
170170

171171
.btn-secondary {
172172
background: transparent;
173-
color: var(--primary-color) !important;
174-
border: 2px solid var(--primary-color);
173+
color: white !important;
174+
border: 2px solid white;
175175
}
176176

177177
.btn-secondary:hover {
178-
background: var(--primary-color);
178+
background: white;
179179
color: var(--bg-color) !important;
180180
}
181181

182182
.btn-secondary:visited {
183-
color: var(--primary-color) !important;
183+
color: white !important;
184184
}
185185

186186
.btn-outline {
@@ -433,35 +433,44 @@ header {
433433
color: var(--primary-color);
434434
}
435435

436-
.skill-bars {
436+
.skills-grid {
437437
display: grid;
438+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
438439
gap: 1.5rem;
439440
}
440441

441-
.skill-item {
442+
.skill-category {
442443
background: var(--bg-card);
443-
padding: 1rem;
444+
padding: 1.5rem;
444445
border-radius: var(--border-radius);
445446
border: 1px solid var(--border-color);
446447
}
447448

448-
.skill-name {
449-
font-weight: 600;
450-
margin-bottom: 0.5rem;
449+
.skill-category h4 {
450+
color: var(--primary-color);
451+
margin-bottom: 1rem;
452+
font-size: 1.1rem;
451453
}
452454

453-
.skill-bar {
454-
background: var(--border-color);
455-
height: 4px;
456-
border-radius: 2px;
457-
overflow: hidden;
455+
.skill-category ul {
456+
list-style: none;
457+
padding: 0;
458458
}
459459

460-
.skill-progress {
461-
height: 100%;
462-
background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
463-
border-radius: 2px;
464-
transition: width 2s ease;
460+
.skill-category li {
461+
padding: 0.5rem 0;
462+
color: var(--text-light);
463+
border-bottom: 1px solid var(--border-color);
464+
}
465+
466+
.skill-category li:last-child {
467+
border-bottom: none;
468+
}
469+
470+
.skill-category li:before {
471+
content: "▸ ";
472+
color: var(--primary-color);
473+
font-weight: bold;
465474
}
466475

467476
/* Education and Experience */
@@ -978,10 +987,11 @@ header {
978987

979988
/* Footer */
980989
footer {
981-
background: var(--text-color);
982-
color: white;
990+
background: var(--bg-secondary);
991+
color: var(--text-color);
983992
padding: 2rem 0;
984993
text-align: center;
994+
border-top: 1px solid var(--border-color);
985995
}
986996

987997
footer .container {
@@ -998,13 +1008,13 @@ footer .container {
9981008
}
9991009

10001010
.social-links a {
1001-
color: var(--text-light);
1011+
color: var(--text-color);
10021012
text-decoration: none;
10031013
transition: var(--transition);
10041014
}
10051015

10061016
.social-links a:hover {
1007-
color: var(--link-hover);
1017+
color: var(--primary-color);
10081018
}
10091019

10101020
/* Responsive Design */
@@ -1094,19 +1104,4 @@ footer .container {
10941104
}
10951105
}
10961106

1097-
/* Animation for skill bars */
1098-
@keyframes fillSkill {
1099-
from {
1100-
width: 0;
1101-
}
1102-
to {
1103-
width: var(--skill-width);
1104-
}
1105-
}
1106-
1107-
.skill-progress[data-width="90%"] { width: 90%; }
1108-
.skill-progress[data-width="85%"] { width: 85%; }
1109-
.skill-progress[data-width="95%"] { width: 95%; }
1110-
.skill-progress[data-width="80%"] { width: 80%; }
1111-
.skill-progress[data-width="75%"] { width: 75%; }
1112-
.skill-progress[data-width="70%"] { width: 70%; }
1107+
/* Removed skill bar animations for professional appearance */

‎js/script.js‎

Lines changed: 2 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,7 @@ document.addEventListener('DOMContentLoaded', function() {
1313
// Contact form handling
1414
initContactForm();
1515

16-
// Skill bar animations
17-
initSkillBars();
16+
// Skill bar animations removed for professional appearance
1817

1918
// Scroll animations
2019
initScrollAnimations();
@@ -210,35 +209,7 @@ function initContactForm() {
210209
});
211210
}
212211

213-
// Skill bar animations
214-
function initSkillBars() {
215-
const skillBars = document.querySelectorAll('.skill-progress');
216-
217-
if (skillBars.length === 0) return;
218-
219-
const animateSkillBars = () => {
220-
skillBars.forEach(bar => {
221-
const rect = bar.getBoundingClientRect();
222-
const isVisible = rect.top >= 0 && rect.bottom <= window.innerHeight;
223-
224-
if (isVisible && !bar.classList.contains('animated')) {
225-
bar.classList.add('animated');
226-
const width = bar.dataset.width;
227-
bar.style.width = '0%';
228-
229-
setTimeout(() => {
230-
bar.style.transition = 'width 2s ease-out';
231-
bar.style.width = width;
232-
}, 100);
233-
}
234-
});
235-
};
236-
237-
// Check on scroll
238-
window.addEventListener('scroll', animateSkillBars);
239-
// Check on load
240-
animateSkillBars();
241-
}
212+
// Skill bar animations removed for professional appearance
242213

243214
// Scroll animations
244215
function initScrollAnimations() {

0 commit comments

Comments
 (0)