feat: replace skill bars with service cards, drop metrics banner, singular headings
CI & Lighthouse / test (push) Has been cancelled
CI & Lighthouse / test (push) Has been cancelled
This commit is contained in:
Vendored
+66
-77
@@ -112,7 +112,7 @@
|
|||||||
<div class="d-flex flex-column min-vh-100" style="position: relative;">
|
<div class="d-flex flex-column min-vh-100" style="position: relative;">
|
||||||
|
|
||||||
<!-- About Section -->
|
<!-- About Section -->
|
||||||
<section id="about" class="section-padding">
|
<section id="about" class="section-padding">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2>About Me</h2>
|
<h2>About Me</h2>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
@@ -126,51 +126,72 @@
|
|||||||
|
|
||||||
<!-- Services Section -->
|
<!-- Services Section -->
|
||||||
<section id="services" class="section-padding section-alt">
|
<section id="services" class="section-padding section-alt">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2>Services</h2>
|
<h2>Services</h2>
|
||||||
<div class="row align-items-center">
|
<div class="row g-4 row-cols-1 row-cols-md-2">
|
||||||
<div class="col-lg-8">
|
<div class="col">
|
||||||
<ul class="list-group skill-bars">
|
<div class="card h-100">
|
||||||
<li class="list-group-item skill-item" data-skill="95">
|
<div class="card-body">
|
||||||
<span class="skill-name">Custom Website Development</span>
|
<div class="mb-3 text-primary">
|
||||||
<div class="skill-bar-track">
|
|
||||||
<div class="skill-bar-fill" style="--skill-level: 95%;"></div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item skill-item" data-skill="90">
|
|
||||||
<span class="skill-name">Responsive Design</span>
|
|
||||||
<div class="skill-bar-track">
|
|
||||||
<div class="skill-bar-fill" style="--skill-level: 90%;"></div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item skill-item" data-skill="85">
|
|
||||||
<span class="skill-name">E-commerce Solutions</span>
|
|
||||||
<div class="skill-bar-track">
|
|
||||||
<div class="skill-bar-fill" style="--skill-level: 85%;"></div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item skill-item" data-skill="92">
|
|
||||||
<span class="skill-name">SEO Optimization</span>
|
|
||||||
<div class="skill-bar-track">
|
|
||||||
<div class="skill-bar-fill" style="--skill-level: 92%;"></div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item skill-item" data-skill="98">
|
|
||||||
<span class="skill-name">Website Maintenance</span>
|
|
||||||
<div class="skill-bar-track">
|
|
||||||
<div class="skill-bar-fill" style="--skill-level: 98%;"></div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-4 d-none d-lg-block text-center opacity-75">
|
|
||||||
<!-- Decorative Icon/Illustration placeholder or just empty space for balance -->
|
|
||||||
<svg width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="text-primary">
|
|
||||||
<path d="M18 8h1a4 4 0 0 1 0 8h-1"></path>
|
|
||||||
<path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path>
|
|
||||||
<line x1="6" y1="1" x2="6" y2="4"></line>
|
|
||||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
<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"/>
|
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h5 class="card-title">Custom Website Development</h5>
|
||||||
|
<p class="card-text">Tailored websites built from scratch to match your brand, goals, and user needs.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card h-100">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="mb-3 text-primary">
|
||||||
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h5 class="card-title">Responsive Design</h5>
|
||||||
|
<p class="card-text">Sites that look and function beautifully on every device, from phones to desktops.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card h-100">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="mb-3 text-primary">
|
||||||
|
<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="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h5 class="card-title">E-commerce Solutions</h5>
|
||||||
|
<p class="card-text">Online stores designed to convert visitors into customers with secure checkout.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card h-100">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="mb-3 text-primary">
|
||||||
|
<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>
|
||||||
|
<h5 class="card-title">SEO Optimization</h5>
|
||||||
|
<p class="card-text">Improved visibility on search engines to help clients find you organically.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card h-100">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="mb-3 text-primary">
|
||||||
|
<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="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h5 class="card-title">Website Maintenance</h5>
|
||||||
|
<p class="card-text">Ongoing updates, security patches, and support to keep your site running smoothly.</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -534,43 +555,11 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Metrics Section -->
|
|
||||||
<section id="metrics" class="metrics-banner" aria-label="Performance Metrics">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row g-4 row-cols-2 row-cols-md-4 justify-content-center">
|
|
||||||
<div class="col">
|
|
||||||
<div class="metric-item">
|
|
||||||
<div class="gauge" style="--percent: 98%;" data-score="98"></div>
|
|
||||||
<span class="metric-label">Performance</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="metric-item">
|
|
||||||
<div class="gauge" style="--percent: 100%;" data-score="100"></div>
|
|
||||||
<span class="metric-label">Accessibility</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="metric-item">
|
|
||||||
<div class="gauge" style="--percent: 100%;" data-score="100"></div>
|
|
||||||
<span class="metric-label">Best Practices</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="metric-item">
|
|
||||||
<div class="gauge" style="--percent: 100%;" data-score="100"></div>
|
|
||||||
<span class="metric-label">SEO Score</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Contact Section -->
|
<!-- Contact Section -->
|
||||||
<section id="contact" class="section-padding">
|
<section id="contact" class="section-padding">
|
||||||
<div class="coffee-stain stain-2" aria-hidden="true"></div>
|
<div class="coffee-stain stain-2" aria-hidden="true"></div>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2>Contact Me</h2>
|
<h2>Contact Me</h2>
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
|
|||||||
+66
-77
@@ -112,7 +112,7 @@
|
|||||||
<!-- About Section -->
|
<!-- About Section -->
|
||||||
<section id="about" class="section-padding">
|
<section id="about" class="section-padding">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2>About Us</h2>
|
<h2>About Me</h2>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-8">
|
<div class="col-lg-8">
|
||||||
<p class="lead mb-4 drop-cap">Welcome to d@n tech! I specialize in creating stunning and efficient websites for businesses of all sizes.</p>
|
<p class="lead mb-4 drop-cap">Welcome to d@n tech! I specialize in creating stunning and efficient websites for businesses of all sizes.</p>
|
||||||
@@ -126,51 +126,72 @@
|
|||||||
<section id="services" class="section-padding section-alt">
|
<section id="services" class="section-padding section-alt">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2>Services</h2>
|
<h2>Services</h2>
|
||||||
<div class="row align-items-center">
|
<div class="row g-4 row-cols-1 row-cols-md-2">
|
||||||
<div class="col-lg-8">
|
<div class="col">
|
||||||
<ul class="list-group skill-bars">
|
<div class="card h-100">
|
||||||
<li class="list-group-item skill-item" data-skill="95">
|
<div class="card-body">
|
||||||
<span class="skill-name">Custom Website Development</span>
|
<div class="mb-3 text-primary">
|
||||||
<div class="skill-bar-track">
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
<div class="skill-bar-fill" style="--skill-level: 95%;"></div>
|
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item skill-item" data-skill="90">
|
|
||||||
<span class="skill-name">Responsive Design</span>
|
|
||||||
<div class="skill-bar-track">
|
|
||||||
<div class="skill-bar-fill" style="--skill-level: 90%;"></div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item skill-item" data-skill="85">
|
|
||||||
<span class="skill-name">E-commerce Solutions</span>
|
|
||||||
<div class="skill-bar-track">
|
|
||||||
<div class="skill-bar-fill" style="--skill-level: 85%;"></div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item skill-item" data-skill="92">
|
|
||||||
<span class="skill-name">SEO Optimization</span>
|
|
||||||
<div class="skill-bar-track">
|
|
||||||
<div class="skill-bar-fill" style="--skill-level: 92%;"></div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item skill-item" data-skill="98">
|
|
||||||
<span class="skill-name">Website Maintenance</span>
|
|
||||||
<div class="skill-bar-track">
|
|
||||||
<div class="skill-bar-fill" style="--skill-level: 98%;"></div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-4 d-none d-lg-block text-center opacity-75">
|
|
||||||
<!-- Decorative Icon/Illustration placeholder or just empty space for balance -->
|
|
||||||
<svg width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="text-primary">
|
|
||||||
<path d="M18 8h1a4 4 0 0 1 0 8h-1"></path>
|
|
||||||
<path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path>
|
|
||||||
<line x1="6" y1="1" x2="6" y2="4"></line>
|
|
||||||
<line x1="10" y1="1" x2="10" y2="4"></line>
|
|
||||||
<line x1="14" y1="1" x2="14" y2="4"></line>
|
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
<h5 class="card-title">Custom Website Development</h5>
|
||||||
|
<p class="card-text">Tailored websites built from scratch to match your brand, goals, and user needs.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card h-100">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="mb-3 text-primary">
|
||||||
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h5 class="card-title">Responsive Design</h5>
|
||||||
|
<p class="card-text">Sites that look and function beautifully on every device, from phones to desktops.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card h-100">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="mb-3 text-primary">
|
||||||
|
<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="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h5 class="card-title">E-commerce Solutions</h5>
|
||||||
|
<p class="card-text">Online stores designed to convert visitors into customers with secure checkout.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card h-100">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="mb-3 text-primary">
|
||||||
|
<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>
|
||||||
|
<h5 class="card-title">SEO Optimization</h5>
|
||||||
|
<p class="card-text">Improved visibility on search engines to help clients find you organically.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card h-100">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="mb-3 text-primary">
|
||||||
|
<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="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h5 class="card-title">Website Maintenance</h5>
|
||||||
|
<p class="card-text">Ongoing updates, security patches, and support to keep your site running smoothly.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -534,43 +555,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Metrics Section -->
|
|
||||||
<section id="metrics" class="metrics-banner" aria-label="Performance Metrics">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row g-4 row-cols-2 row-cols-md-4 justify-content-center">
|
|
||||||
<div class="col">
|
|
||||||
<div class="metric-item">
|
|
||||||
<div class="gauge" style="--percent: 98%;" data-score="98"></div>
|
|
||||||
<span class="metric-label">Performance</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="metric-item">
|
|
||||||
<div class="gauge" style="--percent: 100%;" data-score="100"></div>
|
|
||||||
<span class="metric-label">Accessibility</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="metric-item">
|
|
||||||
<div class="gauge" style="--percent: 100%;" data-score="100"></div>
|
|
||||||
<span class="metric-label">Best Practices</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="metric-item">
|
|
||||||
<div class="gauge" style="--percent: 100%;" data-score="100"></div>
|
|
||||||
<span class="metric-label">SEO Score</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Contact Section -->
|
<!-- Contact Section -->
|
||||||
<section id="contact" class="section-padding">
|
<section id="contact" class="section-padding">
|
||||||
<div class="coffee-stain stain-2" aria-hidden="true"></div>
|
<div class="coffee-stain stain-2" aria-hidden="true"></div>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2>Contact Us</h2>
|
<h2>Contact Me</h2>
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="col-md-8 text-center">
|
<div class="col-md-8 text-center">
|
||||||
<div class="card bg-transparent border-0 shadow-none">
|
<div class="card bg-transparent border-0 shadow-none">
|
||||||
|
|||||||
Reference in New Issue
Block a user