Moderni ja responsiivinen portfolio-sivusto, joka esittelee työsi ja osaamisesi.
Kopioi tämä prompti Cursoriin tai muuhun AI-työkaluun aloittaaksesi projektin.
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.
Tässä projektissa rakennetaan seuraavat ominaisuudet:
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.
Kun perusprojekti on valmis, voit laajentaa sitä näillä ideoilla:
Selaa kaikkia web-sovellukset projekteja tai tutustu muihin kategorioihin.