Add interactive particle background and SSH command display to portfolio
Update index.html title and description, replace placeholder in App.tsx with Home component, and implement the ParticleBackground component with Catppuccin Mocha styling in index.css. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 8a5dc88f-13c6-40ab-96e7-e09ad06db4dd Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Event-Id: 79c937b9-88ad-4bd4-8ed9-0b29de18077b Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/804258ec-282b-434a-9b89-a7ccc1690e42/8a5dc88f-13c6-40ab-96e7-e09ad06db4dd/ztwlduV Replit-Helium-Checkpoint-Created: true
This commit is contained in:
keshavanandmusi
@@ -2,50 +2,50 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* LIGHT MODE */
|
||||
/* Catppuccin Mocha Theme - Dark Only */
|
||||
:root {
|
||||
--button-outline: rgba(0,0,0, .10);
|
||||
--badge-outline: rgba(0,0,0, .05);
|
||||
--opaque-button-border-intensity: -8;
|
||||
--elevate-1: rgba(0,0,0, .03);
|
||||
--elevate-2: rgba(0,0,0, .08);
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 0 0% 9%;
|
||||
--border: 0 0% 89%;
|
||||
--card: 0 0% 98%;
|
||||
--card-foreground: 0 0% 9%;
|
||||
--card-border: 0 0% 94%;
|
||||
--sidebar: 0 0% 96%;
|
||||
--sidebar-foreground: 0 0% 9%;
|
||||
--sidebar-border: 0 0% 92%;
|
||||
--sidebar-primary: 115 54% 45%;
|
||||
--sidebar-primary-foreground: 115 54% 98%;
|
||||
--sidebar-accent: 0 0% 92%;
|
||||
--sidebar-accent-foreground: 0 0% 9%;
|
||||
--sidebar-ring: 115 54% 45%;
|
||||
--popover: 0 0% 94%;
|
||||
--popover-foreground: 0 0% 9%;
|
||||
--popover-border: 0 0% 90%;
|
||||
--primary: 115 54% 35%;
|
||||
--primary-foreground: 115 54% 98%;
|
||||
--secondary: 0 0% 90%;
|
||||
--secondary-foreground: 0 0% 9%;
|
||||
--muted: 0 0% 92%;
|
||||
--muted-foreground: 0 0% 40%;
|
||||
--accent: 115 15% 92%;
|
||||
--accent-foreground: 115 15% 12%;
|
||||
--destructive: 0 72% 42%;
|
||||
--destructive-foreground: 0 72% 98%;
|
||||
--input: 0 0% 75%;
|
||||
--ring: 115 54% 45%;
|
||||
--chart-1: 115 54% 35%;
|
||||
--chart-2: 173 58% 32%;
|
||||
--chart-3: 197 37% 38%;
|
||||
--chart-4: 43 74% 42%;
|
||||
--chart-5: 27 87% 48%;
|
||||
--font-sans: Open Sans, sans-serif;
|
||||
--button-outline: rgba(255,255,255, .10);
|
||||
--badge-outline: rgba(255,255,255, .05);
|
||||
--opaque-button-border-intensity: 9;
|
||||
--elevate-1: rgba(255,255,255, .04);
|
||||
--elevate-2: rgba(255,255,255, .09);
|
||||
--background: 240 21% 15%;
|
||||
--foreground: 226 64% 88%;
|
||||
--border: 240 17% 20%;
|
||||
--card: 240 21% 17%;
|
||||
--card-foreground: 226 64% 88%;
|
||||
--card-border: 240 17% 22%;
|
||||
--sidebar: 240 21% 16%;
|
||||
--sidebar-foreground: 226 64% 88%;
|
||||
--sidebar-border: 240 17% 19%;
|
||||
--sidebar-primary: 115 54% 76%;
|
||||
--sidebar-primary-foreground: 240 21% 12%;
|
||||
--sidebar-accent: 240 17% 19%;
|
||||
--sidebar-accent-foreground: 226 64% 88%;
|
||||
--sidebar-ring: 115 54% 76%;
|
||||
--popover: 240 21% 18%;
|
||||
--popover-foreground: 226 64% 88%;
|
||||
--popover-border: 240 17% 21%;
|
||||
--primary: 115 54% 76%;
|
||||
--primary-foreground: 240 21% 12%;
|
||||
--secondary: 240 17% 22%;
|
||||
--secondary-foreground: 226 64% 88%;
|
||||
--muted: 240 17% 21%;
|
||||
--muted-foreground: 226 40% 65%;
|
||||
--accent: 170 57% 73%;
|
||||
--accent-foreground: 240 21% 12%;
|
||||
--destructive: 0 62% 32%;
|
||||
--destructive-foreground: 0 62% 96%;
|
||||
--input: 240 17% 35%;
|
||||
--ring: 115 54% 76%;
|
||||
--chart-1: 115 54% 76%;
|
||||
--chart-2: 170 57% 73%;
|
||||
--chart-3: 197 37% 62%;
|
||||
--chart-4: 43 74% 68%;
|
||||
--chart-5: 27 87% 70%;
|
||||
--font-sans: 'JetBrains Mono', monospace;
|
||||
--font-serif: Georgia, serif;
|
||||
--font-mono: Menlo, monospace;
|
||||
--font-mono: 'JetBrains Mono', monospace;
|
||||
--radius: .5rem;
|
||||
--shadow-2xs: 0px 2px 0px 0px hsl(0 0% 0% / 0.00);
|
||||
--shadow-xs: 0px 2px 0px 0px hsl(0 0% 0% / 0.00);
|
||||
@@ -87,83 +87,6 @@
|
||||
--destructive-border: hsl(from hsl(var(--destructive)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--button-outline: rgba(255,255,255, .10);
|
||||
--badge-outline: rgba(255,255,255, .05);
|
||||
--opaque-button-border-intensity: 9;
|
||||
--elevate-1: rgba(255,255,255, .04);
|
||||
--elevate-2: rgba(255,255,255, .09);
|
||||
--background: 240 21% 12%;
|
||||
--foreground: 226 64% 88%;
|
||||
--border: 240 17% 20%;
|
||||
--card: 240 21% 14%;
|
||||
--card-foreground: 226 64% 88%;
|
||||
--card-border: 240 17% 17%;
|
||||
--sidebar: 240 21% 16%;
|
||||
--sidebar-foreground: 226 64% 88%;
|
||||
--sidebar-border: 240 17% 19%;
|
||||
--sidebar-primary: 115 54% 55%;
|
||||
--sidebar-primary-foreground: 240 21% 12%;
|
||||
--sidebar-accent: 240 17% 19%;
|
||||
--sidebar-accent-foreground: 226 64% 88%;
|
||||
--sidebar-ring: 115 54% 55%;
|
||||
--popover: 240 21% 18%;
|
||||
--popover-foreground: 226 64% 88%;
|
||||
--popover-border: 240 17% 21%;
|
||||
--primary: 115 54% 30%;
|
||||
--primary-foreground: 115 54% 96%;
|
||||
--secondary: 240 17% 22%;
|
||||
--secondary-foreground: 226 64% 88%;
|
||||
--muted: 240 17% 21%;
|
||||
--muted-foreground: 226 40% 65%;
|
||||
--accent: 115 12% 22%;
|
||||
--accent-foreground: 115 12% 88%;
|
||||
--destructive: 0 62% 32%;
|
||||
--destructive-foreground: 0 62% 96%;
|
||||
--input: 240 17% 35%;
|
||||
--ring: 115 54% 55%;
|
||||
--chart-1: 115 54% 65%;
|
||||
--chart-2: 173 58% 60%;
|
||||
--chart-3: 197 37% 62%;
|
||||
--chart-4: 43 74% 68%;
|
||||
--chart-5: 27 87% 70%;
|
||||
--shadow-2xs: 0px 2px 0px 0px hsl(240 21% 12% / 0.00);
|
||||
--shadow-xs: 0px 2px 0px 0px hsl(240 21% 12% / 0.00);
|
||||
--shadow-sm: 0px 2px 0px 0px hsl(240 21% 12% / 0.00), 0px 1px 2px -1px hsl(240 21% 12% / 0.00);
|
||||
--shadow: 0px 2px 0px 0px hsl(240 21% 12% / 0.00), 0px 1px 2px -1px hsl(240 21% 12% / 0.00);
|
||||
--shadow-md: 0px 2px 0px 0px hsl(240 21% 12% / 0.00), 0px 2px 4px -1px hsl(240 21% 12% / 0.00);
|
||||
--shadow-lg: 0px 2px 0px 0px hsl(240 21% 12% / 0.00), 0px 4px 6px -1px hsl(240 21% 12% / 0.00);
|
||||
--shadow-xl: 0px 2px 0px 0px hsl(240 21% 12% / 0.00), 0px 8px 10px -1px hsl(240 21% 12% / 0.00);
|
||||
--shadow-2xl: 0px 2px 0px 0px hsl(240 21% 12% / 0.00);
|
||||
|
||||
/* Fallback for older browsers */
|
||||
--sidebar-primary-border: hsl(var(--sidebar-primary));
|
||||
--sidebar-primary-border: hsl(from hsl(var(--sidebar-primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
||||
|
||||
/* Fallback for older browsers */
|
||||
--sidebar-accent-border: hsl(var(--sidebar-accent));
|
||||
--sidebar-accent-border: hsl(from hsl(var(--sidebar-accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
||||
|
||||
/* Fallback for older browsers */
|
||||
--primary-border: hsl(var(--primary));
|
||||
--primary-border: hsl(from hsl(var(--primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
||||
|
||||
/* Fallback for older browsers */
|
||||
--secondary-border: hsl(var(--secondary));
|
||||
--secondary-border: hsl(from hsl(var(--secondary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
||||
|
||||
/* Fallback for older browsers */
|
||||
--muted-border: hsl(var(--muted));
|
||||
--muted-border: hsl(from hsl(var(--muted)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
||||
|
||||
/* Fallback for older browsers */
|
||||
--accent-border: hsl(var(--accent));
|
||||
--accent-border: hsl(from hsl(var(--accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
||||
|
||||
/* Fallback for older browsers */
|
||||
--destructive-border: hsl(var(--destructive));
|
||||
--destructive-border: hsl(from hsl(var(--destructive)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
|
||||
Reference in New Issue
Block a user