MEP 03/02/2026 #1

package.json

@@ -1,15 +1,14 @@
 {
   "name": "@ask-ell/website",
-  "type": "module",
-  "version": "0.0.1",
   "scripts": {
     "start:dev": "astro dev",
     "build": "astro build"
   },
-  "dependencies": {
+  "devDependencies": {
     "@astrojs/preact": "^4.1.3",
     "@astrojs/rss": "^4.0.15",
     "astro": "^5.17.1",
-    "preact": "^10.28.3"
+    "preact": "^10.28.3",
+    "sass": "^1.97.3"
   }
 }

src/components/banner.astro

@@ -0,0 +1,10 @@
+---
+const { title } = Astro.props;
+---
+
+<div class="app-banner">
+    <div class="app-container">
+        <h1>{title}</h1>
+        <slot name="banner-content" />
+    </div>
+</div>

src/components/contact-form.astro

@@ -0,0 +1,12 @@
+<h2>Want to work with us ?</h2>
+<p>
+    Write us a description of your project at : <strong
+        >askellcompany@gmail.com</strong
+    >
+</p>
+
+<style>
+    * {
+        text-align: center;
+    }
+</style>

src/components/footer.astro

@@ -0,0 +1,29 @@
+---
+import Links from "./links.astro";
+---
+
+<footer class="app-flat-background-color-dark">
+  <div class="app-container">
+    <Links />
+  </div>
+</footer>
+
+<script src="https://kit.fontawesome.com/30e32532db.js" crossorigin="anonymous"
+></script>
+<script
+  data-collect-dnt="true"
+  async
+  src="https://tylerdurden.ask-ell.com/latest.js"></script>
+<noscript
+  ><img
+    src="https://tylerdurden.ask-ell.com/noscript.gif?collect-dnt=true"
+    alt=""
+    referrerpolicy="no-referrer-when-downgrade"
+  /></noscript
+>
+
+<style>
+  footer {
+    margin-top: 5rem;
+  }
+</style>

src/components/header.astro

@@ -0,0 +1,9 @@
+---
+import Navigation from "./navigation.astro";
+---
+
+<header class="app-flat-background-color-dark">
+    <div class="app-container">
+        <Navigation />
+    </div>
+</header>

src/components/links.astro

@@ -0,0 +1,18 @@
+---
+const copyrightYear = new Date().getFullYear();
+---
+
+<ul class="app-links-group">
+    <li class="app-links-group__item">
+        <a href="https://github.com/ask-ell">Github</a>
+    </li>
+    <li class="app-links-group__item">
+        <a href="https://www.linkedin.com/company/ask-ell">Linkedin</a>
+    </li>
+    <li class="app-links-group__item">
+        <a href="https://www.youtube.com/@ask-ell">Youtube</a>
+    </li>
+    <li class="app-links-group__item">
+        Copyright ©{copyrightYear} Ask'ell, all rights reserved
+    </li>
+</ul>

src/components/logo.astro

@@ -0,0 +1,14 @@
+---
+import { Image } from "astro:assets";
+---
+
+<Image
+    alt="Ask'ell logo"
+    loading="eager"
+    src={{
+        src: "/images/ask-ell-logo.png",
+        format: "png",
+        height: 60,
+        width: 60,
+    }}
+/>

src/components/navigation.astro

@@ -0,0 +1,58 @@
+---
+import Logo from "./logo.astro";
+---
+
+<nav class="app-navbar">
+    <a href="/">
+        <Logo />
+    </a>
+    <div class="app-navbar__mobile-button">
+        <i class="fa-solid fa-bars"></i>
+    </div>
+    <ul class="app-navbar__links">
+        <li>
+            <a class="app-navbar__link" href="/services">Services</a>
+        </li>
+        <li>
+            <a class="app-navbar__link" href="/projects">Projects</a>
+        </li>
+        <li>
+            <a class="app-navbar__link" href="/talks">Talks</a>
+        </li>
+        <li>
+            <a class="app-navbar__link" href="/about">About</a>
+        </li>
+        <li>
+            <a class="app-navbar__link app-button" href="/contact">Contact</a>
+        </li>
+    </ul>
+</nav>
+
+<style>
+    /* TODO: move in styles ? */
+    .app-navbar-link.app-button {
+        display: inline;
+    }
+</style>
+
+<script>
+    const navbarLinks: HTMLElement =
+        document.querySelector<HTMLElement>(".app-navbar__links")!;
+    const navbarMobileButton: HTMLElement = document.querySelector<HTMLElement>(
+        ".app-navbar__mobile-button",
+    )!;
+    let isMobileNavbarOpened: boolean = false;
+
+    function toggleMobileNavbar(): void {
+        isMobileNavbarOpened = !isMobileNavbarOpened;
+        document.body.style.overflow = isMobileNavbarOpened ? "hidden" : "auto";
+
+        if (isMobileNavbarOpened) {
+            navbarLinks.style.transform = "translateY(0%)";
+            return;
+        }
+        navbarLinks.style.transform = "translateY(-100%)";
+    }
+
+    navbarMobileButton.addEventListener("click", () => toggleMobileNavbar());
+</script>

src/components/wip-alert.astro

@@ -0,0 +1,4 @@
+<div class="app-alert app-alert--warning">
+    <i class="fa-solid fa-hammer"></i>
+    This page is in work in progress
+</div>