source-code/
portofolio-neo-gruv
Public
javascript115 lines4 KB
/** @type {import('tailwindcss').Config} */
export default {
darkMode: "class",
content: [
'./src/**/*.{js,ts,jsx,tsx}',
],
safelist: [
'hover:text-theme-red',
'hover:border-theme-red',
'hover:text-theme-blue',
'hover:border-theme-blue',
'hover:text-theme-green',
'hover:border-theme-green',
'hover:text-theme-yellow',
'hover:border-theme-yellow',
],
theme: {
extend: {
colors: {
"on-secondary-container": "#fffbff",
"surface-variant": "#e9e1de",
"on-primary-fixed": "#002021",
"tertiary": "#5e6000",
"on-background": "#1e1b19",
"on-tertiary-fixed": "#1c1d00",
"on-primary": "#ffffff",
"inverse-primary": "#92d1d4",
"outline-variant": "#bfc8c8",
"surface-bright": "#fff8f5",
"secondary-fixed": "#ffdad5",
"on-tertiary": "#ffffff",
"on-primary-fixed-variant": "#004f52",
"surface-container-highest": "#e9e1de",
"primary-fixed-dim": "#92d1d4",
"outline": "#6f7979",
"tertiary-container": "#777900",
"on-primary-container": "#f3ffff",
"tertiary-fixed": "#e7ea54",
"background": "#fff8f5",
"inverse-on-surface": "#f7efec",
"inverse-surface": "#33302e",
"surface-dim": "#e0d8d5",
"primary-container": "#3e7e81",
"on-surface-variant": "#3f4849",
"surface-tint": "#24686b",
"primary-fixed": "#adeef1",
"on-error": "#ffffff",
"primary": "#216568",
"surface-container-low": "#faf2ef",
"surface-container-lowest": "#ffffff",
"secondary-fixed-dim": "#ffb4a9",
"error-container": "#ffdad6",
"error": "#ba1a1a",
"on-tertiary-fixed-variant": "#484a00",
"surface": "#fff8f5",
"on-secondary-fixed": "#410001",
"surface-container": "#f4ece9",
"secondary-container": "#d9362b",
"secondary": "#b51a16",
"on-tertiary-container": "#fffbff",
"on-surface": "#1e1b19",
"tertiary-fixed-dim": "#cacd39",
"on-secondary": "#ffffff",
"on-error-container": "#93000a",
"surface-container-high": "#efe7e3",
"on-secondary-fixed-variant": "#930005",
"theme-blue": "#458588",
"theme-red": "#9d0006",
"theme-green": "#b8bb26",
"theme-yellow": "#d79921",
"theme-grey": "#ebdbb2"
},
borderRadius: {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
spacing: {
"margin": "32px",
"shadow-offset": "6px",
"border-width": "3px",
"unit": "8px",
"gutter": "24px",
"container-max": "1280px",
"border-width-heavy": "6px",
"border-width-std": "4px"
},
fontFamily: {
"body-md": ["Hanken Grotesk"],
"label-md": ["JetBrains Mono"],
"headline-md": ["Space Grotesk"],
"body-lg": ["Hanken Grotesk"],
"headline-lg-mobile": ["Space Grotesk"],
"button": ["Space Grotesk"],
"headline-lg": ["Space Grotesk"],
"display-2xl": ["Space Grotesk"],
"label-bold": ["JetBrains Mono"]
},
fontSize: {
"body-md": ["16px", { "lineHeight": "1.5", "fontWeight": "400" }],
"label-md": ["14px", { "lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "500" }],
"headline-md": ["24px", { "lineHeight": "1.2", "fontWeight": "600" }],
"body-lg": ["18px", { "lineHeight": "1.6", "fontWeight": "400" }],
"headline-lg-mobile": ["32px", { "lineHeight": "1.2", "fontWeight": "700" }],
"button": ["16px", { "lineHeight": "1", "fontWeight": "700" }],
"headline-lg": ["48px", { "lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700" }],
"display-2xl": ["120px", { "lineHeight": "110px", "letterSpacing": "-0.04em", "fontWeight": "800" }],
"label-bold": ["14px", { "lineHeight": "16px", "letterSpacing": "0.1em", "fontWeight": "700" }]
}
},
},
plugins: [],
}About
Custom portfolio frontend designed using retro Neo-Brutalist styling. Features server-rendered pages, persistent codebase layout, interactive file explorer tree, and Shiki code syntax highlighting.
TypeScriptNext.jsReact 19Tailwind CSSShiki