Skip to content

Commit 89020d3

Browse files
ThomasJButlerThomasJButler
committed
feat: CSS improvements and performance optimizations 🎨
- Fixed pink/magenta text colors throughout site (now using proper CSS variables) - Added comprehensive shadow system and glassmorphism effects - Removed infinite animations causing performance issues - Reduced box-shadow blur radius for better GPU performance - Removed backdrop-filter from cards to improve frame rates - Converted 'View Galleries' text to styled button - Removed unnecessary padding/shadow effects from intro section - Implemented modern floating labels for contact form - Added anime.js card animations for smooth, performant effects - Fixed critical page loading issue with CSS fallback - Added professional utility classes and micro-interactions - Optimized overall performance while maintaining Matrix aesthetic
1 parent ada63d0 commit 89020d3

14 files changed

Lines changed: 785 additions & 115 deletions

‎contact.html‎

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,16 @@
1010
visibility: hidden;
1111
opacity: 0;
1212
}
13+
/* Fallback to show content after 2 seconds */
14+
body {
15+
animation: showFallback 2s forwards;
16+
}
17+
@keyframes showFallback {
18+
to {
19+
visibility: visible;
20+
opacity: 1;
21+
}
22+
}
1323
.page-loader {
1424
position: fixed;
1525
top: 0;
@@ -27,6 +37,7 @@
2737
<!-- CSS and libraries loaded via JavaScript module -->
2838
<script type="module" src="/src/js/main-page.js"></script>
2939
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
40+
<link rel="stylesheet" href="/src/css/contact-modern.css">
3041
</head>
3142
<body class="contact">
3243
<div id="matrix">
@@ -72,25 +83,25 @@ <h3>Thanks for your message!</h3>
7283
<p>I'll get back to you soon.</p>
7384
</div>
7485
<form id="contact-form" action="https://formspree.io/f/xeoeenqv" method="POST">
75-
<label>
76-
Name:
77-
<input type="text" name="name" required>
78-
</label>
86+
<div class="form-group">
87+
<input type="text" name="name" id="name" placeholder=" " required>
88+
<label for="name">Name</label>
89+
</div>
7990

80-
<label>
81-
Email:
82-
<input type="email" name="email" required>
83-
</label>
91+
<div class="form-group">
92+
<input type="email" name="email" id="email" placeholder=" " required>
93+
<label for="email">Email</label>
94+
</div>
8495

85-
<label>
86-
Message:
87-
<textarea name="message" required></textarea>
88-
</label>
96+
<div class="form-group">
97+
<textarea name="message" id="message" placeholder=" " rows="5" required></textarea>
98+
<label for="message">Message</label>
99+
</div>
89100

90-
<button type="submit" class="btn-contact-us">
91-
<i class="fas fa-envelope"></i>
92-
Send Message
93-
</button>
101+
<button type="submit" class="btn-submit-modern">
102+
<i class="fas fa-envelope"></i>
103+
Send Message
104+
</button>
94105
</form>
95106
</div>
96107
</section>

‎index.html‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,16 @@
1010
visibility: hidden;
1111
opacity: 0;
1212
}
13+
/* Fallback to show content after 2 seconds */
14+
body {
15+
animation: showFallback 2s forwards;
16+
}
17+
@keyframes showFallback {
18+
to {
19+
visibility: visible;
20+
opacity: 1;
21+
}
22+
}
1323
.page-loader {
1424
position: fixed;
1525
top: 0;
@@ -75,12 +85,11 @@ <h2 class="introduction-h2">My expertise spans web development, AI integration,
7585
<img src="https://res.cloudinary.com/depqttzlt/image/upload/v1737693677/Usage_Patterns_iw5j6a.png" alt="AiTomatic Usage Pattern">
7686
</div>
7787
<div class="galleries-mobile">
78-
<a href="#galleries" class="galleries-link-mobile">
79-
View Galleries
88+
<a href="#galleries" class="btn-professional glass-card hover-lift">
8089
<i class="fas fa-images"></i>
90+
View Galleries
8191
</a>
8292
</div>
83-
<p>Please explore my portfolio to see how I blend technical skill with artistic vision.</p>
8493
</div>
8594
</section>
8695

@@ -422,7 +431,7 @@ <h3>AiTomatic Suite</h3>
422431

423432
<!-- View All Projects Button -->
424433
<div style="text-align: center; margin-top: 6rem;">
425-
<p style="color: #FF00FF; margin-bottom: 1.5rem;">Explore my complete portfolio with 12+ projects across web development, ML/AI, and games</p>
434+
<p style="color: var(--text-secondary); margin-bottom: 1.5rem;">Explore my complete portfolio with 12+ projects across web development, ML/AI, and games</p>
426435
<a href="projects.html" class="cta-button view-all-projects-btn" style="padding: 1.2rem 2.5rem; font-size: 1.2rem;">
427436
<span class="btn-text">View All Projects</span>
428437
<i class="fas fa-arrow-right" style="margin-left: 0.5rem;"></i>

‎plan.md‎

Lines changed: 58 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -113,44 +113,45 @@ This plan outlines the final refinements needed to achieve a polished v3.0 relea
113113

114114
---
115115

116-
## Phase 6: CSS & Styling Recommendations 🎨
117-
118-
### 6.1 Global Improvements
119-
1. **Consistent Spacing**
120-
- Implement 8px grid system
121-
- Standardize component margins
122-
- Add breathing room to dense sections
123-
124-
2. **Shadow System**
125-
```css
126-
--shadow-sm: 0 2px 4px rgba(0, 255, 0, 0.1);
127-
--shadow-md: 0 4px 8px rgba(0, 255, 0, 0.15);
128-
--shadow-lg: 0 8px 16px rgba(0, 255, 0, 0.2);
129-
--shadow-glow: 0 0 30px rgba(0, 255, 0, 0.3);
130-
```
131116

132-
3. **Micro-interactions**
133-
- Subtle hover states on all interactive elements
134-
- Focus indicators for accessibility
135-
- Active states with slight scale reduction
117+
## Phase 6: CSS & Styling Recommendations ��
136118

137-
### 6.2 Component-specific Enhancements
138-
1. **Navigation**
139-
- Sticky header with backdrop blur
140-
- Progress indicator showing page scroll
141-
- Animated underline for active page
119+
### 6.1 Global Improvements
120+
1. **Consistent Spacing**
121+
- Implement 8px grid system
122+
- Standardize component margins
123+
- Add breathing room to dense sections
142124

143-
2. **Cards**
144-
- Glass-morphism effect
145-
- Animated borders on hover
146-
- Content reveal animations
125+
2. **Shadow System**
126+
```css
127+
--shadow-sm: 0 2px 4px rgba(0, 255, 0, 0.1);
128+
--shadow-md: 0 4px 8px rgba(0, 255, 0, 0.15);
129+
--shadow-lg: 0 8px 16px rgba(0, 255, 0, 0.2);
130+
--shadow-glow: 0 0 30px rgba(0, 255, 0, 0.3);
131+
```
132+
133+
3. **Micro-interactions**
134+
- Subtle hover states on all interactive elements
135+
- Focus indicators for accessibility
136+
- Active states with slight scale reduction
137+
138+
### 6.2 Component-specific Enhancements
139+
1. **Navigation**
140+
- Sticky header with backdrop blur
141+
- Progress indicator showing page scroll
142+
- Animated underline for active page
143+
144+
2. **Cards**
145+
- Glass-morphism effect
146+
- Animated borders on hover
147+
- Content reveal animations
148+
149+
3. **Forms**
150+
- Floating labels
151+
- Real-time validation feedback
152+
- Submit button state changes
147153

148-
3. **Forms**
149-
- Floating labels
150-
- Real-time validation feedback
151-
- Submit button state changes
152154

153-
---
154155

155156
## Phase 7: Performance Optimizations ⚡
156157

@@ -293,5 +294,29 @@ function createMatrixSpinner() {
293294

294295
---
295296

297+
## Phase 9: Portfolio Update System 📝
298+
299+
### 9.1 Update CHANGELOG.md
300+
- Add new entries in the [Unreleased] section or create new version sections
301+
- Follow the existing format with Added/Changed/Fixed/Enhanced categories
302+
- Document all technical changes, features, and fixes chronologically
303+
304+
### 9.2 Update Latest Updates Section
305+
- Modify both HomePage.tsx and index.html for consistency during migration
306+
- Add new project cards following the existing pattern
307+
- Include project image, description, tech tags, and action button
308+
- Ensure visual consistency with the Matrix theme
309+
310+
### 9.3 Consider Creating a Dedicated Updates File
311+
- Create `updates.md` or `devlog.md` for more detailed development notes
312+
- Link to it from the main documentation (README.md, CLAUDE.md)
313+
- Use this for more personal development journey documentation
314+
- Structure with date-based entries and categories
315+
316+
### Implementation Notes:
317+
- Maintain consistency between React and legacy versions during migration
318+
- Follow established formatting patterns in existing update locations
319+
- Keep the Matrix aesthetic in any new update components
320+
- Consider automation opportunities for future update processes
296321

297322
This comprehensive plan will transform your portfolio into a stunning, performant, and memorable experience that showcases both technical skills and creative vision while maintaining the iconic Matrix aesthetic.

‎projects.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,16 @@
1111
visibility: hidden;
1212
opacity: 0;
1313
}
14+
/* Fallback to show content after 2 seconds */
15+
body {
16+
animation: showFallback 2s forwards;
17+
}
18+
@keyframes showFallback {
19+
to {
20+
visibility: visible;
21+
opacity: 1;
22+
}
23+
}
1424
.page-loader {
1525
position: fixed;
1626
top: 0;

‎src/css/base/_typography.css‎

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,9 @@ h1, h2, h3, h4, h5, h6 {
2828
line-height: var(--line-height-tight);
2929
color: var(--matrix-green);
3030
text-shadow: var(--matrix-glow);
31-
margin-bottom: var(--space-md);
31+
margin-bottom: var(--space-lg);
32+
margin-top: var(--space-xl);
33+
letter-spacing: var(--letter-spacing-wide);
3234
}
3335

3436
h1 {
@@ -72,10 +74,11 @@ p {
7274
font-size: var(--font-size-base);
7375
line-height: var(--line-height-relaxed);
7476
letter-spacing: var(--letter-spacing-wide);
75-
color: #FF00FF;
77+
color: var(--text-primary);
7678
margin-bottom: var(--space-md);
77-
font-weight: 500;
78-
font-family: 'Courier New', Courier, monospace;
79+
font-weight: 400;
80+
font-family: var(--font-body);
81+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
7982
}
8083

8184
/* Optimal reading width */
@@ -122,7 +125,8 @@ a:hover {
122125
}
123126

124127
a:active {
125-
color: var(--matrix-magenta);
128+
color: var(--matrix-cyan);
129+
transform: translateY(1px);
126130
}
127131

128132
/* ==========================================================================
@@ -242,7 +246,22 @@ blockquote cite {
242246
.text-muted { color: var(--text-muted); }
243247
.text-green { color: var(--matrix-green); }
244248
.text-cyan { color: var(--matrix-cyan); }
245-
.text-magenta { color: var(--matrix-magenta); }
249+
.text-accent { color: var(--matrix-cyan); } /* Professional accent color */
250+
.text-warning { color: var(--matrix-red); } /* For warnings only */
251+
252+
/* Professional text styles */
253+
.text-professional {
254+
color: var(--text-primary);
255+
line-height: var(--line-height-relaxed);
256+
letter-spacing: var(--letter-spacing-wide);
257+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
258+
}
259+
260+
.text-emphasis {
261+
color: var(--matrix-green);
262+
font-weight: 500;
263+
text-shadow: var(--matrix-glow);
264+
}
246265

247266
/* Matrix glow text effect */
248267
.glow-text {

‎src/css/base/_variables.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,20 @@
9797
--matrix-glow: 0 0 10px var(--matrix-green);
9898
--matrix-glow-intense: 0 0 20px var(--matrix-green);
9999

100+
/* Shadow System - Professional depth with Matrix tint */
101+
--shadow-sm: 0 2px 4px rgba(0, 255, 0, 0.1);
102+
--shadow-md: 0 4px 8px rgba(0, 255, 0, 0.15);
103+
--shadow-lg: 0 8px 16px rgba(0, 255, 0, 0.2);
104+
--shadow-xl: 0 12px 24px rgba(0, 255, 0, 0.25);
105+
--shadow-glow: 0 0 30px rgba(0, 255, 0, 0.3);
106+
--shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.5);
107+
108+
/* Glassmorphism Effects */
109+
--glass-bg: rgba(0, 20, 0, 0.6);
110+
--glass-border: rgba(0, 255, 0, 0.2);
111+
--glass-blur: blur(12px);
112+
--glass-saturate: saturate(180%);
113+
100114
/* Border Radius */
101115
--radius-sm: 4px;
102116
--radius-base: 6px;

‎src/css/components/_cards.css‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,15 @@
2222

2323
.introduction-expertise-card,
2424
.project-card {
25-
background: var(--matrix-dark);
26-
border: 1px solid var(--border-primary);
25+
background: rgba(0, 20, 0, 0.85); /* Solid background for better performance */
26+
/* backdrop-filter removed for performance - using solid background instead */
27+
border: 1px solid var(--glass-border);
2728
border-radius: var(--radius-md);
28-
box-shadow: 0 2px 8px rgba(0, 255, 0, 0.15);
29+
box-shadow: var(--shadow-md);
2930
color: var(--matrix-green);
3031
display: flex;
3132
flex-direction: column;
32-
padding: var(--space-lg);
33+
padding: var(--space-xl);
3334
position: relative;
3435
text-align: center;
3536
transition: all var(--duration-base) var(--ease-out);
@@ -39,9 +40,10 @@
3940
/* Hover Effects */
4041
.introduction-expertise-card:hover,
4142
.project-card:hover {
42-
box-shadow: 0 0 20px rgba(0, 255, 0, 0.4);
43-
transform: translateY(-5px);
44-
border-color: var(--matrix-green);
43+
box-shadow: var(--shadow-lg);
44+
transform: translateY(-4px);
45+
border-color: rgba(0, 255, 0, 0.4);
46+
background: rgba(0, 20, 0, 0.7);
4547
}
4648

4749
/* Card scan line effect on hover */

0 commit comments

Comments
 (0)