Sara Joy

sara

Hi! Welcome :)

A picture of me!

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

Being employed and having two small children, I'm not contractually (or physically!) available to build sites for others.

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

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

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

Cheeper

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


Long · Short

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!

The Claw 🦋 Webring
<-  An IndieWeb Webring 🕸💍 ->
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.

chevron pointing up