m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-12-22 09:13:19 +01:00
Code Releases Activity

image priority loading

Browse Source
This commit is contained in:
Matthias Kretschmann 2022-11-16 21:28:33 +00:00
parent 9a32ff4c63
commit e60e54ff13
Signed by: m
GPG Key ID: 606EEEF3C479A91F
5 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Project/index.tsx
View File

@ -48,6 +48,8 @@ export default function Project({ project }: { project: ProjectType }) {
alt={title}
key={i}
sizes="100vw"
// give priority to the first image
priority={i === 0}
/>
))}

5
src/components/ProjectImage/index.tsx
View File

@ -21,12 +21,14 @@ export default function ProjectImage({
image,
alt,
sizes,
className
className,
priority = false
}: {
image: ImageType
alt: string
sizes: string
className?: string
priority?: boolean
}) {
const [loaded, setLoaded] = useState(false)
const animationControls = useAnimation()
@ -55,6 +57,7 @@ export default function ProjectImage({
height={image.height}
sizes={sizes}
quality={85}
priority={priority}
placeholder="empty"
// blurDataURL={image.blurDataURL}
onLoadingComplete={() => setLoaded(true)}

14
src/components/ProjectPreview/index.tsx
View File

@ -1,22 +1,28 @@
import Link from 'next/link'
import styles from './index.module.css'
import Icon from '../Icon'
import ProjectImage from '../ProjectImage'
import ImageType from '../../interfaces/image'
type Props = {
title: string
slug: string
images: ImageType[]
image: ImageType
imagePriority: boolean
}
export default function ProjectPreview({ title, slug, images }: Props) {
export default function ProjectPreview({
title,
slug,
image,
imagePriority
}: Props) {
return (
<Link href={`/${slug}`} className={styles.project} key={slug}>
<ProjectImage
image={images[0]}
image={image}
alt={title}
sizes="(max-width: 1090px) 100vw, 40vw"
priority={imagePriority}
/>
<footer className={styles.meta}>

6
src/components/Projects/index.tsx
View File

@ -10,11 +10,13 @@ export default function Projects({ projects }: Props) {
return (
<section className={styles.projects}>
{projects.length > 0 &&
projects.map((project) => (
projects.map((project, i) => (
<ProjectPreview
key={project.slug}
title={project.title}
images={project.images}
image={project.images[0]}
// give priority for the first 2 images
imagePriority={i == 0 || i === 1}
slug={project.slug}
/>
))}

2
src/pages/_document.tsx
View File

@ -3,7 +3,7 @@ import Typekit from '../components/Typekit'
export default function Document() {
return (
<Html>
<Html lang="en">
<Head>
<Typekit />
</Head>