Sara Joy

sara

Hi! Welcome :)

A picture of me!

I am a techy, creative person with a front end develop­ment 'Schwer­punkt' :)

I'm learning everything I can about Web Accessibility (a.k.a. a11y), because the internet is for *everyone*.

This site is built with vanilla HTML, CSS and just a little JS in Astro. If it is all a bit much, I'm currently working on a simpler version to be found at sarajoy.dev/basic

What's new /now?

Code Skills

I have varying experience using:

stuff

Sara's main landing page - the screenshot shows the nagivation of the website with the INTRO: 'Hi! Welcome :)' and STUFF: 'Web Development & Design' tabs in view

tabs 2022

I had an idea about using the behaviour of the CSS property "position: sticky" to make a stack of cards that would land on top of each other when scrolling. Well, I made it and immediately applied it to my landing page :)

First written in Notepad++ in HTML and CSS only!

Yasmin Brinkmann's website - the headline is Praxis für systemische Beratung, Coaching & Biographiearbeit and there is a picture of her with her arms folded wearing a red top and a fetchingly striped blazer.

Yasmin Brinkmann

A friend from swing dancing needed a new landing page, and gracefully agreed to my coding it from scratch as a learning exercise.

Written in pure "vanilla" HTML, CSS and a smattering of JavaScript :)

A very simple web page with a round profile picture and links to twitter, email, website

QR Code Card

I had an idea to make a digital business card, to use at my very first web-development conference.

In the end, it wasn't really used - but no matter, it was fun to make :)

An avatar of me, commissioned from Andy Carolan

Basic

I got an itch to start redoing my website in a more basic, elegant way.

I'm not sure I'm succeeding with elegant visuals, but either way you can see the work-in-progress here!

Benjamin Dickson, Comics Writer & Artist desktop website screenshot. His four most recent comic covers are displayed in a row under the title.

Benjamin Dickson

My friend Ben needed a new responsive website to replace an ageing Wordpress site which was not responsive at all. I love building sites with such interesting content!

I built this site with Astro.

ASCII Art

When I was 15 or so I frequented several USENET newsgroups,
particularly alt.fan.eddie-izzard and alt.ascii-art.

If in dark mode, consider switching to to see it properly! 

                       ______
                _.-=,-" _... """-.,_
              /"  .- "'-.,-- " ' _  \
            ,'  -  . -'" _",- -" . \ '.
           / /   /  __ -"  /)_)\ (\ '. \
          / /  (  _(  \ )\/     )/ |/) \
         (   -   _\   /'            /') )
         / '  "  )                    / /
         | /  ( (                     ')(
         \ |  / /    _.,,.      _,,._  /
         \  - //  .:'`'_```'   '``_`''./
         \ /"\_:   /<(8)_>)    (<(8)>' |\
          |/|\T:      ".'/     `-_"    ||
          | LJ|'               |       ||
          `\ *             .   `       /
           >\_,           (_    |      J
            <' \            `'/'       |
             <_\                      /
               <\      `<-':'-':'-    /
             _/\|A        .,___,-    /
            / / |'M.        ```     /
        _.,/ <  | ''M.             /\-.._
    _/'`   | |  o . '''A.       _-`\ (   `-,
   "  sjw  / >./o   ' '''''''''' |o \ \     '.
           |  \  o      ' ' ' ' ' o ) \
           \   \  o   '   '  '   o  /  )
           |  / |   o           o .'   /
           \ (   \     o  o  o  .".    /
            \\  \ )            / _ \   /
             "\  (            / (:) ) /
                  \          /      /" Self-portrait!



            \_/                    \\
          --(_)--                 < "_)
            / \     .--.-.--.     / /
                        V        /#/
                  ______________/(/
    )\      _,--,/           .-/#/\
    "\"-._.oo ' /             \)/_\\
      "-.___. ./____________________\
           \__  | (  )  |__|  |__| |
           ,-,\_|_|__|_____________|__,-,
           | |________________________| |
           L L________________________J J
'._.'._.'._.'T T________________________P P_.'._.'._.'
            \ \______________________/ /
'._.'._.'._.'._\ \____________________/ /'._.'._.'._.'
         sjw  ","-.______________.-","
                "-._""--------""_.-"    Noah's Ark
                    ""--------""



        \)       /\__/\       (/ 
      _.-:-._   (<|><|>)   _.-:-._
  _.-'  / \  '-._'(VV)'_.-'  / \  '-._
.-'     /   \    .      .    /   \     '-.
'-.   /     \   .      .   /     \   .-'
   \ /  _.._ \  .\    /.  / _.._  \ / 
   |/.-`    `.\'  '))'  '/.'    '-.\|
              '   ((     '
sjw                 ))  Cat-bat? Erm...
                   "



                   __..-----')
         ,.--._ .-'_..--...-'
        '-"'. _/_ /  ..--''""'-.
        _.--""...:._:(_ ..:"::. \
     .-' ..::--""_(##)#)"':. \ \)    \ _|_ /
    /_:-:'/  :__(##)##)    ): )   '-./'   '\.-'
    "  / |  :' :/""\///)  /:.'    --(       )--
      / :( :( :(   (#//)  "       .-'\.___./'-.
     / :/|\ :\_:\   \#//\            /  |  \
     |:/ | ""--':\   (#//)              '
     \/  \ :|  \ :\  (#//)
          \:\   '.':. \#//\
           ':|    "--'(#///)
                      (#///)
                      (#///)
                       \#///\
                       (##///)
                       (##///)
                       (##///)
                       (##///)     Mmm desert island...
                        \##///\
                        (###///)
                        (sjw////)__...----....___
                        (#/::'''                 ""--.._
                   __..-'''                             "-._
          __...--""                                         '._
_____..--"""                                                     "-.._______
(_ ""---....___                                          ___...--"" _)
  """--...   __"""""----.......__________.......-----""""      --"""
               """"  ---.....                    ___....----



 __________________________
|                          |
|    NO LIVE TURTLES OR    |   _,,.------..,
|                         _|-'`-``_//\/'/-_ `\
|    FROGS ARE TO LEAVE  ((_,.-,.-''      '`\|
|                        ||-''`               \
|        THE STORE.     /           / /        \.
|                      /           /)/}T  /\     \_
|  ZXZXZHXHZXZHXZHXZHXH    | )    ) | { ('( \(',- <
|                     [    /|/)-')             |  |
|_____________________|    /                   |  )
                      |   |  _,.,,_    .  .:'`: L (
                      \  /  '`/(o)\`:   \/(o)>\ L /
                       \ |     --_'` :  |`'''`  |/
                        ||                      Y|
                         \          .    '.     |J
                         |\         [* _-*/     |
                         ',\           ||       |
                           _L    `_.,::--::,.   |
                         ,/ |        - ... -    /
                      _,/   |\        _ _      :`'\
                    ,/ / /'`|VA               /\   \,_
              _sjw/~  / (   |:VAa.    ,, .   /| |\    `\
           ,-'   /   (   \_-/\ ::OHAa.___,.-' | / \     `\
          /     /     \       \ : :VHHHH: :' / \|  \\
               /       \-._ () \    : : :   /  :_    \
              |         |  `'\  \         _/ _  /     \
              /    __.. |     \   \.   _/'` '_,/       \
             / _,-'    \ \     \ () \_/ _,.-'`
             '`         \(      \    /-'`
                         )       \ _/|   EDDIE IZZARD
                        /        |   /
                       /         |() |
                      /          |   |
                                 :.__:



           _    __   __   _         __     _|_
 .-""-/   (o)    \\ (()) /| ()()  ."__".  / | T
/     '   /\\    |\\ "" /|| Y--T / T__) \ \\|
-||====\/  /__\\   | \\  / || |_.  | |\\  |  '|,
\    || /    \\  |  \\/  || | '  \ J \\ /   |\\
 '-..-'/\     /\ /\  V   /\ L--J  ".__."  L | /
                             _       __    "|"__            _
                       sjw  (o)    ."  ".   ." _". ,|,  ,|, V  ()    () ()()
                            /\\   / T // \ / // T \ ||  ||  \/ \\    \/ Y--T
   "GAMERS ARCHIVE"        /__\\  | |//  | | ||   | ||==||- ||  \\   /  |_.
                          /    \\ \ J__) / \ \\_. / ||  ||  ||   \\ /   | '
                         /\     /\ ".__."   ".__."  /\  /\  /\    \/    L--J
                                                                  ()



                          _,..,_
                         /::::::\
                        /::::::::\
                       /::::/\::::\
                      /::::/  \::::\
                     /::::/    \::::\
                    /::::/      \::::\
                   /::::/        \::::\
                  /::::/          \::::\
                 /::::/            \::::\
                /::::/              \::::\
               /::::/WW/ww/          \::::\
              /::::/ _0000ooo,        \::::\
             /::::/ C0000000000000000o \::::\
            /::::/     V00000000000000  \::::\
           /::::/        000000000000000o\::::\
          /::::/         V000V""""000V"00 \::::\
         /::::/         A0  VA   oAV    00 \::::\
        /::::/         AV    "0oAV"         \::::\
       /::::/        oAV      o0"Vo          \::::\
      |::::/__________________________________\::::|
      \::::::::::::::::::::::::::::::::::::::::::::/
       '-;;;;;;;;;;;;;;;;;;sjw;;;;;;;;;;;;;;;;;;;-'
                          |:.  |
                          |:.  |   Warning, Moose!
                          |:.  |   Se upp, älg!
                          |:.  |
                          |:.  |



                           .ee._
                  ,       /$$$$$$e.
                   '.    /$$.$'$$$$$.
                     \   |$/$$$$$$$$$\
                ""--._|_ |/$'$$$$$$\"*'
          .ee.   .-" .  ""*$$$$$$)"-'
         /$$$$ee/ //\|'-/""V"\"**'
         |$$$$$/|/ ' e$*-    _\ \"-.
         /$$$$$|"   $$.-   ."\'\ \  '.
         |$$$$$|\ (_$/  / /.-"\ \ ),  \
          \$A/\|"-_"' -"  '\   \ |/    \
              /-"" "        \-"| /      \
           .-"""""-          | ||        \
        .-"                  |_|/         \
      .'     _.sjw.          |/ /        . \
     /   .e$$$$$$$$)         | /         | \
     | .e$$$$$$$$$$/     .-._/ |         |  \
     \ \$$***$$/  )      \  /  /         /  \
      \ '*(  \/ ."__      \/ ,"/        /   |
      /"-._)    ""  \   .-"." /         /   |
     /  -"/__.   --./--".-"   |        /    |
     |      /../\  )--""      |.  ,   /     /
     \      ""/| "-" ,        /\ /||\/      /
      "-.__.-" |     |         |\|  /-,     /
               /     |         \      )     /   /|
               |     |,        \ . --"|    /   / /
               /     \\         '.'-."     /  / /
               ||     \\          ""      / .' /_
               |\ .     \        .       /."  ".'
               |/\ \ .   \  .    /    .  / _.-'
MUTTLEY!!!     ' \ \ |\,    |,  /|/| /|,/__,7
                  \|\|\\\   |\|/ | |/ "V
                 .-',' \ '-.\ V  / V
                 >-. "-.\  |"   /_..--.
                 ( /".     |       .-._)
                  V       _A     "-.  \
                   "---"""  ".     )_."
                              '-.."



   __    __        __          __    __        __          __    __
  (//    \\)    __(//   __    (//    \\)    __(//   __    (//    \\)  
sjw /"      / __  \\)"    \\)_  /"      / __  \\)"    \\)_  /"      / __
'|-..__..-''\_''-.\__..-''  '|-..__..-''\_''-.\__..-''  '|-..__..-''\
(\\  \_    _(\\      _/     (\\  \_    _(\\      _/     (\\  \_    //)
 ""  (\\  //)""     //)      ""  (\\  //)""     //)      ""  (\\   ""
      ""  ""        ""            ""  ""        ""            ""




    _.._   *                .\_|_/.
  */ /`     _._  *    _._  _-/   \-_
  {  |    *//`\\..-..//`\\  -\_ _/-
   \_\._*  \\_   ` `   _//  `/ | \`
 *   ``   __`|   |_|   |`__
 ________/  \\__//  \__//  \sjw_____
|**-     \_|/   \___/   \|_/     -**|
|* Sara Joy Wallén, ICQ# 32690270  *|
||         sara(a)wallen.as        ||
|____________/   \_/   \____________|
             \\_\/ \/_//




                       ___   ___
                   _.-'   '/?  '-.
               _.-'   _ --\/ _ \  `'\
              / _  -    _--\/  \  \  `\
             / /           _L      \   |
            | /      .,-'''  \     \    \
           /    /   /         |         |.
          /        ,'         '  |   \   |
          |    |   |          :   |   |  \
         /     |   |          |   |   |   |
         /  /    | |          \    \  \  `|
        J  /  /  | |           \       \_ |
        |  |    /  ) _.,,.      \_  \     .>
        \        .:'`'_```'    /''\_ _  _->\
         \   __.-` /<808_>|   |<808>`\`'  ,\
          |/|\T        / /     `-_    |/ ||
          | LJ|               |       || /
          `\ *            .   `       /' 
          > \_,          (_    |     *J |
         <'`   \           `'/'      - |{
      _<`'   < \                    /|  |
      _>   <    \     `<-':'-':'-   / |  }
      _/\ <   < |A       .,___,-   /|  \/
     /  <   <   |'M.       ```    /| |\|
  _.,    <   <  | ''M.           / -'\_    old
/'` /      |/|  o . '''A.      _-`-/ \_ `-,   self
  /         >'/o   ' ''''''''' |      \   '.  portrait
 /            \ o      ' ' ' 'o|           |
 |         \_  \ o   '  '  '. o'  /        |
. /            \__\_o           o`|/        /    `\
|,._              \o         o  /       _/        \
    \              |oo       o |`      /           |
     \,._           \ oo    o  /      /            \
sjw      `'|_        \  oo o  /     _/              |
             \        \   o   |    /                |




:::,
'::::'._
 '.    '.                        __.,,.
   '.    '.                _..-'''':::"
     \     \,.--""""--.,-''      _:'
 /\   \  .               .    .-'
/  \   \                   ':'
/    \  :                     :
/      \:                       :
\       :                       :
\      :      ,--,         ,-,  :
\    :      |(_) |       |() | :
 \   :     __'--'   __    '-'_  :
  \  :    /  \      \/      / \ :
   \  :  (    )             \_/ :
.-'' . :  \__/   '--''--'      :
\  . .-:'.                   .:
 \' :| /  '-.__      ___...-' :
  \::|:        ''''''          '.
.,:::'/  :                       '.
 \::\:   :                         '._
  \::    :     /             '-._     '.
   \:    :    /              .   :-._ :-'
    :    :   /               :   :  ''
    :   .'   )'.             :   :
sjw   :  :  .'   '.          :   :
      : '..'      :      _.' _.:
       '._        :..---'\'''  _)
          '':---''_)      '-'-'
             '-'-'  PIKACHU!



                            _,-""--.__  ___
                          /'  __      ''   '\_
                        ,'          \   __    '\
                       )           \    ___     (
                     ,'  _.--._ \     __         \
                    /   /      " \_.-.___         )
                    /  (               \,_        |
                    \ /                / /\_      \
                    // ,,_               ///      \
                   /\    '=,              /\      /
                   ||  \_  \      _.,,._   /)    (
                   (|    "" )  / _     '"   /   _/
                    |       /     ',__.-    / ,/)
                    |                      ",/ /
                    |     (     \          ' /,\
               _____\   ,  '-"-'           .'   )
           _,-"     \  ' -.__     '  .   ,'      )
        ,-'          \   \'-."-. )    ,-'   <    )_
       /              \   '-.-'      /      \  ,"  "-._
      /               ''._       _,-|        '<        "-._
    ,'                 '.__----:"    \         '.          "-.
   /    /           |      """'   /   |          '.
  /    /            \          ,-'    |            '._
 /    /              \             /  \               '-.
/     /                \         /    \                  '-,
/     /                         /       \                    '-
/ sjw  |   an old boyfriend (eyes closed)             \



                              _,-""--.__  ___
                            /'  __      ''   '\_
                          ,'          \   __    '\
                         )           \    ___     (
                       ,'  _.--._ \     __         \
                      /   /      " \_.-.___         )
                      /  (               \,_        |
                      \ /                / /\_      \
                      // ,,_               ///      \
                     /\=.,._=,              /\      /
                     || YMMMMM.   / .._,,._   /)    (
                     (|  MMMMMM)=,_.,,..  '"  /   _/
                      |   `"""/    qMMMMML    /,,/)
                      |             MMMMMM>-""',/ /
                      |     (     \  '"""'   ' /,\
                 _____\      '-"-'           .'   )
             _,-"     \  -,-.__     '  .   ,'      )
          ,-'          \   \'-."-. )    ,-'   <    )_
         /              \   '-.-'      /      \  ,"  "-._
        /               ''._       _,-|        '<        "-._
      ,'                 '.__----:"    \         '.          "-.
     /    /           |      """'   /   |          '.
    /    /            \          ,-'    |            '._
   /    /              \             /  \               '-.
  /     /                \         /    \                  '-,
 /     /                         /       \                    '-
sjw/MJP/LS   and a diddle for sunglasses!  \
A photo of the Hamburg Binnenalster, taken from the north-western corner.

Hamburg

A nice photo I took :)
A screenshot of the front page of the blog featuring my head and shoulders. I have glasses on my head and a purple top and grey cardigan on.

Blogolio

I built this blog to introduce myself to the world of frameworks, and I started with SvelteKit via this article: Let's learn SvelteKit by building a static Markdown blog from scratch

I then spent lots of time making up the modal components in this portfolio, and I'm quite proud of it - however! Now using <dialog> elements makes this rather easier...

Mega-zine teletext mock-up - pixellated neon letters and blocky image with a tongue sticking out on a black background

Mega-Zine

This is a mock-up in HTML and CSS of an old and slightly strange Channel 4 Teletext page I used to read avidly as a teen, Mega-zine.

With thanks to The Mega-zine Museum and teletext art for the great quality almost-source materials I could copy!

A wall with stickers reading DER HUSTLE IST HART and DER STRUGGLE SO REAL

Swing​tänzerin

There is a lot of stuff on this old tumblr of mine:

Swing dance DJ sets, lindy-hop discussion, photography and crochet projects. Enjoy!

A simple monochrome front page of Cheeper, with an image of a chick in half a hatched egg, 'Welcome to Cheeper' text, and a sample of 'cheeps'.

Chee­per

One of the projects made during Flavio Copes' 2022 Bootcamp.

Sometimes this is up, sometimes down - feel free to go play :)
MK timelapse GmbH desktop website screenshot. The hero image is a skyscraper under construction.

MK time­lapse

I worked for MK timelapse GmbH, which in 2019 really needed an updated website. I hopped on to Wix, chose a template and then modified it heavily to reflect the feel of the new (at the time) MK logo.

blog

find

Sign my Guestbook!

I'm not tracking, running analytics, or feeding anyone cookies - I don't need to know a lot of data about my visitors. But for those of you wanting to tell me something about this website, please feel free to sign it!

Find me elsewhere:

Email me:

Or, find others!

←  An IndieWeb Webring 🕸💍 →

The Claw 🦋 Webring

Ye Olde Blogroll

PERSONALSIT.ES

Privacy Policy

I do not track you, I do not run analytics, I do not set cookies.

I do write to session storage, so that you don't get surprised when your chosen high contrast or dark/light modes turn on or off as you navigate around the site. This disappears the moment you close the tab, or browse away.

The only data I receive from you, is that which you freely give me though the email or guestbook forms. Should you want a copy or would like me to delete anything you sent me, I will happily oblige - contact me in whichever way you prefer to ask for this.

Accessibility Statement

This is very much a hobby website built in my spare time, with many "to do's". I do however fully welcome any advice about where I need to fix something because something is inadvertently inaccessible.

I am extremely interested in making the web accessible to *everyone*. I read a lot of material related to a11y, and I plan to attain CPACC certification. The cert itself is not the goal, only a mechanism to gain the authority to push for what needs to be done in my day job.

The Web Content Accessibility Guidelines (WCAG) defines requirements for designers and developers to improve accessibility for people with disabilities. It defines three levels of conformance: Level A, Level AA, and Level AAA. My personal website is partially conformant with WCAG 2.0 level AA. Partially conformant means that some parts of the content do not fully conform to the accessibility standard.

As the default page doesn't fully satisfy contrast requirements, I have an added contrast toggle available for those who need or prefer to view the page with high contrast.

I welcome your feedback on the accessibility of this website. Please let me know if you encounter accessibility barriers by contacting me via your preferred contact method.

Sitemap
chevron pointing up