| Last login: Wed Mar 11 18:13:06 on ttys000 | |
| johanronsse@Johans-MacBook-Pro ~ % cd ~/Sites/figsor | |
| johanronsse@Johans-MacBook-Pro figsor % npm run build | |
| > figsor@1.0.0 build | |
| > cd mcp-server && npm run build | |
| > figsor@2.0.0 build | |
| > tsc |
| name | gemini-avatar-generation |
|---|---|
| description | Generate avatar images using Google's Gemini API. Use when creating placeholder avatars, profile pictures, or character images for components. |
Generate 512x512 avatar images using Google's Gemini API for use in components like Team sections, testimonials, and user profiles.
| <!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 { |
Written Sunday 15th of December 2024
Project contact: Johan Ronsse johan@obra.studio
My goal is to launch a new Obra Studio website in January (latest launch date: January 20th)
| @mixin dark-mode { | |
| :global(html[data-theme='system']) { | |
| @media (prefers-color-scheme: dark) { | |
| @content; | |
| } | |
| } | |
| :global(html[data-theme='dark']) { | |
| @content; |
| { | |
| "add": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 4C12.5523 4 13 4.44772 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44772 11.4477 4 12 4Z\" fill=\"#3F545B\"/></svg>", | |
| "archive": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2 5C2 3.89543 2.89543 3 4 3H20C21.1046 3 22 3.89543 22 5V7C22 7.74708 21.5904 8.39848 20.9835 8.74188C20.9944 8.82638 21 8.91253 21 9V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V9C3 8.91253 3.00561 8.82638 3.0165 8.74188C2.40961 8.39848 2 7.74707 2 7V5ZM20 7V5H4V7H20ZM5 9V19H19V9H5ZM8 12C8 11.4477 8.44772 11 9 11H15C15.5523 11 16 11.4477 16 12C16 12.5523 15.5523 13 15 13H9C8.44772 13 8 12.5523 8 12Z\" fill=\"#3F545B\"/></svg>", | |
| "arrow-down": "<svg width=\"24\" height=\"24\" |
| { | |
| "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, |
| // Here is a basic Framer X component where we use CSS directly | |
| import * as React from "react"; | |
| import { PropertyControls, ControlType } from "framer"; | |
| // Define type of property | |
| interface Props { | |
| width: number | |
| height: number | |
| } |
Resources that go beyond the official documentation. To learn Svelte or to find things to use in your own projects. If you have nice resources to add, please comment below.
| $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; |