Sara Joy

sara

Hi! Welcome :)

A picture of me!

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

This site is built with vanilla HTML, CSS and just a little JS in Astro.

Code Skills

I have varying experience using:

work

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

sara​wallen.com

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 :)

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 the Astro framework.

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!

blog

  • Short Thorts on a colourful background

    Short Thorts

    A collection of shorter posts not big enough for their own article. Very likely also posted to Mastodon.

  • Profile picture of my twitter account

    #100DaysOfCode

    Copying and pasting my tweets on the matter as I slowly make my way non-consecutively through the 100 days.

  • Two pairs of shoed feet standing on pavement slabs, on which the words PASSION LED US HERE are painted in red.

    Job Application Tips

    How to get the first interview, and smash it!

  • Somewhat semantic HTML, fading from harsh colours to a more serene state.

    A11y: Semantics, Contrast and... Anxiety?

    It's a lot. It's tempting to pretend we didn't read that very confronting article telling us we need to Do Better.

  • Accessibility/a11y icon: a stylised human body inside a circle

    How We All Benefit from Accessibility

    A general musing on accessibility (a.k.a. a11y), online and offline.

  • Screenshot of menu made using <details> tag

    Using html <details> tag as navigation

    Natively right out of the box, HTML provides us with a way to open and close an element on a click. Beautiful.

  • Longines Hydroconquest Mechanical Watch

    Mechanical Watches

    I have a thing about mechanical watches. I only wear one though, the engagement watch that my now husband gave me in 2014.

  • Performing with Swing Dance Bristol (image credit Christopher Allen)

    Why I Dance, Nov 2012

    I began dancing in January 2007 (first, leroc, then I discovered swing/lindy about 5 months later) - really, I was looking for a hobby.

find

chevron pointing up