Skip to content

Instantly share code, notes, and snippets.

View jordienr's full-sized avatar
🏝️
mallorca

Jordi Enric jordienr

🏝️
mallorca
View GitHub Profile
@jordienr
jordienr / api.ts
Created January 15, 2024 12:48
Fully typed API client with zod and fetch
import { z } from "zod";
const Post = z.object({
id: z.string(),
slug: z.string(),
content: z.string(),
title: z.string()
})
export function createAPIClient() {
@jordienr
jordienr / tailwind.config.ts
Created July 15, 2023 09:10
Tailwind SVG Grid Background
// Remember to install mini-svg-data-uri
// Follow me on twitter for memes @jordienr
import { type Config } from "tailwindcss";
const {
default: flattenColorPalette,
} = require("tailwindcss/lib/util/flattenColorPalette");
const svgToDataUri = require("mini-svg-data-uri");
export default {
@jordienr
jordienr / button.css
Created June 10, 2023 12:03
pretty orange button with tailwind
.btn {
@apply flex w-full items-center justify-center gap-2 rounded-md border bg-white px-4 py-2 text-center font-medium tracking-wide text-slate-700 hover:bg-slate-50 sm:w-auto;
}
.btn.btn-icon {
@apply inline-flex h-10 w-10 max-w-[40px] items-center border-none bg-transparent;
}
.btn.btn-icon:hover {
@apply bg-orange-100 text-orange-500 transition-all;
}
@jordienr
jordienr / Gradient.js
Created September 12, 2021 00:23
Stripe Mesh Gradient WebGL
/*
* Stripe WebGl Gradient Animation
* All Credits to Stripe.com
* ScrollObserver functionality to disable animation when not scrolled into view has been disabled and
* commented out for now.
* https://kevinhufnagl.com
*/
@jordienr
jordienr / netlify.toml
Created July 13, 2021 11:42
netlify.toml - vue2
[build]
publish = "mvp/dist"
command = "yarn build && yarn linkdeps"
[context.production]
environment = { NODE_VERSION = "14.17.0", NETLIFY_USE_YARN = "true" }
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
@jordienr
jordienr / Tailwind 2.0 SCSS Color Variables.scss
Last active March 2, 2021 15:29
Tailwind 2.0 Colors as SCSS variables
// Rose
$rose-50: #fff1f2;
$rose-100: #ffe4e6;
$rose-200: #fecdd3;
$rose-300: #fda4af;
$rose-400: #fb7185;
$rose-500: #f43f5e;
$rose-600: #e11d48;
$rose-700: #be123c;
@jordienr
jordienr / variables.scss
Created August 16, 2020 14:10
SCSS Variables I use in almost all my projects
$gray-900: #1A202C;
$gray-800: #2D3748;
$gray-700: #4A5568;
$gray-600: #718096;
$gray-500: #A0AEC0;
$gray-400: #CBD5E0;
$gray-300: #E2E8F0;
$gray-200: #EDF2F7;
$gray-100: #F7FAFC;