feat: add image assets
@@ -8,6 +8,7 @@ import {
|
|||||||
GitHubIcon,
|
GitHubIcon,
|
||||||
InstagramIcon,
|
InstagramIcon,
|
||||||
LinkedInIcon,
|
LinkedInIcon,
|
||||||
|
MediumIcon,
|
||||||
TwitterIcon,
|
TwitterIcon,
|
||||||
} from '@/components/SocialIcons'
|
} from '@/components/SocialIcons'
|
||||||
import portraitImage from '@/images/portrait.jpg'
|
import portraitImage from '@/images/portrait.jpg'
|
||||||
@@ -106,8 +107,8 @@ export default function About() {
|
|||||||
<SocialLink href="#" icon={TwitterIcon}>
|
<SocialLink href="#" icon={TwitterIcon}>
|
||||||
Follow on Twitter
|
Follow on Twitter
|
||||||
</SocialLink>
|
</SocialLink>
|
||||||
<SocialLink href="#" icon={InstagramIcon} className="mt-4">
|
<SocialLink href="#" icon={MediumIcon} className="mt-4">
|
||||||
Follow on Instagram
|
Follow on Medium
|
||||||
</SocialLink>
|
</SocialLink>
|
||||||
<SocialLink href="#" icon={GitHubIcon} className="mt-4">
|
<SocialLink href="#" icon={GitHubIcon} className="mt-4">
|
||||||
Follow on GitHub
|
Follow on GitHub
|
||||||
|
|||||||
@@ -9,12 +9,13 @@ import {
|
|||||||
GitHubIcon,
|
GitHubIcon,
|
||||||
InstagramIcon,
|
InstagramIcon,
|
||||||
LinkedInIcon,
|
LinkedInIcon,
|
||||||
|
MediumIcon,
|
||||||
TwitterIcon,
|
TwitterIcon,
|
||||||
} from '@/components/SocialIcons'
|
} from '@/components/SocialIcons'
|
||||||
import logoAirbnb from '@/images/logos/airbnb.svg'
|
import logoAirbnb from '@/images/logos/spacebolt.svg'
|
||||||
import logoFacebook from '@/images/logos/facebook.svg'
|
import logoFacebook from '@/images/logos/voluntree.svg'
|
||||||
import logoPlanetaria from '@/images/logos/planetaria.svg'
|
import logoPlanetaria from '@/images/logos/sonr.svg'
|
||||||
import logoStarbucks from '@/images/logos/starbucks.svg'
|
import logoStarbucks from '@/images/logos/superball.svg'
|
||||||
import image1 from '@/images/photos/image-1.jpg'
|
import image1 from '@/images/photos/image-1.jpg'
|
||||||
import image2 from '@/images/photos/image-2.jpg'
|
import image2 from '@/images/photos/image-2.jpg'
|
||||||
import image3 from '@/images/photos/image-3.jpg'
|
import image3 from '@/images/photos/image-3.jpg'
|
||||||
@@ -190,7 +191,7 @@ function Resume() {
|
|||||||
company: 'Sonr',
|
company: 'Sonr',
|
||||||
title: 'Founder',
|
title: 'Founder',
|
||||||
logo: logoPlanetaria,
|
logo: logoPlanetaria,
|
||||||
start: '2019',
|
start: '2020',
|
||||||
end: {
|
end: {
|
||||||
label: 'Present',
|
label: 'Present',
|
||||||
dateTime: new Date().getFullYear().toString(),
|
dateTime: new Date().getFullYear().toString(),
|
||||||
@@ -256,7 +257,7 @@ function Photos() {
|
|||||||
src={image}
|
src={image}
|
||||||
alt=""
|
alt=""
|
||||||
sizes="(min-width: 640px) 18rem, 11rem"
|
sizes="(min-width: 640px) 18rem, 11rem"
|
||||||
className="absolute inset-0 h-full w-full object-cover"
|
className="absolute inset-0 h-full w-full object-cover rounded-full"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
@@ -288,9 +289,9 @@ export default async function Home() {
|
|||||||
icon={TwitterIcon}
|
icon={TwitterIcon}
|
||||||
/>
|
/>
|
||||||
<SocialLink
|
<SocialLink
|
||||||
href="https://instagram.com"
|
href="https://medium.com/@prnk28"
|
||||||
aria-label="Follow on Instagram"
|
aria-label="Follow on Medium"
|
||||||
icon={InstagramIcon}
|
icon={MediumIcon}
|
||||||
/>
|
/>
|
||||||
<SocialLink
|
<SocialLink
|
||||||
href="https://github.com/prnk28"
|
href="https://github.com/prnk28"
|
||||||
|
|||||||
@@ -3,61 +3,66 @@ import Image from 'next/image'
|
|||||||
|
|
||||||
import { Card } from '@/components/Card'
|
import { Card } from '@/components/Card'
|
||||||
import { SimpleLayout } from '@/components/SimpleLayout'
|
import { SimpleLayout } from '@/components/SimpleLayout'
|
||||||
import logoAnimaginary from '@/images/logos/animaginary.svg'
|
import logoSuperball from '@/images/logos/superball.svg'
|
||||||
import logoCosmos from '@/images/logos/cosmos.svg'
|
import logoVoluntree from '@/images/logos/voluntree.svg'
|
||||||
import logoHelioStream from '@/images/logos/helio-stream.svg'
|
import logoSpacebolt from '@/images/logos/spacebolt.svg'
|
||||||
import logoOpenShuttle from '@/images/logos/open-shuttle.svg'
|
import logoYue from '@/images/logos/yue.svg'
|
||||||
import logoPlanetaria from '@/images/logos/planetaria.svg'
|
import logoSonr from '@/images/logos/sonr.svg'
|
||||||
|
|
||||||
const projects = [
|
const projects = [
|
||||||
{
|
{
|
||||||
name: 'Sonr',
|
name: 'Sonr',
|
||||||
|
created: '2020 - Present',
|
||||||
description:
|
description:
|
||||||
'Creating technology to empower civilians to explore space on their own terms.',
|
'Creating technology to empower civilians to explore space on their own terms.',
|
||||||
link: { href: 'http://planetaria.tech', label: 'planetaria.tech' },
|
link: { href: 'http://planetaria.tech', label: 'planetaria.tech' },
|
||||||
logo: logoPlanetaria,
|
logo: logoSonr,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Yue',
|
name: 'Yue',
|
||||||
|
created: '2018 - 2019',
|
||||||
description:
|
description:
|
||||||
'High performance web animation library, hand-written in optimized WASM.',
|
'High performance web animation library, hand-written in optimized WASM.',
|
||||||
link: { href: '#', label: 'github.com' },
|
link: { href: '#', label: 'github.com' },
|
||||||
logo: logoAnimaginary,
|
logo: logoYue,
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'ML Livestock Detection',
|
|
||||||
description:
|
|
||||||
'Real-time video streaming library, optimized for interstellar transmission.',
|
|
||||||
link: { href: '#', label: 'github.com' },
|
|
||||||
logo: logoHelioStream,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'AR Whiteboard',
|
|
||||||
description:
|
|
||||||
'The operating system that powers our Sonr space shuttles.',
|
|
||||||
link: { href: '#', label: 'github.com' },
|
|
||||||
logo: logoCosmos,
|
|
||||||
},
|
},
|
||||||
|
// {
|
||||||
|
// name: 'ML Livestock Detection',
|
||||||
|
// description:
|
||||||
|
// 'Real-time video streaming library, optimized for interstellar transmission.',
|
||||||
|
// link: { href: '#', label: 'github.com' },
|
||||||
|
// logo: logoHelioStream,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: 'AR Whiteboard',
|
||||||
|
// description:
|
||||||
|
// 'The operating system that powers our Sonr space shuttles.',
|
||||||
|
// link: { href: '#', label: 'github.com' },
|
||||||
|
// logo: logoCosmos,
|
||||||
|
// },
|
||||||
{
|
{
|
||||||
name: 'Spacebolt',
|
name: 'Spacebolt',
|
||||||
|
created: '2017 - 2018',
|
||||||
description:
|
description:
|
||||||
'The schematics for the first rocket I designed that successfully made it to orbit.',
|
'The schematics for the first rocket I designed that successfully made it to orbit.',
|
||||||
link: { href: '#', label: 'github.com' },
|
link: { href: '#', label: 'github.com' },
|
||||||
logo: logoOpenShuttle,
|
logo: logoSpacebolt,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'VolunTree',
|
name: 'VolunTree',
|
||||||
|
created: '2015 - 2016',
|
||||||
description:
|
description:
|
||||||
'The schematics for the first rocket I designed that successfully made it to orbit.',
|
'The schematics for the first rocket I designed that successfully made it to orbit.',
|
||||||
link: { href: '#', label: 'github.com' },
|
link: { href: '#', label: 'github.com' },
|
||||||
logo: logoOpenShuttle,
|
logo: logoVoluntree,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Superball',
|
name: 'Superball',
|
||||||
|
created: '2010 - 2011',
|
||||||
description:
|
description:
|
||||||
'The schematics for the first rocket I designed that successfully made it to orbit.',
|
'The schematics for the first rocket I designed that successfully made it to orbit.',
|
||||||
link: { href: '#', label: 'github.com' },
|
link: { href: '#', label: 'github.com' },
|
||||||
logo: logoOpenShuttle,
|
logo: logoSuperball,
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
@@ -6,6 +6,14 @@ export function TwitterIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function MediumIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||||
|
return (
|
||||||
|
<svg viewBox="0 0 64 64" aria-hidden="true" {...props}>
|
||||||
|
<path d="M 18.998047 15 A 17.002 17.002 0 0 0 18.998047 49.003906 A 17.002 17.002 0 0 0 18.998047 15 z M 45.498047 16 A 8.502 16.002 0 0 0 45.498047 48.003906 A 8.502 16.002 0 0 0 45.498047 16 z M 58.5 17 A 3.5 15.002 0 1 0 58.5 47.003906 A 3.5 15.002 0 1 0 58.5 17 z"></path>
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
export function InstagramIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
export function InstagramIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||||
return (
|
return (
|
||||||
<svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
|
<svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
|
||||||
|
|||||||
@@ -0,0 +1,45 @@
|
|||||||
|
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="512" height="512" fill="#17171B"/>
|
||||||
|
<g filter="url(#filter0_d_2_581)">
|
||||||
|
<g filter="url(#filter1_d_2_581)">
|
||||||
|
<path d="M245.149 203.293L203.339 245.099C197.335 251.104 197.335 260.839 203.339 266.843L245.149 308.649C251.153 314.654 260.889 314.654 266.894 308.649L308.703 266.843C314.708 260.839 314.708 251.104 308.703 245.099L266.894 203.293C260.889 197.289 251.153 197.289 245.149 203.293Z" fill="url(#paint0_linear_2_581)" shape-rendering="crispEdges"/>
|
||||||
|
<path d="M256.012 418.999C245.279 419.037 234.644 416.944 224.727 412.839C214.809 408.735 205.805 402.703 198.238 395.091L189.35 386.204L227.258 348.298L236.147 357.186C241.401 362.438 248.527 365.388 255.956 365.388C263.386 365.388 270.512 362.438 275.766 357.186L357.161 275.797C362.401 270.541 365.344 263.421 365.344 256C365.344 248.578 362.401 241.458 357.161 236.202L316.519 195.608L354.428 157.702L395.136 198.408C410.418 213.724 419 234.476 419 256.111C419 277.746 410.418 298.498 395.136 313.814L313.719 395.202C306.152 402.788 297.155 408.797 287.25 412.881C277.344 416.966 266.727 419.045 256.012 418.999Z" fill="url(#paint1_linear_2_581)" shape-rendering="crispEdges"/>
|
||||||
|
<path d="M157.529 354.408L116.91 313.703C109.33 306.126 103.317 297.131 99.2141 287.23C95.1116 277.329 93 266.717 93 256C93 245.283 95.1116 234.671 99.2141 224.77C103.317 214.869 109.33 205.873 116.91 198.297L198.304 116.908C205.882 109.328 214.878 103.316 224.78 99.2136C234.681 95.1114 245.294 93 256.012 93C266.73 93 277.342 95.1114 287.244 99.2136C297.146 103.316 306.142 109.328 313.719 116.908L322.608 125.796L284.699 163.701L275.811 154.814C270.556 149.562 263.43 146.611 256.001 146.611C248.571 146.611 241.445 149.562 236.191 154.814L154.796 236.202C152.196 238.802 150.133 241.889 148.726 245.285C147.319 248.682 146.595 252.323 146.595 256C146.595 259.676 147.319 263.317 148.726 266.714C150.133 270.111 152.196 273.197 154.796 275.797L195.505 316.502L157.529 354.408Z" fill="url(#paint2_linear_2_581)" shape-rendering="crispEdges"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<filter id="filter0_d_2_581" x="85" y="89" width="342" height="342" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||||
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||||
|
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect1_dropShadow_2_581"/>
|
||||||
|
<feOffset dy="4"/>
|
||||||
|
<feGaussianBlur stdDeviation="6"/>
|
||||||
|
<feComposite in2="hardAlpha" operator="out"/>
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0.086 0 0 0 0 0.1316 0 0 0 0 0.2 0 0 0 0.12 0"/>
|
||||||
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2_581"/>
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2_581" result="shape"/>
|
||||||
|
</filter>
|
||||||
|
<filter id="filter1_d_2_581" x="81" y="85" width="350" height="350" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||||
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||||
|
<feOffset dy="4"/>
|
||||||
|
<feGaussianBlur stdDeviation="6"/>
|
||||||
|
<feComposite in2="hardAlpha" operator="out"/>
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0.086 0 0 0 0 0.1316 0 0 0 0 0.2 0 0 0 0.2 0"/>
|
||||||
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2_581"/>
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2_581" result="shape"/>
|
||||||
|
</filter>
|
||||||
|
<linearGradient id="paint0_linear_2_581" x1="321" y1="127" x2="191" y2="385.5" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#2BC0F6"/>
|
||||||
|
<stop offset="1" stop-color="#19BFFB" stop-opacity="0.82"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint1_linear_2_581" x1="321" y1="127" x2="191" y2="385.5" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#2BC0F6"/>
|
||||||
|
<stop offset="1" stop-color="#19BFFB" stop-opacity="0.82"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint2_linear_2_581" x1="321" y1="127" x2="191" y2="385.5" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#2BC0F6"/>
|
||||||
|
<stop offset="1" stop-color="#19BFFB" stop-opacity="0.82"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 2.2 MiB |
|
After Width: | Height: | Size: 2.1 MiB |
|
After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 286 KiB After Width: | Height: | Size: 279 KiB |