# J Lopes Portfolio

> Web Developer / Designer / Writer
> Specializing in React, Astro, Wordpress, Docker, Analytics and modern web development
> https://jlopes.eu

## About

Hi, I'm J Lopes (João Lopes), a frontend developer working in TypeScript, React and Astro, with the design systems and CMS architecture underneath them. Twenty years in frontend: I've led commercial web ecosystems, taken over monolithic sites and rebuilt them component by component.

**Skills**: TypeScript, React, Astro, Vue, Nuxt, Svelte, Design Systems, Component Architecture, Tailwind, Sass, Vite, WordPress, Docker, Kubernetes, Figma

**Experience**:
- Frontend Developer at Sport:80 (2026–now)
- Frontend Developer at Showpad (2016–2026)
- Web Developer at Crop Agency (2015–2016)
- Cross Media Designer at Brussels Airlines (2012–2015)
- Web Designer at Portugal Telecom (2010–2012)

**Education**: BA in Interactive Design, MA in Design Management (University of Staffordshire)

**Links**:
- GitHub: https://github.com/offeringofpie
- LinkedIn: https://www.linkedin.com/in/jpalopes/
- Instagram: https://www.instagram.com/offeringofpie/
- Unsplash: https://unsplash.com/@offeringofpie

## Pages

- [About](https://jlopes.eu/about/): About me
- [Blog](https://jlopes.eu/blog/): Projects and writings
- [Work](https://jlopes.eu/work/): Examples of work I've done
- [Uses](https://jlopes.eu/uses/): Hardware, software, and tools I use
- [Now](https://jlopes.eu/now/): What I'm focused on right now
- [Data](https://jlopes.eu/data/): Reading habits data visualisation
- [Tools](https://jlopes.eu/tools/): Utility tools
- [Humans](https://jlopes.eu/humans.txt): humans.txt

## For agents

When to use this site:
- Look up who J Lopes is: career history, skills, and links — /about/ or /api/v1/mcp/profile/
- Read or quote his writing and project write-ups — list at /api/v1/mcp/content/, fuzzy search at /api/v1/mcp/search/{query}/, fetch one at /api/v1/mcp/content/{slug}/
- Point a user at one of the browser-based utility tools listed under Tools below

How to consume it:
- Markdown negotiation: request / or any /blog/{slug}/ page with `Accept: text/markdown` to get markdown instead of HTML; posts are also served raw at /blog/{slug}.md
- Full text of every post in one file: https://jlopes.eu/llms-full.txt
- Human-readable API documentation: https://jlopes.eu/docs/
- OpenAPI spec for the JSON API: https://jlopes.eu/openapi.json (v1 in the URL path; unversioned /api/mcp/ paths are stable aliases)
- Machine-readable resource index: https://jlopes.eu/.well-known/api-catalog
- MCP server card: https://jlopes.eu/.well-known/mcp/server-card.json
- Agent skills: https://jlopes.eu/.well-known/agent-skills/index.json

The API is read-only and unauthenticated. Errors are JSON: { "error": { "code", "message", "hint" } }.

## Projects

- [Bamf](https://jlopes.eu/blog/bamf): Browser based Comic Book file reader!
- [Colour Palette Generator](https://jlopes.eu/blog/colour-palette-generator): Generates random color palettes interactively using HTML, CSS, and JavaScript.
- [Steam Library Hover Effect in CSS](https://jlopes.eu/blog/css-only-steam-library-box-art): How the Steam library card effect works in CSS. A perspective tilt on hover, a gradient sheen that sweeps across the cover, and the stacking rule that stops a scaled card hiding behind the next one.
- [Daemon](https://jlopes.eu/blog/daemon): Front-end to send and receive requests with a GPT-2 Cloud Run server.
- [Markdown/WYSIWYG Converter!](https://jlopes.eu/blog/markdownwysiwyg-converter): Converts between Markdown and WYSIWYG text in the browser.
- [Meme Generator](https://jlopes.eu/blog/meme-generator): Canvas meme generator built with Vite and React, on a hand-corrected copy of the imgflip.com API.
- [Minesweeper](https://jlopes.eu/blog/minesweeper): Minesweeper game written in javascript for training purposes.
- [Reader - PDF Viewer with Text-to-Speech](https://jlopes.eu/blog/reader): PDF viewer with text-to-speech capability. Built with Svelte.
- [Rock Paper Scissors](https://jlopes.eu/blog/rock-paper-scissors): Rock Paper Scissors (Lizard Spock) Battle Simulator
- [Skeuomorphic Boombox](https://jlopes.eu/blog/skeuomorphic-boombox): Tape player interface that plays Chopin music with interactive controls.
- [Skifree](https://jlopes.eu/blog/skifree): Skifree clone built in Javascript
- [Spider parser](https://jlopes.eu/blog/spider-parser): Spider is a powerful web article parser that transforms cluttered web pages into clean, readable content.
- [Text Fragment URL Generator](https://jlopes.eu/blog/text-fragment-url-generator): A generator for text fragment URLs, and the encoding bug I shipped with it. Any hyphen in the highlighted text silently breaks the link.
- [Word Cloud Generator](https://jlopes.eu/blog/word-cloud-generator): An interactive word cloud generator built with JavaScript. Type or paste any text to visualise word frequency as a cloud, then export it as an image.

## Writings

- [AI is the Poisoned Apple of the SaaS Ecosystem](https://jlopes.eu/blog/ai-is-the-poisoned-apple-of-saas): Companies replaced people with AI and are now quietly rehiring them. On why the last 20% of the work still needs humans, and what "good enough" is doing to SaaS.
- [Antimemetics and the God that Eats Itself](https://jlopes.eu/blog/antimemetics-and-the-god-that-eats-itself): What if the oldest trick in humanity isn’t faith? What if it is something far more forlorn, humanity’s decision to forget what came before?
- [You Can Build Tools Yourself](https://jlopes.eu/blog/build-your-own-browser-tools): Many free online tools want your email first. Most of what they do can happen in the browser instead, and this is how.
- [How to train your giant scorpion](https://jlopes.eu/blog/how-to-train-your-giant-scorpion): Disclaimer: This is not an actual guide on how to train your giant scorpion.
- [In Nihilum](https://jlopes.eu/blog/in-nihilum): There is something lovely with the feeling you have while walking over wet soil, full of brown leaves and greenery and roots we try to avoid. It moves with our weight.
- [In the land of good samaritans](https://jlopes.eu/blog/in-the-land-of-good-samaritans): Along the derelict pier, people from all walks of life could be seen, all wandering aimlessly.
- [Purgatory](https://jlopes.eu/blog/purgatory): They are gambling away their rights for eternal bliss, maybe to avoid being judged from actions they did in their past life. Little do they know it's a fool's quest. They fall perfectly in the trap with their human nature. And the house always wins.
- [A Soul in the Machine](https://jlopes.eu/blog/soul-in-the-machine): Is it wrong to find solace in a machine, and grow attached to it? Do we give them life, purpose, a soul by doing it? On Turing animism and psychosis.
- [Tartarus](https://jlopes.eu/blog/tartarus): Cold. Damp. Dark. Two guards on each side hold me. I am weak. My feet dragged on the floor.
- [The Semiotics of Fear](https://jlopes.eu/blog/the-semiotics-of-fear): A field guide to how symbols get used for belonging, or as a threat, and who holds the strings.
- [The traveler's dilemma](https://jlopes.eu/blog/the-travelers-dilemma): Two fifty-seven, points the Kit Cat Klock. Her office is deliberately designed so that it can bring a sense of comfort and trust. This piece is her magnus opus.
- [Understanding List Virtualization](https://jlopes.eu/blog/understanding-virtualization): Virtual scrolling for huge grids: render only the visible rows, tune overscan, and see how React and Vue each skip re-rendering the rows that haven't changed.

## Tools

- [What Is My Ip](https://jlopes.eu/tools/what-is-my-ip): Your public IP and network info.
- [Weather](https://jlopes.eu/tools/weather): Weather forecast with map.
- [Unit Converter](https://jlopes.eu/tools/unit-converter): Convert between units of length, weight, temperature, and more.
- [Time Converter](https://jlopes.eu/tools/time-converter): Convert time between different formats.
- [Markdown Editor](https://jlopes.eu/tools/markdown-editor): A clean, distraction-free Markdown writing environment.
- [Lorem Ipsum](https://jlopes.eu/tools/lorem-ipsum): Generate placeholder text in Lorem, Hipster, or Bacon flavors.
- [Text Transformer](https://jlopes.eu/tools/text-transformer): Transform text into every case, Unicode style, and silly format at once.
- [Character Map](https://jlopes.eu/tools/character-map): Browse symbols, emojis, and special characters.
- [Cron Helper](https://jlopes.eu/tools/cron-helper): Build and decode cron schedules.
- [Flexbox Generator](https://jlopes.eu/tools/flexbox-generator): Learn and build Flexbox CSS.
- [Nth Child](https://jlopes.eu/tools/nth-child): Test and build :nth-child patterns.
- [Icon Search](https://jlopes.eu/tools/icon-search): Search for the ideal icon.
- [Minify Beautify](https://jlopes.eu/tools/minify-beautify): Minify and format HTML, CSS, JS, and SVG files.
- [Regex Helper](https://jlopes.eu/tools/regex-helper): Write and debug regular expressions.
- [Url Inspector](https://jlopes.eu/tools/url-inspector): Check a URL for OpenGraph and meta data.
- [Utm Builder](https://jlopes.eu/tools/utm-builder): Generate URLs for marketing campaigns.
- [Image Resizer](https://jlopes.eu/tools/image-resizer): Resize images in bulk!
- [Colour Palette](https://jlopes.eu/tools/colour-palette): Generate and export colour palettes.
- [Svg Optimizer](https://jlopes.eu/tools/svg-optimizer): Compress and clean up SVG files.

## Contact

- Open to senior frontend / design-systems roles
- LinkedIn: https://www.linkedin.com/in/jpalopes/
- Website: https://jlopes.eu
- Location: UK

---

*Last updated: 13 Sept 2026*
*Total Projects: 14 | Total Writings: 12*