m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-12-22 17:23:22 +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} alt={title}
key={i} key={i}
sizes="100vw" 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, image,
alt, alt,
sizes, sizes,
className className,
priority = false
}: { }: {
image: ImageType image: ImageType
alt: string alt: string
sizes: string sizes: string
className?: string className?: string
priority?: boolean
}) { }) {
const [loaded, setLoaded] = useState(false) const [loaded, setLoaded] = useState(false)
const animationControls = useAnimation() const animationControls = useAnimation()
@ -55,6 +57,7 @@ export default function ProjectImage({
height={image.height} height={image.height}
sizes={sizes} sizes={sizes}
quality={85} quality={85}
priority={priority}
placeholder="empty" placeholder="empty"
// blurDataURL={image.blurDataURL} // blurDataURL={image.blurDataURL}
onLoadingComplete={() => setLoaded(true)} onLoadingComplete={() => setLoaded(true)}

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

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

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

@ -10,11 +10,13 @@ export default function Projects({ projects }: Props) {
return ( return (
<section className={styles.projects}> <section className={styles.projects}>
{projects.length > 0 && {projects.length > 0 &&
projects.map((project) => ( projects.map((project, i) => (
<ProjectPreview <ProjectPreview
key={project.slug} key={project.slug}
title={project.title} 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} slug={project.slug}
/> />
))} ))}

2
src/pages/_document.tsx
View File

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