From bfd174b664603c5c0ac85cd12dc34e2fd23a9c98 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 | 68 ++++++++++++++++++++++++++++++++++++++++---- index.html | 76 ++++++++++++++++++++++++-------------------------- 2 files changed, 98 insertions(+), 46 deletions(-) diff --git a/css/styles.css b/css/styles.css index 2c85eea..0ea3c72 100644 --- a/css/styles.css +++ b/css/styles.css @@ -64,21 +64,34 @@ 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: 3rem; + 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: 3em; + color: var(--iris); + margin: 1rem; + width: full; + text-align: center; } -h3 { - font-size: 2em; - color: var(--iris); +#this-website { + background: none; } main { @@ -129,16 +142,35 @@ section { } } +p { + margin: 1rem; +} .container { margin: 1em; background-color: var(--surface); background-image: radial-gradient(circle at top left, var(--overlay), var(--surface)); border-radius: 6em; + border: solid 1px var(--hl-med); padding: 3em; box-shadow: 1em 1em var(--shadow-color); } +figure { + margin: 0px; +} + +.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 +192,7 @@ a { text-decoration-color: var(--pine); color: var(--foam); font-weight: bold; + display: inline; } a:visited { @@ -194,6 +227,29 @@ li::marker { color: var(--foam); } +#project-list { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 0px; +} + + #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..7f9eb60 100644 --- a/index.html +++ b/index.html @@ -18,17 +18,12 @@
-

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. Since arriving in Spain from my native England in 2010, I have worked teaching English as a foreign language, but now it's time for a change. This is why I have spent the last two years dedicated to re-skilling as a web developer.

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...

+

This website...

  • … is hosted on bespoke hardware. A mini-pc in my living room, to be precise!
    • @@ -38,26 +33,17 @@
  • … is fully compliant with Web Content - Accessibility Guidelines because accessibility - isn't an - optional - extra!
    • + Accessibility Guidelines
  • … is styled with careful consideration for Responsive Web Design principles - (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.
    • -
  • … was lovingly hand-coded by myself. Naturally.
    • +
  • … was lovingly hand-coded by myself.
@@ -107,48 +93,58 @@ -

Projects

+

Selected projects

+ +
    +
  • +

  • 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 +