a bd.me

Meine persönliche Website

Meine persönliche Portfolio-Website ist schlicht und übersichtlich gestaltet und enthält Funktionen wie MDX-Blogbeiträge mit Aufrufzahlen, einen Dunkelmodus-Schalter, eine Ausrüstungsliste, eine About-Seite und mehr.

Tech-Stack

Backend:

• Next.js / TypeScript
• MDX / Contentlayer (Blogbeiträge)
• PlanetScale (Datenbank)
• Prisma (ORM)

Frontend:

• Tailwind CSS (Styling)
• Radix Primitives (Headless UI-Komponenten)
• Radix UI-Farben (Farbsystem)
• Framer Motion (Animationen)

Erste Schritte

Stellen Sie sicher, dass Node.js v18.17.0+ auf Ihrem Computer installiert ist.

1. Abhängigkeiten installieren : npm install
2. Umgebungsvariablen : Kopieren Sie .env.example in ein neues .env.local
3. Datenbank-Setup : Siehe Datenbank-Setup
4. Prisma-Setup : npm install @prisma/client (falls noch nicht geschehen) und dann npx prisma generate ausführen.
5. Beginnen Sie mit der Entwicklung : npm run dev , dadurch werden automatisch die .contentlayer-Dateien erstellt und der Next.js-Entwicklungsserver gestartet.

Datenbank-Setup

• Registrieren Sie sich für ein PlanetScale-Konto
• Erstellen Sie eine neue Datenbank in PlanetScale
• Aktualisieren Sie die Umgebungsvariable DATABASE_URL in der .env.local Datei Ihres Projekts mit der von PlanetScale bereitgestellten Verbindungszeichenfolge

Einsatz

Dieses Projekt kann schnell in Vercel bereitgestellt werden. Verbinden Sie einfach Ihr Vercel-Konto mit Ihrem GitHub-Repository und Vercel erstellt und stellt Ihre Anwendung automatisch bei jedem neuen Push an den Hauptzweig bereit.

Fügen Sie die .env-Variablen des Projekts zu Ihren Vercel-Projekteinstellungen hinzu.