Yardline Framer Template
3D map portfolio for designers
Free
An interactive portfolio for designers and other creative professionals, presenting case studies as buildings in a navigable 3D district. Visitors can explore projects on the map, then browse editorial case-study pages, experience details, recognition, and contact options.
About this template
Yardline is a portfolio you explore like a strategy game. Your work lives in a small 3D district: every case study is its own building, and a truck drives the roads to whichever project a visitor picks.
Click a building, a map label or a nav item and the truck sets off. It keeps to its lane, waits for traffic and backs into its bay, and the case-study card opens when it arrives. Forklifts, robots and city traffic keep moving in the background, and every vehicle, rack and silo can be picked to show a small info card. Drag to pan, scroll to zoom, rotate the view or jump back to the whole district.
The inner pages switch to a calm editorial layout: Instrument Serif headlines, tight Inter text, one ultramarine ink on near-white, grey nav pills and a full-blue footer with a giant serif name.
Pages
• Home - the interactive 3D district
• Work - case-study grid (CMS)
• Case study detail (CMS)
• About - intro, experience and recognition
• Contact - direct lines and a project form
• 404
CMS collections
• Case studies - cover, gallery, facts, story and three result metrics
Features
• Interactive 3D map: six sites, live traffic, pickable objects, smooth RTS camera (drag, zoom, rotate, home, overview)
• Truck that drives to the chosen project, follows right-hand traffic rules and keeps its distance
• Glass HUD: name card, nav, live local-time clock and "Hire me"
• Branded loader that waits for the map to load
• Physics pill boxes: tags drop in when they scroll into view and can be thrown around
• Pill buttons with an animated arrow, soft hover states
• Fully responsive - desktop, tablet and phone
3D and physics: three.js and matter-js (MIT), loaded from a CDN.
Included Pages
- Home
- Work
- Case study detail
- About
- Contact
- 404
More from Akbarali
View all
IdrisVale
IdrisVale is a cinematic portfolio for brand and product designers, designed to present projects through slanted visual transitions, featured case studies, and a clear process. Its CMS-powered project pages, archive, and contact form support a working portfolio beyond the homepage.
Svizzera
Svizzera is a premium Framer template designed for creative agencies seeking a sophisticated and polished online presence.
Sundial
An editorial portfolio for creative directors, designers, and studios to present projects through an interactive horizontal reel, case studies, and an archive. Its light-responsive palette, local clock, and sundial navigation give the site a distinctive, time-inspired visual style.
More Portfolio Templates
View all
Scrollz
Scrollz is a dark, cinematic Framer template for video editing agencies, social media studios, and freelance editors. It features CMS-powered project filtering, bold typography, polished animations, and conversion-focused layouts to turn visitors into clients.
PortBase
A minimal portfolio template for UI/UX designers, web designers, freelancers, and independent design studios to showcase projects and present their work. It includes a CMS-powered project collection, individual project pages, and an About page.
Morrow House
Morrow House is a free Framer template designed for architecture studios, interior designers, and independent practices. It features responsive layouts, CMS-powered project and journal pages, reusable components, and refined typography to showcase project-led portfolios.
More 3D Templates
View all
Bezier
A Framer template for design studios and freelancers offering brand, web, and product design on a monthly plan. It includes pages for showcasing work, explaining services and pricing, sharing studio updates, and collecting client inquiries.
Plumb Build
A Framer template for renovation contractors, design-build firms, and agencies creating contractor websites. It includes project case studies, services, contact and estimate pages, and an editable cost estimator for displaying project price ranges and build times.
PROMPT ZERO
A Framer template for AI startups, developer tools, and SaaS products. It includes product, pricing, changelog, blog, about, and contact pages, with animated interactions, CMS collections, a theme toggle, and a working contact form.
More Creative Templates
View all
Frameo
Frameo is a sleek and modern design portfolio template, crafted for creatives who want to showcase their work with clarity and style. Designed for seamless navigation and a visually stunning presentation.
Crimzon
Crimzon is a futuristic Framer landing page template for AI SaaS startups. It features AI-generated red planet background and grain effect that will give your site epic look.
JaneMills
Tailored for personal travel bloggers, our Framer Template offers customizable features to showcase adventures with captivating visuals and engaging narratives.
More Personal Templates
View all
Blogify
An Ultimate Modern Blogging Template with 11 customizable pages.
Dashbar
Dashbar is a sidebar-styled personal website template for boosting your online presence. Present works, publish articles, sell products, and bookmark your inspirations!
Pasgan
Introducing the Pasgan Portfolio Template - a preferred choice for building a striking online portfolio. With its modern design, this template allows for easy customization of sections to showcase personal achievements, skills, and projects.
More Animated Templates
View all
Velix
Velix is a unique Framer portfolio theme built for creatives who value clarity and elegance. With clean layouts, stylish animations, and focused project sections, it helps professionals showcase their work and process in a modern and compelling way.
Kairo Studio
A cinematic Framer template for design studios, creative agencies, and independent designers to showcase projects through case studies and publish journal articles. It includes pages for work, articles, contact, and a custom 404.
Kundaliniway
An immersive scrolling landing page template that guides spiritually-inclined audiences through a cinematic visual journey of the seven chakras, illustrating the transformation of consciousness with dynamic light and motion effects
More Showcase Templates
View all
Noire
A portfolio website template for professional photographers, studios, and visual artists to showcase projects, present services and experience, and attract potential clients and bookings.
Affinitty
Affinitty is a playful, interactive Framer portfolio template designed for product designers, UI/UX designers, and multidisciplinary digital creatives to showcase projects, case studies, skills, and experience with purposeful motion.
Nue
Nue is a sleek, free Framer portfolio template designed for modern creatives. Present your work effortlessly through clean layouts and smooth interactions.