home page

Makefile

@@ -35,7 +35,7 @@ clean: ## Remove the bin directory and clean up generated files
 	rm -rf $(BIN_DIR)
 
 lem: ## Open Lem with TailwindCSS server
-	@echo "Starting make watch in background..."
+	@echo "Starting TailwindCSS server in background..."
 	@make watch > /dev/null 2>&1 & \
 	WATCH_PID=$$!; \
 	trap "kill $$WATCH_PID" SIGINT SIGTERM EXIT; \

public/style.css

@@ -1,3 +1,13 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+:root {
+  font-family: 'Noto Sans JP Variable', sans-serif;
+}
+
+@supports (font-variation-settings: normal) {
+  :root {
+    font-family: 'Noto Sans JP Variable', sans-serif;
+  }
+}

src/components/header.lisp

@@ -0,0 +1,26 @@
+(defpackage #:hp/components/header
+  (:use #:cl
+        #:hsx)
+  (:export #:page-header))
+(in-package #:hp/components/header)
+
+(defcomp page-header ()
+  (let ((links '(("Home" "/")
+                 ("About" "/about")
+                 ("Work" "/work")
+                 ("Blog" "/blog")
+                 ("Contact" "/contact"))))
+    (hsx
+     (header :class "fixed top-0 w-full"
+       (div :class "container flex justify-between py-6"
+         (h1
+           (a :href "/"
+             (img
+               :src "/logo.png" :alt "Amongtellers"
+               :class "w-52 h-auto")))
+         (ul :class "flex flex-col gap-4"
+           (loop
+             :for (content href) :in links :collect
+                (li :class "flex items-center"
+                  (a :href href :class "text-xl font-bold pl-6 hover:text-orange-600"
+                    content)))))))))

src/renderer.lisp

@@ -6,52 +6,45 @@
   (:local-nicknames (#:jg #:jingle))
   (:import-from #:hsx/element
                 #:element)
-  (:local-nicknames (#:env #:hp/env)))
+  (:local-nicknames (#:env #:hp/env))
+  (:import-from #:hp/components/header
+                #:page-header))
 (in-package #:hp/renderer)
 
 (defun bust-cache (url)
   (format nil "~a?~a" url #.(get-universal-time)))
 
-(defcomp page-header ()
-  (let ((links '(("Work" "/work")
-                 ("Blog" "/blog"))))
-    (hsx
-     (header :class "flex justify-between container mx-auto py-4"
-       (h1 :class "text-lg font-bold"
-         (a :href "/" "skyizwhite"))
-       (ul :class "flex"
-         (loop
-           :for (content href) :in links :collect
-              (li (a
-                    :href href
-                    :class (concatenate 'string
-                                        "pl-4"
-                                        (and (str:starts-with? href
-                                                               (jg:request-uri jg:*request*))
-                                             " text-pink-600"))
-                    content))))))))
-
 (defcomp document (&key title description children)
   (hsx
    (html :lang "ja"
      (head
        (meta :charset "UTF-8")
        (meta :name "viewport" :content "width=device-width, initial-scale=1")
-       (link :rel "icon" :href "/favicon.ico")
-       (link :rel "apple-touch-icon" :href "/favicon.ico")
+       (link :rel "icon" :href (bust-cache "/favicon.ico"))
+       (link :rel "apple-touch-icon" :href (bust-cache "/favicon.ico"))
        (link :rel "stylesheet" :href (bust-cache "/dist.css"))
+       (link :rel "preconnect" :href "https://fonts.googleapis.com")
+       (link :rel "preconnect" :href "https://fonts.gstatic.com" :crossorigin t)
+       (link :rel "stylesheet" :href "https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap")
        (script :src "https://cdn.jsdelivr.net/npm/htmx.org@2.0.0/dist/htmx.min.js")
        (script :src "https://cdn.jsdelivr.net/npm/htmx-ext-head-support@2.0.0/head-support.min.js")
        (script :src "https://cdn.jsdelivr.net/npm/htmx-ext-response-targets@2.0.0/response-targets.min.js")
        (script :src "https://cdn.jsdelivr.net/npm/alpinejs@3.14.0/dist/cdn.min.js" :defer t)
-       (title (format nil "~@[~a - ~]skyizwhite" title))
-       (meta :name "description" :content (or description "pakuの個人サイト")))
+       (title (format nil "~@[~a - ~]Amongtellers" title))
+       (meta
+         :name "description"
+         :content
+         (or description
+             (<>
+               "Welcome to the official website of 'Amongtellers (Amaterasu)', "
+               "a personal project by paku (skyizwhite). "
+               "Discover project details, the latest updates, and related activities."))))
      (body
        :hx-ext "head-support, response-targets"
        :hx-boost "true" :hx-target-404 "body" :hx-target-5* "body"
        :class "h-[100svh] flex flex-col"
        (page-header)
-       (main :class "flex-1 h-full mx-auto container"
+       (main :class "flex-1 h-full"
          children)))))
 
 (defmethod jg:process-response ((app jg:app) result)

src/routes/index.lisp

@@ -6,9 +6,14 @@
 
 (defcomp page ()
   (hsx
-   (div :class "h-full grid place-items-center"
-     (h1 :class "text-pink-600"
-       "Hello World"))))
+   (section :class "h-[100svh] bg-[url('/fv.jpg')] bg-cover bg-center flex items-end pb-12"
+     (div :class "container flex justify-between items-end"
+       (h1 :class "flex flex-col text-6xl font-bold italic leading-normal"
+         (span :class "block"
+           "Bridging Minds,")
+         (span :class "block"
+           "Building Futures."))
+       (p "© 2025 skyizwhite")))))
 
 (defun handle-get (params)
   (declare (ignore params))

src/routes/not-found.lisp

@@ -7,16 +7,16 @@
 
 (defparameter *metadata*
   '(:title "404 Not Found"
-    :description "お探しのページは削除されたか、URLが間違っている可能性があります。"))
+    :description "The page you are looking for may have been deleted or the URL might be incorrect."))
 
 (defcomp page ()
   (hsx
-   (div :class "flex flex-col justify-center items-center h-full gap-4"
+   (section :class "container flex flex-col justify-center items-center h-full gap-4"
      (h1 :class "text-2xl text-red-600"
-       "404 Not Found")
+       (getf *metadata* :title))
      (p (getf *metadata* :description))
-     (a :href "/" :class "text-pink-600"
-       "トップページに戻る"))))
+     (a :href "/" :class "text-orange-600"
+       "Return to the homepage"))))
 
 (defun handle-not-found ()
   (jg:set-response-status :not-found)

tailwind.config.js

@@ -5,5 +5,10 @@ module.exports = {
     "./src/routes/**/*.lisp",
     "./src/components/**/*.lisp",
   ],
+  theme: {
+    container: {
+      center: true,
+    },
+  },
   plugins: [],
 }