Implement top page

src/components/layout.lisp

@@ -14,19 +14,19 @@
 (defparameter *header-nav-items*
   '((:href "/"        :label "Home")
     (:href "/about"   :label "About")
-    (:href "/work"    :label "Work")
-    (:href "/contact" :label "Contact")))
+    (:href "/work"    :label "Work")))
 
 (define-element header-nav-item (href label)
   (li
-    :class "px-2 rounded-full"
-    :|:class| #?"isCurrentPath('${href}') && 'font-bold bg-lime-200 pointer-events-none'"
+    :class "px-4 rounded-full"
+    :|:class| #?"isCurrentPath('${href}')
+                 && 'font-bold bg-indigo-200 pointer-events-none shadow-sm'"
     (a :href href
       label)))
 
 (define-element layout-header ()
   (header :class "px-10 py-6 flex justify-between"
-    (H1 :class "font-bold text-2xl"
+    (h1 :class "font-bold text-xl"
       "skyizwhite.dev")
     (nav
       :x-data "{
@@ -43,7 +43,7 @@
 (define-element layout ()
   (body
     :hx-ext *hx-ext*
-    :class "h-[100svh] flex flex-col"          
+    :class "h-[100svh] flex flex-col bg-neutral-200"
     (layout-header)
     (main :class "flex-1"
       children)

src/routes/about.lisp

@@ -1,7 +1,8 @@
 (defpackage #:hp/routes/about
   (:use #:cl
         #:piccolo)
-  (:local-nicknames (#:view #:hp/view/*))
+  (:import-from #:hp/view/*
+                #:render)
   (:export #:handle-get))
 (in-package #:hp/routes/about)
 
@@ -9,8 +10,8 @@
   (div :class "h-full place-content-center"
     (h1
       :class "text-4xl text-center"
-      "About")))
+      "Coming soon...")))
 
 (defun handle-get (params)
   (declare (ignore params))
-  (view:render (page)))
+  (render (page)))

src/routes/contact.lisp

@@ -1,16 +0,0 @@
-(defpackage #:hp/routes/contact
-  (:use #:cl
-        #:piccolo)
-  (:local-nicknames (#:view #:hp/view/*))
-  (:export #:handle-get))
-(in-package #:hp/routes/contact)
-
-(define-element page ()
-  (div :class "h-full place-content-center"
-    (h1
-      :class "text-4xl text-center"
-      "Contact")))
-
-(defun handle-get (params)
-  (declare (ignore params))
-  (view:render (page)))

src/routes/index.lisp

@@ -1,16 +1,67 @@
 (defpackage #:hp/routes/index
   (:use #:cl
-        #:piccolo)
-  (:local-nicknames (#:view #:hp/view/*))
+        #:piccolo
+        #:cl-interpol)
+  (:import-from #:hp/view/*
+                #:defasset
+                #:render)
   (:export #:handle-get))
 (in-package #:hp/routes/index)
 
+(named-readtables:in-readtable :interpol-syntax)
+
+(defasset *me-img* :img "me.jpg")
+
 (define-element page ()
   (div :class "h-full place-content-center"
-    (h1
-      :class "text-4xl text-center"
-      "Hello, world!")))
+    (div :class "flex justify-center gap-x-20"
+      (div :class "flex justify-end"
+        (img
+          :src *me-img*
+          :alt "avatar of paku"
+          :class "w-full max-w-xs rounded-xl shadow-sm"))
+      (div :class "flex flex-col justify-center gap-10"
+        (h1 :class "text-4xl font-bold"
+          "paku (skyizwhite)")
+        (p :class "text-xl"
+          "Web developer"
+          (br)
+          "Admin of"
+          (a :target "_blank" :href "https://himagine.club" :class "text-indigo-500"
+            "himagine.club"))
+        (ul
+          (li
+            (span "GitHub:")
+            (a
+              :target "_blank"
+              :href "https://github.com/skyizwhite"
+              :class "text-indigo-500"
+              "@skyizwhite"))
+          (li
+            (span "Email: ")
+            (let ((email "'paku'+'@'+'skyizwhite.dev'"))
+              (a
+                :x-data t
+                :x-text email
+                :|:href| #?"'mailto:'+${email}"
+                :class "text-indigo-500")))
+          (li
+            (span "Fediverse(main): ")
+            (a
+              :rel "me"
+              :target "_blank" 
+              :href "https://post.skyizwhite.dev/@paku"
+              :class "text-indigo-500"
+              "@paku@post.skyizwhite.dev"))
+          (li
+            (span "Fediverse(sub): ")
+            (a
+              :rel "me"
+              :target "_blank"
+              :href "https://himagine.club/@skyizwhite"
+              :class "text-indigo-500"
+              "@skyizwhite@himagine.club")))))))
 
 (defun handle-get (params)
   (declare (ignore params))
-  (view:render (page)))
+  (render (page)))

src/routes/work.lisp

@@ -1,7 +1,8 @@
 (defpackage #:hp/routes/work
   (:use #:cl
         #:piccolo)
-  (:local-nicknames (#:view #:hp/view/*))
+  (:import-from #:hp/view/*
+                #:render)
   (:export #:handle-get))
 (in-package #:hp/routes/work)
 
@@ -9,8 +10,8 @@
   (div :class "h-full place-content-center"
     (h1
       :class "text-4xl text-center"
-      "Work")))
+      "Coming soon...")))
 
 (defun handle-get (params)
   (declare (ignore params))
-  (view:render (page)))
+  (render (page)))