mirror of
https://github.com/r-freeman/portfolio.git
synced 2024-11-11 19:05:41 +00:00
Added GitHub icons to projects page
This commit is contained in:
parent
70cab8ef22
commit
36d274ee8b
12
components/LinkIcon.tsx
Normal file
12
components/LinkIcon.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import {Props} from '@/types'
|
||||
|
||||
export function LinkIcon(props: Props) {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
|
||||
<path
|
||||
d="M15.712 11.823a.75.75 0 1 0 1.06 1.06l-1.06-1.06Zm-4.95 1.768a.75.75 0 0 0 1.06-1.06l-1.06 1.06Zm-2.475-1.414a.75.75 0 1 0-1.06-1.06l1.06 1.06Zm4.95-1.768a.75.75 0 1 0-1.06 1.06l1.06-1.06Zm3.359.53-.884.884 1.06 1.06.885-.883-1.061-1.06Zm-4.95-2.12 1.414-1.415L12 6.344l-1.415 1.413 1.061 1.061Zm0 3.535a2.5 2.5 0 0 1 0-3.536l-1.06-1.06a4 4 0 0 0 0 5.656l1.06-1.06Zm4.95-4.95a2.5 2.5 0 0 1 0 3.535L17.656 12a4 4 0 0 0 0-5.657l-1.06 1.06Zm1.06-1.06a4 4 0 0 0-5.656 0l1.06 1.06a2.5 2.5 0 0 1 3.536 0l1.06-1.06Zm-7.07 7.07.176.177 1.06-1.06-.176-.177-1.06 1.06Zm-3.183-.353.884-.884-1.06-1.06-.884.883 1.06 1.06Zm4.95 2.121-1.414 1.414 1.06 1.06 1.415-1.413-1.06-1.061Zm0-3.536a2.5 2.5 0 0 1 0 3.536l1.06 1.06a4 4 0 0 0 0-5.656l-1.06 1.06Zm-4.95 4.95a2.5 2.5 0 0 1 0-3.535L6.344 12a4 4 0 0 0 0 5.656l1.06-1.06Zm-1.06 1.06a4 4 0 0 0 5.657 0l-1.061-1.06a2.5 2.5 0 0 1-3.535 0l-1.061 1.06Zm7.07-7.07-.176-.177-1.06 1.06.176.178 1.06-1.061Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
16
components/SocialLink.tsx
Normal file
16
components/SocialLink.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import Link from 'next/link'
|
||||
import {ElementType} from 'react'
|
||||
|
||||
type SocialLink = {
|
||||
href: string
|
||||
icon: ElementType
|
||||
}
|
||||
|
||||
export function SocialLink({icon: Icon, href}: SocialLink) {
|
||||
return (
|
||||
<Link className="group -m-1 p-1" href={href}>
|
||||
<Icon
|
||||
className="h-6 w-6 fill-zinc-500 transition group-hover:fill-zinc-600 dark:fill-zinc-400 dark:group-hover:fill-zinc-300"/>
|
||||
</Link>
|
||||
)
|
||||
}
|
@ -1,7 +1,5 @@
|
||||
import Head from 'next/head'
|
||||
import Link from 'next/link'
|
||||
import {GetStaticProps} from 'next'
|
||||
import {ElementType} from 'react'
|
||||
|
||||
import {Card} from '@/components/Card'
|
||||
import {Button} from '@/components/Button'
|
||||
@ -11,6 +9,7 @@ import {
|
||||
LinkedInIcon,
|
||||
TwitterIcon
|
||||
} from '@/components/SocialIcons'
|
||||
import {SocialLink} from '@/components/SocialLink'
|
||||
import {formatDate} from '@/lib/formatDate'
|
||||
import {generateRssFeed} from '@/lib/generateRssFeed'
|
||||
import {generateSitemap} from '@/lib/generateSitemap'
|
||||
@ -30,11 +29,6 @@ type Work = {
|
||||
}
|
||||
}
|
||||
|
||||
type SocialLink = {
|
||||
href: string
|
||||
icon: ElementType
|
||||
}
|
||||
|
||||
function BriefcaseIcon(props: { className: string }) {
|
||||
return (
|
||||
<svg
|
||||
@ -86,14 +80,6 @@ function Article(article: Article) {
|
||||
)
|
||||
}
|
||||
|
||||
function SocialLink({icon: Icon, href}: SocialLink) {
|
||||
return (
|
||||
<Link className="group -m-1 p-1" href={href}>
|
||||
<Icon
|
||||
className="h-6 w-6 fill-zinc-500 transition group-hover:fill-zinc-600 dark:fill-zinc-400 dark:group-hover:fill-zinc-300"/>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
function Resume() {
|
||||
const work: Work[] = [
|
||||
|
@ -2,7 +2,8 @@ import Head from 'next/head'
|
||||
|
||||
import {Card} from '@/components/Card'
|
||||
import {SimpleLayout} from '@/components/SimpleLayout'
|
||||
import {Props} from 'types'
|
||||
import {GitHubIcon} from '@/components/SocialIcons'
|
||||
import {SocialLink} from '@/components/SocialLink'
|
||||
|
||||
type Project = {
|
||||
name: string
|
||||
@ -46,17 +47,6 @@ const projects: Project[] = [
|
||||
}
|
||||
]
|
||||
|
||||
function LinkIcon(props: Props) {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
|
||||
<path
|
||||
d="M15.712 11.823a.75.75 0 1 0 1.06 1.06l-1.06-1.06Zm-4.95 1.768a.75.75 0 0 0 1.06-1.06l-1.06 1.06Zm-2.475-1.414a.75.75 0 1 0-1.06-1.06l1.06 1.06Zm4.95-1.768a.75.75 0 1 0-1.06 1.06l1.06-1.06Zm3.359.53-.884.884 1.06 1.06.885-.883-1.061-1.06Zm-4.95-2.12 1.414-1.415L12 6.344l-1.415 1.413 1.061 1.061Zm0 3.535a2.5 2.5 0 0 1 0-3.536l-1.06-1.06a4 4 0 0 0 0 5.656l1.06-1.06Zm4.95-4.95a2.5 2.5 0 0 1 0 3.535L17.656 12a4 4 0 0 0 0-5.657l-1.06 1.06Zm1.06-1.06a4 4 0 0 0-5.656 0l1.06 1.06a2.5 2.5 0 0 1 3.536 0l1.06-1.06Zm-7.07 7.07.176.177 1.06-1.06-.176-.177-1.06 1.06Zm-3.183-.353.884-.884-1.06-1.06-.884.883 1.06 1.06Zm4.95 2.121-1.414 1.414 1.06 1.06 1.415-1.413-1.06-1.061Zm0-3.536a2.5 2.5 0 0 1 0 3.536l1.06 1.06a4 4 0 0 0 0-5.656l-1.06 1.06Zm-4.95 4.95a2.5 2.5 0 0 1 0-3.535L6.344 12a4 4 0 0 0 0 5.656l1.06-1.06Zm-1.06 1.06a4 4 0 0 0 5.657 0l-1.061-1.06a2.5 2.5 0 0 1-3.535 0l-1.061 1.06Zm7.07-7.07-.176-.177-1.06 1.06.176.178 1.06-1.061Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Projects() {
|
||||
return (
|
||||
<>
|
||||
@ -91,7 +81,11 @@ export default function Projects() {
|
||||
</h2>
|
||||
<Card.Description>{project.description}</Card.Description>
|
||||
<p className="relative z-10 mt-6 flex text-sm font-medium text-zinc-400 transition group-hover:text-indigo-500 dark:text-zinc-200">
|
||||
<LinkIcon className="h-6 w-6 flex-none"/>
|
||||
<SocialLink
|
||||
href={project.link.href}
|
||||
aria-label={`Checkout ${project.name} on GitHub`}
|
||||
icon={GitHubIcon}
|
||||
/>
|
||||
<span className="ml-2">{project.link.label}</span>
|
||||
</p>
|
||||
</Card>
|
||||
|
Loading…
Reference in New Issue
Block a user