Henkilökohtainen linkkisivu kaikille sosiaalisen median linkeillesi.
Kopioi tämä prompti Cursoriin tai muuhun AI-työkaluun aloittaaksesi projektin.
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.Tässä projektissa rakennetaan seuraavat ominaisuudet:
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.
Kun perusprojekti on valmis, voit laajentaa sitä näillä ideoilla:
Selaa kaikkia web-sovellukset projekteja tai tutustu muihin kategorioihin.