Esta aplicação consiste no meu site pessoal, desenvolvido com o Next.js, cujo o intuito é apresentar um pouco mais sobre mim, minhas skills, meus projetos, cursos e outros conteúdos que eu tenho o interesse que compartilhar na internet.
Além disso, o propósito do meu site é mostrar um pouco do meu trabalho, das minhas preferências, sendo todo o design de autoria própria.
Este projeto segue uma arquitetura Jamstack e, portanto, consiste apenas em um front-end, para o qual os dados são servidos por um CMS (Prismic CMS).
O site contém as seguintes páginas:
- Home: A página inicial do site. Contém um banner principal com uma foto, breve descrição e links para minhas redes sociais. Em seguida, uma seção com mais informações sobre mim, seguida por uma seção que apresenta meus principais projetos. Por fim, a última seção corresponde ao Blog, contendo os seis últimos posts.
- Cursos: Uma página listando cursos de autoria própria e disponíveis gratuitamente no YouTube.
- Blog: Uma página listando todos os meus posts do blog, com a opção de pesquisar por uma palavra-chave.
Primeiramente, é necessário ter o Git e o Node.js instalados em sua máquina. Com isso, abra o seu Git Bash (Windows) ou Terminal (Linux/macOS) e digite o comando:
git clone https://github.com/walissonsilva/personal-website.git
Ao terminar o download do repositório, utilize o comando cd personal-website para acessar a pasta do projeto.
Por fim, execute o comando npm install para instalar todas as dependências do projeto e, em seguida, npm run dev para subir o servidor.
Feito isso, basta acessar http://localhost:3000 no seu navegador para visualizar o projeto. 🚀
Os projetos do portfólio, cursos e posts do Blog não deverão aparecer na página, pois você não terá as chaves de acesso à minha conta do Prismic; no entanto, o restante da página será renderizado normalmente.
A aplicação foi construída utilizando:
- Next.js
- Styled-componentes para a criação de componentes estilizados
- Prismic CMS para a obtenção dos dados de portfólio, cursos e blog
- React Icons para os ícones
- TypeScript para a tipagem estática do JS e evitar erros no desenvolvimento
Você também pode acessar a paleta de cores por meio deste link. Se preferir, acesse o arquivo src/styles/themes/dark.ts para visualizar as cores e outros estilos padrões do projeto.
Walisson Silva
Feito com ❤️ por Walisson Silva 👋🏽
Entre em contato!
