mirsazzathossain.me Téléchargement - mirsazzathossain.me Téléchargement du code source

mirsazzathossain.me

Code Source AI

1.0.0

Télécharger

Pile technologique

mirsazzathosain.me

Ceci est le code source de mon site Web personnel mirsazzathossain.me. Ce site Web de portefeuille académique est une présence en ligne complète et visuellement attrayante qui met en valeur mes compétences, mes réalisations et mes expériences dans mon domaine d'études. J'ai construit le site Web en utilisant Next.js, un framework JavaScript très populaire qui permet la création d'applications Web rendues et générées par le serveur. Pour assurer un design moderne et professionnel, j'ai utilisé le vent de queue CSS, un cadre CSS d'abord de l'utilité, et j'ai été inspiré par le thème des projecteurs de l'interface utilisateur du vent arrière. Le contenu de mon site Web est géré à l'aide de ContentLayer, une plate-forme qui simplifie la création et la gestion du contenu, et est rédigée en marquage pour une organisation et un formatage efficaces. Les articles de blog sur mon site Web présentent un système de commentaires propulsé par Giscus, une plate-forme de discussion basée sur GitHub, permettant une communication interactive et des commentaires de mon public. De plus, j'ai intégré l'API Web Spotify pour présenter mes chansons récemment jouées sur le site Web et utilisé des icônes de HeroiCons pour améliorer l'attrait visuel de mon site Web. Mon site Web est hébergé sur Vercel, une plate-forme cloud fiable pour l'hébergement de sites statiques et de fonctions sans serveur, garantissant un accès fluide et rapide pour tous les utilisateurs. Dans l'ensemble, je crois que mon site Web de portefeuille académique démontre mon dévouement à rester à jour avec les technologies modernes et présente une présence en ligne dynamique et visuellement frappante.

En bref, la pile technologique du site Web est la suivante:

Framework: suivant.js
Styling: Tailwind CSS
Icônes: héroïcons
Contenu: Markdown
Gestion du contenu: Contentlayer
Déploiement: Vercel
Commentaires: Giscus

Aperçu

app/* : J'ai utilisé Next.js Nouvelle structure de répertoire app . Ce répertoire contient l'application principale.
components/* : Tous les composants personnalisés sont stockés dans ce répertoire.
content/* : Ce répertoire contient tous les contenus de contenu.
public/* : Ce répertoire contient tous les actifs statiques du site Web.
public/content/* : Ce répertoire contient tous les contenus statiques du site Web. Par exemple, projets, expériences, éducation, etc.
styles/* : J'ai utilisé des CSS de vent arrière pour le style. Ce répertoire contient les styles globaux CSS du vent arrière et certains styles personnalisés pour le site Web.
utils/* : Ce répertoire contient certaines fonctions d'utilité.

Clonage et forking

Si vous souhaitez cloner ou fourrer ce référentiel, assurez-vous de supprimer le content et les répertoires public car ils contiennent mon contenu personnel et mes actifs. Vous pouvez ajouter respectivement votre propre contenu et actifs dans le content et les répertoires public .

Clone le référentiel en exécutant la commande suivante.

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

Vous pouvez supprimer le content et les répertoires public en exécutant les commandes suivantes.

rm -rf content
rm -rf public

Ajoutez respectivement vos propres contenus et actifs dans le content et les répertoires public .

Installation

Installez les dépendances en exécutant la commande suivante.

npm install
# or
yarn install

Enfin, exécutez la commande suivante pour démarrer le serveur de développement.

npm run dev
# or
yarn dev

Ouvrez http: // localhost: 3000 avec votre navigateur pour voir le résultat.

Remarque : vous devez créer un fichier .env dans le répertoire racine et ajouter les variables d'environnement suivantes pour faire fonctionner l'intégration Spotify.

SPOTIFY_CLIENT_ID=yourspotifyclientid
SPOTIFY_CLIENT_SECRET=yourspotifyclientsecret
SPOTIFY_REFRESH_TOKEN=yourspotifyrefreshtoken

Vous pouvez obtenir le SPOTIFY_CLIENT_ID et SPOTIFY_CLIENT_SECRET à partir du tableau de bord du développeur Spotify. Vous pouvez obtenir le SPOTIFY_REFRESH_TOKEN à partir de la console API Web Spotify.