Christian Alder

@hejchristian.com

1510 Followers 1103 Following

Building websites, playing board games, editing videos. Will fika ☕️ /_src 🇸🇪 /_draft 🇬🇧 /_live 🇵🇹 He / Him, Powered by 🌱 🏳️‍🌈🏳️‍⚧️🤎🖤

Dettifoss waterfall found in the Northeast of Iceland, described as one of the most powerful waterfalls in Europe. A steep 44meter drop, with very wide 100meters of water forcefully crashing down, kicking up so much spray that the area below is blanketed in a constant grey mist. Across the other side of the waterfall can be seen some people stood on the rocky landscape, their size very small in comparison to the waterfall. On the side where this photo was taken, is some mossy vegetation covering the jagged and downward sloping terrain.
Screenshot from Farming Simulator 25 on macOS, where I've somehow gotten the log collecting truck in an even worse state where it's now full doing a wheelie and the claw has gone through the truck to pin me in this position, logs fully fallen out now
Screenshot from Farming Simulator 25 running on macOS, I've somehow managed to flip my log loader truck on its side and the logs I'd been picking up fell out, with the log grabbing claw still fully extended.
Screenshot from the game Farming Simulator 2025 running on macOS; showing my character in a rice harvesting machine in a rice field, with the pipe out ready to unload some collected rice into a truck;
A small bird (European Stonechat) which appears to be a juvenile male; perched on top of a concrete fence post with exposed rebar, with a background of the field fully out of focus. The bird has black legs, black beak, and head; with a white and mostly rusty coloured body and black/brown patterned wings.
A vibrant multi-coloured bird, the European-bee eater, stood in a freshly cut field. The bird is a mix of green, aqua, bronze rust around the top and back of the head, strong yellow around the chin; a narrow black band along the eye connected to the sharp black beak
A barren flat landscape in Iceland with sharp and jagged mountains piercing into the sky along the horizon. The foreground is just little rock pebbles and small patches of dry looking vegetation, dark and grey. The sky above everything has a mixture of clouds and a haze that makes the light shine through dramatically.
A rock pigeon standing in a field, it's mostly gray body with black bands near the edge of the wings, with a darker grey neck and iridescent green/pink shimmering patches. The pigeon has a vibrant red/orange eye colour.
A younger house sparrow perched on a thin lemon tree branch, with some leaves blurred in the foreground. The sky is quite hazy and dims the colour a bit. The sparrow is a mixture of cream and darker brown shades, with a thick pointed beak and sharp claws grabbing the branch.
Cropped screenshot from VSCodium showing my latest 4 commits to git. - Added Bugs - Started work on a new grid and tidy up - Re-working the category filter style - Added tic tac toe into the dev key points
Short demo from the contact form on my WIP website, showing me spam clicking on a <select> option called "Bug Report"; for each click, spawns in a randomly scales and positioned bee, until many of them are swarming across the page from left to right.
Short demo recording from the contact form on my website, showing that when I click on the topic of "Bug report" a bug emoji (Fly, beetle, ladybug, or the literal word "bug") appears on the left and wiggles its way across and off the screen to the right. This is done by generating an SVG path, and setting that as the CSS offset-path for the emoji to follow.
A small black circle and a black lines bezier curve in the shape of an elongated sideways letter 'S'; the result of me trying to handcode an SVG.
A small, male, european stonechat perched on a wire fence in a field. The bird has a mostly rust colour belly with white patched, with black tail feathers, wings, and head.
Sprite sheet file for the orange tabby companion cat provided from mu.social - showing the little pixelated cat in various states, from sleeping, running, and more
Screenshot from mu.social showing the CSS snippet (code in a comment above) working to make all the images grayscale, while keeping the companion cat (mine is an orange tabby cat) in colour. Test screenshot taken from my profile.
A large white stork standing on top of a rectangular compressed hay bale in a field. The stork is mostly white with a thick band of black feathers along its wings, and has a long slender neck, with bright red/pink beak and legs.
Screenshot from my codepen page (Link in the post) showing my top 6 most popular demos: - CSS Holographic Masks - CSS Only Parralax Layers - Framed Parallax Layers - Card Glow / Bioiluminesence - Nice <mark> - and Playing Card With a thumbnail for each.
A Common Buzzard perched on an old wooden fence pole (fence wire since removed) within a field with some compressed hay bales behind it. The bird is mostly shades of brown with darker wing tips, and a curved, sharp, grey beak.
Two large black crows standing atop a rectangular hay bale in a recently cut field. The crows are jet black, with one interested in getting a snack out of the hay bale itself while another seems to have spotted me.
A black kite (large bird of prey) soaring wings spread through the sky, looking for breakfast. It's mostly various shades of brown, getting darker towards the tips of its wing and tail feathers. It has a sharp, curved, yellow beak with a black tip.
A male black redstart perched on the edge of a hay bale with an insect in its beak. The bird is mostly black with patched of dark grey, with a orange/rust tail feathers.
Short demo recording (no sound) of the footer of my WIP website, showing me scrolling horizontally across some enamel-style pins. As I scroll light shimmers across the pins and they scale up and rotate slightly towards the middle; this is being achieved with CSS scroll timelines, and masking for the light shimmer animation. The focus of this demo recording is to show my latest addition to the collection of pins - "Human Made" which includes a hand symbol, made by HINOKODO.
Night time photo atop the Setas de Sevilla (previously called Metropol Parasol) in Seville, Spain. This is a large gridlike structure with a gentle wave-like curvature and lights within each grid cell; a pathway on top allows visitors to walk around and see the animated light show, which at the time of the photo was a blend of blue and pink colours. In the distance on the night horizon, can be seen Seville Cathedral, lit up in a warm amber glow; along with some other buildings.
A Common Buzzard bird of prey (Mostly brown, with lighter underside) perched on top of a concrete pillar for electricity, against a slightly dim, blue sky.
Cropped screenshot from the Fogos.pt website which tracks wildfires in Portugal, the map shows a few active fires, with one large one having been selected that shows 1081 people, 351 ground vehicles, and 8 planes being used to combat it.
Cropped screenshot from my WIP website showing a section heading on the page in the style of some black paper stuck down with tape on the corners; this specific heading reads "About" with a tiny description "Who am I and how do I work?"
Small demo of me scrolling down a page on my WIP website, showing the portfolio block highlighting some website projects I've woked on previously. Each block is in the style of a cutting mat with a sketch of each websites layout, and some paper-like strips with information like a description or testimonial. as I scroll down the page each portfolio stacks on top of the other, until the end where all 5 are stacked on top of each other.
6 pieces small squares of paper on a green cutting mat, three of which are still scrunched up, and the other three and opened and flattened a bit back towards its original shape. A coffee can be seen in the top.
Cropped in photo of my keyboard with a green cutting mat underneath it, with a few note squares around and a pen.
Demo recording of me scrolling down the portfolio section of my website, which so far shows 3 cutting mats and a little note with a website sketch. As I scroll down the site the board stack on top of each other.
Screenshot from a section of my site where I've made an element look like a green cutting mat with a grid.
Cropped screenshot from VSCodium code editor showing a portion of the WIP code that make up the links in my sites footer. The focus of this image is the link for my policy on the two letters (A and I; I'm writing it like this in the alt-text because I don't want to attract the fans) It points to a page titled "fuck-(A and I)", to indicate my distaste for such a tool.
I'm stroking the paw of a lil cat resting on our chair, and suddenly he releases a powerful lil sneeze.
Farmer in a blue and white tartan shirt with blue jean overalls and and cap saying: "it ain't much, but it's honest work" as he stands in front of a field.
Small demo recording of my site showing the bottom of the homepage, with the focus being on me scrolling horizontally over a selection of enamel-style pins (Progress pride flag, tomte, css logo, cinnamon roll, orange tabby cat, block of tofu, and a stonechat bird); As I scroll, a light shimmers over the surface of the pin revealing a bit of light highlighting or texture on the pin itelf.
Plane wreckage (US Navy DC-3 Wreckage) in Iceland. An abandoned wreckage on black sand beach, the metal frame all exposed, wings broken, and since aged by the years it's been left here. Some graffiti mark the wreckage, and in the horizon is a glacier rising up towards the mostly clear blue sky.
A Eurasian Kestrel bird mid-flap, hovering in spot as it hunts for prey on the ground below. The Kestrel features a mostly whitish body with black spels, and a black band around it's tail feathers. Bright yellow shap beak and feet, with long black claws.
A male house sparrow perched on top of a chimney; photo edited to black and white.
5 enamel looking pins on my website, each made up of 2 to 3 layers to trick light effects as the user scrolls over them, making them feel more realistic. The five pins are as a follows: A progress pride flag, A kodtomte (nordic lore inspired creature based on the tomte) CSS Logo A cinnamon roll (kanelbullar) with the word "Fika?" underneath, and a pixel version of our orange tabby cat called Nanina
Screenshot from the Affinity app on macOS showing the two layer breakdown of three images designed to look like an enamel pin. The three images are a progress pride flag, a kodtomte (some lil creature thing inspired by the tomte from nordic folklore - rotund, beard that covers the body,and a red pointy hat covering the face), and a purple CSS logo. The extra layers above (for each) show a base layer, and a mask layer
A demo recording from my WIP website, showing a 3 images designed to look like enamel pins. The images are the progress pride flag, a kodtomte (a lil mascot for the site, inspired by the tomte from nordic folkfloor - its like a tiny bearded being with a hat pulled down so far you can only see their nose); and the CSS logo. As I scroll up and down the page, light shimmers across the pins as though they were made of metal and glossy paint.
A demo recording from a page on my website showing some whimsical features I'm trying to add to my site. The focus of this demo is of a curious little kodtomte, rotund and with a bushy beard, they're holding a sign that says "Hej!" when I click on the sign, a rift opens in the page (a <details> element is expanded, with a dark contrasting background. I scroll down the now larger page, and find a card which hints at me to click it. I do so, revealing a collectable card of a Tiger + Ruby Tiger Moth hybrid called a Ruby Tigress, which is a mostly monochrome multi-layered vector design. Upon clicking to reveal the card, some confetti shot out from that area.
A large bird of prey (I think a Black Kite?) soaring in a pale blue/white sky with wings outstretched as it hunts for breakfast. The bird is various shades of brown/black, with a short neck and sharp yellow with black tipped beak.
Homepage splash/header for my website; a large text reads "Hej! Welcome to my site" followed by "I build websites, design stuff, make things, observe nature, and much more" A sticky-note design is beneath which reads "Ok but like, who are you?" in bold, "I'm Christian Alder, a multi-disciplined frontend developer currently based in Portugal, Continue Reading >" The video shows me hovering over or taking focus on the following words: websites, stuff, things, nature; with a make-shift SVG path animation playing on top of a placeholder photo of myself.
A pair of White Storks in the field. One is sharp and in focus while the other behind it is not. The in focus stork is has its body towards the camera; both are large birds with mostly white feathers apart from some black around the edges of its wings, with a vibrant red-pink large beak and legs.
Cropped screenshot from VSCodium showing a before and after for how I can target the stroke-dasharray and stroke-dashoffset for some SVG paths on the page. Previous/old method needed the total length for each path (which I'd fetch from JavaScript, as each path was unique), this resulted in a nasty long number, often in the hundreds, with 10+ decimal places. The new method just assigns a value of 100, and can now be applied to every path at once given we no longer need to fetch the paths unique total length. Now it's just 100%.
Cropped screenshot of my vertical tab bar in the Zen browser on macOS. The focus is on the three tabs which switched their page title to "🖐️ Don't forget this" or "🖐️ You left something in the cart" after I clicked away from the page.
A square piece of a paper with an assortment of arrow scribbles and a couple of exclamation marks; drawn in a blue ball point pen.
Cropped screenshot of The Index post by Piccalilli, being viewed on the Mu Social client as an alternative to Bluesky. The purpose of the screenshot is to show how well the Piccalilli colour scheme works with the dark colour from this client.
A tiny baby gecko, smaller than my finger, being held by myself. The gecko is a sandy tan colour, with a bronze eye and tiny vertical pupil.
A Western Cattle-Egret, standing on the back of a sheep in a field while a pal (another cattle-egret) is on the floor. The bird is mostly white with a brownish chest and head feathers, with a vibrant orange beak.
The mu.social companion pixel cat (Mine is an orange tabby) scaled up super big to fit the browser window, and in various animation states, from playful to sleeping.
Three Rumphobs (Small, goblin/troll like creatures with wild hair and features, wearing oldish medieval like clothing) standing on a fallen tree in a Swedish Forest, from the Netflix TV series adaptation of Ronja, the Robber's Daughter, a story by Astrid Lindgren
Cropped screenshot from Helium with horizontal tabs. I have enough tabs open that the tabs have been squished so small that all that's showing is a line of favicons, no text
Cropped screenshot from Helium browser in dark mode, showing a vertical side bar with 3 folders (Naturalist, Dev, and Dev Admin); the first two are open, showing tabs for iNaturalist and eBird under Naturalist folder, and localhost:8080 and CodePen for Dev folder.
Cropped recording of my profile on mu.social, showing the companion cat (Mine is an orange tabby cat) running along the top of my browser window upside down!
A Lenovo Ideapad 5 with a makeshift black tape being used for a hinge because the the real one broke.
A metal laptop hinge for a Lenovo Ideapad 5 laptop on a table. The hinge has broken off from the plastic shell it was screwed into, taking the actual threaded inserts with it.
A line of wind turbines along some gentle rolling hills in Portugal. There is a lot of vegetation covering the terrain here but it's looking a bit dry. The sun is in a mostly clear sky directly in front of us, with a hazy layer along the horizon.