Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

more styling on links #40

Merged
merged 1 commit into from
Jun 20, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16,724 changes: 9,650 additions & 7,074 deletions pnpm-lock.yaml

Large diffs are not rendered by default.

110 changes: 8 additions & 102 deletions src/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,12 @@
import { Inter as FontSans } from "next/font/google";
import Link from "next/link";
import Script from "next/script";
import RootProviders from "./RootProviders.client";
import CustomCursor from "@/components/CustomCursor";
import DarkModeToggle from "@/components/DarkModeToggle";
import TraworldHover from "@/components/TraworldHover";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/Avatar";
import { buttonVariants } from "@/components/ui/Button";
import {
DEVDOMAIN,
devEnvironment,
DOMAIN,
githubProfile,
linkedInProfile,
} from "@/lib/constants";
import SiteFooter from "@/components/SiteFooter";
import SiteHeader from "@/components/SiteHeader";
import SkipToContent from "@/components/SkipToContent";
import { DEVDOMAIN, devEnvironment, DOMAIN } from "@/lib/constants";
import "@/styles/globals.css";
import { AiFillGithub, AiFillLinkedin } from "react-icons/ai";
import { twMerge } from "tailwind-merge";

const title = "Kyle Wong - Digital Marketer, Web Developer.";
Expand Down Expand Up @@ -121,101 +112,16 @@ export default function RootLayout({
<RootProviders>
<CustomCursor />
<div className="mx-auto min-h-screen max-w-screen-xl px-6 py-12 font-sans md:px-12 md:py-20 lg:px-24 lg:py-0">
<Link
href="/#content"
className="absolute left-0 top-0 block -translate-x-full rounded bg-gradient-to-br from-teal-400 via-blue-500 to-purple-600 px-4 py-3 text-sm font-bold uppercase tracking-widest text-white focus-visible:translate-x-0">
Skip to Content
</Link>
<SkipToContent />
<div className="lg:flex lg:justify-between lg:gap-4">
<header className="lg:sticky lg:top-0 lg:flex lg:max-h-screen lg:w-1/2 lg:flex-col lg:justify-between lg:py-24">
<div>
<Avatar className="mb-8 h-20 w-20">
<AvatarImage src="https://github.com/y3owk1n.png" />
<AvatarFallback>KW</AvatarFallback>
</Avatar>

<h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl">
Kyle Wong
</h1>
<h2 className="mt-3 text-lg font-medium tracking-tight text-foreground sm:text-xl">
Head Of Marketing at <TraworldHover />
</h2>
<p className="mt-4 max-w-xs leading-normal">
I build brands, strategies and
experiences in the digital world.
</p>
</div>

<nav
className="hidden lg:block"
aria-label="In-page jump links">
<ul className="mt-16 grid gap-4">
<li>
<Link href="/#about">About</Link>
</li>
<li>
<Link href="/#experiences">
Experiences
</Link>
</li>
<li>
<Link href="/#projects">
Projects
</Link>
</li>
<li>
<Link href="/#posts">Posts</Link>
</li>
</ul>
</nav>

<ul className="mt-10 flex items-center gap-2">
<li className="text-xs">
<a
href={linkedInProfile}
target="_blank"
rel="noreferer"
className={twMerge(
"block hover:text-foreground",
buttonVariants({
variant: "ghost",
size: "sm",
})
)}>
<span className="sr-only">
LinkedIn
</span>
<AiFillLinkedin className="h-6 w-6" />
</a>
</li>
<li className="text-xs">
<a
href={githubProfile}
target="_blank"
rel="noreferer"
className={twMerge(
"block hover:text-foreground",
buttonVariants({
variant: "ghost",
size: "sm",
})
)}>
<span className="sr-only">
Github
</span>
<AiFillGithub className="h-6 w-6" />
</a>
</li>
<li className="text-xs">
<DarkModeToggle />
</li>
</ul>
</header>
<SiteHeader />

<main
id="content"
className="space-y-32 pt-24 lg:w-1/2 lg:py-24">
{children}

<SiteFooter />
</main>
</div>
</div>
Expand Down
15 changes: 8 additions & 7 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,8 @@ const Page = () => {
key={experience.position}
className="mb-12 transition-all duration-100 lg:hover:!opacity-100 lg:group-hover/container:opacity-50 ">
<a
target="_blank"
rel="noreferrer noopener"
href={experience.link}
className="group/list relative grid rounded sm:grid-cols-12 md:gap-4 ">
<span className="absolute -inset-x-4 -inset-y-2.5 hidden rounded-md transition-all md:-inset-x-6 md:-inset-y-4 lg:block lg:group-hover/list:bg-foreground/5 lg:group-hover/list:backdrop-blur-md"></span>
Expand All @@ -93,7 +95,7 @@ const Page = () => {
{experience.tags.map((tag) => (
<Badge
key={tag}
variant="outline">
variant="secondary">
{tag}
</Badge>
))}
Expand All @@ -108,7 +110,7 @@ const Page = () => {
className="flex items-center gap-2"
href={linkedInProfile}
target="_blank"
rel="noreferrer">
rel="noreferrer noopener">
View More at LinkedIn
<TbExternalLink className="h-4 w-4 transition-all duration-100 group-hover:translate-x-4" />
</LinkTag>
Expand All @@ -125,6 +127,8 @@ const Page = () => {
key={project.name}
className="mb-12 transition-all duration-100 lg:hover:!opacity-100 lg:group-hover/container:opacity-50 ">
<a
target="_blank"
rel="noreferrer noopener"
href={project.link}
className="group/list relative grid rounded sm:grid-cols-12 md:gap-4 ">
<span className="absolute -inset-x-4 -inset-y-2.5 hidden rounded-md transition-all md:-inset-x-6 md:-inset-y-4 lg:block lg:group-hover/list:bg-foreground/5 lg:group-hover/list:backdrop-blur-md"></span>
Expand Down Expand Up @@ -182,12 +186,9 @@ const Page = () => {
</ol>

<Link
className="group flex items-center gap-2 font-medium text-foreground"
className="group font-medium text-foreground transition-all duration-300 ease-in-out "
href="/posts">
<span
className={twMerge(
"transition-all group-hover:underline group-hover:underline-offset-4 "
)}>
<span className="bg-gradient-to-r from-foreground to-foreground bg-[length:0%_2px] bg-left-bottom bg-no-repeat pb-1 transition-all duration-500 ease-out group-hover:bg-[length:100%_2px]">
More Posts
</span>
</Link>
Expand Down
44 changes: 44 additions & 0 deletions src/components/SiteFooter.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import React from "react";
import { githubProfile, githubRepo } from "@/lib/constants";

const SiteFooter = () => {
return (
<footer>
<p className="text-center text-sm leading-loose md:text-left">
Built by{" "}
<a
href={githubProfile}
target="_blank"
rel="noreferrer noopener"
className="group font-medium text-foreground transition-all duration-300 ease-in-out ">
<span className="bg-gradient-to-r from-foreground to-foreground bg-[length:0%_2px] bg-left-bottom bg-no-repeat pb-1 transition-all duration-500 ease-out group-hover:bg-[length:100%_2px]">
Kyle
</span>
</a>
. Hosted on{" "}
<a
href="https://vercel.com"
target="_blank"
rel="noreferrer noopener"
className="group font-medium text-foreground transition-all duration-300 ease-in-out ">
<span className="bg-gradient-to-r from-foreground to-foreground bg-[length:0%_2px] bg-left-bottom bg-no-repeat pb-1 transition-all duration-500 ease-out group-hover:bg-[length:100%_2px]">
Vercel
</span>
</a>
. The source code is available on{" "}
<a
href={githubRepo}
target="_blank"
rel="noreferrer noopener"
className="group font-medium text-foreground transition-all duration-300 ease-in-out ">
<span className="bg-gradient-to-r from-foreground to-foreground bg-[length:0%_2px] bg-left-bottom bg-no-repeat pb-1 transition-all duration-500 ease-out group-hover:bg-[length:100%_2px]">
GitHub
</span>
</a>
.
</p>
</footer>
);
};

export default SiteFooter;
116 changes: 116 additions & 0 deletions src/components/SiteHeader.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
import React from "react";
import Link from "next/link";
import DarkModeToggle from "./DarkModeToggle";
import TraworldHover from "./TraworldHover";
import { Avatar, AvatarFallback, AvatarImage } from "./ui/Avatar";
import { buttonVariants } from "./ui/Button";
import { githubProfile, linkedInProfile } from "@/lib/constants";
import { AiFillGithub, AiFillLinkedin } from "react-icons/ai";
import { twMerge } from "tailwind-merge";

const SiteHeader = () => {
return (
<header className="lg:sticky lg:top-0 lg:flex lg:max-h-screen lg:w-1/2 lg:flex-col lg:justify-between lg:py-24">
<div>
<Avatar className="mb-8 h-20 w-20">
<AvatarImage src="https://github.com/y3owk1n.png" />
<AvatarFallback>KW</AvatarFallback>
</Avatar>

<h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl">
Kyle Wong
</h1>
<h2 className="mt-3 text-lg font-medium tracking-tight text-foreground sm:text-xl">
Head Of Marketing at <TraworldHover />
</h2>
<p className="mt-4 max-w-xs leading-normal">
I build brands, strategies and experiences in the digital
world.
</p>
</div>

<nav
className="hidden lg:block"
aria-label="In-page jump links">
<ul className="mt-16 grid gap-4">
<li>
<Link
className="group font-medium text-foreground transition-all duration-300 ease-in-out "
href="/#about">
<span className="bg-gradient-to-r from-foreground to-foreground bg-[length:0%_2px] bg-left-bottom bg-no-repeat pb-1 transition-all duration-500 ease-out group-hover:bg-[length:100%_2px]">
About
</span>
</Link>
</li>
<li>
<Link
className="group font-medium text-foreground transition-all duration-300 ease-in-out "
href="/#experiences">
<span className="bg-gradient-to-r from-foreground to-foreground bg-[length:0%_2px] bg-left-bottom bg-no-repeat pb-1 transition-all duration-500 ease-out group-hover:bg-[length:100%_2px]">
Experiences
</span>
</Link>
</li>
<li>
<Link
className="group font-medium text-foreground transition-all duration-300 ease-in-out "
href="/#projects">
<span className="bg-gradient-to-r from-foreground to-foreground bg-[length:0%_2px] bg-left-bottom bg-no-repeat pb-1 transition-all duration-500 ease-out group-hover:bg-[length:100%_2px]">
Projects
</span>
</Link>
</li>
<li>
<Link
className="group font-medium text-foreground transition-all duration-300 ease-in-out "
href="/#posts">
<span className="bg-gradient-to-r from-foreground to-foreground bg-[length:0%_2px] bg-left-bottom bg-no-repeat pb-1 transition-all duration-500 ease-out group-hover:bg-[length:100%_2px]">
Posts
</span>
</Link>
</li>
</ul>
</nav>

<ul className="mt-10 flex items-center gap-2">
<li className="text-xs">
<a
href={linkedInProfile}
target="_blank"
rel="noreferrer noopener"
className={twMerge(
"block hover:text-foreground",
buttonVariants({
variant: "ghost",
size: "sm",
})
)}>
<span className="sr-only">LinkedIn</span>
<AiFillLinkedin className="h-6 w-6" />
</a>
</li>
<li className="text-xs">
<a
href={githubProfile}
target="_blank"
rel="noreferrer noopener"
className={twMerge(
"block hover:text-foreground",
buttonVariants({
variant: "ghost",
size: "sm",
})
)}>
<span className="sr-only">Github</span>
<AiFillGithub className="h-6 w-6" />
</a>
</li>
<li className="text-xs">
<DarkModeToggle />
</li>
</ul>
</header>
);
};

export default SiteHeader;
14 changes: 14 additions & 0 deletions src/components/SkipToContent.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from "react";
import Link from "next/link";

const SkipToContent = () => {
return (
<Link
href="/#content"
className="absolute left-0 top-0 block -translate-x-full rounded bg-gradient-to-br from-teal-400 via-blue-500 to-purple-600 px-4 py-3 text-sm font-bold uppercase tracking-widest text-white focus-visible:translate-x-0">
Skip to Content
</Link>
);
};

export default SkipToContent;
2 changes: 1 addition & 1 deletion src/components/TraworldHover.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const TraworldHover = () => {
<LinkTag
href="https://www.traworld.com"
target="_blank"
rel="noreferrer">
rel="noreferrer noopener">
Traworld
</LinkTag>
</HoverCardTrigger>
Expand Down
6 changes: 4 additions & 2 deletions src/components/ui/typography/LinkTag.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,12 @@ const LinkTag = ({
return (
<a
{...props}
className={twMerge("group")}>
className={twMerge(
"group font-medium text-foreground transition-all duration-300 ease-in-out"
)}>
<span
className={twMerge(
"font-medium text-foreground group-hover:underline group-hover:underline-offset-4",
"w-fit bg-gradient-to-r from-foreground to-foreground bg-[length:0%_2px] bg-left-bottom bg-no-repeat pb-1 transition-all duration-500 ease-out group-hover:bg-[length:100%_2px]",
className
)}>
{children}
Expand Down
1 change: 1 addition & 0 deletions src/lib/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,4 @@ export const devEnvironment = process.env.NODE_ENV === "development";
export const githubProfile = "https://www.github.com/y3owk1n";
export const linkedInProfile =
"https://www.linkedin.com/in/kyle-wong-958a58115/";
export const githubRepo = "https://github.com/y3owk1n/blog";