From 764a40045490f118d8af29e7654646491981c83a Mon Sep 17 00:00:00 2001 From: andrzej Date: Fri, 11 Oct 2024 18:07:53 +0200 Subject: [PATCH] add subman, tweak wording and styles --- css/styles.css | 53 +++++++++++++++++++++++++++++++++++----- index.html | 66 +++++++++++++++++++++++++++----------------------- 2 files changed, 83 insertions(+), 36 deletions(-) diff --git a/css/styles.css b/css/styles.css index 2c85eea..72aec94 100644 --- a/css/styles.css +++ b/css/styles.css @@ -64,21 +64,28 @@ h4 { font-family: League, Verdana, Geneva, Tahoma, sans-serif; color: var(--gold); margin: 0px; + background: var(--hl-med); + padding: 3rem; + border-radius: 3rem 3rem 3rem 3rem; } h1 { + font-size: 5em; + text-shadow: var(--text-shadow); + background: var(--hl-med); + padding: 1rem; + border-radius: 0 0 3rem 3rem; +} + +h2 { font-size: 3em; text-shadow: var(--text-shadow); } -h2 { - font-size: 2em; - text-shadow: var(--text-shadow); -} - h3 { - font-size: 2em; + font-size: 3em; color: var(--iris); + margin: 1rem; } main { @@ -139,6 +146,17 @@ section { box-shadow: 1em 1em var(--shadow-color); } +.ghost-container { + + @media screen and (min-width:601px) { + max-width: 60%; + } + + @media screen and (max-width:600px) { + flex-direction: column; + } +} + figcaption { margin-bottom: 0; font-size: 2em; @@ -160,6 +178,7 @@ a { text-decoration-color: var(--pine); color: var(--foam); font-weight: bold; + display: inline; } a:visited { @@ -194,6 +213,28 @@ li::marker { color: var(--foam); } +#project-list { + display: flex; + flex-direction: column; + align-items: center; +} + + #project-list>li { list-style-type: none; + + @media screen and (min-width:601px) { + width: 60%; + } + + @media screen and (max-width:600px) { + width: 90%; + } +} + +.links-container { + display: flex; + justify-content: center; + gap: 3rem; + width: full; } diff --git a/index.html b/index.html index 7e63bd7..f4565f9 100644 --- a/index.html +++ b/index.html @@ -18,14 +18,8 @@
-

Hello.

- My name is Andrzej, and until the pandemic I was an English teacher. If you're reading - this, you - most - likely followed a link here from my CV. I thought this page would be the best way to - demonstrate - what - I'm capable of. +

Allow me to introduce myself.

+ My name is Andrzej. Until the pandemic I was an English teacher, but I have spent the last two years dedicated to learning web development to as high a level as possible. If you are reading this, you most likely followed a link here from my CV. I thought this page would be the best way to demonstrate what I'm capable of.

The website you are currently reading...

@@ -47,13 +41,9 @@ (because I have no idea what device you're reading this on!) -
  • … hosts a collection of projects demonstrating my proficiency in both - frontend - and - backend development including projects written in CSS, Html, - Javascript, - React, Nodejs, Sql, Jq, Lua, Groovy, and Bash.
    • -
  • … is deployed via a self-hosted CI/CD system.
    • +
  • … follows system light/dark theming.
    • +
  • … hosts a collection of projects demonstrating my proficiency in both frontend and backend development including projects written in CSS, Html, Javascript, React, Nodejs, Sql, Jq, Lua, Groovy, and Bash.
    • +
  • … is deployed via a self-hosted Jenkins CI/CD system.
  • … is fully source-available on my self-hosted git server.
    • @@ -108,47 +98,63 @@

    Projects

    + +
      +
    • +

      +I host these projects on my own git server, because I wanted to learn how to do that myself. There are more projects than those listed here, and even more hidden from public view, but this selection gives a good overall impression. +

      +

      +If you inspect the source code, you will find Jenkinsfiles: these projects are all deployed via a self-hosted, end-to-end CI/CD pipeline. +

      +

    • Subman

      A self-hosted literary submission management system comprising a - Nodejs back-end server and React front end. + Nextjs web-app with Sqlite back-end. Styled with Tailwind.

      - demo - source -
      • -
    • - -

      Micro365

      -

      - A bot written in nodejs that delivers single-word writing - prompts from a database. -

      - demo - source +
      + demo + source +
      • + + + + + + + + + +

    • Movie-Explorer

      An app for when you don't know what movie to watch, written in - Typescript/React. + Typescript/React and vanilla CSS.

      +
      demo source +

    • Calculator

      - A simple calculator app written in React. + A simple calculator app written in React and vanilla CSS.

      +
      demo source +