style: drop icon slop, swap primary to caramel, kill particles
CI & Lighthouse / test (push) Has been cancelled
CI & Lighthouse / test (push) Has been cancelled
- Remove 8 duplicated generic SVG icons from tech cards - Switch --color-primary from teal (#1D7874) to gold (#D4A574) - Remove particle canvas system (~70 lines JS, canvas element, CSS) - Grain texture + steam now carry atmosphere alone
This commit is contained in:
+1
-1
@@ -12,4 +12,4 @@ screenshot*
|
||||
CROSS_BROWSER_TEST_REPORT.md
|
||||
TESTING_SUMMARY.txt
|
||||
VISUAL_INSPECTION_REPORT.md
|
||||
cross_browser_test.py
|
||||
cross_browser_test.py.pi-lens/
|
||||
|
||||
Vendored
+60
-107
@@ -43,15 +43,14 @@
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
</style>
|
||||
|
||||
</style>
|
||||
|
||||
<script type="module" crossorigin src="/assets/main-DpCfeRNB.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/styles-HyXWe5el.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Scroll Progress Bar -->
|
||||
<div class="scroll-progress" role="progressbar" aria-label="Page scroll progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
|
||||
<!-- Scroll Progress Bar -->
|
||||
<div class="scroll-progress" role="progressbar" aria-label="Page scroll progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
|
||||
<!-- Particle canvas removed -- grain texture + steam carry the atmosphere -->
|
||||
|
||||
@@ -201,108 +200,62 @@
|
||||
<!-- Technologies & Stack Section -->
|
||||
<section id="technologies" class="section-padding">
|
||||
<div class="container">
|
||||
<h2>Technologies & Tools</h2>
|
||||
<div class="row g-4 row-cols-2 row-cols-md-3 row-cols-lg-4">
|
||||
<!-- HTML5 -->
|
||||
<div class="col">
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon-wrapper">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="tech-name">HTML5</h3>
|
||||
<p class="tech-desc">Semantic Markup</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- CSS3 -->
|
||||
<div class="col">
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon-wrapper">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="tech-name">CSS3</h3>
|
||||
<p class="tech-desc">Modern Styling</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- JavaScript -->
|
||||
<div class="col">
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon-wrapper">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M16 18l6-6-6-6"/>
|
||||
<path d="M8 6l-6 6 6 6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="tech-name">JavaScript</h3>
|
||||
<p class="tech-desc">Interactive Logic</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bootstrap -->
|
||||
<div class="col">
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon-wrapper">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 2l9 4.9V17L12 22l-9-4.9V7z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="tech-name">Bootstrap 5</h3>
|
||||
<p class="tech-desc">Responsive UI</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Vite -->
|
||||
<div class="col">
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon-wrapper">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="tech-name">Vite</h3>
|
||||
<p class="tech-desc">Fast Build Tool</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Git -->
|
||||
<div class="col">
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon-wrapper">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="6" y1="3" x2="6" y2="15"></line>
|
||||
<circle cx="18" cy="6" r="3"></circle>
|
||||
<circle cx="6" cy="18" r="3"></circle>
|
||||
<path d="M18 9a9 9 0 0 1-9 9"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="tech-name">Git</h3>
|
||||
<p class="tech-desc">Version Control</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- SEO -->
|
||||
<div class="col">
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon-wrapper">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="tech-name">SEO</h3>
|
||||
<p class="tech-desc">Search Visibility</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Accessibility -->
|
||||
<div class="col">
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon-wrapper">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="5" r="1"></circle>
|
||||
<path d="M12 22V8M5 12H2a10 10 0 0 0 20 0h-3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="tech-name">Accessibility</h3>
|
||||
<p class="tech-desc">Inclusive Design</p>
|
||||
<h2>Technologies & Tools</h2>
|
||||
<div class="row g-4 row-cols-2 row-cols-md-3 row-cols-lg-4">
|
||||
<!-- HTML5 -->
|
||||
<div class="col">
|
||||
<div class="tech-card">
|
||||
<h3 class="tech-name">HTML5</h3>
|
||||
<p class="tech-desc">Semantic Markup</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- CSS3 -->
|
||||
<div class="col">
|
||||
<div class="tech-card">
|
||||
<h3 class="tech-name">CSS3</h3>
|
||||
<p class="tech-desc">Modern Styling</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- JavaScript -->
|
||||
<div class="col">
|
||||
<div class="tech-card">
|
||||
<h3 class="tech-name">JavaScript</h3>
|
||||
<p class="tech-desc">Interactive Logic</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bootstrap -->
|
||||
<div class="col">
|
||||
<div class="tech-card">
|
||||
<h3 class="tech-name">Bootstrap 5</h3>
|
||||
<p class="tech-desc">Responsive UI</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Vite -->
|
||||
<div class="col">
|
||||
<div class="tech-card">
|
||||
<h3 class="tech-name">Vite</h3>
|
||||
<p class="tech-desc">Fast Build Tool</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Git -->
|
||||
<div class="col">
|
||||
<div class="tech-card">
|
||||
<h3 class="tech-name">Git</h3>
|
||||
<p class="tech-desc">Version Control</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- SEO -->
|
||||
<div class="col">
|
||||
<div class="tech-card">
|
||||
<h3 class="tech-name">SEO</h3>
|
||||
<p class="tech-desc">Search Visibility</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Accessibility -->
|
||||
<div class="col">
|
||||
<div class="tech-card">
|
||||
<h3 class="tech-name">Accessibility</h3>
|
||||
<p class="tech-desc">Inclusive Design</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+58
-105
@@ -49,9 +49,8 @@
|
||||
<body>
|
||||
<!-- Scroll Progress Bar -->
|
||||
<div class="scroll-progress" role="progressbar" aria-label="Page scroll progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
|
||||
<!-- Particle Canvas -->
|
||||
<canvas id="particles" aria-hidden="true"></canvas>
|
||||
|
||||
<!-- Particle canvas removed -- grain texture + steam carry the atmosphere -->
|
||||
|
||||
<!-- Decorative Layer (Background Elements) -->
|
||||
<div class="decorative-layer" aria-hidden="true">
|
||||
@@ -201,108 +200,62 @@
|
||||
<div class="container">
|
||||
<h2>Technologies & Tools</h2>
|
||||
<div class="row g-4 row-cols-2 row-cols-md-3 row-cols-lg-4">
|
||||
<!-- HTML5 -->
|
||||
<div class="col">
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon-wrapper">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="tech-name">HTML5</h3>
|
||||
<p class="tech-desc">Semantic Markup</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- CSS3 -->
|
||||
<div class="col">
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon-wrapper">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="tech-name">CSS3</h3>
|
||||
<p class="tech-desc">Modern Styling</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- JavaScript -->
|
||||
<div class="col">
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon-wrapper">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M16 18l6-6-6-6"/>
|
||||
<path d="M8 6l-6 6 6 6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="tech-name">JavaScript</h3>
|
||||
<p class="tech-desc">Interactive Logic</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bootstrap -->
|
||||
<div class="col">
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon-wrapper">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 2l9 4.9V17L12 22l-9-4.9V7z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="tech-name">Bootstrap 5</h3>
|
||||
<p class="tech-desc">Responsive UI</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Vite -->
|
||||
<div class="col">
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon-wrapper">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="tech-name">Vite</h3>
|
||||
<p class="tech-desc">Fast Build Tool</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Git -->
|
||||
<div class="col">
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon-wrapper">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="6" y1="3" x2="6" y2="15"></line>
|
||||
<circle cx="18" cy="6" r="3"></circle>
|
||||
<circle cx="6" cy="18" r="3"></circle>
|
||||
<path d="M18 9a9 9 0 0 1-9 9"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="tech-name">Git</h3>
|
||||
<p class="tech-desc">Version Control</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- SEO -->
|
||||
<div class="col">
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon-wrapper">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="tech-name">SEO</h3>
|
||||
<p class="tech-desc">Search Visibility</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Accessibility -->
|
||||
<div class="col">
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon-wrapper">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="5" r="1"></circle>
|
||||
<path d="M12 22V8M5 12H2a10 10 0 0 0 20 0h-3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="tech-name">Accessibility</h3>
|
||||
<p class="tech-desc">Inclusive Design</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- HTML5 -->
|
||||
<div class="col">
|
||||
<div class="tech-card">
|
||||
<h3 class="tech-name">HTML5</h3>
|
||||
<p class="tech-desc">Semantic Markup</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- CSS3 -->
|
||||
<div class="col">
|
||||
<div class="tech-card">
|
||||
<h3 class="tech-name">CSS3</h3>
|
||||
<p class="tech-desc">Modern Styling</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- JavaScript -->
|
||||
<div class="col">
|
||||
<div class="tech-card">
|
||||
<h3 class="tech-name">JavaScript</h3>
|
||||
<p class="tech-desc">Interactive Logic</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bootstrap -->
|
||||
<div class="col">
|
||||
<div class="tech-card">
|
||||
<h3 class="tech-name">Bootstrap 5</h3>
|
||||
<p class="tech-desc">Responsive UI</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Vite -->
|
||||
<div class="col">
|
||||
<div class="tech-card">
|
||||
<h3 class="tech-name">Vite</h3>
|
||||
<p class="tech-desc">Fast Build Tool</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Git -->
|
||||
<div class="col">
|
||||
<div class="tech-card">
|
||||
<h3 class="tech-name">Git</h3>
|
||||
<p class="tech-desc">Version Control</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- SEO -->
|
||||
<div class="col">
|
||||
<div class="tech-card">
|
||||
<h3 class="tech-name">SEO</h3>
|
||||
<p class="tech-desc">Search Visibility</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Accessibility -->
|
||||
<div class="col">
|
||||
<div class="tech-card">
|
||||
<h3 class="tech-name">Accessibility</h3>
|
||||
<p class="tech-desc">Inclusive Design</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -55,75 +55,8 @@ function initSkillBars() {
|
||||
skillItems.forEach(item => observer.observe(item));
|
||||
}
|
||||
|
||||
// ===== PARTICLE BACKGROUND =====
|
||||
function initParticles() {
|
||||
const canvas = document.getElementById('particles');
|
||||
if (!canvas) return;
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
let particles = [];
|
||||
let animationId;
|
||||
|
||||
function resize() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
}
|
||||
|
||||
class Particle {
|
||||
constructor() {
|
||||
this.x = Math.random() * canvas.width;
|
||||
this.y = Math.random() * canvas.height;
|
||||
this.vx = (Math.random() - 0.5) * 0.3;
|
||||
this.vy = (Math.random() - 0.5) * 0.3;
|
||||
this.radius = Math.random() * 1.5 + 0.5;
|
||||
this.opacity = Math.random() * 0.3 + 0.1;
|
||||
}
|
||||
|
||||
update() {
|
||||
this.x += this.vx;
|
||||
this.y += this.vy;
|
||||
|
||||
if (this.x < 0 || this.x > canvas.width) this.vx *= -1;
|
||||
if (this.y < 0 || this.y > canvas.height) this.vy *= -1;
|
||||
}
|
||||
|
||||
draw() {
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
|
||||
ctx.fillStyle = `rgba(111, 78, 55, ${this.opacity})`;
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
function init() {
|
||||
resize();
|
||||
particles = [];
|
||||
const particleCount = Math.floor((canvas.width * canvas.height) / 15000);
|
||||
for (let i = 0; i < particleCount; i++) {
|
||||
particles.push(new Particle());
|
||||
}
|
||||
}
|
||||
|
||||
function animate() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
particles.forEach(particle => {
|
||||
particle.update();
|
||||
particle.draw();
|
||||
});
|
||||
|
||||
animationId = requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
cancelAnimationFrame(animationId);
|
||||
init();
|
||||
animate();
|
||||
});
|
||||
|
||||
init();
|
||||
animate();
|
||||
}
|
||||
// ===== PARTICLE BACKGROUND (removed) =====
|
||||
// initParticles removed — grain texture + steam carry the atmosphere
|
||||
|
||||
// ===== INTERACTIVE TESTIMONIALS =====
|
||||
function initTestimonials() {
|
||||
@@ -246,7 +179,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
initTypewriter();
|
||||
initScrollProgress();
|
||||
initSkillBars();
|
||||
initParticles();
|
||||
initTestimonials();
|
||||
initParallax();
|
||||
initMetricsCounter();
|
||||
|
||||
+2
-12
@@ -17,7 +17,7 @@
|
||||
--text-body: var(--color-coffee-dark);
|
||||
--bg-surface-rgb: 255, 255, 255;
|
||||
--bg-surface: rgba(var(--bg-surface-rgb), 0.7);
|
||||
--color-primary: var(--color-teal);
|
||||
--color-primary: var(--color-gold);
|
||||
--color-secondary: var(--color-gold);
|
||||
|
||||
--border-subtle: rgba(111, 78, 55, 0.15);
|
||||
@@ -934,17 +934,7 @@ footer a:hover {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/* ===== PARTICLE CANVAS ===== */
|
||||
#particles {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
opacity: 0.6;
|
||||
}
|
||||
/* ===== PARTICLE CANVAS (removed) ===== */
|
||||
|
||||
/* ===== TYPEWRITER EFFECT ===== */
|
||||
.typewriter {
|
||||
|
||||
Reference in New Issue
Block a user