fmormer.github.io/index.html at master · fmormer/fmormer.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
---
layout: default
title: Home
---

<section class="home-storyband">
  <div class="home-storyband__inner">

    <div class="home-storyband__copy">
      <p class="home-storyband__eyebrow">Integrated engineering workflow</p>

      <h2 class="home-storyband__title">Engineering Intelligence for Offshore Wind Systems</h2>

      <p class="home-storyband__lead">
        Morie Analytics is a tech-forward offshore engineering platform focused on
        floating wind and marine systems. It combines physics-based modeling,
		geotechnical intelligence and data-driven workflows to support decision-making
		across the full project lifecycle.
      </p>

      <p>
        The approach goes beyond component-level design by capturing the strong
        interactions between floaters, mooring systems, anchors and cables,
        enabling more realistic and scalable engineering solutions for deep-water environments.
      </p>

      <p class="home-storyband__workflow">
        <strong>Site ↔ Layout ↔ Soil ↔ Mooring ↔ Anchor ↔ Cable</strong>
      </p>

      <p>
        The portfolio demonstrates how complex offshore systems can be structured,
        analyzed and optimized through an integrated, modular and reproducible workflow.
      </p>

      <a href="{{ '/portfolio/' | relative_url }}" class="home-storyband__button">
        View Case Studies in Celtic Sea
      </a>
    </div>

	<div class="home-storyband__media">
	  <div class="storyband-carousel" aria-label="Portfolio highlights carousel">
		<div class="storyband-carousel__track">

		  <a class="storyband-slide is-active" href="{{ '/portfolio/' | relative_url }}">
			<img src="{{ '/img/hero/2dfarm_bathy_2.png' | relative_url }}" alt="Bathymetry characterization for the Morie Site study case">
			<span>Site Intelligence</span>
		  </a>

		  <a class="storyband-slide" href="{{ '/portfolio/' | relative_url }}">
			<img src="{{ '/img/hero/2dfarm_hexoverlay.png' | relative_url }}" alt="Hexagrid mask for bathy and soil for the Morie Layoyt study case">
			<span>Layout Engineering</span>
		  </a>

		  <a class="storyband-slide" href="{{ '/portfolio/' | relative_url }}">
			<img src="{{ '/img/hero/00_lease_crop_context.png' | relative_url }}" alt="Cropped area for the Morie Soil study case">
			<span>Subsurface Intelligence</span>
		  </a>

		  <a class="storyband-slide" href="{{ '/portfolio/' | relative_url }}">
			<img src="{{ '/img/posts/morie_mooring/shared_anchor_planview.png' | relative_url }}" alt="Integrated mooring system design with shared anchors">
			<span>Integrated Systems</span>
		  </a>

		</div>

		<div class="storyband-carousel__controls">
		  <button class="storyband-carousel__button storyband-carousel__button--prev" type="button" aria-label="Previous slide">
			‹
		  </button>

		  <div class="storyband-carousel__dots" aria-label="Carousel navigation">
			<button class="storyband-carousel__dot is-active" type="button" aria-label="Go to slide 1"></button>
			<button class="storyband-carousel__dot" type="button" aria-label="Go to slide 2"></button>
			<button class="storyband-carousel__dot" type="button" aria-label="Go to slide 3"></button>
			<button class="storyband-carousel__dot" type="button" aria-label="Go to slide 4"></button>
		  </div>

		  <button class="storyband-carousel__button storyband-carousel__button--next" type="button" aria-label="Next slide">
			›
		  </button>
		</div>
	  </div>
	</div>

  </div>
</section>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const carousel = document.querySelector('.storyband-carousel');
    if (!carousel) return;

    const slides = Array.from(carousel.querySelectorAll('.storyband-slide'));
    const dots = Array.from(carousel.querySelectorAll('.storyband-carousel__dot'));
    const prevButton = carousel.querySelector('.storyband-carousel__button--prev');
    const nextButton = carousel.querySelector('.storyband-carousel__button--next');

    let currentIndex = 0;

    function updateCarousel(index) {
      slides.forEach((slide, i) => {
        slide.classList.toggle('is-active', i === index);
      });

      dots.forEach((dot, i) => {
        dot.classList.toggle('is-active', i === index);
      });

      currentIndex = index;
    }

    prevButton.addEventListener('click', function () {
      const nextIndex = (currentIndex - 1 + slides.length) % slides.length;
      updateCarousel(nextIndex);
    });

    nextButton.addEventListener('click', function () {
      const nextIndex = (currentIndex + 1) % slides.length;
      updateCarousel(nextIndex);
    });

    dots.forEach((dot, index) => {
      dot.addEventListener('click', function () {
        updateCarousel(index);
      });
    });

    updateCarousel(0);
  });
</script>