Настройки кукисов
Кукисы, которые обязательны для корректной работы сайта, всегда включены. Остальное можно настроить.
Zero Block
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
// ─── ДОБАВЛЯЙ ПРОЕКТЫ СЮДА ───────────────────────────────────────────
const projects = [
{
title: "Lusion",
category: "Agency",
url: "https://lusion.co",
image: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=800&q=80",
author: "Lusion"
},
{
title: "Amie",
category: "SaaS",
url: "https://amie.so",
image: "https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=800&q=80",
author: "Amie Team"
},
{
title: "Reflect",
category: "App",
url: "https://reflect.app",
image: "https://images.unsplash.com/photo-1558655146-9f40138edfeb?w=800&q=80",
author: "Reflect"
},
{
title: "Phantom",
category: "Crypto",
url: "https://phantom.app",
image: "https://images.unsplash.com/photo-1639762681485-074b7f938ba0?w=800&q=80",
author: "Phantom"
},
{
title: "Vercel",
category: "Dev Tool",
url: "https://vercel.com",
image: "https://images.unsplash.com/photo-1607799279861-4dd421887fb3?w=800&q=80",
author: "Vercel"
},
{
title: "Cosmos",
category: "Portfolio",
url: "https://cosmos.so",
image: "https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?w=800&q=80",
author: "Cosmos"
},
{
title: "Diagram",
category: "Design Tool",
url: "https://diagram.com",
image: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800&q=80",
author: "Diagram"
},
{
title: "Height",
category: "SaaS",
url: "https://height.app",
image: "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=800&q=80",
author: "Height"
},
{
title: "Superpower",
category: "App",
url: "https://superpower.com",
image: "https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=800&q=80",
author: "Superpower"
},
{
title: "Metalab",
category: "Agency",
url: "https://metalab.com",
image: "https://images.unsplash.com/photo-1497366216548-37526070297c?w=800&q=80",
author: "Metalab"
},
{
title: "Notion",
category: "SaaS",
url: "https://notion.so",
image: "https://images.unsplash.com/photo-1517842645767-c639042777db?w=800&q=80",
author: "Notion"
},
{
title: "Threads",
category: "Social",
url: "https://threads.net",
image: "https://images.unsplash.com/photo-1611162617213-7d7a39e9b1d7?w=800&q=80",
author: "Meta"
},
];
// ─────────────────────────────────────────────────────────────────────
const PER_PAGE = 9;
let currentIndex = 0;
function createCard(project) {
const a = document.createElement('a');
a.className = 'card';
a.href = project.url;
a.target = '_blank';
a.rel = 'noopener noreferrer';
a.innerHTML = `
`;
return a;
}
function loadMore() {
const grid = document.getElementById('gallery');
const slice = projects.slice(currentIndex, currentIndex + PER_PAGE);
slice.forEach(p => grid.appendChild(createCard(p)));
currentIndex += slice.length;
}
// Бесконечный скролл через IntersectionObserver
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting && currentIndex < projects.length) {
loadMore();
}
}, { rootMargin: '200px' });
observer.observe(document.getElementById('sentinel'));
// Первая загрузка
loadMore();
${project.title}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0a0a0a; }
.gallery-wrap {
max-width: 1400px;
margin: 0 auto;
padding: 40px 20px;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 900px) {
.gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.gallery-grid { grid-template-columns: 1fr; }
}
.card {
background: #111;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: transform 0.25s ease, box-shadow 0.25s ease;
text-decoration: none;
display: block;
}
.card:hover {
transform: scale(1.02);
box-shadow: 0 8px 32px rgba(255,255,255,0.07);
}
.card-img {
width: 100%;
aspect-ratio: 16/10;
object-fit: cover;
display: block;
background: #1a1a1a;
}
.card-body {
padding: 14px 16px;
}
.card-title {
color: #fff;
font-family: sans-serif;
font-size: 15px;
font-weight: 500;
margin-bottom: 6px;
}
.card-meta {
display: flex;
align-items: center;
gap: 8px;
}
.card-tag {
color: #666;
font-family: sans-serif;
font-size: 12px;
background: #1e1e1e;
padding: 2px 8px;
border-radius: 20px;
}
.card-author {
color: #444;
font-family: sans-serif;
font-size: 12px;
}
.sentinel {
height: 1px;
}