Skip to content

Commit

Permalink
feat: revamp footer layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@enjidev
enjidev committed Jan 10, 2023
1 parent 5de89ab commit e95c2ec
Show file tree
Hide file tree
Showing 3 changed files with 224 additions and 28 deletions.
5 changes: 5 additions & 0 deletions apps/enji.dev/next.config.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@ const nextConfig = {
destination: '/work/skills-and-tools',
permanent: false,
},
{
source: '/docs',
destination: '/docs/tailwindcss-accent',
permanent: false,
},
],
pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
reactStrictMode: true,
Expand Down
232 changes: 204 additions & 28 deletions apps/enji.dev/src/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
import clsx from 'clsx';
import { m } from 'framer-motion';
import Link from 'next/link';

import {
ExternalLink,
FigmaIcon,
GitHubIcon,
TwitterIcon,
} from '@/components/Icons';

import useLastUpdate from '@/hooks/useLastUpdate';

Expand Down Expand Up @@ -36,43 +44,211 @@ function LastUpdate() {
);
}

interface FooterLinkProps {
title: string;
href: string;
label?: 'new' | 'soon';
isInternal?: boolean;
}

function FooterLink({
title,
href,
label = undefined,
isInternal = true,
}: FooterLinkProps) {
if (label === 'soon') {
return (
<span className={clsx('footer-link footer-link--soon')}>
{title}
<span className={clsx('footer-link__label')}>{label}</span>
</span>
);
}

if (isInternal) {
return (
<Link href={href} className={clsx('footer-link')}>
{title}
{label && <span className={clsx('footer-link__label')}>{label}</span>}
</Link>
);
}

return (
<a
href={href}
target="_blank"
rel="noreferrer"
className={clsx('footer-link')}
>
{title}
<ExternalLink className={clsx('h-3.5 w-3.5')} />
{label && <span className={clsx('footer-link__label')}>{label}</span>}
</a>
);
}

interface FooterGroupProps {
title: string;
links: Array<FooterLinkProps>;
}

function FooterGroup({ title, links }: FooterGroupProps) {
return (
<div className={clsx('flex-1')}>
<div
className={clsx(
'mb-2 px-2 text-[13px] text-slate-600',
'dark:text-slate-400'
)}
>
{title}
</div>
<ul className={clsx('flex flex-col')}>
{links.map(({ title: linkTitle, href, label, isInternal }) => (
<li key={href}>
<FooterLink
title={linkTitle}
href={href}
label={label}
isInternal={isInternal}
/>
</li>
))}
</ul>
</div>
);
}

function FooterDescription() {
return (
<div className={clsx('max-w-[348px]')}>
<div
className={clsx(
'mb-3 text-[13px] text-slate-600',
'dark:text-slate-400'
)}
>
About Me
</div>
<p className={clsx('mb-4 font-normal')}>
I&apos;m Enji, a <strong>front-end developer</strong> who loves
intuitive, clean and modern UI design.
</p>
<ul className={clsx('-ml-2 flex gap-1')}>
<li>
<a
href="https://twitter.com/enjidev"
target="_blank"
rel="noreferrer"
className={clsx('flex h-9 w-9 items-center justify-center')}
aria-label="My Twitter profile"
title="My Twitter profile"
>
<TwitterIcon className={clsx('h-5 w-5')} />
</a>
</li>
<li>
<a
href="https://github.com/enjidev"
target="_blank"
rel="noreferrer"
className={clsx('flex h-9 w-9 items-center justify-center')}
aria-label="My GitHub profile"
title="My GitHub profile"
>
<GitHubIcon className={clsx('h-5 w-5')} />
</a>
</li>
<li>
<a
href="https://figma.com/@enjidev"
target="_blank"
rel="noreferrer"
className={clsx('flex h-9 w-9 items-center justify-center')}
aria-label="My Figma profile"
title="My Figma profile"
>
<FigmaIcon className={clsx('h-5 w-5')} />
</a>
</li>
</ul>
</div>
);
}

function Footer() {
return (
<footer
className={clsx(
'background-grid background-grid--fade-in border-divider-light mt-24 pt-8 text-sm text-slate-900',
'background-grid background-grid--fade-in border-divider-light mt-24 pt-16 text-sm text-slate-900',
'dark:border-divider-dark dark:text-slate-200'
)}
>
<div className={clsx('content-wrapper')}>
<div className={clsx('py-10 font-semibold')}>
<ul
className={clsx(
'flex flex-wrap justify-center gap-x-2 gap-y-1',
'lg:gap-x-4'
)}
>
<li>
<a
href="https://www.figma.com/community/file/1176392613303840973"
target="_blank"
rel="noreferrer"
className={clsx('block px-2 py-1')}
>
Design Concept
</a>
</li>
<li>
<a
href="https://github.com/enjidev/enji.dev"
target="_blank"
rel="noreferrer"
className={clsx('block px-2 py-1')}
>
Source Code
</a>
</li>
</ul>
<div className={clsx('flex flex-col-reverse gap-16', 'lg:flex-row')}>
<div className={clsx('flex-1')}>
<FooterDescription />
</div>
<div
className={clsx(
'-mx-2 flex flex-1 flex-col gap-8',
'sm:flex-row sm:gap-16 lg:mx-0'
)}
>
<div className={clsx('flex', 'sm:gap-16')}>
<FooterGroup
title="Work"
links={[
{ title: 'Contact', href: '/work/contact' },
{ title: 'Experience', href: '/work/experience' },
{
title: 'Services',
href: '/work/services',
label: 'soon',
},
{
title: 'Skills and Tools',
href: '/work/skills-and-tools',
},
{ title: 'Studio', href: '/work/studio' },
]}
/>
<FooterGroup
title="Learn"
links={[
{
title: 'Docs',
href: '/docs',
},
{
title: 'Personal Blog',
href: '/blog',
},
]}
/>
</div>
<div className={clsx('flex', 'sm:gap-16')}>
<FooterGroup
title="This Site"
links={[
{
title: 'Design Concept',
href: 'https://www.figma.com/community/file/1176392613303840973',
isInternal: false,
},
{
title: 'Source Code',
href: 'https://github.com/enjidev/enji.dev',
isInternal: false,
},
]}
/>
</div>
</div>
</div>
</div>
<div
className={clsx(
Expand Down
15 changes: 15 additions & 0 deletions apps/enji.dev/src/styles/components.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,4 +179,19 @@
@apply bg-accent-600/20 absolute bottom-1 left-0 right-0 z-[-1] h-2 origin-bottom scale-y-[.4] transition-transform content-[''];
}
}

.footer-link {
@apply flex h-8 items-center gap-2 whitespace-nowrap px-2 py-1 text-sm text-slate-900;
@apply dark:text-slate-200;

&__label {
@apply border-divider-light rounded-full border px-2 py-0 text-[10px] uppercase text-slate-900;
@apply dark:text-slate-200;
}

&--soon {
@apply cursor-not-allowed text-slate-600;
@apply dark:text-slate-400;
}
}
}

1 comment on commit e95c2ec

@vercel
Copy link

@vercel vercel bot commented on e95c2ec Jan 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

enjidev – ./

enjidev-enjidev.vercel.app
www.enji.dev
enjidev-git-main-enjidev.vercel.app
enjidev.vercel.app
enji.dev

Please sign in to comment.