mirsazzathossain.me
1.0.0
Este es el código fuente de mi sitio web personal MirsazzatheSin.me. Este sitio web de cartera académica es una presencia en línea integral y visualmente atractiva que muestra mis habilidades, logros y experiencias en mi campo de estudio. Construí el sitio web usando Next.js, un marco de JavaScript muy popular que permite la creación de aplicaciones web renderizadas y generadas por el servidor. Para garantizar un diseño moderno y profesional, utilicé CSS Tailwind, un marco CSS de utilidad primero, y me inspiró el tema de la atención de la interfaz de usuario de Tailwind. El contenido de mi sitio web se gestiona con la ayuda de ContentLayer, una plataforma que simplifica la creación y gestión del contenido, y está escrito en Markdown para una organización y formateo eficientes. Las publicaciones de blog en mi sitio web presentan un sistema de comentarios impulsado por Giscus, una plataforma de discusión basada en GitHub, que permite la comunicación interactiva y los comentarios de mi audiencia. Además, integré la API web de Spotify para mostrar mis canciones reproducidas recientemente en el sitio web y utilicé íconos de Heroicons para mejorar el atractivo visual de mi sitio web. Mi sitio web está alojado en Vercel, una plataforma de nube confiable para alojar sitios estáticos y funciones sin servidor, asegurando un acceso suave y rápido para todos los usuarios. En general, creo que mi sitio web de cartera académica demuestra mi dedicación a mantenerse actualizado con las tecnologías modernas y presenta una presencia en línea dinámica y visualmente llamativa.
En resumen, la pila tecnológica del sitio web es la siguiente:
app/* : He usado la estructura de directorio de la nueva app Next.js. Este directorio contiene la aplicación principal.components/* : Todos los componentes personalizados se almacenan en este directorio.content/* : Este directorio contiene todos los contenidos de contenido.public/* : Este directorio contiene todos los activos estáticos del sitio web.public/content/* : Este directorio contiene todos los contenidos estáticos del sitio web. por ejemplo, proyectos, experiencias, educación, etc.styles/* : He usado CSS de viento de cola para el estilo. Este directorio contiene los estilos globales CSS CSS y algunos estilos personalizados para el sitio web.utils/* : este directorio contiene algunas funciones de utilidad. Si desea clonar o desembolsar este repositorio, asegúrese de eliminar el content y los directorios public ya que contienen mi contenido y activos personales. Puede agregar su propio contenido y activos en el content y los directorios public , respectivamente.
Clonar el repositorio ejecutando el siguiente comando.
git clone https://github.com/mirsazzathossain/mirsazzathossain.me.git
# or
git clone [email protected]:mirsazzathossain/mirsazzathossain.me.git Puede eliminar el content y los directorios public ejecutando los siguientes comandos.
rm -rf content
rm -rf public Agregue su propio contenido y activos en el content y los directorios public respectivamente.
Instale las dependencias ejecutando el siguiente comando.
npm install
# or
yarn installFinalmente, ejecute el siguiente comando para iniciar el servidor de desarrollo.
npm run dev
# or
yarn devAbra http: // localhost: 3000 con su navegador para ver el resultado.
Nota : Debe crear un archivo .env en el directorio raíz y agregar las siguientes variables de entorno para que la integración de Spotify funcione.
SPOTIFY_CLIENT_ID=yourspotifyclientid
SPOTIFY_CLIENT_SECRET=yourspotifyclientsecret
SPOTIFY_REFRESH_TOKEN=yourspotifyrefreshtoken Puede obtener el SPOTIFY_CLIENT_ID y SPOTIFY_CLIENT_SECRET desde el panel de desarrolladores de Spotify. Puede obtener el SPOTIFY_REFRESH_TOKEN desde la consola de la API web de Spotify.
He utilizado los siguientes sitios web como inspiración para construir este sitio web.
Los estilos del sitio web están inspirados en el diseño del tema de Spotlight de Tailwind UI.
