„Aufbau eines modernen persönlichen Portfolios“?

Eine Schritt-für-Schritt-Anleitung zur Entwicklung der perfekten Portfolio-Website mit dem Next.js-Framework für einen besseren Zugriff auf die Portfolio-Ressourcen durch eine optisch ansprechende Website mit schönen Partikelanimationen und sanften Übergängen interaktive Ressourcen für erweiterte Erlebnisse. Hier ist der Live-Link zu meinem Portfolio

? Merkmale

• Responsives Design für alle Geräte
• Interaktiver Partikelhintergrund
• Reibungslose Seitenübergänge
• Dynamische Projektpräsentation
• Kontaktformular mit E-Mail-Validierung
• Herunterladbarer Lebenslauf
• Social-Media-Integration
• Blog-Bereich
• Professionelle Fähigkeitsvisualisierung
• Docker-Unterstützung für Containerisierung

?️ Gebaut mit

• Next.js 14
• Reagieren Sie 18
• Tailwind CSS
• Framer-Bewegung
• Reaktionssymbole
• Swiper
• TSParticles
• Radix-UI-Komponenten
• Docker

?‍♂️ Erste Schritte

Voraussetzungen

• Node.js 18 oder höher
• npm oder Garn

Installation

1. Klonen Sie das Repository:

   git clone https://github.com/B-KEY/BIBEK-PORTFOLIO.git

1. Abhängigkeiten installieren:

   npm install
   # or
   yarn install

1. Führen Sie den Entwicklungsserver aus:

   npm run dev
   # or
   yarn dev

1. Öffnen Sie http://localhost:3000 in Ihrem Browser.

Wenn Sie Docker-Setup bevorzugen

1. Erstellen Sie das Docker-Image:

   docker build -t portfolio .

1. Führen Sie den Container aus:

   docker run -p 3000:3000 portfolio

? Projektstruktur

portfolio/
├── app/ # Next.js app directory
│   ├── contact/ # Contact page
│   ├── resume/ # Resume page
│   ├── work/ # Projects showcase
│   └── layout.jsx # Root layout
├── components/ # Reusable components
├── public/ # Static assets
└── styles/ # Global styles

? Einsatz

Das Projekt kann mit den folgenden Schritten auf Vercel bereitgestellt werden:

1. Übertragen Sie Ihren Code an GitHub
2. Verbinden Sie Ihr Repository mit Vercel
3. Mit einem Klick bereitstellen

? Umgebungsvariablen

Erstellen Sie eine .env.local-Datei im Stammverzeichnis:

NEXT_PUBLIC_CONTACT_FORM_KEY=your_form_key
Also add username and api for Blog

? Mitwirken

1. Forken Sie das Repository
2. Erstellen Sie Ihren Feature-Zweig (git checkout -b feature/AmazingFeature)
3. Übernehmen Sie Ihre Änderungen (git commit -m 'Add some AmazingFeature')
4. Zum Zweig pushen (git push origin feature/AmazingFeature)
5. Öffnen Sie eine Pull-Anfrage

? Lizenz

Dieses Projekt ist unter der ISC-Lizenz lizenziert – Einzelheiten finden Sie in der LIZENZ-Datei.

? Autor

Bibek Thapa

• LinkedIn: bibek-thapa1
• GitHub: @B-KEY

? Danksagungen

• Next.js-Team für das tolle Framework
• Vercel für das Hosting
• Alle Open-Source-Mitwirkenden
• Teilweise Inspiration von cristianmihai01

Das obige ist der detaillierte Inhalt von„Aufbau eines modernen persönlichen Portfolios“?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!