Skip to content

Commit

Permalink
feat: ✨ added jp pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sardonyx001
Sardonyx001 committed May 8, 2024
1 parent d4fda2c commit cceb2e5
Show file tree
Hide file tree
Showing 2 changed files with 215 additions and 0 deletions.
214 changes: 214 additions & 0 deletions src/app/jp/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,214 @@
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Card, CardHeader, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { CommandMenu } from "@/components/command-menu";
import { Metadata } from "next";
import { Section } from "@/components/ui/section";
import { GlobeIcon, MailIcon, PhoneIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { RESUME_DATA } from "@/data/resume-data-jp";
import { ProjectCard } from "@/components/project-card";

export const metadata: Metadata = {
title: `${RESUME_DATA.name} | ${RESUME_DATA.about}`,
description: RESUME_DATA.summary,
};

export default function Page() {
return (
<main className="container relative mx-auto scroll-my-12 overflow-auto p-4 md:p-16 print:p-12">
{/* Main section */}
<section className="mx-auto w-full max-w-2xl space-y-8 bg-white print:space-y-6">
{/* Header, contact info, and about */}
<div className="flex items-center justify-between">
<div className="flex-1 space-y-1.5">
<h1 className="whitespace-pre text-2xl font-bold">
{RESUME_DATA.name}
</h1>
<p className="max-w-md text-pretty font-mono text-sm text-muted-foreground">
{RESUME_DATA.about}
</p>
<p className="max-w-md items-center text-pretty font-mono text-xs text-muted-foreground">
<a
className="inline-flex gap-x-1.5 align-baseline leading-none hover:underline"
href={RESUME_DATA.locationLink}
target="_blank"
>
<GlobeIcon className="size-3" />
{RESUME_DATA.location}
</a>
</p>
<div className="flex gap-x-1 pt-1 font-mono text-sm text-muted-foreground print:hidden">
{RESUME_DATA.contact.email ? (
<Button
className="size-8"
variant="outline"
size="icon"
asChild
>
<a href={`mailto:${RESUME_DATA.contact.email}`}>
<MailIcon className="size-4" />
</a>
</Button>
) : null}
{RESUME_DATA.contact.tel ? (
<Button
className="size-8"
variant="outline"
size="icon"
asChild
>
<a href={`tel:${RESUME_DATA.contact.tel}`}>
<PhoneIcon className="size-4" />
</a>
</Button>
) : null}
{RESUME_DATA.contact.social.map((social) => (
<Button
key={social.name}
className="size-8"
variant="outline"
size="icon"
asChild
>
<a href={social.url}>
<social.icon className="size-4" />
</a>
</Button>
))}
</div>
<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>
</a>
) : null}
{RESUME_DATA.contact.tel ? (
<a href={`tel:${RESUME_DATA.contact.tel}`}>
<span className="underline">{RESUME_DATA.contact.tel}</span>
</a>
) : null}
</div>
</div>

<Avatar className="size-28">
<AvatarImage alt={RESUME_DATA.name} src={RESUME_DATA.avatarUrl} />
<AvatarFallback>{RESUME_DATA.initials}</AvatarFallback>
</Avatar>
</div>
{/* About section */}
<Section>
<h2 className="text-xl font-bold">About</h2>
<p className="text-pretty font-mono text-sm text-muted-foreground">
{RESUME_DATA.summary}
</p>
</Section>
{/* Work Experience */}
<Section>
<h2 className="text-xl font-bold">経験</h2>
{RESUME_DATA.work.map((work) => {
return (
<Card key={work.company}>
<CardHeader>
<div className="flex items-center justify-between gap-x-2 text-base">
<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>

<span className="inline-flex gap-x-1">
{work.badges.map((badge) => (
<Badge
variant="secondary"
className="align-middle text-xs"
key={badge}
>
{badge}
</Badge>
))}
</span>
</h3>
<div className="text-sm tabular-nums text-gray-500">
{work.start} - {work.end}
</div>
</div>

<h4 className="font-mono text-sm leading-none">
{work.title}
</h4>
</CardHeader>
<CardContent className="mt-2 text-xs">
{work.description}
</CardContent>
</Card>
);
})}
</Section>
{/* Education */}
<Section>
<h2 className="text-xl font-bold">学歴</h2>
{RESUME_DATA.education.map((education) => {
return (
<Card key={education.school}>
<CardHeader>
<div className="flex items-center justify-between gap-x-2 text-base">
<h3 className="font-semibold leading-none">
{education.school}
</h3>
<div className="text-sm tabular-nums text-gray-500">
{education.start} - {education.end}
</div>
</div>
</CardHeader>
<CardContent className="mt-2">{education.degree}</CardContent>
</Card>
);
})}
</Section>
{/* Skills */}
<Section>
<h2 className="text-xl font-bold">スキル</h2>
<div className="flex flex-wrap gap-1">
{RESUME_DATA.skills.map((skill) => {
return <Badge key={skill}>{skill}</Badge>;
})}
</div>
</Section>
{/* Projects */}
<Section className="print-force-new-page scroll-mb-16">
<h2 className="text-xl font-bold">プロジェクト</h2>
<div className="-mx-3 grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3 print:grid-cols-3 print:gap-2">
{RESUME_DATA.projects.map((project) => {
return (
<ProjectCard
key={project.title}
title={project.title}
description={project.description}
tags={project.techStack}
link={"link" in project ? project.link.href : undefined}
/>
);
})}
</div>
</Section>
</section>

<CommandMenu
links={[
{
url: RESUME_DATA.personalWebsiteUrl,
title: "Personal Website",
},
...RESUME_DATA.contact.social.map((socialMediaLink) => ({
url: socialMediaLink.url,
title: socialMediaLink.name,
})),
...RESUME_DATA.projects.map((project) => ({
url: project.link.href,
title: project.title,
})),
]}
/>
</main>
);
}
1 change: 1 addition & 0 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { GlobeIcon, MailIcon, PhoneIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { RESUME_DATA } from "@/data/resume-data";
import { ProjectCard } from "@/components/project-card";
import Link from "next/link";

export const metadata: Metadata = {
title: `${RESUME_DATA.name} | ${RESUME_DATA.about}`,
Expand Down

0 comments on commit cceb2e5

Please sign in to comment.