Wolfr Wolfr

name	description
gemini-avatar-generation	Generate avatar images using Google's Gemini API. Use when creating placeholder avatars, profile pictures, or character images for components.

Gemini Avatar Generation

Generate 512x512 avatar images using Google's Gemini API for use in components like Team sections, testimonials, and user profiles.

Written Sunday 15th of December 2024

Project contact: Johan Ronsse [email protected]

My goal is to launch a new Obra Studio website in January (latest launch date: January 20th)

This document to help drive the discussion about the abstraction level of code and reusable mixins forward.

Basically the discussion is twofold:

Imagine a card component, documented in the styleguide:


	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Your Brand Theme Test</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<style>
	:root {


	@mixin dark-mode {
	:global(html[data-theme='system']) {
	@media (prefers-color-scheme: dark) {
	@content;
	}
	}

	:global(html[data-theme='dark']) {
	@content;

	{
	"apiVersion": "2023-02-28-preview",
	"modelId": "prebuilt-layout",
	"stringIndexType": "textElements",
	"content": "You must be the change you wish to see in the world!\nEverything has its beauty, but\nnot everyone sees it!",
	"pages": [
	{
	"pageNumber": 1,
	"angle": -1.1024999618530273,
	"width": 1000,

	$html-font-size: 16px;
	$enable-rem: true;

	@function stripUnit($value) {
	@return $value / ($value * 0 + 1);
	}

	@function rem($value) {
	@if $enable-rem {
	@return #{$value/stripUnit($html-font-size)}rem;

	const ConnectionCardList = ({ data }) => js
	const listItems = connections.map((item) => (
	<ConnectionCard title={item.name} desc={item.receiver} />
	));

	return <Flex flexWrap="wrap">{listItems}</Flex>;
	};

	import pMemoize from 'p-memoize'

	import { LanguageKey, TextNodePlainObject } from './types.js'

	export const translateAsync = pMemoize(async function (
	{ characters, id }: TextNodePlainObject,
	languageKey: LanguageKey
	) {

	// Old Google API

	<template>
	<nav role="navigation" aria-label="Pagination">
	<ul class="c-pagination">
	<li class="c-pagination__element">
	<Button icon="arrow-left-s" layout="icon-only" :theme='internalPage === 1 ? "inactive" : "secondary"'
	@click="decreasePageNumber">Previous page
	</Button>
	</li>

	<li class="c-pagination__element" v-for="(page, index) in pages" :key="page === MORE ? -index : page">