@@ -141,18 +152,22 @@ const projects = await getCollection("projects", ({ data }) => {
+
-
-
-
- {projects.length} PROJECTS
-
+
+
+ {projects.length} PROJECTS
+
- VIEW ALL PROJECTS →
+ VIEW ALL PROJECTS
+
+
+ →
+
@@ -161,3 +176,5 @@ const projects = await getCollection("projects", ({ data }) => {
+
+
diff --git a/src/pages/rickroll.astro b/src/pages/rickroll.astro
new file mode 100644
index 0000000..b94882a
--- /dev/null
+++ b/src/pages/rickroll.astro
@@ -0,0 +1,88 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+
+
+
+
+
+
+
+
+
+ SECURITY INCIDENT
+
+
+
+
+ CRITICAL
+
+
+
+
+
+ ERR / 0x1337 / ALASTOR.LOL
+
+
+
+ Внимание!
+
+
+ Вас зарикроллили!
+
+
+
+
+
+
+
+
+
+ STATUS: YOU SHOULD HAVE KNOWN BETTER
+
+
+
+ ← RETURN TO SAFETY
+
+
+
+
+
+
+ No systems were harmed during this incident.
+
+
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
index 6223db8..86ce172 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,119 +1,643 @@
+
@import "tailwindcss";
:root {
- --bg: #090909;
- --surface: #0e0e0e;
- --surface-hover: #131313;
+ --bg: #090909;
+ --surface: #0e0e0e;
+ --surface-hover: #131313;
- --text: #e7e7e7;
- --muted: #777;
- --border: #242424;
+ --text: #e7e7e7;
+ --muted: #777;
+ --border: #242424;
- --accent: #b8ff00;
+ --accent: #b8ff00;
}
html {
- background: var(--bg);
- color: var(--text);
- scroll-behavior: smooth;
+ background: var(--bg);
+ color: var(--text);
+ scroll-behavior: smooth;
}
body {
- margin: 0;
- min-width: 320px;
- background:
- linear-gradient(
- rgba(255, 255, 255, 0.012) 1px,
- transparent 1px
- ),
- linear-gradient(
- 90deg,
- rgba(255, 255, 255, 0.012) 1px,
- transparent 1px
- ),
- var(--bg);
+ margin: 0;
+ min-width: 320px;
+ background: var(--bg);
- background-size: 48px 48px;
-
- font-family:
- Inter,
- ui-sans-serif,
- system-ui,
- -apple-system,
- BlinkMacSystemFont,
- "Segoe UI",
- sans-serif;
-
- -webkit-font-smoothing: antialiased;
- text-rendering: optimizeLegibility;
+ font-family:
+ Inter,
+ ui-sans-serif,
+ system-ui,
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ sans-serif;
}
::selection {
- background: var(--accent);
- color: #000;
+ background: var(--accent);
+ color: #000;
}
a {
- color: inherit;
- text-decoration: none;
-}
-
-button,
-a {
- -webkit-tap-highlight-color: transparent;
-}
-
-:focus-visible {
- outline: 1px solid var(--accent);
- outline-offset: 4px;
+ color: inherit;
+ text-decoration: none;
}
.font-mono {
- font-family:
- "JetBrains Mono",
- "SFMono-Regular",
- Consolas,
- "Liberation Mono",
- monospace;
+ font-family:
+ "JetBrains Mono",
+ "SFMono-Regular",
+ Consolas,
+ "Liberation Mono",
+ monospace;
}
-/* Scrollbar */
-::-webkit-scrollbar {
- width: 8px;
+/* ─────────────────────────────────────────
+ Markdown / Article typography
+ ───────────────────────────────────────── */
+
+.prose {
+ max-width: 760px;
+ color: var(--text);
+ font-size: 0.95rem;
+ line-height: 1.85;
}
-::-webkit-scrollbar-track {
- background: var(--bg);
+.prose > *:first-child {
+ margin-top: 0;
}
-::-webkit-scrollbar-thumb {
- background: #292929;
+.prose > *:last-child {
+ margin-bottom: 0;
}
-::-webkit-scrollbar-thumb:hover {
- background: #3a3a3a;
+
+/* Headings */
+
+.prose h1 {
+ margin-top: 3rem;
+ margin-bottom: 1.25rem;
+
+ font-size: 2.25rem;
+ line-height: 1.15;
+ font-weight: 700;
+ letter-spacing: -0.035em;
}
-/* Firefox */
+.prose h2 {
+ margin-top: 3rem;
+ margin-bottom: 1rem;
-* {
- scrollbar-width: thin;
- scrollbar-color: #292929 var(--bg);
+ font-size: 1.65rem;
+ line-height: 1.25;
+ font-weight: 650;
+ letter-spacing: -0.025em;
}
-/* Motion */
+.prose h3 {
+ margin-top: 2.25rem;
+ margin-bottom: 0.75rem;
-@media (prefers-reduced-motion: reduce) {
- html {
- scroll-behavior: auto;
- }
-
- *,
- *::before,
- *::after {
- animation-duration: 0.01ms !important;
- animation-iteration-count: 1 !important;
- transition-duration: 0.01ms !important;
- }
+ font-size: 1.2rem;
+ line-height: 1.35;
+ font-weight: 600;
+}
+
+.prose h4 {
+ margin-top: 1.75rem;
+ margin-bottom: 0.5rem;
+
+ font-size: 1rem;
+ font-weight: 600;
+}
+
+
+/* Paragraphs */
+
+.prose p {
+ margin-top: 1.25rem;
+ margin-bottom: 1.25rem;
+}
+
+
+/* Links */
+
+.prose a {
+ color: var(--accent);
+ text-decoration: underline;
+ text-decoration-color: color-mix(
+ in srgb,
+ var(--accent) 40%,
+ transparent
+ );
+ text-underline-offset: 3px;
+
+ transition:
+ color 150ms ease,
+ text-decoration-color 150ms ease;
+}
+
+.prose a:hover {
+ color: var(--text);
+ text-decoration-color: var(--text);
+}
+
+
+/* Lists */
+
+.prose ul,
+.prose ol {
+ margin-top: 1.25rem;
+ margin-bottom: 1.25rem;
+ padding-left: 1.5rem;
+}
+
+.prose ul {
+ list-style-type: disc;
+}
+
+.prose ol {
+ list-style-type: decimal;
+}
+
+.prose li {
+ margin-top: 0.45rem;
+ padding-left: 0.25rem;
+}
+
+.prose li::marker {
+ color: var(--accent);
+}
+
+.prose li > ul,
+.prose li > ol {
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+}
+
+
+/* Blockquotes */
+
+.prose blockquote {
+ margin: 2rem 0;
+ padding: 0.75rem 0 0.75rem 1.25rem;
+
+ border-left: 2px solid var(--accent);
+
+ color: var(--muted);
+ font-style: italic;
+}
+
+.prose blockquote p {
+ margin: 0;
+}
+
+
+/* Inline code */
+
+.prose :not(pre) > code {
+ padding: 0.15rem 0.4rem;
+
+ border: 1px solid var(--border);
+ background: var(--surface);
+
+ color: var(--accent);
+
+ font-family:
+ "JetBrains Mono",
+ "SFMono-Regular",
+ Consolas,
+ monospace;
+
+ font-size: 0.82em;
+}
+
+
+/* Code blocks */
+
+.prose pre {
+ position: relative;
+
+ margin: 2rem 0;
+ padding: 1.25rem 1.5rem;
+
+ overflow-x: auto;
+
+ border: 1px solid var(--border);
+ background: #070707;
+
+ font-family:
+ "JetBrains Mono",
+ "SFMono-Regular",
+ Consolas,
+ monospace;
+
+ font-size: 0.8rem;
+ line-height: 1.7;
+
+ scrollbar-width: thin;
+}
+
+.prose pre code {
+ padding: 0;
+ border: 0;
+ background: transparent;
+
+ color: var(--text);
+ font-size: inherit;
+}
+
+
+/* Horizontal rule */
+
+.prose hr {
+ margin: 3rem 0;
+
+ border: 0;
+ border-top: 1px solid var(--border);
+}
+
+
+/* Images */
+
+.prose img {
+ display: block;
+
+ width: 100%;
+ height: auto;
+
+ margin: 2rem 0;
+
+ border: 1px solid var(--border);
+}
+
+
+/* Tables */
+
+.prose table {
+ width: 100%;
+ margin: 2rem 0;
+
+ border-collapse: collapse;
+
+ font-size: 0.85rem;
+}
+
+.prose th,
+.prose td {
+ padding: 0.75rem 1rem;
+
+ border: 1px solid var(--border);
+
+ text-align: left;
+}
+
+.prose th {
+ background: var(--surface);
+
+ font-family:
+ "JetBrains Mono",
+ "SFMono-Regular",
+ Consolas,
+ monospace;
+
+ font-size: 0.7rem;
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+}
+
+.prose td {
+ color: var(--muted);
+}
+
+
+/* Strong / emphasis */
+
+.prose strong {
+ color: var(--text);
+ font-weight: 650;
+}
+
+.prose em {
+ color: var(--muted);
+}
+
+
+/* Definition-style spacing */
+
+.prose dl {
+ margin: 1.5rem 0;
+}
+
+.prose dt {
+ margin-top: 1rem;
+
+ font-weight: 600;
+}
+
+.prose dd {
+ margin-left: 1.5rem;
+ color: var(--muted);
+}
+
+
+/* Mobile */
+
+@media (max-width: 640px) {
+ .prose {
+ font-size: 0.9rem;
+ line-height: 1.8;
+ }
+
+ .prose h1 {
+ font-size: 1.9rem;
+ }
+
+ .prose h2 {
+ font-size: 1.4rem;
+ }
+
+ .prose h3 {
+ font-size: 1.1rem;
+ }
+
+ .prose pre {
+ margin-left: -0.5rem;
+ margin-right: -0.5rem;
+
+ padding: 1rem;
+ }
+
+ .prose table {
+ display: block;
+ overflow-x: auto;
+ }
+}
+/* ─────────────────────────────────────────────
+ Markdown / Article typography
+ ───────────────────────────────────────────── */
+
+.markdown {
+ max-width: none;
+ color: var(--text);
+ font-size: 0.95rem;
+ line-height: 1.8;
+}
+
+.markdown > *:first-child {
+ margin-top: 0;
+}
+
+.markdown > *:last-child {
+ margin-bottom: 0;
+}
+
+/* Headings */
+
+.markdown h1,
+.markdown h2,
+.markdown h3,
+.markdown h4 {
+ color: var(--text);
+ font-weight: 700;
+ letter-spacing: -0.025em;
+ line-height: 1.2;
+}
+
+.markdown h1 {
+ margin-top: 3rem;
+ margin-bottom: 1.25rem;
+ font-size: 2.25rem;
+}
+
+.markdown h2 {
+ margin-top: 3rem;
+ margin-bottom: 1rem;
+ padding-bottom: 0.65rem;
+ border-bottom: 1px solid var(--border);
+ font-size: 1.65rem;
+}
+
+.markdown h3 {
+ margin-top: 2.25rem;
+ margin-bottom: 0.75rem;
+ font-size: 1.25rem;
+}
+
+.markdown h4 {
+ margin-top: 1.75rem;
+ margin-bottom: 0.65rem;
+ font-size: 1rem;
+}
+
+/* Paragraphs */
+
+.markdown p {
+ margin: 1.15rem 0;
+ color: #c4c4c4;
+}
+
+/* Strong / emphasis */
+
+.markdown strong {
+ color: var(--text);
+ font-weight: 650;
+}
+
+.markdown em {
+ color: #d0d0d0;
+}
+
+/* Links */
+
+.markdown a {
+ color: var(--accent);
+ text-decoration: underline;
+ text-decoration-color: color-mix(
+ in srgb,
+ var(--accent) 35%,
+ transparent
+ );
+ text-underline-offset: 3px;
+ transition:
+ text-decoration-color 150ms ease,
+ opacity 150ms ease;
+}
+
+.markdown a:hover {
+ text-decoration-color: var(--accent);
+}
+
+/* Lists */
+
+.markdown ul,
+.markdown ol {
+ margin: 1.25rem 0;
+ padding-left: 1.5rem;
+ color: #c4c4c4;
+}
+
+.markdown ul {
+ list-style-type: disc;
+}
+
+.markdown ol {
+ list-style-type: decimal;
+}
+
+.markdown li {
+ margin: 0.45rem 0;
+ padding-left: 0.25rem;
+}
+
+.markdown li::marker {
+ color: var(--muted);
+}
+
+.markdown li > ul,
+.markdown li > ol {
+ margin-top: 0.45rem;
+ margin-bottom: 0.45rem;
+}
+
+/* Inline code */
+
+.markdown :not(pre) > code {
+ border: 1px solid var(--border);
+ background: var(--surface);
+ padding: 0.15rem 0.4rem;
+ color: var(--accent);
+ font-family:
+ "JetBrains Mono",
+ "SFMono-Regular",
+ Consolas,
+ "Liberation Mono",
+ monospace;
+ font-size: 0.82em;
+}
+
+/* Code blocks */
+
+.markdown pre {
+ position: relative;
+ overflow-x: auto;
+ margin: 1.75rem 0;
+ border: 1px solid var(--border);
+ background: #050505;
+ padding: 1.25rem 1.35rem;
+ color: #d8d8d8;
+ font-family:
+ "JetBrains Mono",
+ "SFMono-Regular",
+ Consolas,
+ "Liberation Mono",
+ monospace;
+ font-size: 0.8rem;
+ line-height: 1.7;
+}
+
+.markdown pre code {
+ font-family: inherit;
+ font-size: inherit;
+}
+
+/* Blockquotes */
+
+.markdown blockquote {
+ margin: 1.75rem 0;
+ border-left: 2px solid var(--accent);
+ background: var(--surface);
+ padding: 1rem 1.25rem;
+ color: #bdbdbd;
+}
+
+.markdown blockquote p {
+ margin: 0;
+}
+
+/* Horizontal rule */
+
+.markdown hr {
+ margin: 3rem 0;
+ border: 0;
+ border-top: 1px solid var(--border);
+}
+
+/* Tables */
+
+.markdown table {
+ width: 100%;
+ margin: 1.75rem 0;
+ border-collapse: collapse;
+ font-size: 0.85rem;
+}
+
+.markdown thead {
+ background: var(--surface);
+}
+
+.markdown th,
+.markdown td {
+ border: 1px solid var(--border);
+ padding: 0.7rem 0.8rem;
+ text-align: left;
+}
+
+.markdown th {
+ color: var(--text);
+ font-family:
+ "JetBrains Mono",
+ "SFMono-Regular",
+ Consolas,
+ monospace;
+ font-size: 0.7rem;
+ font-weight: 500;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+}
+
+.markdown td {
+ color: #bdbdbd;
+}
+
+/* Images */
+
+.markdown img {
+ display: block;
+ max-width: 100%;
+ height: auto;
+ margin: 2rem auto;
+ border: 1px solid var(--border);
+}
+
+/* Small screens */
+
+@media (max-width: 640px) {
+ .markdown {
+ font-size: 0.9rem;
+ }
+
+ .markdown h1 {
+ font-size: 1.8rem;
+ }
+
+ .markdown h2 {
+ font-size: 1.4rem;
+ }
+
+ .markdown pre {
+ margin-left: -1rem;
+ margin-right: -1rem;
+ border-left: 0;
+ border-right: 0;
+ padding: 1rem;
+ border-radius: 0;
+ }
+
+ .markdown table {
+ display: block;
+ overflow-x: auto;
+ }
}