r-freeman/portfolio
1
0
Fork 0
mirror of https://github.com/r-freeman/portfolio.git synced 2024-09-22 17:36:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added GitHub icons to projects page

Browse Source
This commit is contained in:
r-freeman 2023-01-21 22:59:27 +00:00
parent 70cab8ef22
commit 36d274ee8b
4 changed files with 36 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/LinkIcon.tsx Normal file
View 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
View 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>
)
}

16
pages/index.tsx
View File

@ -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[] = [

20
pages/projects.tsx
View File

@ -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>