-
+
+
NEWSLETTER SUBSCRIPTION
-
+
> RĂMÂI LA CURENT_
-
+
Primește cele mai noi articole direct în inbox
-
-
+
// Fără spam. Dezabonare oricând.
diff --git a/components/blog/MarkdownRenderer.tsx b/components/blog/markdown-renderer.tsx
similarity index 100%
rename from components/blog/MarkdownRenderer.tsx
rename to components/blog/markdown-renderer.tsx
diff --git a/components/layout/Breadcrumbs.tsx b/components/layout/Breadcrumbs.tsx
index 1dfd000..bd99998 100644
--- a/components/layout/Breadcrumbs.tsx
+++ b/components/layout/Breadcrumbs.tsx
@@ -3,7 +3,7 @@
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Fragment } from 'react';
-import { BreadcrumbsSchema } from './BreadcrumbsSchema';
+import { BreadcrumbsSchema } from './breadcrumbs-schema';
interface BreadcrumbItem {
label: string;
diff --git a/components/layout/BreadcrumbsSchema.tsx b/components/layout/breadcrumbs-schema.tsx
similarity index 100%
rename from components/layout/BreadcrumbsSchema.tsx
rename to components/layout/breadcrumbs-schema.tsx
diff --git a/components/theme-toggle.tsx b/components/theme-toggle.tsx
new file mode 100644
index 0000000..105930c
--- /dev/null
+++ b/components/theme-toggle.tsx
@@ -0,0 +1,70 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useTheme } from 'next-themes'
+
+export function ThemeToggle() {
+ const [mounted, setMounted] = useState(false)
+ const { theme, setTheme } = useTheme()
+ const [isGlitching, setIsGlitching] = useState(false)
+
+ useEffect(() => {
+ setMounted(true)
+ }, [])
+
+ const toggleTheme = () => {
+ // Trigger glitch animation
+ setIsGlitching(true)
+
+ // Trigger screen flicker
+ document.body.classList.add('screen-flicker')
+
+ // Toggle theme
+ setTheme(theme === 'dark' ? 'light' : 'dark')
+
+ // Remove effects after animation
+ setTimeout(() => {
+ setIsGlitching(false)
+ document.body.classList.remove('screen-flicker')
+ }, 300)
+ }
+
+ if (!mounted) {
+ return (
+
+ )
+ }
+
+ return (
+
+ )
+}
diff --git a/package-lock.json b/package-lock.json
index 2979a71..60720fb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
"autoprefixer": "^10.4.21",
"gray-matter": "^4.0.3",
"next": "^16.0.1",
+ "next-themes": "^0.4.6",
"postcss": "^8.5.6",
"react": "^19.2.0",
"react-dom": "^19.2.0",
@@ -2984,6 +2985,16 @@
}
}
},
+ "node_modules/next-themes": {
+ "version": "0.4.6",
+ "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+ "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+ "license": "MIT",
+ "peerDependencies": {
+ "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+ }
+ },
"node_modules/next/node_modules/postcss": {
"version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
diff --git a/package.json b/package.json
index 5127e98..d02bb97 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
"autoprefixer": "^10.4.21",
"gray-matter": "^4.0.3",
"next": "^16.0.1",
+ "next-themes": "^0.4.6",
"postcss": "^8.5.6",
"react": "^19.2.0",
"react-dom": "^19.2.0",
diff --git a/providers/providers.tsx b/providers/providers.tsx
new file mode 100644
index 0000000..1ddf4dd
--- /dev/null
+++ b/providers/providers.tsx
@@ -0,0 +1,8 @@
+'use client'
+
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+import type { ThemeProviderProps } from 'next-themes'
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+ return
{children}
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index c7c0b9f..e97e515 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,6 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
+ darkMode: 'class',
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
@@ -20,6 +21,65 @@ module.exports = {
800: '#075985',
900: '#0c4a6e',
},
+ 'dark-primary': '#18181b',
+ 'dark-secondary': '#0f172a',
+ 'dark-tertiary': '#1e293b',
+ 'accent': {
+ DEFAULT: '#164e63',
+ hover: '#155e75',
+ light: '#0e7490',
+ },
+ 'accent-emerald': {
+ DEFAULT: '#064e3b',
+ hover: '#065f46',
+ },
+ 'accent-teal': {
+ DEFAULT: '#134e4a',
+ hover: '#115e59',
+ },
+ },
+ animation: {
+ 'glitch': 'glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both',
+ 'flicker': 'flicker 0.15s infinite',
+ 'scanline': 'scanline 8s linear infinite',
+ 'noise': 'noise 0.2s infinite',
+ },
+ keyframes: {
+ glitch: {
+ '0%': { transform: 'translate(0)' },
+ '20%': { transform: 'translate(-2px, 2px)' },
+ '40%': { transform: 'translate(-2px, -2px)' },
+ '60%': { transform: 'translate(2px, 2px)' },
+ '80%': { transform: 'translate(2px, -2px)' },
+ '100%': { transform: 'translate(0)' },
+ },
+ flicker: {
+ '0%, 100%': { opacity: '1' },
+ '41.99%': { opacity: '1' },
+ '42%': { opacity: '0' },
+ '43%': { opacity: '0' },
+ '43.01%': { opacity: '1' },
+ '47.99%': { opacity: '1' },
+ '48%': { opacity: '0' },
+ '49%': { opacity: '0' },
+ '49.01%': { opacity: '1' },
+ },
+ scanline: {
+ '0%': { transform: 'translateY(-100%)' },
+ '100%': { transform: 'translateY(100%)' },
+ },
+ noise: {
+ '0%, 100%': { backgroundPosition: '0 0' },
+ '10%': { backgroundPosition: '-5% -10%' },
+ '20%': { backgroundPosition: '-15% 5%' },
+ '30%': { backgroundPosition: '7% -25%' },
+ '40%': { backgroundPosition: '-5% 25%' },
+ '50%': { backgroundPosition: '-15% 10%' },
+ '60%': { backgroundPosition: '15% 0%' },
+ '70%': { backgroundPosition: '0% 15%' },
+ '80%': { backgroundPosition: '3% 35%' },
+ '90%': { backgroundPosition: '-10% 10%' },
+ },
},
},
},