{title}
+{description}
+ ++
+
+
-
+ {blogLinks.map(({ url, title }) => (
+ {
+ setOpen(false);
+ window.location.href = url;
}}
>
{title}
diff --git a/components/mdx/components/index.tsx b/components/mdx/components/index.tsx
new file mode 100644
index 0000000..ca809b7
--- /dev/null
+++ b/components/mdx/components/index.tsx
@@ -0,0 +1,32 @@
+import { DetailedHTMLProps, HTMLAttributes } from 'react';
+import NextImage from 'next/image';
+import { MDXComponents } from 'mdx/types';
+import { MDXNote } from './mdx-note';
+import { MDXImage } from './mdx-image';
+import { HomeIcon, InfoCircledIcon } from '@radix-ui/react-icons';
+
+export const mdxComponents: MDXComponents = {
+ pre: ({
+ children,
+ ...props
+ }: DetailedHTMLProps, HTMLPreElement>) => {
+ return , HTMLDetailsElement> & {
+ summary: string;
+ }) => (
+ , HTMLImageElement> & {
+ src: string;
+ alt: string;
+}) {
+ let widthFromSrc, heightFromSrc;
+ const url = new URL(src, 'https://maria-adriana.com');
+ const widthParam = url.searchParams.get('w') || url.searchParams.get('width');
+ const heightParam = url.searchParams.get('h') || url.searchParams.get('height');
+ if (widthParam) {
+ widthFromSrc = parseInt(widthParam);
+ }
+ if (heightParam) {
+ heightFromSrc = parseInt(heightParam);
+ }
+
+ const imageProps = {
+ src,
+ alt,
+ height: heightFromSrc || 450,
+ width: widthFromSrc || 550
+ };
+
+ return ) {
+ return (
+
+ );
+}
diff --git a/components/navbar.tsx b/components/navbar.tsx
index dc3522f..f77f1de 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -54,7 +54,8 @@ export function Navbar() {
key={path}
href={path}
className={`transition-all hover:text-neutral-2 flex align-middle relative py-1 px-2 ${
- pathname === path && 'dark:text-orange-200 text-orange-700'
+ pathname.split('/')[1] === path.replace('/', '') &&
+ 'dark:text-orange-200 text-orange-700'
}`}
>
{name}
diff --git a/components/pages/blog/posts-list.tsx b/components/pages/blog/posts-list.tsx
new file mode 100644
index 0000000..349a611
--- /dev/null
+++ b/components/pages/blog/posts-list.tsx
@@ -0,0 +1,122 @@
+'use client';
+
+import { useRef, useState } from 'react';
+import Link from 'next/link';
+import ReactLenis from '@studio-freight/react-lenis';
+import ScrollFadeReveal from '@/components/ui/section-reveal';
+import { BlogPost } from '@/data/blog';
+import useMousePosition from '@/hooks/use-mouse-position';
+import { cn } from '@/utils/utils';
+import { CalendarIcon } from '@radix-ui/react-icons';
+
+export default function PostsList({ posts }: { posts: BlogPost[] }) {
+ const [hoveringPost, setHoveringPost] = useState(null);
+
+ const { x, y } = useMousePosition();
+
+ const linkWrapperRef = useRef(null);
+ const anchorLinkRef = useRef(null);
+ const timeoutRef = useRef(null);
+
+ const handleMouseEnter = (post: BlogPost) => {
+ if (timeoutRef.current) {
+ clearTimeout(timeoutRef.current);
+ timeoutRef.current = null;
+ }
+ setHoveringPost(post);
+ };
+
+ const handleMouseLeave = (e: React.MouseEvent) => {
+ const relatedTarget = e.relatedTarget as HTMLElement;
+ if (relatedTarget && e.currentTarget.contains(relatedTarget)) {
+ return;
+ }
+ timeoutRef.current = setTimeout(() => {
+ setHoveringPost(null);
+ }, 500);
+ };
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/components/pages/home/layout.tsx b/components/pages/home/layout.tsx
index 727c8b9..42b5a1f 100644
--- a/components/pages/home/layout.tsx
+++ b/components/pages/home/layout.tsx
@@ -4,7 +4,6 @@ import { SectionAbout } from '@/components/pages/home/section-about';
import { SectionEducation } from '@/components/pages/home/section-education';
import { SectionProjects } from '@/components/pages/home/section-projects';
import { SectionWorkExperience } from '@/components/pages/home/section-work-experience';
-import ProgressIndicator from '@/components/progress-indicator';
import ScrollFadeReveal from '@/components/ui/section-reveal';
import ReactLenis from '@studio-freight/react-lenis';
import { SectionHero } from './section-hero';
@@ -12,7 +11,6 @@ import { SectionHero } from './section-hero';
export const HomeLayout = () => {
return (
-
-
+ Not Found
-Could not find requested resource
- - -
+
);
}
diff --git a/components/bg-grid.tsx b/components/bg-grid.tsx
index 9525b50..1d576d9 100644
--- a/components/bg-grid.tsx
+++ b/components/bg-grid.tsx
@@ -4,7 +4,7 @@ import Image from 'next/image';
export function BGGrid({ children }: { children?: React.ReactNode }) {
return (
- Not found :'(
++ Whatever you were looking for, is simply not here.{' '} + Have you tried looking for under the bed? +
+
+ <>
{children}
-
+
);
}
diff --git a/components/command-menu.tsx b/components/command-menu.tsx
index 66390b8..8572eb6 100644
--- a/components/command-menu.tsx
+++ b/components/command-menu.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import { useState, useEffect } from 'react';
import {
CommandDialog,
CommandEmpty,
@@ -20,12 +20,13 @@ interface Props {
}
export const CommandMenu = ({ links }: Props) => {
- const [open, setOpen] = React.useState(false);
+ const [open, setOpen] = useState(false);
- const socialsLinks = links.filter((link) => link.type === 'social');
const internalLinks = links.filter((link) => link.type === 'internal');
+ const blogLinks = links.filter((link) => link.type === 'blog');
+ const socialsLinks = links.filter((link) => link.type === 'social');
- React.useEffect(() => {
+ useEffect(() => {
const down = (e: KeyboardEvent) => {
if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
e.preventDefault();
@@ -55,7 +56,21 @@ export const CommandMenu = ({ links }: Props) => {
key={url}
onSelect={() => {
setOpen(false);
- window.open(url);
+ window.location.href = url;
+ }}
+ >
+ {title}
+
+ ))}
+
+ {children};
+ },
+ img: MDXImage,
+ Image: NextImage,
+ Details: ({
+ children,
+ summary,
+ ...props
+ }: DetailedHTMLProps
+ {summary &&
+ ),
+ Note: MDXNote,
+ InfoIcon: InfoCircledIcon,
+ HomeIcon: HomeIcon
+};
diff --git a/components/mdx/components/mdx-image.tsx b/components/mdx/components/mdx-image.tsx
new file mode 100644
index 0000000..308e86f
--- /dev/null
+++ b/components/mdx/components/mdx-image.tsx
@@ -0,0 +1,30 @@
+import NextImage from 'next/image';
+import { DetailedHTMLProps, ImgHTMLAttributes } from 'react';
+
+export function MDXImage({
+ src,
+ alt
+}: DetailedHTMLProps{summary}
} + {children} +Blog
+Articles list
++ My own personal and biased musings in thinkering around in engineering and + design lands - take this as a fair warning. +
++
-
+ {posts.map((post, index) => (
+
- handleMouseEnter(post)}
+ onMouseEnter={() => handleMouseEnter(post)}
+ onMouseLeave={(e) => handleMouseLeave(e)}
+ onClick={() => anchorLinkRef.current?.click()}
+ >
+
+ ++ ++ + {index + 1}. + {' '} + {post.title} +
+ ++ {post.description} +
+
+ ))}
+
+
+ Read more
+
+
+
+