Added prettier

This commit is contained in:
Bartosz Jarocki 2023-12-26 15:18:39 +01:00
parent a37891a1db
commit 3c13bd111e
17 changed files with 115 additions and 4478 deletions

3
.prettierrc Normal file
View File

@ -0,0 +1,3 @@
{
"plugins": ["prettier-plugin-tailwindcss"]
}

4385
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -31,6 +31,8 @@
"eslint": "^8",
"eslint-config-next": "14.0.4",
"postcss": "^8",
"prettier": "^3.1.1",
"prettier-plugin-tailwindcss": "^0.5.9",
"tailwindcss": "^3.4.0",
"typescript": "^5"
}

View File

@ -16,15 +16,18 @@ export const metadata: Metadata = {
export default function Page() {
return (
<main className="container mx-auto p-4 md:p-16 print:p-12 relative overflow-auto scroll-my-12">
<section className="w-full max-w-2xl mx-auto bg-white space-y-8">
<main className="container relative mx-auto scroll-my-12 overflow-auto p-4 print:p-12 md:p-16">
<section className="mx-auto w-full max-w-2xl space-y-8 bg-white">
<div className="flex items-center justify-between">
<div className="flex-1 space-y-1">
<h1 className="text-2xl font-bold">{RESUME_DATA.name}</h1>
<p className="text-muted-foreground font-mono text-sm max-w-md text-pretty">
<p className="max-w-md text-pretty font-mono text-sm text-muted-foreground">
{RESUME_DATA.about}
</p>
<div className="print:hidden flex text-muted-foreground font-mono text-sm gap-x-1 pt-1">
<p className="max-w-md text-pretty font-mono text-xs text-muted-foreground">
{RESUME_DATA.location}
</p>
<div className="flex gap-x-1 pt-1 font-mono text-sm text-muted-foreground print:hidden">
{RESUME_DATA.contact.email ? (
<a href={`mailto:${RESUME_DATA.contact.email}`}>
<Button className="h-8 w-8" variant="outline" size="icon">
@ -52,7 +55,7 @@ export default function Page() {
</Button>
))}
</div>
<div className="hidden print:flex text-muted-foreground font-mono flex-col text-sm gap-x-1">
<div className="hidden flex-col gap-x-1 font-mono text-sm text-muted-foreground print:flex">
{RESUME_DATA.contact.email ? (
<a href={`mailto:${RESUME_DATA.contact.email}`}>
<span className="underline">{RESUME_DATA.contact.email}</span>
@ -73,7 +76,7 @@ export default function Page() {
</div>
<Section>
<h2 className="text-xl font-bold">About</h2>
<p className="text-muted-foreground font-mono text-sm text-pretty">
<p className="text-pretty font-mono text-sm text-muted-foreground">
{RESUME_DATA.summary}
</p>
</Section>
@ -84,7 +87,7 @@ export default function Page() {
<Card key={work.company}>
<CardHeader>
<div className="flex items-center justify-between gap-x-2 text-base">
<h3 className="font-semibold leading-none inline-flex items-center justify-center gap-x-1">
<h3 className="inline-flex items-center justify-center gap-x-1 font-semibold leading-none">
<a className="hover:underline" href={work.link}>
{work.company}
</a>
@ -93,7 +96,7 @@ export default function Page() {
{work.badges.map((badge) => (
<Badge
variant="secondary"
className="text-xs align-middle"
className="align-middle text-xs"
key={badge}
>
{badge}
@ -101,12 +104,12 @@ export default function Page() {
))}
</span>
</h3>
<div className="text-gray-500 text-sm tabular-nums">
<div className="text-sm tabular-nums text-gray-500">
{work.start} - {work.end}
</div>
</div>
<h4 className="text-sm leading-none font-mono">
<h4 className="font-mono text-sm leading-none">
{work.title}
</h4>
</CardHeader>
@ -127,7 +130,7 @@ export default function Page() {
<h3 className="font-semibold leading-none">
{education.school}
</h3>
<div className="text-gray-500 text-sm tabular-nums">
<div className="text-sm tabular-nums text-gray-500">
{education.start} - {education.end}
</div>
</div>
@ -148,7 +151,7 @@ export default function Page() {
<Section className="print-force-new-page scroll-mb-16">
<h2 className="text-xl font-bold">Projects</h2>
<div className="grid grid-cols-1 gap-3 print:gap-2 md:grid-cols-2 lg:grid-cols-3 -mx-3 print:grid-cols-3">
<div className="-mx-3 grid grid-cols-1 gap-3 print:grid-cols-3 print:gap-2 md:grid-cols-2 lg:grid-cols-3">
{RESUME_DATA.projects.map((project) => {
return (
<ProjectCard

View File

@ -34,7 +34,7 @@ export const CommandMenu = ({ links }: Props) => {
return (
<>
<p className="text-sm text-muted-foreground print:hidden fixed left-0 right-0 bottom-0 bg-white border-t border-t-muted text-center p-1">
<p className="fixed bottom-0 left-0 right-0 border-t border-t-muted bg-white p-1 text-center text-sm text-muted-foreground print:hidden">
Press{" "}
<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
<span className="text-xs"></span>J

View File

@ -17,7 +17,7 @@ export const PrintDrawer = () => {
return (
<Drawer>
<DrawerTrigger asChild>
<Button className="rounded-full h-16 w-16 fixed bottom-4 right-4 shadow-2xl print:hidden">
<Button className="fixed bottom-4 right-4 h-16 w-16 rounded-full shadow-2xl print:hidden">
<PrinterIcon />
</Button>
</DrawerTrigger>

View File

@ -16,7 +16,7 @@ interface Props {
export function ProjectCard({ title, description, tags, link }: Props) {
return (
<Card className="border border-muted p-3 overflow-hidden flex flex-col">
<Card className="flex flex-col overflow-hidden border border-muted p-3">
<CardHeader className="">
<div className="space-y-1">
<CardTitle className="text-base">
@ -24,28 +24,28 @@ export function ProjectCard({ title, description, tags, link }: Props) {
<a
href={link}
target="_blank"
className="hover:underline inline-flex items-center gap-1"
className="inline-flex items-center gap-1 hover:underline"
>
{title}{" "}
<span className="bg-green-500 rounded-full h-1 w-1"></span>
<span className="h-1 w-1 rounded-full bg-green-500"></span>
</a>
) : (
title
)}
</CardTitle>
<div className="text-xs hidden print:visible underline font-mono">
<div className="hidden font-mono text-xs underline print:visible">
{link?.replace("https://", "").replace("www.", "").replace("/", "")}
</div>
<CardDescription className="text-xs font-mono">
<CardDescription className="font-mono text-xs">
{description}
</CardDescription>
</div>
</CardHeader>
<CardContent className="mt-auto flex">
<div className="flex flex-wrap gap-1 mt-2">
<div className="mt-2 flex flex-wrap gap-1">
{tags.map((tag) => (
<Badge
className="text-[10px] px-1 py-0"
className="px-1 py-0 text-[10px]"
variant="secondary"
key={tag}
>

View File

@ -13,7 +13,7 @@ const Avatar = React.forwardRef<
ref={ref}
className={cn(
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-xl",
className
className,
)}
{...props}
/>
@ -40,7 +40,7 @@ const AvatarFallback = React.forwardRef<
ref={ref}
className={cn(
"flex h-full w-full items-center justify-center rounded-xl bg-muted",
className
className,
)}
{...props}
/>

View File

@ -17,10 +17,11 @@ const badgeVariants = cva(
outline: "text-foreground",
},
},
defaultVariants: {
variant: "default",
},
}
},
);
export interface BadgeProps

View File

@ -32,7 +32,7 @@ const buttonVariants = cva(
variant: "default",
size: "default",
},
}
},
);
export interface ButtonProps
@ -51,7 +51,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
{...props}
/>
);
}
},
);
Button.displayName = "Button";

View File

@ -34,7 +34,7 @@ const CardTitle = React.forwardRef<
ref={ref}
className={cn(
"text-2xl font-semibold leading-none tracking-tight",
className
className,
)}
{...props}
/>
@ -60,8 +60,8 @@ const CardContent = React.forwardRef<
<div
ref={ref}
className={cn(
"text-muted-foreground font-mono text-sm text-pretty",
className
"text-pretty font-mono text-sm text-muted-foreground",
className,
)}
{...props}
/>

View File

@ -1,12 +1,12 @@
"use client"
"use client";
import * as React from "react"
import { type DialogProps } from "@radix-ui/react-dialog"
import { Command as CommandPrimitive } from "cmdk"
import { Search } from "lucide-react"
import * as React from "react";
import { type DialogProps } from "@radix-ui/react-dialog";
import { Command as CommandPrimitive } from "cmdk";
import { Search } from "lucide-react";
import { cn } from "@/lib/utils"
import { Dialog, DialogContent } from "@/components/ui/dialog"
import { cn } from "@/lib/utils";
import { Dialog, DialogContent } from "@/components/ui/dialog";
const Command = React.forwardRef<
React.ElementRef<typeof CommandPrimitive>,
@ -16,12 +16,13 @@ const Command = React.forwardRef<
ref={ref}
className={cn(
"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
className
className,
)}
{...props}
/>
))
Command.displayName = CommandPrimitive.displayName
));
Command.displayName = CommandPrimitive.displayName;
interface CommandDialogProps extends DialogProps {}
@ -34,8 +35,8 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
</Command>
</DialogContent>
</Dialog>
)
}
);
};
const CommandInput = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Input>,
@ -47,14 +48,14 @@ const CommandInput = React.forwardRef<
ref={ref}
className={cn(
"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
className
className,
)}
{...props}
/>
</div>
))
));
CommandInput.displayName = CommandPrimitive.Input.displayName
CommandInput.displayName = CommandPrimitive.Input.displayName;
const CommandList = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.List>,
@ -65,9 +66,9 @@ const CommandList = React.forwardRef<
className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
{...props}
/>
))
));
CommandList.displayName = CommandPrimitive.List.displayName
CommandList.displayName = CommandPrimitive.List.displayName;
const CommandEmpty = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Empty>,
@ -78,9 +79,9 @@ const CommandEmpty = React.forwardRef<
className="py-6 text-center text-sm"
{...props}
/>
))
));
CommandEmpty.displayName = CommandPrimitive.Empty.displayName
CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
const CommandGroup = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Group>,
@ -90,13 +91,13 @@ const CommandGroup = React.forwardRef<
ref={ref}
className={cn(
"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
className
className,
)}
{...props}
/>
))
));
CommandGroup.displayName = CommandPrimitive.Group.displayName
CommandGroup.displayName = CommandPrimitive.Group.displayName;
const CommandSeparator = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Separator>,
@ -107,8 +108,8 @@ const CommandSeparator = React.forwardRef<
className={cn("-mx-1 h-px bg-border", className)}
{...props}
/>
))
CommandSeparator.displayName = CommandPrimitive.Separator.displayName
));
CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
const CommandItem = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Item>,
@ -118,13 +119,13 @@ const CommandItem = React.forwardRef<
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
className,
)}
{...props}
/>
))
));
CommandItem.displayName = CommandPrimitive.Item.displayName
CommandItem.displayName = CommandPrimitive.Item.displayName;
const CommandShortcut = ({
className,
@ -134,13 +135,13 @@ const CommandShortcut = ({
<span
className={cn(
"ml-auto text-xs tracking-widest text-muted-foreground",
className
className,
)}
{...props}
/>
)
}
CommandShortcut.displayName = "CommandShortcut"
);
};
CommandShortcut.displayName = "CommandShortcut";
export {
Command,
@ -152,4 +153,4 @@ export {
CommandItem,
CommandShortcut,
CommandSeparator,
}
};

View File

@ -21,8 +21,8 @@ const DialogOverlay = React.forwardRef<
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"print:hidden fixed inset-0 z-50 bg-black/20 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
"fixed inset-0 z-50 bg-black/20 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 print:hidden",
className,
)}
{...props}
/>
@ -38,8 +38,8 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
"print:hidden fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] print:hidden sm:rounded-lg",
className,
)}
{...props}
>
@ -60,7 +60,7 @@ const DialogHeader = ({
<div
className={cn(
"flex flex-col space-y-1.5 text-center sm:text-left",
className
className,
)}
{...props}
/>
@ -74,7 +74,7 @@ const DialogFooter = ({
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className
className,
)}
{...props}
/>
@ -89,7 +89,7 @@ const DialogTitle = React.forwardRef<
ref={ref}
className={cn(
"text-lg font-semibold leading-none tracking-tight",
className
className,
)}
{...props}
/>

View File

@ -1,9 +1,9 @@
"use client"
"use client";
import * as React from "react"
import { Drawer as DrawerPrimitive } from "vaul"
import * as React from "react";
import { Drawer as DrawerPrimitive } from "vaul";
import { cn } from "@/lib/utils"
import { cn } from "@/lib/utils";
const Drawer = ({
shouldScaleBackground = true,
@ -13,14 +13,15 @@ const Drawer = ({
shouldScaleBackground={shouldScaleBackground}
{...props}
/>
)
Drawer.displayName = "Drawer"
);
const DrawerTrigger = DrawerPrimitive.Trigger
Drawer.displayName = "Drawer";
const DrawerPortal = DrawerPrimitive.Portal
const DrawerTrigger = DrawerPrimitive.Trigger;
const DrawerClose = DrawerPrimitive.Close
const DrawerPortal = DrawerPrimitive.Portal;
const DrawerClose = DrawerPrimitive.Close;
const DrawerOverlay = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Overlay>,
@ -31,8 +32,8 @@ const DrawerOverlay = React.forwardRef<
className={cn("fixed inset-0 z-50 bg-black/80", className)}
{...props}
/>
))
DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
));
DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
const DrawerContent = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Content>,
@ -44,7 +45,7 @@ const DrawerContent = React.forwardRef<
ref={ref}
className={cn(
"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
className
className,
)}
{...props}
>
@ -52,8 +53,8 @@ const DrawerContent = React.forwardRef<
{children}
</DrawerPrimitive.Content>
</DrawerPortal>
))
DrawerContent.displayName = "DrawerContent"
));
DrawerContent.displayName = "DrawerContent";
const DrawerHeader = ({
className,
@ -63,8 +64,8 @@ const DrawerHeader = ({
className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
{...props}
/>
)
DrawerHeader.displayName = "DrawerHeader"
);
DrawerHeader.displayName = "DrawerHeader";
const DrawerFooter = ({
className,
@ -74,8 +75,8 @@ const DrawerFooter = ({
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
{...props}
/>
)
DrawerFooter.displayName = "DrawerFooter"
);
DrawerFooter.displayName = "DrawerFooter";
const DrawerTitle = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Title>,
@ -85,12 +86,12 @@ const DrawerTitle = React.forwardRef<
ref={ref}
className={cn(
"text-lg font-semibold leading-none tracking-tight",
className
className,
)}
{...props}
/>
))
DrawerTitle.displayName = DrawerPrimitive.Title.displayName
));
DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
const DrawerDescription = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Description>,
@ -101,8 +102,8 @@ const DrawerDescription = React.forwardRef<
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
DrawerDescription.displayName = DrawerPrimitive.Description.displayName
));
DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
export {
Drawer,
@ -115,4 +116,4 @@ export {
DrawerFooter,
DrawerTitle,
DrawerDescription,
}
};

View File

@ -5,7 +5,7 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {}
export function Section({ className, ...props }: BadgeProps) {
return (
<section
className={cn("flex flex-col min-h-0 gap-y-3", className)}
className={cn("flex min-h-0 flex-col gap-y-3", className)}
{...props}
/>
);

View File

@ -20,6 +20,7 @@ import { GithubIcon, LinkedinIcon, TwitterIcon } from "lucide-react";
export const RESUME_DATA = {
name: "Bartosz Jarocki",
initials: "BJ",
location: "Wrocław, Poland, CET",
about:
"Full Stack Engineer focused on building products with extra attention to details",
summary:

View File

@ -2292,6 +2292,16 @@ prelude-ls@^1.2.1:
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
prettier-plugin-tailwindcss@^0.5.9:
version "0.5.9"
resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.9.tgz#fdc2bd95a02b64702ebd2d6c7ddd300198de3cc6"
integrity sha512-9x3t1s2Cjbut2QiP+O0mDqV3gLXTe2CgRlQDgucopVkUdw26sQi53p/q4qvGxMLBDfk/dcTV57Aa/zYwz9l8Ew==
prettier@^3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.1.1.tgz#6ba9f23165d690b6cbdaa88cb0807278f7019848"
integrity sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw==
prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"