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.

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


Long · Short

find

Sign my Guestbook!

In the spirit of a (welcome, and overdue!) resurgence of nostalgia for the old, decentralised web, where many of us bashed out our own personal homepages and filled them with whimsical, social stuff not only intended to make us look good for prospective clients or employers, I've built myself a little 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!

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