vfx
Créer un site de démonstration
Créer un site portfolio avec NextJS
June 22, 2024
nextjs
Comment créer et déployer un portfolio d'artiste VFX (0 $)
Ce guide vous aidera à créer un site web portfolio professionnel avec Next.js, stylisé avec Tailwind CSS, et à le déployer sur Vercel. Pas besoin d'être un expert en informatique : suivez simplement ces étapes !
Étape 1 : Configurer votre environnement de développement
- Installer Node.js:
- Allez ànodejs.orgTéléchargez la version LTS et installez-la. Node.js vous permettra d'exécuter les commandes nécessaires sur votre ordinateur.
- Installer Visual Studio Code (VS Code):
- Télécharger et installerVS Code, un éditeur de code qui facilite la modification de votre site web.
Étape 2 : Créer un nouveau projet Next.js
- Ouvrir VS Code:
- Ouvrez VS Code, puis ouvrez une nouvelle fenêtre de terminal en allant dans
Affichage > Terminal.
- Ouvrez VS Code, puis ouvrez une nouvelle fenêtre de terminal en allant dans
- Démarrer un nouveau projet:
- Dans le terminal, tapez :
npx create-next-app@latest mon-portfolio --typescript --tailwind - Suivez les instructions :
- Nommez votre projet :
mon-portfolio. - Sélectionnez « Oui » pour TypeScript et « Oui » pour Tailwind CSS.
- Nommez votre projet :
- Cela permettra de créer un nouveau projet Next.js avec TypeScript et Tailwind CSS.
- Dans le terminal, tapez :
- Accédez à votre projet:
- Dans le terminal, tapez :
cd mon-portfolio
- Dans le terminal, tapez :
Étape 3 : Exécutez votre site Web localement
- Démarrer le serveur de développement:
- Dans le terminal, tapez :
npm run dev - Ouvrez votre navigateur web et accédez à
http://localhost:3000pour voir votre site.
- Dans le terminal, tapez :
Étape 4 : Créer une page d’accueil de base avec le style Tailwind CSS
- Ouvrir le fichier de la page d'accueil:
- Dans VS Code, trouvez et ouvrez le fichier
app/page.tsx.
- Dans VS Code, trouvez et ouvrez le fichier
- Ajoutez votre contenu:
- Remplacez le contenu existant par la structure de base suivante :
import Head from 'next/head';
export default function Home() {
return (
<>
<Head>
<title>My VFX Portfolio</title>
<meta name="description" content="Showcasing my VFX work" />
</Head>
<main className="min-h-screen bg-gray-900 text-white flex flex-col justify-center items-center">
<h1 className="text-5xl font-bold mb-4">Welcome to My VFX Portfolio</h1>
<p className="text-xl mb-8">Showcasing my best work in visual effects.</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<img src="/images/work1.jpg" alt="Work 1" className="rounded shadow-lg" />
<img src="/images/work2.jpg" alt="Work 2" className="rounded shadow-lg" />
</div>
</main>
</>
);
}Étape 5 : Déployez votre site Web sur Vercel
- Créer un compte Vercel:
- Allez àvercel.comet inscrivez-vous pour un compte gratuit.
- Déployez votre projet:
- Connectez votre compte GitHub à Vercel si ce n'est pas déjà fait.
- Cliquez sur le bouton « Nouveau projet » et importez votre
mon-portfoliodépôt. - Suivez les instructions, et Vercel créera et déploiera automatiquement votre site.
- Accédez à votre site en direct:
- Une fois déployé, Vercel vous fournira une URL (par exemple,
https://my-portfolio.vercel.appVous pouvez partager ce lien avec des clients ou employeurs potentiels.
- Une fois déployé, Vercel vous fournira une URL (par exemple,
Dernières retouches
- Optimisation SEO: Le
Têtecomposant danspage.tsxC’est ici que vous pouvez ajouter des balises méta, des descriptions et des mots-clés pour améliorer le référencement naturel de votre site. - PersonnalisationTailwind CSS facilite la personnalisation du design. Par exemple, vous pouvez modifier les couleurs, les polices et la mise en page en ajustant les classes Tailwind.
- Continuez à mettre à jourMettez régulièrement à jour votre portfolio en y ajoutant de nouveaux travaux et en améliorant sa conception.
Votre site portfolio est désormais en ligne ! En suivant ces étapes, vous avez créé un site simple et élégant pour présenter vos travaux en effets visuels. Bonne présentation !