diff --git a/domain.code-workspace b/domain.code-workspace index e312ba8..5f04c3e 100644 --- a/domain.code-workspace +++ b/domain.code-workspace @@ -170,6 +170,7 @@ }, "zenMode.centerLayout": false, "cSpell.words": [ + "Boisu", "Poorna", "Socie", "withastro" @@ -195,6 +196,6 @@ "titleBar.inactiveBackground": "#01001099", "titleBar.inactiveForeground": "#e7e7e799", "tab.activeBorder": "#040043" - }, + } } } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index cf75da6..63ddaa9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,10 @@ "@astrojs/react": "4.1.2", "@astrojs/rss": "4.0.11", "@astrojs/tailwind": "5.1.4", + "@fontsource/orbitron": "5.2.8", "@fontsource/roboto": "5.1.0", + "@fontsource/sora": "5.2.8", + "@fontsource/space-grotesk": "5.2.10", "@radix-ui/react-slot": "1.1.1", "astro": "5.1.1", "astro-aws-amplify": "0.1.0", @@ -1248,12 +1251,39 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fontsource/orbitron": { + "version": "5.2.8", + "resolved": "https://registry.npmjs.org/@fontsource/orbitron/-/orbitron-5.2.8.tgz", + "integrity": "sha512-ruzrDl5vnqNykk5DZWY0Ezj4aeFZSbCnwJTc/98ojNJHSsHhlhT2r7rwQrA5sptmF8JtB8TQTAvlfRvcV28RPw==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@fontsource/roboto": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.1.0.tgz", "integrity": "sha512-cFRRC1s6RqPygeZ8Uw/acwVHqih8Czjt6Q0MwoUoDe9U3m4dH1HmNDRBZyqlMSFwgNAUKgFImncKdmDHyKpwdg==", "license": "Apache-2.0" }, + "node_modules/@fontsource/sora": { + "version": "5.2.8", + "resolved": "https://registry.npmjs.org/@fontsource/sora/-/sora-5.2.8.tgz", + "integrity": "sha512-1G6iTXUx8rcCKzi3mjaTQ1DE8PQz0OmW3Qnku+64S+bqRr1o/gGeiw8fxIQhhBU9ZP8ZofIqai7o00DNOPnlDw==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, + "node_modules/@fontsource/space-grotesk": { + "version": "5.2.10", + "resolved": "https://registry.npmjs.org/@fontsource/space-grotesk/-/space-grotesk-5.2.10.tgz", + "integrity": "sha512-XNXEbT74OIITPqw2H6HXwPDp85fy43uxfBwFR5PU+9sLnjuLj12KlhVM9nZVN6q6dlKjkuN8JisW/OBxwxgUew==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", diff --git a/package.json b/package.json index 21ae18b..570de51 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,10 @@ "@astrojs/react": "4.1.2", "@astrojs/rss": "4.0.11", "@astrojs/tailwind": "5.1.4", + "@fontsource/orbitron": "5.2.8", "@fontsource/roboto": "5.1.0", + "@fontsource/sora": "5.2.8", + "@fontsource/space-grotesk": "5.2.10", "@radix-ui/react-slot": "1.1.1", "astro": "5.1.1", "astro-aws-amplify": "0.1.0", @@ -102,4 +105,4 @@ "prettier-plugin-astro": "0.14.1", "prettier-plugin-tailwindcss": "0.6.8" } -} \ No newline at end of file +} diff --git a/public/assets/fonts/Boisu-Stroke.woff2 b/public/assets/fonts/Boisu-Stroke.woff2 new file mode 100644 index 0000000..c07832b Binary files /dev/null and b/public/assets/fonts/Boisu-Stroke.woff2 differ diff --git a/public/theme.js b/public/theme.js index 3578f4a..c84aa95 100644 --- a/public/theme.js +++ b/public/theme.js @@ -1,7 +1,7 @@ -(function () { - const savedTheme = localStorage.getItem("theme"); - console.log("Saved theme:", savedTheme); - if (savedTheme) { - document.documentElement.setAttribute("data-theme", savedTheme); - } -})(); +(function () { + const savedTheme = localStorage.getItem("theme"); + console.log("Saved theme:", savedTheme); + if (savedTheme) { + document.documentElement.setAttribute("data-theme", savedTheme); + } +})(); diff --git a/src/assets/fonts/Boisu-Stroke.otf b/src/assets/fonts/Boisu-Stroke.otf new file mode 100644 index 0000000..71b9051 Binary files /dev/null and b/src/assets/fonts/Boisu-Stroke.otf differ diff --git a/src/assets/images/fabric-ai.png b/src/assets/images/fabric-ai.png new file mode 100644 index 0000000..a0d3570 Binary files /dev/null and b/src/assets/images/fabric-ai.png differ diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png new file mode 100644 index 0000000..5c7f213 Binary files /dev/null and b/src/assets/images/logo.png differ diff --git a/src/assets/projects/abcdkbd.png b/src/assets/projects/abcdkbd.png new file mode 100644 index 0000000..1024521 Binary files /dev/null and b/src/assets/projects/abcdkbd.png differ diff --git a/src/assets/projects/letter.png b/src/assets/projects/letter.png new file mode 100644 index 0000000..fc3e821 Binary files /dev/null and b/src/assets/projects/letter.png differ diff --git a/src/assets/projects/threadzip.png b/src/assets/projects/threadzip.png new file mode 100644 index 0000000..2ed86e2 Binary files /dev/null and b/src/assets/projects/threadzip.png differ diff --git a/src/assets/styles/card.css b/src/assets/styles/card.css index 254d778..560325e 100644 --- a/src/assets/styles/card.css +++ b/src/assets/styles/card.css @@ -2,42 +2,67 @@ list-style: none; display: flex; padding: 1px; - background-color: #23262d; - background-image: none; - background-size: 400%; - border-radius: 7px; - background-position: 100%; - transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1); - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); + + /* 🌗 Theme based background */ + background-color: hsl(var(--background)); + + border-radius: 8px; + overflow: hidden; + + /* subtle border effect */ + box-shadow: inset 0 0 0 1px hsl(var(--foreground) / 0.1); + + transition: all 0.3s ease; } .link-card > a { width: 100%; text-decoration: none; line-height: 1.4; + padding: calc(1.5rem - 1px); border-radius: 8px; - color: white; - background-color: #23262d; - opacity: 0.8; + + /* 🌗 Theme colors */ + background-color: hsl(var(--background)); + color: hsl(var(--foreground)); + + transition: all 0.3s ease; } -h2 { +/* Title */ +.link-card h2 { margin: 0; font-size: 1.25rem; - transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1); + font-weight: 600; + + color: hsl(var(--foreground)); + + transition: color 0.3s ease; } -p { +/* Description */ +.link-card p { margin-top: 0.5rem; margin-bottom: 0; -} -.link-card:is(:hover, :focus-within) { - background-position: 0; - background-image: var(--accent-gradient); + color: hsl(var(--foreground) / 0.7); + font-size: 0.95rem; + line-height: 1.6; } -.link-card:is(:hover, :focus-within) h2 { - color: rgb(var(--accent-light)); +/* Hover effect */ +.link-card:hover, +.link-card:focus-within { + transform: translateY(-4px); + + /* subtle highlight */ + box-shadow: + inset 0 0 0 1px hsl(var(--foreground) / 0.15), + 0 10px 30px -10px hsl(var(--foreground) / 0.2); } + +/* Hover title color */ +.link-card:hover h2 { + color: rgb(var(--accent)); +} \ No newline at end of file diff --git a/src/assets/styles/custom-font.css b/src/assets/styles/custom-font.css index 51fd085..fbd5a7a 100644 --- a/src/assets/styles/custom-font.css +++ b/src/assets/styles/custom-font.css @@ -1,7 +1,9 @@ /* src/styles/custom-font.css */ + + @font-face { - font-family: "Mudra"; - src: url("/assets/fonts/MudraMohta-Regular.ttf") format("truetype"); + font-family: "Boisu"; + src: url("../assets/fonts/Boisu-Stroke.woff2") format("woff2"); font-weight: normal; font-style: normal; -} +} \ No newline at end of file diff --git a/src/assets/styles/globals.css b/src/assets/styles/globals.css index d1326e7..967578f 100644 --- a/src/assets/styles/globals.css +++ b/src/assets/styles/globals.css @@ -1,22 +1,31 @@ -/*@import "./custom-font.css";*/ @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { - --font-size-min: 16; --font-size-max: 20; --font-ratio-min: 1.2; --font-ratio-max: 1.33; --font-width-min: 375; --font-width-max: 1500; + + /* 🎨 LIGHT THEME */ + --background: 0 0% 100%; + --foreground: 222 47% 11%; + --accent: 136, 58, 234; --accent-light: 224, 204, 250; --accent-dark: 49, 10, 101; } - + + /* 🌙 DARK THEME */ + .dark { + --background: 222 47% 11%; + --foreground: 0 0% 100%; + } + html { color-scheme: light dark; height: 100%; @@ -39,28 +48,38 @@ overflow-x: hidden; display: block; font-family: "Roboto", "SF Pro Text", "Helvetica Neue", Arial, sans-serif; - transition: background-color 0.3s ease; - + + background: hsl(var(--background)); + color: hsl(var(--foreground)); + + transition: background-color 0.3s ease, color 0.3s ease; } - /* Grid Background */ + /* ❌ LIGHT MODE → NO GRID */ body::before { - --size: 45px; - --line: rgba(255, 255, 255, 0.06); + display: none; + } + + /* ✅ DARK MODE → GRID */ + .dark body::before { content: ""; position: fixed; inset: 0; width: 100%; height: 100%; - background: - linear-gradient(90deg, var(--line) 1px, transparent 1px), + + --size: 45px; + --line: rgba(255, 255, 255, 0.06); + + background: linear-gradient(90deg, var(--line) 1px, transparent 1px), linear-gradient(var(--line) 1px, transparent 1px); + background-size: var(--size) var(--size); + pointer-events: none; z-index: -1; } - /* MAIN FIX */ main { display: block !important; width: 100% !important; @@ -90,16 +109,6 @@ resize: none; } - .whiteBg { - background: #ffffff; - color: #111111; - } - - .darkBg { - background: #050505; - color: #ffffff; - } - .yellowBtnHover:hover { background-color: #d4a900; } diff --git a/src/assets/styles/markdown-content.css b/src/assets/styles/markdown-content.css index d67602a..2141c51 100644 --- a/src/assets/styles/markdown-content.css +++ b/src/assets/styles/markdown-content.css @@ -1,105 +1,120 @@ .markdown-content { font-size: 1.125rem; line-height: 1.75; - color: rgb(229, 231, 235); - background-color: rgba(0, 0, 0, 0.5); - padding: 3rem 6rem; - border-radius: 1rem; + color: inherit; + background-color: transparent; + padding: 0; + border-radius: 0; } +/* Headings */ .markdown-content h1 { margin-bottom: 2rem; font-size: 2.25rem; - font-weight: bold; + font-weight: 700; letter-spacing: -0.025em; - background: linear-gradient(120deg, #75aac3, #8fb5b9); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - text-shadow: 0 2px 10px rgba(139, 92, 246, 0.2); + color: inherit; } .markdown-content h2 { - margin-bottom: 1.5rem; margin-top: 3rem; - font-size: 1.5rem; - font-weight: 600; - background: linear-gradient(120deg, #75aac3, #8fb5b9); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - text-shadow: 0 2px 8px rgba(167, 139, 250, 0.2); + margin-bottom: 1.5rem; + font-size: 1.75rem; + font-weight: 700; + color: inherit; } .markdown-content h3 { - margin-bottom: 1rem; margin-top: 2rem; - font-size: 1.25rem; + margin-bottom: 1rem; + font-size: 1.35rem; font-weight: 600; - background: linear-gradient(120deg, #75aac3, #8fb5b9); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - text-shadow: 0 2px 6px rgba(196, 181, 253, 0.2); + color: inherit; } +/* Paragraphs */ .markdown-content p { margin-bottom: 1.5rem; - line-height: 1.75; - color: rgb(209, 213, 219); + line-height: 1.9; + color: inherit; } -.markdown-content ul { - margin-bottom: 1.5rem; - list-style-type: disc; +/* Lists */ +.markdown-content ul, +.markdown-content ol { + margin: 1.5rem 0; padding-left: 1.5rem; } +.markdown-content ul { + list-style: disc; +} + .markdown-content ol { - margin-bottom: 1.5rem; - list-style-type: decimal; - padding-left: 1.5rem; + list-style: decimal; } .markdown-content li { margin-bottom: 0.5rem; } +/* Links */ .markdown-content a { - color: rgb(96, 165, 250); - text-decoration: underline; + color: #06b6d4; + text-decoration: none; + font-weight: 500; } .markdown-content a:hover { - color: rgb(147, 197, 253); + text-decoration: underline; } +/* Images */ .markdown-content img { - margin-top: 2rem; - margin-bottom: 2rem; - border-radius: 0.5rem; - box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); + margin: 2rem 0; + border-radius: 1rem; } +/* Code block */ .markdown-content pre { - margin-top: 1.5rem; - margin-bottom: 1.5rem; + margin: 1.5rem 0; overflow-x: auto; - border-radius: 0.75rem; - background-color: rgba(31, 41, 55, 0.5); + border-radius: 1rem; padding: 1rem; + background: rgba(100, 100, 100, 0.08); } +/* Inline code */ .markdown-content code { - border-radius: 0.25rem; - padding: 0.125rem 0.375rem; - font-size: 0.875rem; - color: rgb(229, 231, 235); + border-radius: 0.35rem; + padding: 0.15rem 0.4rem; + font-size: 0.9rem; } +/* Quote */ .markdown-content blockquote { - border-left: 4px solid rgb(75, 85, 99); + border-left: 4px solid #06b6d4; padding-left: 1rem; + margin: 1.5rem 0; font-style: italic; - color: rgb(156, 163, 175); + opacity: 0.8; } + +/* Mobile */ +@media (max-width: 768px) { + .markdown-content { + font-size: 1rem; + } + + .markdown-content h1 { + font-size: 2rem; + } + + .markdown-content h2 { + font-size: 1.5rem; + } + + .markdown-content h3 { + font-size: 1.25rem; + } +} \ No newline at end of file diff --git a/src/assets/styles/theme.css b/src/assets/styles/theme.css index f79d78a..3482627 100644 --- a/src/assets/styles/theme.css +++ b/src/assets/styles/theme.css @@ -1,70 +1,67 @@ -@layer normalize, base, demo, inversion; - -@layer inversion { - - /* ::before === clouds, ::after === stars */ - @media (prefers-color-scheme: light) { - - [data-invert='true']::after, - [data-invert='false']::before { - opacity: 1; - } - - [data-invert='true']::before, - [data-invert='false']::after { - opacity: 0.1; - } - } - - @media (prefers-color-scheme: dark) { - - [data-invert='true']::before, - [data-invert='false']::after { - opacity: 1; - background-position: 0% 50%; - } - - [data-invert='true']::after, - [data-invert='false']::before { - opacity: 0; - } - } - - [data-invert='true'][data-theme='light']::before { - opacity: 0.1; - background-position: 50% 50%; - } - - [data-invert='true'][data-theme='dark']::before { - opacity: 1; - background-position: 0% 50%; - } - - [data-invert='true'][data-theme='light']::after, - [data-invert='false'][data-theme='dark']::after { - opacity: 1; - } - - [data-invert='false'][data-theme='light']::after, - [data-invert='true'][data-theme='dark']::after { - opacity: 0; - } - - [data-invert='false'][data-theme='light']::before { - opacity: 1; - background-position: 50% 50%; - } - - [data-invert='false'][data-theme='dark']::before { - opacity: 0.1; - background-position: 0% 50%; - } - - [data-invert='true'] { - background: light-dark(#01022e, #34d0ff); - } - - [data-invert='false'] { - background: light-dark(#34d0ff, #01022e); - } -} \ No newline at end of file +@layer normalize, base, demo, inversion; + +@layer inversion { + /* ::before === clouds, ::after === stars */ + @media (prefers-color-scheme: light) { + [data-invert="true"]::after, + [data-invert="false"]::before { + opacity: 1; + } + + [data-invert="true"]::before, + [data-invert="false"]::after { + opacity: 0.1; + } + } + + @media (prefers-color-scheme: dark) { + [data-invert="true"]::before, + [data-invert="false"]::after { + opacity: 1; + background-position: 0% 50%; + } + + [data-invert="true"]::after, + [data-invert="false"]::before { + opacity: 0; + } + } + + [data-invert="true"][data-theme="light"]::before { + opacity: 0.1; + background-position: 50% 50%; + } + + [data-invert="true"][data-theme="dark"]::before { + opacity: 1; + background-position: 0% 50%; + } + + [data-invert="true"][data-theme="light"]::after, + [data-invert="false"][data-theme="dark"]::after { + opacity: 1; + } + + [data-invert="false"][data-theme="light"]::after, + [data-invert="true"][data-theme="dark"]::after { + opacity: 0; + } + + [data-invert="false"][data-theme="light"]::before { + opacity: 1; + background-position: 50% 50%; + } + + [data-invert="false"][data-theme="dark"]::before { + opacity: 0.1; + background-position: 0% 50%; + } + + [data-invert="true"] { + background: light-dark(#01022e, #34d0ff); + } + + [data-invert="false"] { + background: light-dark(#34d0ff, #01022e); + } +} diff --git a/src/components/AboutSection.astro b/src/components/AboutSection.astro index c00809e..2a3a227 100644 --- a/src/components/AboutSection.astro +++ b/src/components/AboutSection.astro @@ -3,16 +3,12 @@ import image from "@/assets/images/about.jpg"; import { Image } from "astro:assets"; --- -
+
-
-
-

- Recursive Zero -

+

Recursive Zero

We Build Digital
@@ -20,31 +16,32 @@ import { Image } from "astro:assets"; Drive Results.

-

- Recursive Zero crafts high-performance web apps, internal tools, - and scalable digital solutions that simplify operations and - accelerate business growth. +

+ Recursive Zero crafts high-performance web apps, internal tools, and scalable digital solutions that simplify + operations and accelerate business growth.

-
+
✓ Fast Delivery ✓ Scalable ✓ Client-Focused @@ -54,16 +51,16 @@ import { Image } from "astro:assets";
+
Dashboard Preview
-
-
\ No newline at end of file +
diff --git a/src/components/AppsSimplifySection.astro b/src/components/AppsSimplifySection.astro index f64704d..dd8200d 100644 --- a/src/components/AppsSimplifySection.astro +++ b/src/components/AppsSimplifySection.astro @@ -1,99 +1,40 @@ - - - --- import workplace from "@/assets/images/workplace.jpg"; import { Image } from "astro:assets"; --- -
+
-
-
-

- What We Build -

+

What We Build

Simplifying daily tasks
with handy mini apps

-

- Based in Bengaluru, Recursive Zero creates compact yet powerful apps - designed to streamline your workflow, improve storage efficiency, - and enhance everyday productivity. +

+ Based in Bengaluru, Recursive Zero creates compact yet powerful apps designed to streamline your workflow, + improve storage efficiency, and enhance everyday productivity.

-

- Our solutions combine simplicity with smart technology, helping - users and businesses achieve more with less effort. +

+ Our solutions combine simplicity with smart technology, helping users and businesses achieve more with less + effort.

-
-

Fast & Lightweight

-

- Built for speed and smooth performance. -

+
+

Fast & Lightweight

+

Built for speed and smooth performance.

-
-

Easy to Use

-

- Clean UI focused on user productivity. -

+
+

Easy to Use

+

Clean UI focused on user productivity.

@@ -101,7 +42,7 @@ import { Image } from "astro:assets";
Explore Apps → @@ -110,7 +51,7 @@ import { Image } from "astro:assets";
-
+
-
-
\ No newline at end of file +
diff --git a/src/components/BlogCard.astro b/src/components/BlogCard.astro index a083d57..d27c336 100644 --- a/src/components/BlogCard.astro +++ b/src/components/BlogCard.astro @@ -1,33 +1,16 @@ --- -interface Props { - url: string; - title: string; - description?: string; - image: string; - author?: string; - date?: string; -} - -const { - url, - title, - description, - image, - author, - date -} = Astro.props; - -const imageUrl = image; +const { url, title, description, image, author, date, tags = [] } = Astro.props; ---
- -
- + +
\ No newline at end of file + diff --git a/src/components/BlogsSection.astro b/src/components/BlogsSection.astro index a5cc05b..d8d314c 100644 --- a/src/components/BlogsSection.astro +++ b/src/components/BlogsSection.astro @@ -3,21 +3,18 @@ import { getCollection } from "astro:content"; import BlogCard from "./BlogCard.astro"; const posts = await getCollection("blog"); + const slicedPosts = posts.slice(0, 3); --- -
+
-
-
-

- Recent Blogs -

+

Recent Blogs

-

+

Insights, Updates & Stories

@@ -29,7 +26,6 @@ const slicedPosts = posts.slice(0, 3); > View All Blogs → -
@@ -43,10 +39,10 @@ const slicedPosts = posts.slice(0, 3); image={post.data.image} author={post.data.author} date={post.data.date.toLocaleDateString()} + tags={post.data.tags} /> )) }
-
-
\ No newline at end of file +
diff --git a/src/components/ContactSection.astro b/src/components/ContactSection.astro index 04af3aa..fc0883c 100644 --- a/src/components/ContactSection.astro +++ b/src/components/ContactSection.astro @@ -3,37 +3,47 @@ import contactUs from "@/assets/images/contact-us.jpeg"; import { Image } from "astro:assets"; --- -
+
-
-
-

- Contact Us -

+

Contact Us

-

- Reach Recursive Zero -

+

Reach Recursive Zero

-

- Tech simplified — Harness the power of modern technology with - Recursive Zero. Send us a message and let’s build something - impactful together. +

+ Tech simplified — Harness the power of modern technology with Recursive Zero. Send us a message and let’s + build something impactful together.

-
-

📧 hello@recursivezero.com

-

📞 +91 98765 43210

-

📍 Bengaluru, India

+
+ + + + + +
+ Phone: +
+ +
+ Location: + + Bengaluru, India +
-
+
-
- -

- Let's Talk -

+
+

Let's Talk

-

- Fill the form and we’ll get back to you shortly. -

+

Fill the form and we’ll get back to you shortly.

- + + + + -
-
-
\ No newline at end of file +
diff --git a/src/components/Footer.astro b/src/components/Footer.astro index ed341dd..1594516 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -1,114 +1,115 @@ - - - --- import GitHubIcon from "@/assets/icons/github.svg"; import MailIcon from "@/assets/icons/mail.svg"; import TwitterIcon from "@/assets/icons/x.svg"; + +const quickLinks = [ + { label: "Home", href: "/" }, + { label: "About", href: "/about" }, + { label: "Blogs", href: "/blogs" }, + { label: "Career", href: "/career" }, + { label: "Work", href: "/work" }, + { label: "Contact", href: "/contact" } +]; --- -