Skip to content

Commit e596052

Browse files
vukrosicvukrosic
committed
feat: add new blog page for open research calls and research contributions.
1 parent fdd2c20 commit e596052

2 files changed

Lines changed: 272 additions & 0 deletions

File tree

‎app/blog/page.tsx‎

Lines changed: 264 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,264 @@
1+
'use client';
2+
3+
import React from 'react';
4+
import Link from 'next/link';
5+
import { motion } from 'framer-motion';
6+
import {
7+
BookOpen,
8+
Code2,
9+
Cpu,
10+
GitPullRequest,
11+
Lightbulb,
12+
ArrowUpRight,
13+
Sparkles,
14+
Layers,
15+
Zap,
16+
CheckCircle2,
17+
Users,
18+
Clock,
19+
Award,
20+
Youtube,
21+
UserCheck,
22+
Globe
23+
} from 'lucide-react';
24+
25+
const ImplementationChallenge = ({
26+
title,
27+
description,
28+
papers,
29+
difficulty,
30+
tags
31+
}: {
32+
title: string,
33+
description: string,
34+
papers: { name: string, url?: string }[],
35+
difficulty: 'Mainstream' | 'Advanced' | 'Expert',
36+
tags: string[]
37+
}) => (
38+
<motion.div
39+
initial={{ opacity: 0, y: 20 }}
40+
whileInView={{ opacity: 1, y: 0 }}
41+
viewport={{ once: true }}
42+
className="group relative p-8 rounded-3xl bg-slate-900/40 border border-white/5 hover:border-blue-500/30 transition-all duration-300 backdrop-blur-sm overflow-hidden"
43+
>
44+
<div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
45+
<Code2 className="w-24 h-24" />
46+
</div>
47+
48+
<div className="relative">
49+
<div className="flex justify-between items-start mb-6">
50+
<div className="flex gap-2">
51+
{tags.map(tag => (
52+
<span key={tag} className="px-2 py-1 rounded-md bg-white/5 border border-white/10 text-[10px] font-mono text-slate-400 uppercase tracking-wider">
53+
{tag}
54+
</span>
55+
))}
56+
</div>
57+
<span className={`text-[10px] font-bold px-2 py-1 rounded uppercase tracking-widest border ${difficulty === 'Expert' ? 'border-red-500/30 text-red-400 bg-red-500/5' :
58+
difficulty === 'Advanced' ? 'border-amber-500/30 text-amber-400 bg-amber-500/5' :
59+
'border-blue-500/30 text-blue-400 bg-blue-500/5'
60+
}`}>
61+
{difficulty}
62+
</span>
63+
</div>
64+
65+
<h3 className="text-2xl font-bold text-white mb-4 group-hover:text-blue-400 transition-colors tracking-tight">
66+
{title}
67+
</h3>
68+
69+
<p className="text-slate-400 text-sm leading-relaxed mb-8 max-w-xl">
70+
{description}
71+
</p>
72+
73+
<div className="space-y-4 mb-8">
74+
<h4 className="text-xs font-bold text-slate-500 uppercase tracking-widest flex items-center gap-2">
75+
<BookOpen className="w-3 h-3" />
76+
Reference Papers
77+
</h4>
78+
<div className="grid gap-2">
79+
{papers.map((paper, i) => (
80+
paper.url ? (
81+
<a
82+
key={i}
83+
href={paper.url}
84+
target="_blank"
85+
rel="noopener noreferrer"
86+
className="flex items-center justify-between p-3 rounded-xl bg-white/5 border border-white/5 group/paper hover:bg-white/10 transition-colors cursor-pointer"
87+
>
88+
<span className="text-sm text-slate-300 font-light">{paper.name}</span>
89+
<ArrowUpRight className="w-4 h-4 text-slate-500 group-hover/paper:text-blue-400 transition-colors" />
90+
</a>
91+
) : (
92+
<div key={i} className="flex items-center justify-between p-3 rounded-xl bg-white/5 border border-white/5 group/paper transition-colors">
93+
<span className="text-sm text-slate-300 font-light">{paper.name}</span>
94+
<ArrowUpRight className="w-4 h-4 text-slate-500/20" />
95+
</div>
96+
)
97+
))}
98+
</div>
99+
</div>
100+
101+
</div>
102+
</motion.div>
103+
);
104+
105+
export default function PublishPage() {
106+
return (
107+
<div className="min-h-screen bg-[#050505] text-slate-200">
108+
{/* Background decoration */}
109+
<div className="fixed inset-0 overflow-hidden pointer-events-none">
110+
<div className="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-blue-600/5 rounded-full blur-[120px]" />
111+
<div className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-purple-600/5 rounded-full blur-[120px]" />
112+
</div>
113+
114+
<div className="relative container mx-auto px-6 pt-40 pb-24">
115+
{/* Header */}
116+
<div className="max-w-4xl mb-24">
117+
<motion.div
118+
initial={{ opacity: 0, y: 20 }}
119+
animate={{ opacity: 1, y: 0 }}
120+
transition={{ duration: 0.8 }}
121+
>
122+
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-400 text-[10px] font-bold uppercase tracking-[0.2em] mb-8">
123+
<Sparkles className="w-3 h-3" />
124+
Open Research Call
125+
</div>
126+
<h1 className="text-6xl md:text-8xl font-bold text-white mb-8 tracking-tighter leading-[0.9]">
127+
Publish <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-purple-400 to-cyan-400">Research.</span>
128+
</h1>
129+
<p className="text-xl text-slate-400 leading-relaxed max-w-2xl font-light">
130+
Write a blog post and get <span className="text-white">free mentorship, experience, credit, and publication</span>.
131+
Get direct feedback, a <span className="text-white">YouTube mention</span>, and contribute to science.
132+
</p>
133+
</motion.div>
134+
</div>
135+
136+
{/* Benefits Grid */}
137+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-24">
138+
{[
139+
{ icon: Users, title: "Free Mentorship", desc: "Direct guidance and feedback on your research and writing." },
140+
{ icon: Award, title: "Scientific Credit", desc: "Get full credit for your implementation and insights." },
141+
{ icon: Globe, title: "Contribution", desc: "Add to the collective understanding of AI." },
142+
{ icon: Youtube, title: "YouTube Mention", desc: "Featured in our video." },
143+
{ icon: Clock, title: "Rapid Iteration", desc: "Fast feedback loops to refine your work." },
144+
{ icon: UserCheck, title: "Personal Growth", desc: "Level up your experience." }
145+
].map((item, i) => (
146+
<div key={i} className="p-6 rounded-2xl bg-white/[0.02] border border-white/5 hover:border-blue-500/20 transition-all">
147+
<item.icon className="w-6 h-6 text-blue-400 mb-4" />
148+
<h4 className="text-lg font-bold text-white mb-2">{item.title}</h4>
149+
<p className="text-sm text-slate-500 leading-relaxed">{item.desc}</p>
150+
</div>
151+
))}
152+
</div>
153+
154+
{/* The Rules Section */}
155+
<motion.div
156+
initial={{ opacity: 0 }}
157+
whileInView={{ opacity: 1 }}
158+
viewport={{ once: true }}
159+
className="mb-24 p-10 rounded-3xl bg-gradient-to-br from-blue-600/5 to-purple-600/5 border border-white/5 backdrop-blur-sm"
160+
>
161+
<h2 className="text-3xl font-bold text-white mb-8">The Process</h2>
162+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
163+
<div className="space-y-6">
164+
<p className="text-slate-300 leading-relaxed">
165+
You would be responsible for most of the work, with my direct help and feedback.
166+
The goal is to produce high-signal content that advances the field.
167+
</p>
168+
<div className="p-6 rounded-2xl bg-amber-500/5 border border-amber-500/10">
169+
<div className="flex items-center gap-3 mb-3 text-amber-400">
170+
<CheckCircle2 className="w-5 h-5" />
171+
<h4 className="font-bold">The Golden Rule</h4>
172+
</div>
173+
<p className="text-sm text-slate-400">
174+
<span className="text-white font-medium">No AI generated text.</span> AI may be used as a tool during creation,
175+
but the final blog must be human-written.
176+
</p>
177+
</div>
178+
</div>
179+
<div className="space-y-8">
180+
<div>
181+
<h4 className="text-lg font-bold text-white mb-4 flex items-center gap-2">
182+
<Zap className="w-4 h-4 text-blue-400" />
183+
AI Research Post
184+
</h4>
185+
<ul className="space-y-2 text-sm text-slate-400">
186+
<li className="flex items-center gap-2">• Select a relevant research topic</li>
187+
<li className="flex items-center gap-2">• Code small, high-signal experiments</li>
188+
<li className="flex items-center gap-2">• Describe math background (optional), experiments, and results</li>
189+
</ul>
190+
</div>
191+
<div>
192+
<h4 className="text-lg font-bold text-white mb-4 flex items-center gap-2">
193+
<BookOpen className="w-4 h-4 text-purple-400" />
194+
Tutorial / Explanation
195+
</h4>
196+
<ul className="space-y-2 text-sm text-slate-400">
197+
<li className="flex items-center gap-2">• Write a detailed explanation of a research paper</li>
198+
<li className="flex items-center gap-2">• Detail specific experiments or mathematical concepts</li>
199+
<li className="flex items-center gap-2">• Create guides that we wish existed</li>
200+
</ul>
201+
</div>
202+
</div>
203+
</div>
204+
<div className="mt-12 pt-8 border-t border-white/5">
205+
<p className="text-center text-slate-500 italic text-sm">
206+
"Author has total freedom to choose topics."
207+
</p>
208+
</div>
209+
</motion.div>
210+
211+
{/* Modular Tracks Section */}
212+
<motion.div
213+
initial={{ opacity: 0, y: 20 }}
214+
whileInView={{ opacity: 1, y: 0 }}
215+
viewport={{ once: true }}
216+
className="mb-20 p-8 rounded-3xl bg-white/[0.01] border border-white/5 transition-all"
217+
>
218+
<h2 className="text-2xl font-bold text-white mb-6 flex items-center gap-3">
219+
<Layers className="w-6 h-6 text-blue-400" />
220+
Possible Contributions
221+
</h2>
222+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
223+
{[
224+
{ title: "Explain the Paper", desc: "Translate high-level concepts and intuition into clear, narrative explanations." },
225+
{ title: "Background Math", desc: "Deep-dive into the formal mathematical foundations and proofs." },
226+
{ title: "Implement Code", desc: "Write clean, modular PyTorch or Triton code for the research logic." },
227+
{ title: "Training Dataset", desc: "Build the data pipelines and synthetic environments needed for experiments." },
228+
{ title: "Empirical Analysis", desc: "Run experiments, collect insights, and visualize the results." },
229+
{ title: "Peer Review", desc: "Collaborate on existing work and provide technical feedback." }
230+
].map((track, i) => (
231+
<div key={i} className="flex gap-4 items-start p-4 rounded-xl border border-white/5">
232+
<div className="mt-1 w-5 h-5 rounded-full bg-blue-500/10 border border-blue-500/30 flex items-center justify-center flex-shrink-0">
233+
<div className="w-1.5 h-1.5 rounded-full bg-blue-400" />
234+
</div>
235+
<div>
236+
<h4 className="text-sm font-bold text-white mb-1">{track.title}</h4>
237+
<p className="text-xs text-slate-500 leading-relaxed font-light">{track.desc}</p>
238+
</div>
239+
</div>
240+
))}
241+
</div>
242+
</motion.div>
243+
244+
{/* Challenge Grid */}
245+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-24">
246+
<ImplementationChallenge
247+
title="LeJEPA Scaling & Stability"
248+
description="Implementing the Latent-Euclidean Joint-Embedding Predictive Architecture. Focus on SIGReg loss and proving stability."
249+
difficulty="Advanced"
250+
tags={['SSL', 'JEP-A', 'PyTorch']}
251+
papers={[{ name: "LeJEPA: Provable and Scalable SSL", url: "https://arxiv.org/pdf/2511.08544" }]}
252+
/>
253+
<ImplementationChallenge
254+
title="Continual Learning at Scale"
255+
description="Implementation of Google's research on preventing catastrophic forgetting in transformers."
256+
difficulty="Expert"
257+
tags={['Optimization', 'Transformers']}
258+
papers={[{ name: "Continual Learning by Google Research" }]}
259+
/>
260+
</div>
261+
</div>
262+
</div>
263+
);
264+
}

‎components/navigation.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,14 @@ export function Navigation({ }: NavigationProps) {
5252
<div className="absolute inset-0 bg-gradient-to-r from-blue-600/0 via-purple-600/0 to-cyan-600/0 group-hover:from-blue-600/10 group-hover:via-purple-600/10 group-hover:to-cyan-600/10 rounded-lg transition-all duration-300"></div>
5353
</Link>
5454

55+
<Link
56+
href="/blog"
57+
className="group relative px-4 py-2 text-sm font-medium text-slate-300 hover:text-white transition-all duration-300"
58+
>
59+
<span className="relative z-10">Publish</span>
60+
<div className="absolute inset-0 bg-gradient-to-r from-blue-600/0 via-purple-600/0 to-cyan-600/0 group-hover:from-blue-600/10 group-hover:via-purple-600/10 group-hover:to-cyan-600/10 rounded-lg transition-all duration-300"></div>
61+
</Link>
62+
5563
{/* Social Links with Icons */}
5664
<a
5765
href="https://discord.com/invite/6AbXGpKTwN"

0 commit comments

Comments
 (0)