vfx
Erstellen Sie eine Demo-Website
Erstellen Sie eine Portfolio-Website mit NextJS
June 22, 2024
nextjs
Wie man ein VFX-Künstlerportfolio erstellt und veröffentlicht (0 €)
Diese Anleitung hilft Ihnen, mit Next.js eine professionelle Portfolio-Website zu erstellen, die mit Tailwind CSS gestaltet ist, und sie auf Vercel bereitzustellen. Keine Sorge, falls Sie kein Technikexperte sind; folgen Sie einfach diesen Schritten!
Schritt 1: Entwicklungsumgebung einrichten
- Installieren Sie Node.js:
- Gehe zunodejs.orgLaden Sie die LTS-Version herunter und installieren Sie sie. Node.js ermöglicht Ihnen die Ausführung der erforderlichen Befehle auf Ihrem Computer.
- Installieren Sie Visual Studio Code (VS Code).:
- Herunterladen und installierenVS Code, ein Code-Editor, der das Bearbeiten Ihrer Website vereinfacht.
Schritt 2: Ein neues Next.js-Projekt erstellen
- VS Code öffnen:
- Öffnen Sie VS Code und anschließend ein neues Terminalfenster über die folgende Adresse:
Ansicht > TerminalDie
- Öffnen Sie VS Code und anschließend ein neues Terminalfenster über die folgende Adresse:
- Neues Projekt starten:
- Geben Sie im Terminal Folgendes ein:
npx create-next-app@latest my-portfolio --typescript --tailwind - Folgen Sie den Anweisungen:
- Benennen Sie Ihr Projekt:
mein PortfolioDie - Wählen Sie „Ja“ für TypeScript und „Ja“ für Tailwind CSS.
- Benennen Sie Ihr Projekt:
- Dadurch wird ein neues Next.js-Projekt mit TypeScript und Tailwind CSS eingerichtet.
- Geben Sie im Terminal Folgendes ein:
- Navigieren Sie zu Ihrem Projekt:
- Geben Sie im Terminal Folgendes ein:
CD mein-Portfolio
- Geben Sie im Terminal Folgendes ein:
Schritt 3: Führen Sie Ihre Website lokal aus
- Starten Sie den Entwicklungsserver:
- Geben Sie im Terminal Folgendes ein:
npm run dev - Öffnen Sie Ihren Webbrowser und gehen Sie zu
http://localhost:3000um Ihre Website zu sehen.
- Geben Sie im Terminal Folgendes ein:
Schritt 4: Erstellen einer einfachen, mit Tailwind-CSS gestalteten Homepage
- Öffnen Sie die Homepage-Datei:
- Suchen und öffnen Sie in VS Code die Datei
app/page.tsxDie
- Suchen und öffnen Sie in VS Code die Datei
- Fügen Sie Ihre Inhalte hinzu:
- Ersetzen Sie den vorhandenen Inhalt durch folgende Grundstruktur:
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>
</>
);
}Schritt 5: Stellen Sie Ihre Website auf Vercel bereit
- Erstellen Sie ein Vercel-Konto:
- Gehe zuvercel.comund registrieren Sie sich für ein kostenloses Konto.
- Stellen Sie Ihr Projekt bereit:
- Verbinde dein GitHub-Konto mit Vercel, falls du das noch nicht getan hast.
- Klicken Sie auf die Schaltfläche „Neues Projekt“ und importieren Sie Ihre
mein PortfolioRepository. - Folgen Sie den Anweisungen, und Vercel erstellt und veröffentlicht Ihre Website automatisch.
- Greifen Sie auf Ihre Live-Website zu:
- Nach der Bereitstellung stellt Ihnen Vercel eine URL zur Verfügung (z. B.
https://my-portfolio.vercel.appSie können diesen Link mit potenziellen Kunden oder Arbeitgebern teilen.
- Nach der Bereitstellung stellt Ihnen Vercel eine URL zur Verfügung (z. B.
Letzte Handgriffe
- SEO-Optimierung: Der
KopfKomponente inpage.tsxHier können Sie Meta-Tags, Beschreibungen und Schlüsselwörter hinzufügen, um die Suchmaschinenoptimierung Ihrer Website zu verbessern. - AnpassungTailwind CSS macht es einfach, das Design anzupassen. So können Sie beispielsweise Farben, Schriftarten und Layouts ändern, indem Sie die Tailwind-Klassen anpassen.
- Halten Sie die Informationen auf dem Laufenden.Aktualisieren Sie Ihr Portfolio regelmäßig, indem Sie neue Arbeiten hinzufügen und das Design verbessern.
Ihre Portfolio-Website ist jetzt online! Mit diesen Schritten haben Sie eine einfache, aber stilvolle Website erstellt, um Ihre VFX-Arbeiten zu präsentieren. Viel Erfolg beim Präsentieren!