juanmanzanero/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

renew navbar, edit resources page

Browse Source
This commit is contained in:
juancmandev
2024-07-29 15:40:52 -06:00
parent d0ab9db2a8
commit cc65303e3f
12 changed files with 214 additions and 843 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/components/ navigation.tsx Normal file
View File

@ -0,0 +1,102 @@
import LinkButton from "@/components/link-button";
import {
NotebookText,
BriefcaseBusiness,
MonitorPlay,
Newspaper,
PocketKnife,
Info,
Mail,
} from "lucide-react";
type TNavItem = {
to: string;
child: React.ReactNode;
};
export const navItems: TNavItem[] = [
{
to: "/blog",
child: (
<>
<NotebookText />
Blog
</>
),
},
{
to: "/portfolio",
child: (
<>
<BriefcaseBusiness />
Portfolio
</>
),
},
{
to: "/videos",
child: (
<>
<MonitorPlay />
Videos
</>
),
},
{
to: "/microblog",
child: (
<>
<Newspaper />
Microblog
</>
),
},
{
to: "/resources",
child: (
<>
<PocketKnife />
Resources
</>
),
},
{
to: "/about",
child: (
<>
<Info />
About
</>
),
},
{
to: "/contact",
child: (
<>
<Mail />
Contact
</>
),
},
];
export default function Navigation() {
return (
<nav className="px-4 sm:px-0 max-w-[65ch] mx-auto prose prose-invert py-20">
<h2 id="navigation">Navigation</h2>
<ul className="list-none p-0 flex flex-wrap gap-4">
{navItems.map((navItem, index) => (
<li key={index} className="m-0 p-0">
<LinkButton
variant="link"
href={navItem.to}
className="p-0 text-base gap-1"
>
{navItem.child}
</LinkButton>
</li>
))}
</ul>
</nav>
);
}

42
src/components/header.astro Normal file
View File

@ -0,0 +1,42 @@
---
import logo from "@/assets/logo.png";
import { Image } from "astro:assets";
import LinkButton from "@/components/link-button";
import { ChevronUp, Compass } from "lucide-react";
---
<header
class="py-2 fixed top-0 z-50 flex w-full items-center justify-between border-b border-secondary backdrop-blur-lg"
>
<div
class="px-4 sm:px-0 flex w-full max-w-[65ch] items-center justify-between mx-auto"
>
<section class="flex max-w-max">
<LinkButton
href="/"
size="icon"
variant="link"
className="rounded-full px-0"
>
<Image
src={logo}
width={80}
height={80}
loading="eager"
class="w-auto h-auto"
alt="juancmandev logo"
/>
</LinkButton>
</section>
<section class="flex items-center gap-4">
<LinkButton variant="link" className="p-0 gap-1" href="#">
<ChevronUp className="w-5" />
Top
</LinkButton>
<LinkButton variant="link" className="p-0 gap-1" href="#navigation">
<Compass className="w-5" />
Navigation
</LinkButton>
</section>
</div>
</header>

16
src/components/mdx/astro-image.astro
View File

@ -5,16 +5,16 @@ const { src, alt } = Astro.props;
---
<Image
id="img"
src={src}
alt={alt}
width={1092}
height={986}
class=".markdown-image w-auto h-auto rounded-md aspect-auto"
id="img"
src={src}
alt={alt}
width={1092}
height={986}
class=".markdown-image w-auto h-auto rounded-md aspect-auto"
/>
<script>
const image = document.getElementById("img")!;
const image = document.getElementById("img")!;
image.setAttribute("loading", "eager");
image && image.setAttribute("loading", "eager");
</script>

54
src/components/mobile-menu.tsx
View File

@ -1,54 +0,0 @@
import { ScrollArea } from "@/components/ui/scroll-area";
import {
Sheet,
SheetContent,
SheetHeader,
SheetTrigger,
SheetClose,
} from "@/components/ui/sheet";
import { MenuIcon } from "lucide-react";
import { navItems } from "@/utils/nav-links";
import { Button } from "@/components/ui/button";
export default function MobileMenu() {
return (
<Sheet>
<SheetTrigger asChild title="Open menu">
<Button size="icon" variant="ghost">
<MenuIcon />
</Button>
</SheetTrigger>
<SheetContent
side="right"
className="w-max border-0 bg-secondary px-0 pt-14 shadow-2xl"
>
<SheetHeader>
<ScrollArea>
<nav className="h-[calc(100vh_-_100px)]">
<section className="mt-1 flex flex-col">
<ul className="flex flex-col gap-1">
{navItems.map((navItem) => (
<li key={navItem.label} className="flex h-max w-full">
<SheetClose asChild>
<Button
asChild
size={null}
variant="link"
className="w-full cursor-default rounded-none px-10 py-3 hover:bg-background/50 hover:no-underline focus:bg-background/50"
>
<a className="capitalize" href={navItem.to}>
{navItem.label}
</a>
</Button>
</SheetClose>
</li>
))}
</ul>
</section>
</nav>
</ScrollArea>
</SheetHeader>
</SheetContent>
</Sheet>
);
}

53
src/components/navbar.astro
View File

@ -1,53 +0,0 @@
---
import logo from "@/assets/logo.png";
import { Image } from "astro:assets";
import { navItems } from "@/utils/nav-links";
import MobileMenu from "@/components/mobile-menu";
import LinkButton from "@/components/link-button";
---
<nav
class="py-2 fixed top-0 z-50 flex w-full items-center justify-between border-b border-secondary backdrop-blur-lg"
>
<div
class="px-4 flex w-full max-w-[65ch] items-center justify-between mx-auto"
>
<section class="flex max-w-max">
<LinkButton
href="/"
size="icon"
variant="link"
className="rounded-full px-0"
>
<Image
src={logo}
width={80}
height={80}
loading="eager"
class="w-auto h-auto"
alt="juancmandev logo"
/>
</LinkButton>
</section>
<section class="hidden items-center md:flex">
<ul class="flex items-center gap-1">
{
navItems.map((navItem: any) => (
<li class="w-max h-max">
<LinkButton
variant="link"
className="px-2"
href={navItem.to}
>
{navItem.label}
</LinkButton>
</li>
))
}
</ul>
</section>
<section class="flex h-max items-center md:hidden">
<MobileMenu client:idle />
</section>
</div>
</nav>

46
src/components/ui/scroll-area.tsx
View File

@ -1,46 +0,0 @@
import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
import { cn } from "@/lib/utils"
const ScrollArea = React.forwardRef<
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
<ScrollAreaPrimitive.Root
ref={ref}
className={cn("relative overflow-hidden", className)}
{...props}
>
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
{children}
</ScrollAreaPrimitive.Viewport>
<ScrollBar />
<ScrollAreaPrimitive.Corner />
</ScrollAreaPrimitive.Root>
))
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
const ScrollBar = React.forwardRef<
React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = "vertical", ...props }, ref) => (
<ScrollAreaPrimitive.ScrollAreaScrollbar
ref={ref}
orientation={orientation}
className={cn(
"flex touch-none select-none transition-colors",
orientation === "vertical" &&
"h-full w-2.5 border-l border-l-transparent p-[1px]",
orientation === "horizontal" &&
"h-2.5 flex-col border-t border-t-transparent p-[1px]",
className
)}
{...props}
>
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
</ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
export { ScrollArea, ScrollBar }

138
src/components/ui/sheet.tsx
View File

@ -1,138 +0,0 @@
import * as React from "react"
import * as SheetPrimitive from "@radix-ui/react-dialog"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"
import { cn } from "@/lib/utils"
const Sheet = SheetPrimitive.Root
const SheetTrigger = SheetPrimitive.Trigger
const SheetClose = SheetPrimitive.Close
const SheetPortal = SheetPrimitive.Portal
const SheetOverlay = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<SheetPrimitive.Overlay
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props}
ref={ref}
/>
))
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
const sheetVariants = cva(
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
{
variants: {
side: {
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
bottom:
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
right:
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
},
},
defaultVariants: {
side: "right",
},
}
)
interface SheetContentProps
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
VariantProps<typeof sheetVariants> {}
const SheetContent = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Content>,
SheetContentProps
>(({ side = "right", className, children, ...props }, ref) => (
<SheetPortal>
<SheetOverlay />
<SheetPrimitive.Content
ref={ref}
className={cn(sheetVariants({ side }), className)}
{...props}
>
{children}
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</SheetPrimitive.Close>
</SheetPrimitive.Content>
</SheetPortal>
))
SheetContent.displayName = SheetPrimitive.Content.displayName
const SheetHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-2 text-center sm:text-left",
className
)}
{...props}
/>
)
SheetHeader.displayName = "SheetHeader"
const SheetFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className
)}
{...props}
/>
)
SheetFooter.displayName = "SheetFooter"
const SheetTitle = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
>(({ className, ...props }, ref) => (
<SheetPrimitive.Title
ref={ref}
className={cn("text-lg font-semibold text-foreground", className)}
{...props}
/>
))
SheetTitle.displayName = SheetPrimitive.Title.displayName
const SheetDescription = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
>(({ className, ...props }, ref) => (
<SheetPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
SheetDescription.displayName = SheetPrimitive.Description.displayName
export {
Sheet,
SheetPortal,
SheetOverlay,
SheetTrigger,
SheetClose,
SheetContent,
SheetHeader,
SheetFooter,
SheetTitle,
SheetDescription,
}

59
src/content/pages/resources.mdx
View File

@ -1,30 +1,31 @@
---
title: Resources
description: Here you can find websites, YouTube channels, courses and more stuff that I consume or find interesting.
description:
Here you can find websites, YouTube channels, courses and more stuff that I
consume or find interesting.
---
# Resources
Here you can find websites, YouTube channels, courses and more stuff that I
consume or find interesting.
Here you can find **websites**, **YouTube channels**, **courses** and **more**
stuff that I consume or find interesting.
## Programming and Web Development
## Courses and Documentation
To **power-up** my career.
- [fireship.io](https://fireship.io)
### Websites (courses, docs, etc.)
- [MDN Web Docs](https://developer.mozilla.org/en-US)
- [fireship.io](https://fireship.io) - My favorite premium courses about WebDev
## Tech Stack
- [MDN Web Docs](https://developer.mozilla.org/en-US) - Best docs for HTML, CSS
and JS
### Tech Stack
Technologies that I use for personal projects and sometimes for work.
- [Astro](https://astro.build/) - Tool for building websites, that's how I built
this one, really useful when you want a static website, but you can do Server
Side Rendering too
- [Next.js](https://nextjs.org) - Dynamic and flexible React meta-framework,
used on this Website
previously used on this Website
- [PocketBase](https://pocketbase.io/) - Fast and light database.
- [Supabase](https://supabase.com) - Open Source Backend as a Service
alternative for Firebase, uses PostgreSQL and is really good if you're working
@ -35,34 +36,26 @@ Technologies that I use for personal projects and sometimes for work.
- [shadcn/ui](https://ui.shadcn.com) - Best components for React, sinergy with
TailwindCSS
## YouTube channels
### YouTube channels
- [Mental Outlaw](https://www.youtube.com/channel/UC7YOGHUfC1Tb6E4pudI9STA)
I mostly use YouTube as social media, I think there is still good content.
- [Eric Murphy](https://www.youtube.com/channel/UC5KDiSAFxrDWhmysBcNqtMA)
- [Mental Outlaw](https://www.youtube.com/channel/UC7YOGHUfC1Tb6E4pudI9STA) - Cool guy who talks about Linux, cybersecurity, privacy, and more.
- [Luck Smith](https://www.youtube.com/channel/UC2eYFnH61tmytImy1mTYvhA)
- [Eric Murphy](https://www.youtube.com/channel/UC5KDiSAFxrDWhmysBcNqtMA) - He uploads less videos but I really like his work too.
## Personal Websites
---
- [Eric Murphy](https://ericmurphy.xyz)
## Inspiration and Learning
- [Luke Smith](https://lukesmith.xyz/)
For writing, thinking or growing my career.
## Favorite Blogs
### Personal Websites
- [Eric Murphy](https://ericmurphy.xyz) - The guy who inspired me to retake this
side project and create more content
### Favorite Blogs
- [Why I Will Never Join Mastodon (or the rest of the Fediverse)](https://ericmurphy.xyz/blog/mastodon) -
Social media is bullshit
- [Why I Will Never Join Mastodon (or the rest of the Fediverse)](https://ericmurphy.xyz/blog/mastodon)
- [Create More, Consume Less](https://www.bikobatanari.art/posts/2020/create-more) -
Today people prefers talk about celebrities and other peoples lifes rather
than our own milestones
_Currently offline_
- [My Website is a Personal Museum](https://www.bikobatanari.art/posts/2020/personal-museum) -
The digital form of the three house
_Currently offline_

66
src/layouts/Layout.astro
View File

@ -1,12 +1,13 @@
---
import Header from "@/components/header.astro";
import Navigation from "@/components/ navigation";
import Footer from "@/components/footer";
import Navbar from "@/components/navbar.astro";
import "@/styles/globals.css";
interface Props {
title: string;
description: string;
lang?: string;
title: string;
description: string;
lang?: string;
}
const { title, description, lang } = Astro.props;
@ -14,32 +15,33 @@ const { title, description, lang } = Astro.props;
<!doctype html>
<html lang={lang || "en"}>
<head>
<meta charset="UTF-8" />
<meta name="description" content={description} />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link
rel="alternate icon"
href="/favicon.ico"
type="image/png"
sizes="16x16"
/>
<link
rel="alternate"
title="juancmandev"
type="application/rss+xml"
href={new URL("rss.xml", Astro.site)}
/>
<link rel="sitemap" href="/sitemap-index.xml" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>
<body>
<Navbar />
<main class="px-4 min-h-screen max-w-[65ch] py-28 mx-auto">
<slot />
</main>
<Footer />
</body>
<head>
<meta charset="UTF-8" />
<meta name="description" content={description} />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link
rel="alternate icon"
href="/favicon.ico"
type="image/png"
sizes="16x16"
/>
<link
rel="alternate"
title="juancmandev"
type="application/rss+xml"
href={new URL("rss.xml", Astro.site)}
/>
<link rel="sitemap" href="/sitemap-index.xml" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>
<body>
<Header />
<main class="px-4 sm:px-0 max-w-[65ch] pt-28 pb-14 mx-auto">
<slot />
</main>
<Navigation />
<Footer />
</body>
</html>

35
src/utils/nav-links.ts
View File

@ -1,35 +0,0 @@
type TNavItem = {
label: string;
to: string;
};
export const navItems: TNavItem[] = [
{
label: "Blog",
to: "/blog",
},
{
label: "Portfolio",
to: "/portfolio",
},
{
label: "Videos",
to: "/videos",
},
{
label: "Microblog",
to: "/microblog",
},
{
label: "Resources",
to: "/resources",
},
{
label: "About",
to: "/about",
},
{
label: "Contact",
to: "/contact",
},
];