Improve styling

.github/workflows/static.yml

@@ -46,7 +46,7 @@ jobs:
         uses: actions/upload-pages-artifact@v3
         with:
           # Upload entire repository
-          path: "."
+          path: "./dist"
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4

data.toml

@@ -1,27 +1,34 @@
 name = "Vahid Al"
-bio = "Software Developer"
+description = "Software Developer, Currently working on nothing"
+keywords = "developer, python"
+image = "me.jpeg"
 
 [[sections]]
 title = "Projects"
-description = "Some of my projects"
+description = "Here are some of my projects"
 [[sections.items]]
 title = "Soul"
-description = "A simple, fast and lightweight PHP framework."
+description = "An SQLite REST and Real-time server"
 url = "https://github.com/thevahidal/soul"
 [[sections.items]]
+title = "Novel"
+description = "A collaborative storytelling"
+url = "https://github.com/thevahidal/novel"
+[[sections.items]]
 title = "Bukowski"
-description = "A beautiful typewriter"
+description = "A human typewriter"
 url = "https://github.com/thevahidal/bukowski"
+[[sections.items]]
+title = "Jake"
+description = "Free one-link site generator hosted in your GitHub account"
+url = "https://github.com/thevahidal/jake"
 
 [[sections]]
 title = "Links"
-description = "Some of my links"
+description = "Look for me on these websites"
 [[sections.items]]
 title = "GithHub"
 url = "https://github.com/thevahidal"
 [[sections.items]]
 title = "Linkedin"
 url = "https://www.linkedin.com/in/thevahidal/"
-[[sections.items]]
-title = "Twitter"
-url = "https://twitter.com/thevahidal"

script.py

@@ -7,40 +7,77 @@
     data = tomllib.load(f)
     sections = frag(
         h("div", klass="section")(
-            h("h1", klass="title")(section.get("title")),
-            h("p", klass="description")(section.get("description")),
+            h("hgroup")(
+                h("h3")(section.get("title")),
+                h("p")(section.get("description")),
+            ),
             (
                 h("div", klass="item")(
-                    h("h2", klass="title")(item.get("title")),
-                    h("p", klass="description")(item.get("description"))
-                    if item.get("description")
-                    else None,
-                    h("a", klass="url", href=item.get("url"))("Link"),
+                    h("a", href=item.get("url"), target="_blank")(
+                        h("hgroup")(
+                            h("h4")(item.get("title")),
+                            h("p")(item.get("description"))
+                            if item.get("description")
+                            else None,
+                            "",
+                        ),
+                    ),
                 )
                 for item in section["items"]
             ),
         )
         for section in data["sections"]
     )
 
-    output = html(lang="en")(
+    head = frag(
         h("head")(
+            h("title")(data.get("name")),
+            h("meta", name="description", content=data.get("description")),
+            h("meta", name="keywords", content=data.get("keywords")),
+            h("meta", name="viewport", content="width=device-width, initial-scale=1"),
             h("meta", charset="utf-8"),
-            h("style")(
-                raw(
-                    """
-              body {
-               font-family: sans-serif;
-              }
-              .section > .title {
-                 color: red;
-              }
-            """
-                )
+            h("link", rel="stylesheet", href="css/pico.min.css"),
+            h("link", rel="stylesheet", href="css/style.css"),
+        ),
+    )
+
+    header = frag(
+        h("header", klass="container")(
+            h("hgroup")(
+                h(
+                    "img",
+                    klass="avatar",
+                    src=f"img/{data.get('image')}",
+                    alt="avatar",
+                ),
+                h("h1")(data.get("name")),
+                h("p")(data.get("description")) if data.get("description") else None,
+            ),
+        )
+    )
+
+    footer = frag(
+        h("footer", klass="container")(
+            h("small")("Generated with "),
+            h(
+                "a",
+                klass="",
+                href="https://github.com/thevahidal/jake/",
+                target="_blank",
+            )("Jake"),
+        ),
+    )
+
+    output = html(lang="en")(
+        head,
+        h("body")(
+            header,
+            h("main", klass="container")(
+                sections,
             ),
+            footer,
         ),
-        h("body")(h("h1")(data.get("name")), h("p")(data.get("bio")), sections),
     ).render()
 
-    with open("index.html", "w") as f:
+    with open("dist/index.html", "w") as f:
         f.write(output)