Moderni ja responsiivinen portfolio-sivusto, joka esittelee työsi ja osaamisesi. Opi Next.js:n perusteet ja deployn Verceliin - täydellinen ensimmäinen projekti.
Aloittelija · 2-4 tuntia · Next.js, TypeScript, Tailwind CSS, Vercel
Kopioi tämä Cursoriin tai Claude Codeen ja aloita rakentaminen.
Luo portfolio-sivuston perusrakenne Next.js 14:llä, TypeScriptillä ja Tailwind CSS:llä. Sivut: - Etusivu (hero, projektit, skills overview) - Projektit (kaikki projektit) - About (tietoa minusta) - Yhteystiedot (yhteydenottolomake) Sisällytä: - Moderni, minimalistinen design - Tumma/vaalea teema toggle - Responsiivinen layout - Animaatiot (Framer Motion) Tee ensiksi kansiorakenne ja peruskomponentit.
Luo uusi Next.js-projekti ja asenna Tailwind CSS.
Luo uusi Next.js 14 projekti TypeScriptillä ja Tailwind CSS:llä. Projektin nimi on "portfolio".
Rakenna etusivun hero-osio nimellä, tittelillä ja linkeillä.
Luo Hero-komponentti portfoliolle. Sisällytä nimi, titteli (esim. "Full-stack kehittäjä"), lyhyt kuvaus ja linkit GitHubiin ja LinkedIniin. Käytä Tailwind CSS ja lisää hieno animaatio.
Luo komponentti joka näyttää projektit kortteina.
Luo ProjectCard-komponentti ja ProjectGrid joka näyttää projektit. Jokainen kortti sisältää kuvan, nimen, kuvauksen, teknologiat ja linkit. Lisää hover-efektit.
Rakenna sivu joka kertoo sinusta ja osaamisestasi.
Luo About-sivu portfoliolle. Sisällytä kuva, pidempi bio, osaamisalueet (skills) taitotasoilla ja työkokemus aikajanan muodossa.
Lisää toimiva yhteydenottolomake.
Luo Contact-sivu yhteydenottolomakkeella. Kentät: nimi, email, viesti. Lisää validointi ja lähetä viesti API:n kautta (voit käyttää Resend-palvelua).
Lisää yhtenäinen navigaatio ja footer.
Luo Navigation-komponentti joka sisältää logon ja linkit eri sivuille. Lisää myös Footer sosiaalisilla linkeillä. Tee navigaatiosta responsiivinen mobiilivalikolla.
Responsiivinen design
Tumma/vaalea teema
Projektikortit
About-osio
Yhteydenottolomake
Animaatiot
Kun perusprojekti on valmis:
Lisää blogi MDX-tiedostoilla
Integraatio GitHubin API:n kanssa - näytä repositoriot
Lisää 3D-elementtejä Three.js:llä
Monikielisyys (suomi/englanti)
CMS-integraatio (Sanity/Contentful)
Täysiverinen blogi kirjoittamiseen ja artikkeleiden hallintaan. Opi MDX-sisällönhallintaa, hakutoimintoja ja autentikaatiota rakentamalla oma CMS.
Henkilökohtainen linkkisivu kaikille sosiaalisen median linkeillesi. Helpoin tapa aloittaa vibekoodaus - saat valmiin sivun tunnissa.
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ä.