smed #1

Open
aey wants to merge 8 commits from smed into main
11 changed files with 99 additions and 2695 deletions

4
.gitignore vendored
View file

@ -1,2 +1,4 @@
node_modules
.venv
__pycache__
pub
.ropeproject

3
Makefile Normal file
View file

@ -0,0 +1,3 @@
upload:
scp ./pub/* madrse@madr.se:~/exported/src/cv

13
cv.py Normal file
View file

@ -0,0 +1,13 @@
from smed import Smed
from smed_layouts import layouts
from smed_markdown import markdown
(
Smed()
.source("./src")
.destination("./pub")
.static(["*.css", "*.pdf"])
.use(markdown())
.use(layouts())
.build()
)

BIN
dist/anders-englof-ytterstrom.pdf vendored Normal file

Binary file not shown.

View file

@ -1,51 +0,0 @@
var Metalsmith = require("metalsmith");
var htmlMinifier = require("metalsmith-html-minifier");
var layouts = require("metalsmith-layouts");
var markdown = require("metalsmith-markdown-remarkable");
var permalinks = require("@metalsmith/permalinks");
var static = require("metalsmith-static");
var puppeteer = require("puppeteer");
var srcHTML = "file:" + __dirname + "/pub/index.html";
var destPDF = "./pub/cv-anders-englof-ytterstrom.pdf";
async function generatePDF() {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(srcHTML, {
waitUntil: "networkidle2",
});
await page.pdf({
path: destPDF,
});
await browser.close();
}
Metalsmith(__dirname)
.source("./src")
.destination("./pub")
.use(
markdown({
html: true,
typographer: false,
}),
)
.use(permalinks())
.use(
layouts({
engine: "handlebars",
}),
)
.use(htmlMinifier())
.use(
static({
src: "./assets",
dest: "./",
}),
)
.build(function (err, _files) {
if (err) {
throw err;
}
generatePDF();
});

View file

@ -1,6 +1,6 @@
<html lang="en">
<!--
Welcome to the source code of the resume of Anders Ytterström!
Welcome to the source code of the resume of Anders Englöf Ytterström!
I apologize for the ending slash (/) in the void elements, this
is due to an opinion that won't be added as an option to skip in
@ -10,11 +10,11 @@
best viewed in a web browser, though. :)
Colophon:
- Metalsmith, the pluggable static site generator.
- Smed, the pluggable static site generator.
- Prettier, for code formatting.
- Handlebars, not my favorite template engine but it does the job.
- Jinja2, not my favorite template engine but it does the job.
- Markdown.
- Plain old CSS, for a change.
- Plain old CSS.
Internet Explorer support was not considered when
creating this page. I apologize if this is an issue for you.
@ -48,8 +48,8 @@
<dd><a href="tel:+46702169645">+46 70 216 96 45</a></dd>
<dt>Email:</dt>
<dd><a href="mailto:{{email}}">{{email}}</a></dd>
<dt>Github:</dt>
<dd><a href="https://github.com/{{github}}" rel="external" title="Github">{{github}}</a></dd>
<dt>Codeberg:</dt>
<dd><a href="https://codeberg.org/{{codeberg}}" rel="external" title="Codeberg">{{codeberg}}</a></dd>
<dt>Website:</dt>
<dd><a href="https://{{website}}" rel="external" title="Website">{{website}}</a></dd>
</dl>
@ -57,98 +57,98 @@
</div>
<section class="about">
<div>
{{{contents}}}
{{content}}
</div>
<span>
<a href="./cv-anders-englof-ytterstrom.pdf">Download as PDF</a>
<a href="./cv-anders-englof-ytterstrom.pdf" download>Download as PDF</a>
</span>
</section>
<section class="skills">
<h2>Skills</h2>
<dl class="skillset">
{{#each skills}}
<dt>{{@key}}</dt>
<dd>{{.}}</dd>
{{/each}}
{% for area, values in skills.items() %}
<dt>{{ area }}</dt>
<dd>{{ values }}</dd>
{% endfor %}
</dl>
</section>
<section class="work">
<h2>Experience</h2>
<div class="timeline">
{{#each work}}
{% for w in work %}
<article class="event">
<h3 class="event__title">{{employer}}, {{type}}</h3>
<div class="event__location event__aside">{{location}}</div>
<div class="event__position">{{position}}</div>
<div class="event__date event__aside">{{date}}</div>
<h3 class="event__title">{{ w.employer }}, {{ w.type }}</h3>
<div class="event__location event__aside">{{ w.location }}</div>
<div class="event__position">{{ w.position }}</div>
<div class="event__date event__aside">{{ w.date }}</div>
<div class="event__content">
<ul>
{{#each responsibilies}}
<li>{{.}}</li>
{{/each}}
{% for responsibility in w.responsibilies %}
<li>{{ responsibility }}</li>
{% endfor %}
</ul>
</div>
</article>
{{/each}}
{% endfor %}
</div>
</section>
<section class="education">
<h2>Education</h2>
<div class="timeline">
{{#each education}}
{% for e in education %}
<article class="event">
<h3 class="event__title">{{institution}}</h3>
<div class="event__location event__aside">{{location}}</div>
<div class="event__position">{{graduation}}</div>
<div class="event__date event__aside">{{date}}</div>
<h3 class="event__title">{{ e.institution }}</h3>
<div class="event__location event__aside">{{ e.location }}</div>
<div class="event__position">{{ e.graduation }}</div>
<div class="event__date event__aside">{{ e.date }}</div>
<div class="event__content">
{{fields}}
{{ e.fields }}
</div>
</article>
{{/each}}
{% endfor %}
</div>
</section>
<section class="projects">
<h2>Projects</h2>
<div class="timeline">
{{#each projects}}
{% for p in projects %}
<article class="event">
<h3 class="event__title">{{name}}</h3>
<h3 class="event__title">{{ p.name }}</h3>
<i></i>
<div class="event__position">{{context}}</div>
<div class="event__aside">{{date}}</div>
<div class="event__position">{{ p.context }}</div>
<div class="event__aside">{{ p.date }}</div>
<div class="event__content">
<ul>
{{#each responsibilies}}
<li>{{.}}</li>
{{/each}}
{% for responsibility in responsibilies %}
<li>{{ responsibility }}</li>
{% endfor %}
</ul>
</div>
</article>
{{/each}}
{% endfor %}
</div>
</section>
<section class="courses">
<h2 class="h-aside">Courses, Conferences & Certifications</h2>
<ul>
{{#each courses}}
<li>{{.}}</li>
{{/each}}
{% for course in courses %}
<li>{{ course }}</li>
{% endfor %}
</ul>
</div>
</section>
<section class="personal">
<h2 class="h-aside">Personal Projects</h2>
<div class="timeline">
{{#each personal}}
{% for k, v in personal.items() %}
<article class="event event--aside">
<h3 class="event__title">{{@key}}</h3>
<h3 class="event__title">{{ k }}</h3>
<i></i>
<div class="event__content">
<p>{{.}}</p>
<p>{{ v }}</p>
</div>
</article>
{{/each}}
{% endfor %}
</div>
</section>
</main>

2562
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -1,17 +0,0 @@
{
"name": "madr-se-cv",
"private": true,
"scripts": {
"build": "node index.js"
},
"devDependencies": {
"@metalsmith/permalinks": "^2.2.0",
"handlebars": "^4.7.7",
"metalsmith": "^2.1.0",
"metalsmith-html-minifier": "^3.0.3",
"metalsmith-layouts": "^1.4.1",
"metalsmith-markdown-remarkable": "^1.0.2",
"metalsmith-static": "0.0.5",
"puppeteer": "^23.6.0"
}
}

3
requirements.txt Normal file
View file

@ -0,0 +1,3 @@
smed @ git+https://codeberg.org/madr/smed@main
smed_layouts @ git+https://codeberg.org/madr/smed-layouts@v1.0.1
smed_markdown @ git+https://codeberg.org/madr/smed-markdown@v1.0.0

View file

@ -66,9 +66,9 @@ a:active {
[href^="mailto"]::before {
content: "✉️ ";
}
[href^="https://github.com"]::before
[href^="https://codeberg.org"]::before
{
content: "🐙 ";
content: "⛰️ ";
}
[href^="https://madr"]::before
{
@ -79,7 +79,7 @@ a:active {
padding: 0.3em;
}
[href$="pdf"]::before {
content: "📑 ";
content: "⬇️ ";
}
[href$="pdf"]:hover::before,
[href$="pdf"]:focus::before {
@ -196,7 +196,8 @@ the upcoming Container queries was a thing.
padding: 1em;
color: #111;
display: flex;
justify-content: space-between;
gap: 2rem;
justify-content: flex-start;
flex-direction: column;
align-items: center;
}

View file

@ -1,18 +1,28 @@
---
skip: true
title: cv
layout: cv.hbs
layout: cv.html.j2
name: Anders Englöf Ytterström
ogdesc: Anders Englöf Ytterström - Frontend Engineer, Full Stack Developer, Web standardista
titles: Frontend Engineer, Full Stack Developer, Web standardista
ogdesc: Anders Englöf Ytterström - Linux specialst, Frontend Engineer, Web standardista
titles: Linux specialist, Frontend Engineer, Web standardista
address: Balladvägen 3, 784 43 Borlänge, Sweden
email: yttan@fastmail.se
github: madr
codeberg: madr
website: madr.se
work:
- employer: Swedish Transport Administration (Trafikverket)
type: Government agency
date: Aug 2025now
location: Borlänge, Sweden
position: Systems technician
responsibilies:
- Linux server administration.
- Container orchestration.
- Service monitoring and observability.
- Shell scripts, Ansible, Grafana, OpenTelemetry, RHEL, Ubuntu Server, OpenShift.
- employer: PlaymakerAI
type: Data analytics SaaS
date: Nov 2023now
date: Nov 2023Aug 2025
location: Remote position
position: Full Stack Engineer
responsibilies:
@ -22,7 +32,7 @@ work:
- employer: Stratsys
type: Process management platform (SaaS)
date: Mar 2022Oct 2023
date: Mar 2022Oct 2023
location: Remote position
position: Senior Frontend Architect
responsibilies:
@ -33,7 +43,7 @@ work:
- employer: Iteam
type: Technical Innovation agency
date: Sep 2021Mar 2022
date: Sep 2021Mar 2022
location: Remote position
position: Full Stack Developer
responsibilies:
@ -104,18 +114,19 @@ education:
skills:
Programming languages: HTML, CSS (Sass), Python, JavaScript (TypeScript), Elixir, Rust, PHP
Development process: CI/CD, Automated testing, Mentoring, Mob programming, Pair programming
Web Backend Frameworks: Django, Flask, Phoenix (LiveView), Express, Remix, Next.js
Web Backend Frameworks: Django, Flask, Bottle, Tornado, Phoenix (LiveView), Express, Remix, Next.js
Web Frontend: React, Redux, Vue, Svelte, Lit, OOCSS, BEM, Living styleguides
Data visualization: Vega, Altair, Vega-Lite, Advanced SVG
Build systems: Webpack, Parcel, esbuild
Content management: Wordpress, Joomla, Directus
Web Backend testing: pytest, Jest, Selenium, Playwright, Puppeteer, WebDriverIO, Web Test Runner
Web Frontend testing: Lighthouse, Axe, WebAIM, VoiceOver, Voice Assistant, NVDA, Cypress
Deployment: AWS, Docker (Podman), Kubernetes, Ansible, Terraform, Azure DevOps, Render
"Services & Infrastructure": Nameko, RabbitMQ, Celery, Kibana, Prometheus
Databases: MySQL, Postgres, Elasticsearch (Opensearch), GraphQL, Influx, Timescale
Deployment: AWS, Docker, Podman, Kubernetes, OpenShift, Ansible, Terraform, Azure DevOps, Render
Distribution: Nameko, RabbitMQ, Celery
Observability: Grafana, OpenTelemetry, Kibana, Prometheus
Databases: MySQL, Postgres, Elasticsearch (Opensearch), GraphQL, Influx, Timescale, MSSQL
Version control: Git, Subversion
Operating systems: Mac OS, RHEL, Debian, Ubuntu server, Arch linux, Windows
Operating systems: Mac OS, RHEL, SLE, Debian, Ubuntu server, Arch linux, Alpine, OpenSUSE, Windows
Other skills: Inclusive communication, Accessibility compliance, Technical writing
Languages: Swedish (native), English (fluent)
@ -206,8 +217,9 @@ personal:
Tajm.me: As a consultant, time tracking is a crucial part of every day work, and using bad time tracking software sucks. For 5 years, I scratched my own itch. Django, DRF and Web standards at its core. Several experimental client side solutions built with D3, React, Vue, Android, iOS and GTK+. (Archived, 20122017)
"Baslyft, bärs & burgare": "My first Progressive Web App, with support to work fully offline once installed on a device. It's a simple app for logging reps, sets and PB's in the gym, with some nice tools built-in: 1RM calculator and KG-LBS converter. Touch-oriented design patterns, React, Redux, localStorage, ServiceWorker and other nifty Web API:s. (On hold, Sep 2019)"
Brütal Legend: A site to track progress of owning vinyl copies os songs licensed in an epic video game. Occasionally used as a real-world example to teach TypeScript, React and Redux concepts to collegues. (On hold)
Utsökt: A simple bookmarking and read list service, with integration to RSS feeds, Pocket and Slack. Inspired by the old, more minimal version of Instapaper. Elixir, Phoenix LiveViews. (In progress)
Smed: "A pluggable static site generator, inspired by Metalsmith. The goal is to replace my own sites in Metalsmith, and to learn Rust. (In progress)"
Tolk: Web-based launcher/prompt for all things wanted. Written in Elixir and Phoenix LiveView. (In progress)
Smed: "A pluggable static site generator, inspired by Metalsmith. It built this page. (In progress)"
courses:
- ElixirConf EU, Warshawa (2020, postponed due to the Coronavirus pandemic)
- Att leda utan att vara chef, Företagsakademin (2019)
@ -222,8 +234,8 @@ courses:
- Certificed Scrum Master Course, Crisp AB (2010)
---
**Anders Englöf Ytterström**, Web Developer with 16 years of passion. I strive to constantly come up with new ways of improving both products and processes for all participants in projects I am part of.
**Anders Englöf Ytterström**, Web Developer and Linux ethusiast with 20 years of passion. I strive to constantly come up with new ways of improving both products and processes for all participants in projects I am part of.
I prefer my coffee black, just like my metal, and preferably drip brewed by hand.
I prefer my coffee black, just like my metal.
I also aim to be a [roadie, not a rockstar](https://www.linkedin.com/pulse/20140816105034-167544180-you-don-t-want-a-rock-star), as well as defending [boring tech](https://mcfunley.com/choose-boring-technology).