Henkilökohtainen linkkisivu kaikille sosiaalisen median linkeillesi. Helpoin tapa aloittaa vibekoodaus - saat valmiin sivun tunnissa.
Aloittelija · 1-2 tuntia · Next.js, TypeScript, Tailwind CSS, Vercel
Kopioi tämä Cursoriin tai Claude Codeen ja aloita rakentaminen.
Luo Linktree-klooni linkkisivu.
Layout:
- Profiilikuva (pyöreä)
- Nimi ja lyhyt bio
- Lista linkkejä (isoilla napeilla)
- Sosiaalisen median ikonit alhaalla
Linkit datana:
const links = [
{ title: "Portfolio", url: "https://...", icon: "globe" },
{ title: "GitHub", url: "https://github.com/...", icon: "github" },
{ title: "LinkedIn", url: "https://linkedin.com/...", icon: "linkedin" },
{ title: "Twitter", url: "https://twitter.com/...", icon: "twitter" },
];
Tee siisti, moderni design. Tausta gradientilla, napit hover-efektillä.
Käytä Next.js ja Tailwind CSS.Luo yksinkertainen linkkisivun rakenne.
Luo Linktree-tyylinen linkkisivu. Keskitetty layout: profiilikuva, nimi, bio, ja lista linkkejä. Käytä Tailwind CSS ja tee siitä kaunis.
Lisää mahdollisuus muokata linkkejä.
Luo admin-sivu jossa voi lisätä, muokata ja poistaa linkkejä. Tallenna JSON-tiedostoon tai Supabaseen. Lisää drag & drop järjestyksen muuttamiseen.
Lisää erilaisia teemoja.
Lisää teemavalitsin: valitse taustaväri, nappien väri ja tyyli. Tallenna valinta ja näytä esikatselussa.
Profiilikuva ja bio
Linkkilistat
Mukautettavat värit
Sosiaalisen median ikonit
Analytiikka (klikkimäärät)
Kun perusprojekti on valmis:
Useita käyttäjiä (multi-tenant)
Klikkianalytiikka
QR-koodi jakamista varten
Animoidut taustakuviot
Integraatio Spotifyyn (näytä mitä kuuntelet)
Moderni ja responsiivinen portfolio-sivusto, joka esittelee työsi ja osaamisesi. Opi Next.js:n perusteet ja deployn Verceliin - täydellinen ensimmäinen projekti.
Täysiverinen blogi kirjoittamiseen ja artikkeleiden hallintaan. Opi MDX-sisällönhallintaa, hakutoimintoja ja autentikaatiota rakentamalla oma CMS.
Klassinen tehtävälista-sovellus modernilla toteutuksella. Opi React state-hallintaa, CRUD-operaatioita ja tietokannan käyttöä rakentamalla sovellus jota käytät oikeasti.
Valitse työkalu ja käytä aloituspromptiä.