Cleanup: extract SVGs into separate files in static/icons

This commit is contained in:
bdnugget committed 2025-08-21 23:04:53 +02:00
1 parent 3288b04187
commit 0e8233b309
19 files changed
+125 -215

No files matched your search

+4
View File
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>

After

Width:  |  Height:  |  Size: 286 B

+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 9h18M7 3v2M17 3v2M6 12h2M11 12h2M16 12h2M6 15h2M11 15h2M16 15h2M6 18h2M11 18h2M16 18h2M6.2 21h11.6c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2H6.2c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2z"></path>
</svg>

After

Width:  |  Height:  |  Size: 381 B

+4
View File
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>

After

Width:  |  Height:  |  Size: 299 B

+7
View File
@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M10 2v7.31"></path>
<path d="M14 9.3V1.99"></path>
<path d="M8.5 2h7"></path>
<path d="M14 9.3a6.5 6.5 0 1 1-4 0"></path>
<path d="M5.58 16.5h12.85"></path>
</svg>

After

Width:  |  Height:  |  Size: 365 B

+4
View File
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>

After

Width:  |  Height:  |  Size: 281 B

+4
View File
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="16 18 22 12 16 6"></polyline>
<polyline points="8 6 2 12 8 18"></polyline>
</svg>

After

Width:  |  Height:  |  Size: 286 B

+5
View File
@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
</svg>

After

Width:  |  Height:  |  Size: 350 B

+4
View File
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="7" y1="17" x2="17" y2="7"></line>
<polyline points="7 7 17 7 17 17"></polyline>
</svg>

After

Width:  |  Height:  |  Size: 283 B

+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
</svg>

After

Width:  |  Height:  |  Size: 501 B

+5
View File
@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
<rect x="2" y="9" width="4" height="12"></rect>
<circle cx="4" cy="4" r="2"></circle>
</svg>

After

Width:  |  Height:  |  Size: 378 B

+4
View File
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
<polyline points="22,6 12,13 2,6"></polyline>
</svg>

After

Width:  |  Height:  |  Size: 333 B

+4
View File
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
<circle cx="12" cy="10" r="3"></circle>
</svg>

After

Width:  |  Height:  |  Size: 298 B

+5
View File
@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="3" y1="6" x2="21" y2="6"></line>
<line x1="3" y1="18" x2="21" y2="18"></line>
</svg>

After

Width:  |  Height:  |  Size: 328 B

+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>

After

Width:  |  Height:  |  Size: 257 B

+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
</svg>

After

Width:  |  Height:  |  Size: 495 B

+4
View File
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="22" y1="2" x2="11" y2="13"></line>
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
</svg>

After

Width:  |  Height:  |  Size: 293 B

+5
View File
@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

After

Width:  |  Height:  |  Size: 356 B

+11
View File
@@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>

After

Width:  |  Height:  |  Size: 651 B

+43 -215
View File
@@ -7,9 +7,10 @@
<meta name="description" content="Professional chemistry software development and consulting services">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<!-- Styles -->
<link rel="stylesheet" href="/static/styles.css">
@@ -30,40 +31,21 @@
<a href="#services" class="nav-link">Services</a>
<a href="#about" class="nav-link">About</a>
<a href="#contact" class="nav-link">Contact</a>
<div class="header-actions">
<!-- Theme Toggle -->
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
<svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
<svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
<img src="/static/icons/sun.svg" alt="Light mode" class="sun-icon">
<img src="/static/icons/moon.svg" alt="Dark mode" class="moon-icon">
</button>
<!-- Mobile Menu Button -->
<button id="mobile-menu-btn" class="mobile-menu-btn" aria-label="Toggle menu">
<svg class="menu-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="3" y1="6" x2="21" y2="6"></line>
<line x1="3" y1="18" x2="21" y2="18"></line>
</svg>
<svg class="close-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
<img src="/static/icons/menu.svg" alt="Open menu" class="menu-icon">
<img src="/static/icons/close.svg" alt="Close menu" class="close-icon">
</button>
</div>
</nav>
</div>
<!-- Mobile Navigation -->
@@ -89,18 +71,18 @@
<div class="hero-gradient"></div>
<div class="container hero-container">
<div class="hero-content">
<h1 class="hero-title">Chemistry Meets <span class="text-primary">Technology</span></h1>
<h1 class="hero-title">
Chemistry Meets <span class="text-primary">Technology</span>
</h1>
<p class="hero-description">
Expert consulting at the intersection of chemistry and software development.
Building specialized solutions for chemical research and development.
</p>
<div class="hero-buttons">
<a href="#contact" class="btn btn-primary">
Get in Touch
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
<img src="/static/icons/arrow-right.svg" alt="" class="btn-icon">
</a>
<a href="#services" class="btn btn-outline">Explore Services</a>
</div>
@@ -109,22 +91,13 @@
<div class="hero-cards">
<div class="hero-cards-column">
<div class="card card-light">
<svg class="card-icon" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M10 2v7.31"></path>
<path d="M14 9.3V1.99"></path>
<path d="M8.5 2h7"></path>
<path d="M14 9.3a6.5 6.5 0 1 1-4 0"></path>
<path d="M5.58 16.5h12.85"></path>
</svg>
<img src="/static/icons/chemistry-flask.svg" alt="Chemistry expertise" class="card-icon">
<h3 class="card-title">Chemistry Expertise</h3>
<p class="card-text">Specialized knowledge in chemical processes and research</p>
</div>
<div class="card card-dark">
<svg class="card-icon" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
</svg>
<img src="/static/icons/database.svg" alt="Data solutions" class="card-icon">
<h3 class="card-title">Data Solutions</h3>
<p class="card-text">Chemical database management and systems analysis</p>
</div>
@@ -132,17 +105,13 @@
<div class="hero-cards-column offset">
<div class="card card-primary">
<svg class="card-icon" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="16 18 22 12 16 6"></polyline>
<polyline points="8 6 2 12 8 18"></polyline>
</svg>
<img src="/static/icons/code.svg" alt="Custom software" class="card-icon">
<h3 class="card-title">Custom Software</h3>
<p class="card-text">Tailored applications for chemical industries and research</p>
</div>
<div class="card card-light">
<svg class="card-icon" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 9h18M7 3v2M17 3v2M6 12h2M11 12h2M16 12h2M6 15h2M11 15h2M16 15h2M6 18h2M11 18h2M16 18h2M6.2 21h11.6c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2H6.2c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2z"></path>
</svg>
<img src="/static/icons/calendar.svg" alt="Web development" class="card-icon">
<h3 class="card-title">Web Development</h3>
<p class="card-text">Chemistry-focused websites and e-commerce solutions</p>
</div>
@@ -171,10 +140,7 @@
<!-- Service 1 -->
<div class="service-card">
<div class="service-icon-wrapper">
<svg class="service-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="16 18 22 12 16 6"></polyline>
<polyline points="8 6 2 12 8 18"></polyline>
</svg>
<img src="/static/icons/code.svg" alt="Software development" class="service-icon">
</div>
<h3 class="service-title">Chemistry Software Development</h3>
<p class="service-description">
@@ -191,11 +157,7 @@
<!-- Service 2 -->
<div class="service-card">
<div class="service-icon-wrapper">
<svg class="service-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
<img src="/static/icons/shopping-cart.svg" alt="E-commerce solutions" class="service-icon">
</div>
<h3 class="service-title">Chemical E-commerce Solutions</h3>
<p class="service-description">
@@ -212,11 +174,7 @@
<!-- Service 3 -->
<div class="service-card">
<div class="service-icon-wrapper">
<svg class="service-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
</svg>
<img src="/static/icons/database.svg" alt="Data management" class="service-icon">
</div>
<h3 class="service-title">Chemical Data Management</h3>
<p class="service-description">
@@ -229,8 +187,6 @@
<li>Data Visualization Tools</li>
</ul>
</div>
</div>
</div>
</section>
@@ -247,20 +203,17 @@
<div class="about-content">
<h2 class="section-title">About the Consultant</h2>
<p class="about-text">
With a livelong passion for chemistry and IT and over a decade of experience in the chemistry field and more than 5 years of professional experience in webdevelopment, I strive to combine my passions and bridging the gap between chemistry and software,
bringing a unique perspective to the development of software for the specific needs of the chemical industry.
With a lifelong passion for chemistry and IT and over a decade of experience in the chemistry field and more than 5 years of professional experience in web development, I strive to combine my passions and bridge the gap between chemistry and software,
bringing a unique perspective to the development of software for the specific needs of the chemical industry.
</p>
<p class="about-text">
Having been a chemist myself gives me special insight to the problems faced in the lab, which lead me to to create solutions that truly understand the needs of chemical professionals,
Having been a chemist myself gives me special insight to the problems faced in the lab, which leads me to create solutions that truly understand the needs of chemical professionals,
researchers, and businesses.
</p>
<div class="about-features">
<div class="about-feature">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
<img src="/static/icons/check-circle.svg" alt="Verified" class="feature-icon">
<div>
<h3 class="feature-title">Chemistry Background</h3>
<p class="feature-text">
@@ -270,10 +223,7 @@
</div>
<div class="about-feature">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
<img src="/static/icons/check-circle.svg" alt="Verified" class="feature-icon">
<div>
<h3 class="feature-title">Software Development</h3>
<p class="feature-text">
@@ -283,10 +233,7 @@
</div>
<div class="about-feature">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
<img src="/static/icons/check-circle.svg" alt="Verified" class="feature-icon">
<div>
<h3 class="feature-title">Industry Knowledge</h3>
<p class="feature-text">
@@ -318,103 +265,6 @@
</div>
</section>
<!-- Portfolio Section -->
<!-- <section id="portfolio" class="portfolio chemistry-bg">
<!-- Chemistry-themed decorative elements -->
<!-- <div class="hexagon hex-6"></div>
<div class="circle circle-6"></div>
<div class="hexagon hex-7"></div> -->
<!-- <div class="container">
<div class="section-header">
<h2 class="section-title">Portfolio</h2>
<p class="section-description">
A selection of successful projects at the intersection of chemistry and technology,
showcasing solutions for various chemical industry needs.
</p>
</div> -->
<!-- <div class="portfolio-grid"> -->
<!-- Portfolio Item 1 -->
<!-- <div class="portfolio-item">
<div class="portfolio-image-container">
<img src="https://kzmj9wbt1hdtc1235v88.lite.vusercontent.net/placeholder.svg?height=400&width=600" alt="ChemTrack LIMS" class="portfolio-image">
<div class="portfolio-overlay">
<button class="portfolio-view-btn">
View Details
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="7" y1="17" x2="17" y2="7"></line>
<polyline points="7 7 17 7 17 17"></polyline>
</svg>
</button>
</div>
</div>
<div class="portfolio-content">
<h3 class="portfolio-title">ChemTrack LIMS</h3>
<p class="portfolio-description">Laboratory Information Management System for a pharmaceutical research facility</p>
<div class="portfolio-tags">
<span class="portfolio-tag">Software Development</span>
<span class="portfolio-tag">Database Design</span>
<span class="portfolio-tag">UI/UX</span>
</div>
</div>
</div> -->
<!-- Portfolio Item 2 -->
<!-- <div class="portfolio-item">
<div class="portfolio-image-container">
<img src="https://kzmj9wbt1hdtc1235v88.lite.vusercontent.net/placeholder.svg?height=400&width=600" alt="ReagentShop" class="portfolio-image">
<div class="portfolio-overlay">
<button class="portfolio-view-btn">
View Details
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="7" y1="17" x2="17" y2="7"></line>
<polyline points="7 7 17 7 17 17"></polyline>
</svg>
</button>
</div>
</div>
<div class="portfolio-content">
<h3 class="portfolio-title">ReagentShop</h3>
<p class="portfolio-description">E-commerce platform for a chemical reagent supplier with regulatory compliance features</p>
<div class="portfolio-tags">
<span class="portfolio-tag">E-commerce</span>
<span class="portfolio-tag">Web Development</span>
<span class="portfolio-tag">Compliance</span>
</div>
</div>
</div> -->
<!-- Portfolio Item 3 -->
<!-- <div class="portfolio-item">
<div class="portfolio-image-container">
<img src="https://kzmj9wbt1hdtc1235v88.lite.vusercontent.net/placeholder.svg?height=400&width=600" alt="AnalyticsLab Dashboard" class="portfolio-image">
<div class="portfolio-overlay">
<button class="portfolio-view-btn">
View Details
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="7" y1="17" x2="17" y2="7"></line>
<polyline points="7 7 17 7 17 17"></polyline>
</svg>
</button>
</div>
</div>
<div class="portfolio-content">
<h3 class="portfolio-title">AnalyticsLab Dashboard</h3>
<p class="portfolio-description">Real-time analytics dashboard for chemical quality control processes</p>
<div class="portfolio-tags">
<span class="portfolio-tag">Data Visualization</span>
<span class="portfolio-tag">Analytics</span>
<span class="portfolio-tag">Dashboard</span>
</div>
</div>
</div> -->
<!-- </div>
</div>
</section> -->
<!-- Contact Section -->
<section id="contact" class="contact">
<div class="container">
@@ -452,10 +302,7 @@
<button type="submit" class="btn btn-primary btn-full">
Send Message
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="22" y1="2" x2="11" y2="13"></line>
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
</svg>
<img src="/static/icons/send.svg" alt="" class="btn-icon">
</button>
</form>
</div>
@@ -471,10 +318,7 @@
<div class="contact-methods">
<div class="contact-method">
<div class="contact-method-icon-wrapper">
<svg class="contact-method-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
<polyline points="22,6 12,13 2,6"></polyline>
</svg>
<img src="/static/icons/mail.svg" alt="Email" class="contact-method-icon">
</div>
<div>
<h4 class="contact-method-title">Email</h4>
@@ -486,13 +330,11 @@
<div class="contact-method">
<div class="contact-method-icon-wrapper">
<svg class="contact-method-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
</svg>
<img src="/static/icons/phone.svg" alt="Phone" class="contact-method-icon">
</div>
<div>
<h4 class="contact-method-title">Phone</h4>
<a href="tel:+11234567890" class="contact-method-value">
<a href="tel:+31613264318" class="contact-method-value">
+31 6 132 643 18
</a>
</div>
@@ -500,14 +342,11 @@
<div class="contact-method">
<div class="contact-method-icon-wrapper">
<svg class="contact-method-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
<circle cx="12" cy="10" r="3"></circle>
</svg>
<img src="/static/icons/map-pin.svg" alt="Location" class="contact-method-icon">
</div>
<div>
<h4 class="contact-method-title">Location</h4>
<p class="contact-method-value">Eenrum, Netherlands - Available for remote consulting </p>
<p class="contact-method-value">Eenrum, Netherlands - Available for remote consulting</p>
</div>
</div>
</div>
@@ -518,7 +357,7 @@
<div class="hours-list">
<div class="hours-item">
<span>Monday - Thursday</span>
<span>11:00 - 15:00 </span>
<span>11:00 - 15:00</span>
</div>
<div class="hours-item">
<span>Saturday & Sunday</span>
@@ -549,17 +388,11 @@
</p>
<div class="footer-social">
<a href="#" class="social-link">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
<rect x="2" y="9" width="4" height="12"></rect>
<circle cx="4" cy="4" r="2"></circle>
</svg>
<img src="/static/icons/linkedin.svg" alt="LinkedIn" class="social-icon">
<span class="sr-only">LinkedIn</span>
</a>
<a href="#" class="social-link">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
</svg>
<img src="/static/icons/github.svg" alt="GitHub" class="social-icon">
<span class="sr-only">GitHub</span>
</a>
</div>
@@ -589,20 +422,15 @@
<h3 class="footer-title">Contact</h3>
<ul class="footer-contact-list">
<li class="footer-contact-item">
<svg class="footer-contact-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
<polyline points="22,6 12,13 2,6"></polyline>
</svg>
<img src="/static/icons/mail.svg" alt="Email" class="footer-contact-icon">
<a href="mailto:info@chemistry.software" class="footer-link">
info@chemistry.software
</a>
</li>
<li class="footer-contact-item">
<svg class="footer-contact-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
</svg>
<a href="tel:+31613264318 " class="footer-link">
+31 6 132 643 18
<img src="/static/icons/phone.svg" alt="Phone" class="footer-contact-icon">
<a href="tel:+31613264318" class="footer-link">
+31 6 132 643 18
</a>
</li>
</ul>
@@ -620,4 +448,4 @@
<!-- JavaScript -->
<script src="/static/script.js"></script>
</body>
</html>
</html>