website/static/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>chemistry.software | Chemistry Software Consultation</title>
  <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">
  
  <!-- Styles -->
  <link rel="stylesheet" href="/static/styles.css">
  
  <!-- Favicon -->
  <link rel="icon" href="/static/favicon.ico" type="image/x-icon">

  <!-- Cap human verification widget -->
  <script src="https://cdn.jsdelivr.net/npm/cap-widget@latest"></script>
</head>

<body>
  <!-- Header/Navbar -->
  <header class="header">
    <div class="container header-container">
      <a href="#hero" class="logo">
        <span class="logo-primary">chemistry.software</span>
      </a>
      
      <!-- Desktop Navigation -->
      <nav class="desktop-nav">
        <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">
            <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">
            <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 -->
    <div id="mobile-nav" class="mobile-nav">
      <div class="container mobile-nav-container">
        <a href="#services" class="nav-link">Services</a>
        <a href="#about" class="nav-link">About</a>
        <a href="#portfolio" class="nav-link">Portfolio</a>
        <a href="#contact" class="nav-link">Contact</a>
      </div>
    </div>
  </header>

  <main>
    <!-- Hero Section -->
    <section class="hero chemistry-bg" id="hero">
      <!-- Chemistry-themed decorative elements -->
      <div class="hexagon hex-1"></div>
      <div class="hexagon hex-2"></div>
      <div class="circle circle-1"></div>
      <div class="circle circle-2"></div>
      
      <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>
          <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
              <img src="/static/icons/arrow-right.svg" alt="" class="btn-icon">
            </a>
            <a href="#services" class="btn btn-outline">Explore Services</a>
          </div>
        </div>
        
        <div class="hero-cards">
          <div class="hero-cards-column">
            <div class="card card-light">
              <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">
              <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>
          </div>
          
          <div class="hero-cards-column offset">
            <div class="card card-primary">
              <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">
              <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>
          </div>
        </div>
      </div>
    </section>

    <!-- Services Section -->
    <section id="services" class="services chemistry-bg">
      <!-- Chemistry-themed decorative elements -->
      <div class="hexagon hex-3"></div>
      <div class="circle circle-3"></div>
      <div class="circle circle-4"></div>
      
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">Services Offered</h2>
          <p class="section-description">
            Specialized solutions at the intersection of chemistry and technology, 
            tailored to meet the unique needs of chemical industries and research.
          </p>
        </div>
        
        <div class="services-grid">
          <!-- Service 1 -->
          <div class="service-card">
            <div class="service-icon-wrapper">
              <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">
              Custom software solutions designed specifically for chemical processes, 
              laboratory management, and research applications.
            </p>
            <ul class="service-list">
              <li>Laboratory Information Management Systems (LIMS)</li>
              <li>Chemical Inventory Management</li>
              <li>Process Automation Software</li>
            </ul>
          </div>
          
          <!-- Service 2 -->
          <div class="service-card">
            <div class="service-icon-wrapper">
              <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">
              Specialized webshops and e-commerce platforms for chemical suppliers, 
              with features tailored to the unique requirements of chemical sales.
            </p>
            <ul class="service-list">
              <li>Chemical Product Catalogs</li>
              <li>Safety Data Sheet Integration</li>
              <li>Regulatory Compliance Features</li>
            </ul>
          </div>
          
          <!-- Service 3 -->
          <div class="service-card">
            <div class="service-icon-wrapper">
              <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">
              Solutions for organizing, analyzing, and visualizing chemical data, 
              making complex information accessible and actionable.
            </p>
            <ul class="service-list">
              <li>Chemical Database Design</li>
              <li>Structure Search Systems</li>
              <li>Data Visualization Tools</li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <!-- About Section -->
    <section id="about" class="about chemistry-bg">
      <!-- Chemistry-themed decorative elements -->
      <div class="hexagon hex-4"></div>
      <div class="hexagon hex-5"></div>
      <div class="circle circle-5"></div>
      
      <div class="container">
        <div class="about-grid">
          <div class="about-content">
            <h2 class="section-title">About the Consultant</h2>
            <p class="about-text">
              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 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">
                <img src="/static/icons/check-circle.svg" alt="Verified" class="feature-icon">
                <div>
                  <h3 class="feature-title">Chemistry Background</h3>
                  <p class="feature-text">
                    Advanced degree in analytical and organic chemistry with industry experience in medicinal chemistry
                  </p>
                </div>
              </div>
              
              <div class="about-feature">
                <img src="/static/icons/check-circle.svg" alt="Verified" class="feature-icon">
                <div>
                  <h3 class="feature-title">Software Development</h3>
                  <p class="feature-text">
                    Full-stack development expertise with focus on scientific applications and e-commerce
                  </p>
                </div>
              </div>
              
              <div class="about-feature">
                <img src="/static/icons/check-circle.svg" alt="Verified" class="feature-icon">
                <div>
                  <h3 class="feature-title">Industry Knowledge</h3>
                  <p class="feature-text">
                    Deep understanding of chemical industry workflows and challenges
                  </p>
                </div>
              </div>
            </div>
          </div>
          
          <div class="about-image-container">
            <div class="about-image-decoration-1"></div>
            <div class="about-image-decoration-2"></div>
            <div class="about-image-wrapper">
              <img src="/static/images/BdLab.png" alt="Chemistry Consultant" class="about-image">
              <div class="about-stats">
                <div class="stat-card stat-secondary">
                  <h4 class="stat-number">10+</h4>
                  <p class="stat-label">Years in Chemistry</p>
                </div>
                <div class="stat-card stat-primary">
                  <h4 class="stat-number">5+</h4>
                  <p class="stat-label">Years in Software Development</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="contact">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">Get in Touch</h2>
          <p class="section-description">
            Have a project in mind or need consulting on chemistry software solutions? I'm here to help turn your ideas
            into reality.
          </p>
        </div>

        <div class="contact-grid">
          <div class="contact-form-container">
            <h3 class="contact-form-title">Send a Message</h3>
            <form id="contact-form" class="contact-form">
              <div class="form-group">
                <label for="name" class="form-label">Your Name</label>
                <input type="text" id="name" name="name" class="form-input" placeholder="John Doe" required>
              </div>

              <div class="form-group">
                <label for="email" class="form-label">Email Address</label>
                <input type="email" id="email" name="email" class="form-input" placeholder="john@example.com" required>
              </div>

              <div class="form-group">
                <label for="subject" class="form-label">Subject</label>
                <input type="text" id="subject" name="subject" class="form-input" placeholder="Project Inquiry" required>
              </div>

              <div class="form-group">
                <label for="message" class="form-label">Message</label>
                <textarea id="message" name="message" class="form-textarea" rows="5" placeholder="Tell me about your project or inquiry..." required></textarea>
              </div>

              <cap-widget id="cap-widget" required data-cap-api-endpoint="https://capcha.hogelandlinux.nl/d59925ffaa/"></cap-widget>

              <button type="submit" class="btn btn-primary btn-full">
                Send Message
                <img src="/static/icons/send.svg" alt="" class="btn-icon">
              </button>
            </form>
          </div>

          <div class="contact-info-container">
            <div>
              <h3 class="contact-info-title">Contact Information</h3>
              <p class="contact-info-text">
                Feel free to reach out through any of the following channels. I'm always interested in discussing new
                projects and opportunities.
              </p>

              <div class="contact-methods">
                <div class="contact-method">
                  <div class="contact-method-icon-wrapper">
                    <img src="/static/icons/mail.svg" alt="Email" class="contact-method-icon">
                  </div>
                  <div>
                    <h4 class="contact-method-title">Email</h4>
                    <a href="mailto:info@chemistry.software" class="contact-method-value">
                      info@chemistry.software
                    </a>
                  </div>
                </div>

                <div class="contact-method">
                  <div class="contact-method-icon-wrapper">
                    <img src="/static/icons/phone.svg" alt="Phone" class="contact-method-icon">
                  </div>
                  <div>
                    <h4 class="contact-method-title">Phone</h4>
                    <a href="tel:+31613264318" class="contact-method-value">
                      +31 6 132 643 18
                    </a>
                  </div>
                </div>

                <div class="contact-method">
                  <div class="contact-method-icon-wrapper">
                    <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>
                  </div>
                </div>
              </div>
            </div>

            <div class="consultation-hours">
              <h4 class="consultation-hours-title">Consultation Hours</h4>
              <div class="hours-list">
                <div class="hours-item">
                  <span>Monday - Thursday</span>
                  <span>11:00 - 15:00</span>
                </div>
                <div class="hours-item">
                  <span>Saturday & Sunday</span>
                  <span>By appointment</span>
                </div>
              </div>
              <div class="consultation-note">
                <p>Initial 30-minute consultations are complimentary for qualified projects.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>

  <!-- Footer -->
  <footer class="footer">
    <div class="container">
      <div class="footer-grid">
        <div class="footer-brand">
          <a href="#" class="footer-logo">
            <span class="logo-primary">chemistry.software</span>
            <span class="logo-white">Software development and consulting</span>
          </a>
          <p class="footer-description">
            Expert consulting at the intersection of chemistry and software development.
          </p>
          <div class="footer-social">
            <a href="#" class="social-link">
              <img src="/static/icons/linkedin.svg" alt="LinkedIn" class="social-icon">
              <span class="sr-only">LinkedIn</span>
            </a>
            <a href="#" class="social-link">
              <img src="/static/icons/github.svg" alt="GitHub" class="social-icon">
              <span class="sr-only">GitHub</span>
            </a>
          </div>
        </div>
        
        <div class="footer-links">
          <h3 class="footer-title">Services</h3>
          <ul class="footer-menu">
            <li><a href="#services" class="footer-link">Chemistry Software Development</a></li>
            <li><a href="#services" class="footer-link">Chemical E-commerce Solutions</a></li>
            <li><a href="#services" class="footer-link">Chemical Data Management</a></li>
            <li><a href="#services" class="footer-link">Chemistry Technical Consulting</a></li>
          </ul>
        </div>
        
        <div class="footer-links">
          <h3 class="footer-title">Quick Links</h3>
          <ul class="footer-menu">
            <li><a href="#" class="footer-link">Home</a></li>
            <li><a href="#about" class="footer-link">About</a></li>
            <li><a href="#services" class="footer-link">Services</a></li>
            <li><a href="#contact" class="footer-link">Contact</a></li>
          </ul>
        </div>
        
        <div class="footer-contact">
          <h3 class="footer-title">Contact</h3>
          <ul class="footer-contact-list">
            <li class="footer-contact-item">
              <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">
              <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>
        </div>
      </div>
      
      <div class="footer-bottom">
        <p class="copyright">
          © <span id="current-year"></span> chemistry.software
        </p>
      </div>
    </div>
  </footer>

  <!-- JavaScript -->
  <script src="/static/script.js"></script>
</body>
</html>