mirror of
https://github.com/r-freeman/portfolio.git
synced 2024-11-11 18:45: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 Head from 'next/head'
|
||||||
import Link from 'next/link'
|
|
||||||
import {GetStaticProps} from 'next'
|
import {GetStaticProps} from 'next'
|
||||||
import {ElementType} from 'react'
|
|
||||||
|
|
||||||
import {Card} from '@/components/Card'
|
import {Card} from '@/components/Card'
|
||||||
import {Button} from '@/components/Button'
|
import {Button} from '@/components/Button'
|
||||||
@ -11,6 +9,7 @@ import {
|
|||||||
LinkedInIcon,
|
LinkedInIcon,
|
||||||
TwitterIcon
|
TwitterIcon
|
||||||
} from '@/components/SocialIcons'
|
} from '@/components/SocialIcons'
|
||||||
|
import {SocialLink} from '@/components/SocialLink'
|
||||||
import {formatDate} from '@/lib/formatDate'
|
import {formatDate} from '@/lib/formatDate'
|
||||||
import {generateRssFeed} from '@/lib/generateRssFeed'
|
import {generateRssFeed} from '@/lib/generateRssFeed'
|
||||||
import {generateSitemap} from '@/lib/generateSitemap'
|
import {generateSitemap} from '@/lib/generateSitemap'
|
||||||
@ -30,11 +29,6 @@ type Work = {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
type SocialLink = {
|
|
||||||
href: string
|
|
||||||
icon: ElementType
|
|
||||||
}
|
|
||||||
|
|
||||||
function BriefcaseIcon(props: { className: string }) {
|
function BriefcaseIcon(props: { className: string }) {
|
||||||
return (
|
return (
|
||||||
<svg
|
<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() {
|
function Resume() {
|
||||||
const work: Work[] = [
|
const work: Work[] = [
|
||||||
|
@ -2,7 +2,8 @@ import Head from 'next/head'
|
|||||||
|
|
||||||
import {Card} from '@/components/Card'
|
import {Card} from '@/components/Card'
|
||||||
import {SimpleLayout} from '@/components/SimpleLayout'
|
import {SimpleLayout} from '@/components/SimpleLayout'
|
||||||
import {Props} from 'types'
|
import {GitHubIcon} from '@/components/SocialIcons'
|
||||||
|
import {SocialLink} from '@/components/SocialLink'
|
||||||
|
|
||||||
type Project = {
|
type Project = {
|
||||||
name: string
|
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() {
|
export default function Projects() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -91,7 +81,11 @@ export default function Projects() {
|
|||||||
</h2>
|
</h2>
|
||||||
<Card.Description>{project.description}</Card.Description>
|
<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">
|
<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>
|
<span className="ml-2">{project.link.label}</span>
|
||||||
</p>
|
</p>
|
||||||
</Card>
|
</Card>
|
||||||
|
Loading…
Reference in New Issue
Block a user