mirsazzathossain.me Download - mirsazzathossain.me Quellcode Download

mirsazzathossain.me

AI-Quellcode

1.0.0

Herunterladen

Tech Stack

Mirsazzathosain.me

Dies ist der Quellcode meiner persönlichen Website Mirsazzathosain.me. Diese akademische Portfolio -Website ist eine umfassende und visuell ansprechende Online -Präsenz, die meine Fähigkeiten, Erfolge und Erfahrungen in meinem Studienbereich zeigt. Ich habe die Website mit Next.js erstellt, ein sehr beliebtes JavaScript-Framework, das die Erstellung von servergerenderten und statisch generierten Webanwendungen ermöglicht. Um ein modernes und professionelles Design zu gewährleisten, habe ich Rückenwind-CSS, ein Utility-First CSS-Framework, verwendet und mich vom Spotlight-Thema der Tailwind UI inspiriert. Der Inhalt meiner Website wird mithilfe von ContentLayer verwaltet, einer Plattform, die die Erstellung und das Management von Inhalten vereinfacht und in Markdown für effiziente Organisation und Formatierung geschrieben ist. Die Blog-Beiträge auf meiner Website bieten ein von Giscus betriebenes Kommentarsystem, eine Github-basierte Diskussionsplattform, die eine interaktive Kommunikation und Feedback von meinem Publikum ermöglicht. Darüber hinaus habe ich die Spotify -Web -API integriert, um meine kürzlich gespielten Songs auf der Website zu präsentieren und Icons von Heroicons zu verwenden, um die visuelle Attraktivität meiner Website zu verbessern. Meine Website wird auf Vercel gehostet, einer zuverlässigen Cloud -Plattform zum Hosting statischer Websites und serverloser Funktionen, um alle Benutzer einen reibungslosen und schnellen Zugriff zu gewährleisten. Insgesamt glaube ich, dass meine akademische Portfolio-Website mein Engagement für den Aufenthalt mit modernen Technologien zeigt und eine dynamische und visuell auffällige Online-Präsenz darstellt.

Kurz gesagt, der Tech -Stapel der Website lautet wie folgt:

Framework: Next.js
Styling: Rückenwind -CSS
Ikonen: Heroicons
Inhalt: Markdown
Content Management: ContentLayer
Bereitstellung: Vercel
Kommentare: Giscus

Überblick

app/* : Ich habe Next.js neue app -Verzeichnisstruktur verwendet. Dieses Verzeichnis enthält die Haupt -App.
components/* : Alle benutzerdefinierten Komponenten werden in diesem Verzeichnis gespeichert.
content/* : Dieses Verzeichnis enthält alle Inhaltsinhalte.
public/* : Dieses Verzeichnis enthält alle statischen Vermögenswerte der Website.
public/content/* : Dieses Verzeichnis enthält alle statischen Inhalte der Website. ZB Projekte, Erfahrungen, Bildung usw.
styles/* : Ich habe Rückenwind -CSS zum Styling verwendet. Dieses Verzeichnis enthält die Global -Stile von Tailwind CSS und einige benutzerdefinierte Stile für die Website.
utils/* : Dieses Verzeichnis enthält einige Nutzfunktionen.

Klonen und Gabel

Wenn Sie dieses Repository klonen oder aufgeben möchten, entfernen Sie bitte die content und die public Verzeichnisse, da diese meine persönlichen Inhalte und mein Vermögen enthalten. Sie können Ihre eigenen Inhalte und Vermögenswerte in den content bzw. in public Verzeichnissen hinzufügen.

Klonen Sie das Repository, indem Sie den folgenden Befehl ausführen.

git clone https://github.com/mirsazzathossain/mirsazzathossain.me.git
# or
git clone [email protected]:mirsazzathossain/mirsazzathossain.me.git

Sie können den content und public Verzeichnisse entfernen, indem Sie die folgenden Befehle ausführen.

rm -rf content
rm -rf public

Fügen Sie Ihre eigenen Inhalte und Vermögenswerte in den content bzw. public Verzeichnissen hinzu.

Installation

Installieren Sie die Abhängigkeiten, indem Sie den folgenden Befehl ausführen.

npm install
# or
yarn install

Führen Sie schließlich den folgenden Befehl aus, um den Entwicklungsserver zu starten.

npm run dev
# or
yarn dev

Öffnen Sie http: // localhost: 3000 mit Ihrem Browser, um das Ergebnis zu sehen.

Hinweis : Sie müssen eine .env -Datei im Stammverzeichnis erstellen und die folgenden Umgebungsvariablen hinzufügen, um die Spotify -Integration zum Laufen zu bringen.

SPOTIFY_CLIENT_ID=yourspotifyclientid
SPOTIFY_CLIENT_SECRET=yourspotifyclientsecret
SPOTIFY_REFRESH_TOKEN=yourspotifyrefreshtoken

Sie können den SPOTIFY_CLIENT_ID und SPOTIFY_CLIENT_SECRET von Spotify Developer Dashboard abrufen. Sie können die Spotify -Web -API -Konsole von SPOTIFY_REFRESH_TOKEN erhalten.