|
|
|
@@ -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>
|