Build with Sanity MCP in Replit. Prizes up for grabs! Submit by June 14 →

Content operations
Studio
Content Agent
App SDK
Media Library
Content Releases
Agent API
Content backend
Content Lake
Sanity Context
MCP Server
Compute
Live CDN
The only platform powering content operations
Start building for free
Start building for free
By Industry
E-commerce & Retail
Media & Publishing
SaaS
By Team
Developers
Content Editors
Product Owners
Business Leaders
Tecovas strengthens their customer connections
Read the story
Read the story
Build and Share
Sanity 101
Sanity Learn
Pioneers
Frameworks
Templates
Tools and plugins
Schemas and snippets
Join our community
Insight
Blog
Events
Customer stories
Guides
Grab your gear: The official Sanity swag store
Read Grab your gear: The official Sanity swag store
Docs
Enterprise
Pricing

Content operations
Content backend
By Industry
By Team
Build and Share
Insight
Docs
Enterprise
Pricing
Login

All

All Contributions Official (110)Community (1401)Answers

Application

Marketing site (345)
Product & Service (152)
E-commerce Resources (134)
Mobile App Resources (11)

Workflow

Collaborative Editing (195)
Optimization (148)
Localization Resources (63)
Artificial Intelligence (AI) (51)
Multichannel (36)

Integration

Content Enrichment (328)
Publishing (296)
APIs (173)
Distribution (89)

Frameworks

Next (420)
React (327)
Tailwind CSS (204)
Gatsby (96)
Astro (73)
Svelte (46)
Nuxt (41)
Vue (37)
Remix (32)
Hydrogen (19)
Eleventy (16)
Angular (13)
React Native (11)
React Email (6)
Gridsome (5)
.NET (5)
Refine (2)
Jungle.JS (2)
Metalsmith (1)
Jovo (1)

Guides

All Guides (333)Official (39)Community (294)

Application

Marketing site (49)
Product & Service (22)
E-commerce Resources (13)
Mobile App Resources (2)

Workflow

Collaborative Editing (43)
Optimization (37)
Artificial Intelligence (AI) (12)
Multichannel (12)
Localization Resources (8)

Integration

Publishing (86)
Content Enrichment (60)
APIs (36)
Distribution (24)

Frameworks

Next (74)
React (53)
Tailwind CSS (20)
Gatsby (12)
Remix (10)
Svelte (8)
Eleventy (7)
Nuxt (5)
Vue (5)
Angular (4)
Astro (4)
Hydrogen (2)
Jungle.JS (2)
.NET (2)
Gridsome (1)

Plugins

All Tools & Plugins (298)Official (43)Community (255)

Application

Marketing site (26)
E-commerce Resources (21)
Product & Service (9)
Mobile App Resources (4)

Workflow

Collaborative Editing (47)
Optimization (43)
Localization Resources (15)
Artificial Intelligence (AI) (7)
Multichannel (6)

Integration

Content Enrichment (85)
Publishing (65)
APIs (49)
Distribution (35)

Frameworks

React (67)
Next (21)
Gatsby (6)
Vue (5)
Tailwind CSS (4)
Astro (4)
Remix (3)
Svelte (3)
Hydrogen (2)
Angular (2)
Refine (2)
Nuxt (2)
Gridsome (2)
React Native (1)
Eleventy (1)
.NET (1)

Templates

All Templates (95)Official (10)Community (85)

Application

Marketing site (1)

Frameworks

Astro (45)
Next (41)
React (20)
Tailwind CSS (13)
Remix (5)
Angular (4)
Svelte (4)
Hydrogen (3)
Nuxt (2)
React Native (1)
Vue (1)

Projects

All Showcase projects (602)Official (1)Community (601)

Application

Marketing site (254)
Product & Service (116)
E-commerce Resources (90)
Mobile App Resources (4)

Workflow

Collaborative Editing (87)
Optimization (45)
Localization Resources (37)
Artificial Intelligence (AI) (26)
Multichannel (15)

Integration

Content Enrichment (119)
Publishing (108)
APIs (66)
Distribution (21)

Frameworks

Next (284)
React (187)
Tailwind CSS (167)
Gatsby (78)
Nuxt (32)
Svelte (31)
Vue (26)
Astro (20)
Remix (14)
Hydrogen (12)
React Native (9)
Eleventy (8)
React Email (6)
Angular (3)
Gridsome (2)
.NET (2)
Metalsmith (1)
Jovo (1)

Recipes

All Recipes (183)Official (17)Community (166)

Application

Marketing site (15)
E-commerce Resources (10)
Product & Service (5)
Mobile App Resources (1)

Workflow

Optimization (23)
Collaborative Editing (18)
Artificial Intelligence (AI) (6)
Localization Resources (3)
Multichannel (3)

Integration

Content Enrichment (64)
Publishing (37)
APIs (22)
Distribution (9)

Community

Exchange
Projects

Tedspace

Portfolio site

By Ted Littledale

View project live

Get started for free Explore the demo

About the project

Portfolio built using Next.js and hosted on Netlify.

As I didn't want to use Vercel to host I had to implement my own lazy loading image component. This was fairly easy to implement and gave me complete control over when the images loaded. Using the Next image component images would only load once in the viewport which often resulted in seeing the image load briefly. I was able to implement a version which loads the images of the next section once the previous section is in view so images are always loaded before they are in the viewport.