Add avatar asset
This commit is contained in:
gpt-engineer-app[bot]
parent
bc99040373
commit
7e4eb6bf69
2 changed files with 120 additions and 74 deletions
184
src/index.css
184
src/index.css
|
|
@ -2,95 +2,52 @@
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
/* Definition of the design system. All colors, gradients, fonts, etc should be defined here.
|
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
|
||||||
All colors MUST be HSL.
|
|
||||||
*/
|
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
:root {
|
:root {
|
||||||
--background: 0 0% 100%;
|
--background: 220 15% 10%;
|
||||||
--foreground: 222.2 84% 4.9%;
|
--foreground: 30 10% 90%;
|
||||||
|
|
||||||
--card: 0 0% 100%;
|
--card: 220 12% 14%;
|
||||||
--card-foreground: 222.2 84% 4.9%;
|
--card-foreground: 30 10% 90%;
|
||||||
|
|
||||||
--popover: 0 0% 100%;
|
--popover: 220 12% 14%;
|
||||||
--popover-foreground: 222.2 84% 4.9%;
|
--popover-foreground: 30 10% 90%;
|
||||||
|
|
||||||
--primary: 222.2 47.4% 11.2%;
|
--primary: 25 95% 55%;
|
||||||
--primary-foreground: 210 40% 98%;
|
--primary-foreground: 220 15% 8%;
|
||||||
|
|
||||||
--secondary: 210 40% 96.1%;
|
--secondary: 220 12% 18%;
|
||||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
--secondary-foreground: 30 10% 85%;
|
||||||
|
|
||||||
--muted: 210 40% 96.1%;
|
--muted: 220 10% 20%;
|
||||||
--muted-foreground: 215.4 16.3% 46.9%;
|
--muted-foreground: 220 8% 55%;
|
||||||
|
|
||||||
--accent: 210 40% 96.1%;
|
--accent: 25 90% 50%;
|
||||||
--accent-foreground: 222.2 47.4% 11.2%;
|
--accent-foreground: 220 15% 8%;
|
||||||
|
|
||||||
--destructive: 0 84.2% 60.2%;
|
--destructive: 0 84.2% 60.2%;
|
||||||
--destructive-foreground: 210 40% 98%;
|
--destructive-foreground: 210 40% 98%;
|
||||||
|
|
||||||
--border: 214.3 31.8% 91.4%;
|
--border: 220 10% 22%;
|
||||||
--input: 214.3 31.8% 91.4%;
|
--input: 220 10% 22%;
|
||||||
--ring: 222.2 84% 4.9%;
|
--ring: 25 95% 55%;
|
||||||
|
|
||||||
--radius: 0.5rem;
|
--radius: 1rem;
|
||||||
|
|
||||||
--sidebar-background: 0 0% 98%;
|
--glass-bg: 220 12% 16%;
|
||||||
|
--glass-border: 220 10% 28%;
|
||||||
|
--glass-shine: 25 95% 55%;
|
||||||
|
|
||||||
--sidebar-foreground: 240 5.3% 26.1%;
|
--sidebar-background: 220 15% 10%;
|
||||||
|
--sidebar-foreground: 30 10% 90%;
|
||||||
--sidebar-primary: 240 5.9% 10%;
|
--sidebar-primary: 25 95% 55%;
|
||||||
|
--sidebar-primary-foreground: 220 15% 8%;
|
||||||
--sidebar-primary-foreground: 0 0% 98%;
|
--sidebar-accent: 220 12% 18%;
|
||||||
|
--sidebar-accent-foreground: 30 10% 90%;
|
||||||
--sidebar-accent: 240 4.8% 95.9%;
|
--sidebar-border: 220 10% 22%;
|
||||||
|
--sidebar-ring: 25 95% 55%;
|
||||||
--sidebar-accent-foreground: 240 5.9% 10%;
|
|
||||||
|
|
||||||
--sidebar-border: 220 13% 91%;
|
|
||||||
|
|
||||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark {
|
|
||||||
--background: 222.2 84% 4.9%;
|
|
||||||
--foreground: 210 40% 98%;
|
|
||||||
|
|
||||||
--card: 222.2 84% 4.9%;
|
|
||||||
--card-foreground: 210 40% 98%;
|
|
||||||
|
|
||||||
--popover: 222.2 84% 4.9%;
|
|
||||||
--popover-foreground: 210 40% 98%;
|
|
||||||
|
|
||||||
--primary: 210 40% 98%;
|
|
||||||
--primary-foreground: 222.2 47.4% 11.2%;
|
|
||||||
|
|
||||||
--secondary: 217.2 32.6% 17.5%;
|
|
||||||
--secondary-foreground: 210 40% 98%;
|
|
||||||
|
|
||||||
--muted: 217.2 32.6% 17.5%;
|
|
||||||
--muted-foreground: 215 20.2% 65.1%;
|
|
||||||
|
|
||||||
--accent: 217.2 32.6% 17.5%;
|
|
||||||
--accent-foreground: 210 40% 98%;
|
|
||||||
|
|
||||||
--destructive: 0 62.8% 30.6%;
|
|
||||||
--destructive-foreground: 210 40% 98%;
|
|
||||||
|
|
||||||
--border: 217.2 32.6% 17.5%;
|
|
||||||
--input: 217.2 32.6% 17.5%;
|
|
||||||
--ring: 212.7 26.8% 83.9%;
|
|
||||||
--sidebar-background: 240 5.9% 10%;
|
|
||||||
--sidebar-foreground: 240 4.8% 95.9%;
|
|
||||||
--sidebar-primary: 224.3 76.3% 48%;
|
|
||||||
--sidebar-primary-foreground: 0 0% 100%;
|
|
||||||
--sidebar-accent: 240 3.7% 15.9%;
|
|
||||||
--sidebar-accent-foreground: 240 4.8% 95.9%;
|
|
||||||
--sidebar-border: 240 3.7% 15.9%;
|
|
||||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -100,6 +57,85 @@ All colors MUST be HSL.
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@apply bg-background text-foreground;
|
@apply bg-background text-foreground font-body antialiased;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer components {
|
||||||
|
.glass-card {
|
||||||
|
background: hsl(var(--glass-bg) / 0.6);
|
||||||
|
border: 1px solid hsl(var(--glass-border) / 0.4);
|
||||||
|
backdrop-filter: blur(20px) saturate(1.8);
|
||||||
|
-webkit-backdrop-filter: blur(20px) saturate(1.8);
|
||||||
|
box-shadow:
|
||||||
|
inset 0 1px 1px hsl(0 0% 100% / 0.05),
|
||||||
|
inset 0 -1px 1px hsl(0 0% 0% / 0.1),
|
||||||
|
0 8px 32px hsl(0 0% 0% / 0.3),
|
||||||
|
0 2px 8px hsl(0 0% 0% / 0.2);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass-card::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
hsl(0 0% 100% / 0.08) 0%,
|
||||||
|
transparent 40%,
|
||||||
|
transparent 60%,
|
||||||
|
hsl(0 0% 100% / 0.03) 100%
|
||||||
|
);
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass-card-hover {
|
||||||
|
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
|
||||||
|
box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1),
|
||||||
|
border-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass-card-hover:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
border-color: hsl(var(--glass-shine) / 0.3);
|
||||||
|
box-shadow:
|
||||||
|
inset 0 1px 1px hsl(0 0% 100% / 0.08),
|
||||||
|
0 12px 40px hsl(0 0% 0% / 0.4),
|
||||||
|
0 4px 12px hsl(var(--primary) / 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mouse-glow {
|
||||||
|
position: absolute;
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: radial-gradient(
|
||||||
|
circle,
|
||||||
|
hsl(var(--primary) / 0.12) 0%,
|
||||||
|
transparent 70%
|
||||||
|
);
|
||||||
|
pointer-events: none;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
z-index: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-arrow {
|
||||||
|
@apply inline-block transition-transform duration-200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-arrow-parent:hover .link-arrow {
|
||||||
|
transform: translate(3px, -3px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer utilities {
|
||||||
|
.text-gradient {
|
||||||
|
background: linear-gradient(135deg, hsl(var(--primary)), hsl(30 100% 65%));
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,17 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
extend: {
|
extend: {
|
||||||
|
fontFamily: {
|
||||||
|
heading: ['"Space Grotesk"', 'sans-serif'],
|
||||||
|
body: ['"Space Grotesk"', 'sans-serif'],
|
||||||
|
mono: ['"JetBrains Mono"', 'monospace'],
|
||||||
|
},
|
||||||
colors: {
|
colors: {
|
||||||
|
glass: {
|
||||||
|
bg: "hsl(var(--glass-bg) / <alpha-value>)",
|
||||||
|
border: "hsl(var(--glass-border) / <alpha-value>)",
|
||||||
|
shine: "hsl(var(--glass-shine) / <alpha-value>)",
|
||||||
|
},
|
||||||
border: "hsl(var(--border))",
|
border: "hsl(var(--border))",
|
||||||
input: "hsl(var(--input))",
|
input: "hsl(var(--input))",
|
||||||
ring: "hsl(var(--ring))",
|
ring: "hsl(var(--ring))",
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue