mirsazzathossain.me Download - mirsazzathossain.me download de código fonte

mirsazzathossain.me

Código-Fonte de IA

1.0.0

Baixar

Pilha de tecnologia

mirsazzathossain.me

Este é o código -fonte do meu site pessoal mirsazzathossain.me. Este site de portfólio acadêmico é uma presença on -line abrangente e visualmente atraente que mostra minhas habilidades, realizações e experiências no meu campo de estudo. Eu construí o site usando o Next.js, uma estrutura JavaScript altamente popular que permite a criação de aplicativos da Web renderizados e gerados por servidores. Para garantir um design moderno e profissional, eu utilizei o Tailwind CSS, uma estrutura CSS da Utility, e fui inspirado no tema do Spotlight da Tailwind UI. O conteúdo do meu site é gerenciado com a ajuda do ContentLayer, uma plataforma que simplifica a criação e o gerenciamento do conteúdo e está escrito em Markdown para organização e formatação eficientes. As postagens do blog no meu site apresentam um sistema de comentários alimentado pelo GISCUS, uma plataforma de discussão baseada no Github, permitindo comunicação interativa e feedback do meu público. Além disso, integrei a API da Web do Spotify para mostrar minhas músicas recentemente tocadas no site e usei ícones dos heróicons para aprimorar o apelo visual do meu site. Meu site está hospedado na Vercel, uma plataforma em nuvem confiável para hospedar sites estáticos e funções sem servidor, garantindo acesso suave e rápido para todos os usuários. No geral, acredito que meu site de portfólio acadêmico demonstra minha dedicação em me manter atualizado com as tecnologias modernas e apresenta uma presença on-line dinâmica e visualmente impressionante.

Em suma, a pilha tecnológica do site é a seguinte:

Estrutura: next.js
Estilo: CSS de Tailwind
Ícones: Heroicons
Conteúdo: Markdown
Gerenciamento de conteúdo: ContentLayer
Implantação: vercel
Comentários: Giscus

Visão geral

app/* : Eu usei Next.js nova estrutura de diretório de app . Este diretório contém o aplicativo principal.
components/* : Todos os componentes personalizados são armazenados neste diretório.
content/* : Este diretório contém todos os conteúdos do ContentLayer.
public/* : Este diretório contém todos os ativos estáticos do site.
public/content/* : Este diretório contém todo o conteúdo estático do site. por exemplo, projetos, experiências, educação, etc.
styles/* : Eu usei CSS de Tailwind para estilo. Este diretório contém os estilos globais CSS do Tailwind CSS e alguns estilos personalizados para o site.
utils/* : Este diretório contém algumas funções de utilidade.

Clonagem e bifurcação

Se você deseja clonar ou forçar este repositório, remova o content e os diretórios public , pois eles contêm meu conteúdo e ativos pessoais. Você pode adicionar seu próprio conteúdo e ativos nos diretórios public e content , respectivamente.

Clone o repositório executando o seguinte comando.

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

Você pode remover o content e os diretórios public executando os seguintes comandos.

rm -rf content
rm -rf public

Adicione seu próprio conteúdo e ativos nos diretórios public e content , respectivamente.

Instalação

Instale as dependências executando o seguinte comando.

npm install
# or
yarn install

Por fim, execute o comando a seguir para iniciar o servidor de desenvolvimento.

npm run dev
# or
yarn dev

Abra http: // localhost: 3000 com seu navegador para ver o resultado.

NOTA : Você deve criar um arquivo .env no diretório raiz e adicionar as seguintes variáveis de ambiente para que a integração do Spotify funcione.

SPOTIFY_CLIENT_ID=yourspotifyclientid
SPOTIFY_CLIENT_SECRET=yourspotifyclientsecret
SPOTIFY_REFRESH_TOKEN=yourspotifyrefreshtoken

Você pode obter o SPOTIFY_CLIENT_ID e SPOTIFY_CLIENT_SECRET do painel do Spotify Developer. Você pode obter o SPOTIFY_REFRESH_TOKEN do Spotify Web API Console.