feat(ui): add technologies and stack section with responsive grid and alternating backgrounds
This commit is contained in:
117
index.html
117
index.html
@@ -136,8 +136,119 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<!-- Portfolio Section -->
|
<!-- Portfolio Section -->
|
||||||
<section id="portfolio" class="section-padding">
|
<section id="portfolio" class="section-padding section-alt">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2>Portfolio</h2>
|
<h2>Portfolio</h2>
|
||||||
<div class="row g-4">
|
<div class="row g-4">
|
||||||
@@ -207,7 +318,7 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Testimonials Section -->
|
<!-- Testimonials Section -->
|
||||||
<section id="testimonials" class="section-padding section-alt">
|
<section id="testimonials" class="section-padding">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2>Testimonials</h2>
|
<h2>Testimonials</h2>
|
||||||
<div class="row g-4">
|
<div class="row g-4">
|
||||||
@@ -239,7 +350,7 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Contact Section -->
|
<!-- Contact Section -->
|
||||||
<section id="contact" class="section-padding">
|
<section id="contact" class="section-padding section-alt">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2>Contact Us</h2>
|
<h2>Contact Us</h2>
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
|
|||||||
50
styles.css
50
styles.css
@@ -262,6 +262,56 @@ footer {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Tech Stack Cards */
|
||||||
|
.tech-card {
|
||||||
|
padding: 2rem 1.5rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
background-color: var(--bg-surface);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
text-align: center;
|
||||||
|
height: 100%;
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: var(--shadow-soft);
|
||||||
|
border-color: var(--color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-icon-wrapper {
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: var(--bg-section-alt);
|
||||||
|
color: var(--color-primary);
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-card:hover .tech-icon-wrapper {
|
||||||
|
background-color: var(--color-primary);
|
||||||
|
color: white;
|
||||||
|
transform: scale(1.1) rotate(5deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-name {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
color: var(--text-body);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-desc {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
opacity: 0.8;
|
||||||
|
margin: 0;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
/* Animations */
|
/* Animations */
|
||||||
@keyframes fade-in-up {
|
@keyframes fade-in-up {
|
||||||
from {
|
from {
|
||||||
|
|||||||
Reference in New Issue
Block a user