## Resumo Aqui vou mostrar, como fiz meu site e o porque escolhi algumas bibliotecas, tentei ser o mais coeso possível, mostrei algumas parte de código de como usar umas bibliotecas mas se caso ficar alguma duvida pode entrar em contato comigo que ficarei feliz em tirar sua duvida, se caso tem uma critica construtiva pode me chamar para conversar que ficarei feliz em conversa com você. Meu [Linkedin](https://www.linkedin.com/in/wendeson-gomes-70a9ab18b/) ou [Email](mailto:wendeson.g.slv@gmail.com) ## O que usei para construir o site! Para construir o site, tentei fazer algo rápido e prático, onde não precisasse demorar muito para construir as coisas, então usei o: - Nextjs - Tailwindcss - Tailwind-Typography - Shadcn ui - Marked - Date-fns - Hygraph CMS acho que todo mundo deve tá cansado de ver nextjs, tailwindcss e shadcn, mas temos que concordo que esses 3 junto agiliza muito para um projeto pequeno, e vários projetos grandes hoje em dia usam essas bibliotecas, o **Marked** usei para fazer automaticamente a transformação do Markdown em HTML e para estilizá-lo usei o **Tailwind-Typography** que com a penas uma className todo meu css é estilizado, o **Date-fns** usei para simplesmente para colocar as datas de uma forma mais fácil, e chegamos a parte principal do site o **hygraph CMS*, simplesmente praticamente tudo nesse site está lá, se você nunca usou e tem curiosidade de usar, vou mostrar como utilizei ele. ## Como usei o Marked e o Tailwind-Typography junto! Para quem não conhece esses dois (acho muito difícil), o **Marked** transforma todo seu texto Markdown em código HTML com simplesmente um código: ``` const texto = "# Titulo" const markdown = marked.parse(texto)

// Depois disso o # Titulo vai virar um:

Titulo

// e no site vai ficar desta forma abaixo. //

Titulo

``` Simples não? Agora vamos fazer só uma coisa muito simples, adicionar o **Tailwind-Typography** e depois colocar uma className chamada prose: ``` const texto = "# Titulo" const markdown = marked.parse(texto)

``` Pronto, simples, fácil e prático, sério, isso é muito rápido de fazer e sem dor de cabeça. ## Utilizando o Hygraph! Agora vamos para o **Hygraph**, na documentação deles, eles recomendam usar o **@apollo/client**. Tentei sinceramente de todas as formas e não consegui. Se você que está lendo sabe como utilizar ele, ficaria muito feliz que me ensinasse, eu colocaria seu crédito aqui. Mas continuando, para usar o **hygraph** usei do seguinte modo: ``` export const hygraph = async () => { try { const response = await fetch(process.env.HYGRAPH_URL!, { method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json', Authorization: `Bearer ${process.env.HYGRAPH_TOKEN}`, }, body: JSON.stringify({ query }), cache: 'no-store', }) if (!response.ok) { throw new Error('Error ao buscar a API') } const { data } = await response.json() return data as portfolioProps } catch (error) { console.error('Error ao buscar dados:', error) throw error } } ``` quando tenho que chamar essa função em algum lugar, uso desta forma: ``` const { abouts } = await hygraph() ``` Como a função está tipada, tenho todas as informações que preciso sem muito esforço e com a ajuda do TypeScript, não sei se foi a melhor forma de fazer isso, mas está servindo muito bem o proposito do site, mas caso você tenha alguma ideia melhor para melhorar isso, aceito sua ajuda e claro sempre vou dar os devidos créditos a todos que me ajudarem! ## Algumas features do meu site. Ao lado direito coloquei os tópicos da página, aonde se clicar em algum que interessou você, o site ira mostrar esse tópico a você, se caso você esta no celular este recurso fica em baixo da data de postagem desse post, quando você desce a página ele ficara preso na parte superior, você pode mover para os lados e procurar o tópico que quer, se caso queira compartilhar algum tópico com seu amigo, pode clicar no tópico que quer do Post, ele ficara de outra cor clicando nele, você ira copiar um URL, quando seu amigo clicar ele será redirecionado para esta página e será redirecionado automaticamente ao tópico! ## Porque do Design Minimalista. Deixei esse tópico para o final pelo simples modo de ser gosto meu haha, peguei um design da internet e fiz umas modificações, acho que um site aonde mostre suas habilidades é muito importante, mas quis nesse site mostrar mais algo técnico do que algo visual, eu amo animações e estudo atualmente o **gsap** se gosta de animações olhe essa biblioteca acho que você vai gostar também, por enquanto foi isso, agradeço a todos que chegaram até aqui! <3

Wendeson Gomes

Plann.er - React

Journey - React

Dependencias