iagobruno.com

Meu portifólio para apresentação do meu trabalho, habilidades e projetos realizados.

Proibido modificar, distribuir ou fazer uso pessoal sem a prévia autorização, porém, sinta-se livre para estudar os códigos e fazer seu próprio portifólio.

Bibliotecas e ferramentas usadas

• React: Para componentizar o site.
• NextJS: Cria um website estático com server side rendering usando componentes do React.
• TypeScript: Para fazer a tipagem dos códigos e dos componentes.
• MDX: É um formato de arquivo que permite escrever JSX junto com markdown e usei ele para escrever os artigos do blog.
• Less: Foi o escolhido para pré-processar o css.
• ScrollReveal: Animar os blocos (header, about, ...) do site a medida em que eles vão aparecendo.
• next-css e next-less: Para permitir a importação de arquivos .css e .less dentro dos arquivos .js.
• Netlify: Foi o serviço escolhido para hospedar o website. Ver mais aqui.

Comandos

yarn run dev: Iniciar o servidor em modo de desenvolvimento com hot-reload.

yarn run build: Criar uma versão de produção minificada do site pronta para ser hospedada pela Netlify.

yarn run start: Iniciar a versão de produção na máquina local (requer que o comando "build" seja chamado antes).

yarn run generate-rss-feed: Exatamente, gera o feed rss e um cache de postagens do blog. (Ele é executado automaticamente antes dos comandos "dev" e "build".)

Estrutura de pastas

.
├── common
│   ├── functions.ts  // Contém funções e variáveis que são usadas mais de uma vez dentro do projeto
│   └── types.ts    // Tipos e interfaces comuns
├── components      // Pastas de componentes
│   ├── Header
│   │   └── Header.jsx
│   ├── Footer
│   └── ...
├── pages           // Páginas do site
│   ├── posts       // Contém as postagens do blog
│   │   ├── hello-world.mdx
│   │   └── ...
│   ├── index.js
│   ├── posts.js
│   └── ...
├── static          // Arquivos estáticos (imagens, svgs) para serem hospedados no site
│   ├── images
│   │   └── ...
│   └── favicon.ico
├── styles          // Pasta com arquivos de estilo
│   └── main.less
├── .gitignore
├── next.config.js  // Configurações do Next
├── package.json
└── README.md

Páginas e postagens

Para criar uma nova página basta criar um novo componente React dentro da pasta "pages" e o nome do arquivo será mapeado para o endereço do site, por exemplo: "pages/about.js" será acessado em "www.iagobruno.com/about"

Ver mais na documentação do Next.

Criar uma nova postagem

Todas as postagens são escritas usando MDX, que possibilita utilizar componentes do React junto com o markdown tradicional. Igual as páginas comuns, os arquivos .mdx dentro da pasta /pages/posts/ serão mapeados para o endereço do site.

Exemplo:

// pages/posts/hello-world.mdx
import PostPage from '../../components/PostPage/PostPage'

export const meta = {
  title: 'Olá mundo!', // Título da postagem
  summary: 'resumo', // Um breve resumo que irá aparecer nas redes sociais e no Google.
  publishDate: '2018-05-10T12:00:00Z', // ano-mês-dia hora-minuto-segundo
  image: '/static/...', // Capa da postagem
  slug: 'hello-world' // Exatamente o nome desse arquivo sem a extensão .mdx
};

Conteúdo da postagem...

export default ({ children }) => <PostPage {...meta}>{children}</PostPage>

A postagem acima poderá ser acessada em "www.iagobruno.com/posts/hello-world".

Componentes

Esse projeto usa um padrão de organização chamado "modlet" em que cada componente importante tem sua própria pasta e dentro dela possui todos os arquivos relativos aquele componente, por exemplo:

componentes
├── About
│   ├── About.jsx        // Componente
│   ├── About.less       // Estilos
│   ├── About.test.js    // Testes
│   └── About.mdx        // Documentação
└── ...

Estilização dos componentes

Há duas maneiras de estilizar os componentes, uma delas é criando um arquivo .less ou .css com somente os estilos dele e importá-lo e o outro é com o styled-jsx padrão do next. Exemplos:

Importando arquivo separado:

// Header/Header.js
import React from 'react'
import './Header.less'

export defult () => (
  <div className="header-container">...</div>
)

// Header/Header.less
.header-container {
  background: #EEEEEE;
  display: flex;
}
...

OBS: Durante o processo de build o next unifica todos os arquivos importados de todas as páginas em um único arquivo css global que é colocado automaticamente em todas as páginas visitadas pelo usuário, então, deve-se ficar atento futuramente para o usuário não ter que carregar muitos bytes de css desnecessários.

Usando o styled-jsx:

import React, { Fragment } from 'react'

export defult (props) => (
  <Fragment>
    <div className="header">...</div>

    <style jsx>{`
      .header-container {
        background: ${props.color || '#EEEEEE'};
        display: flex;
      }
    `}</style>
  </Fragment>
)

Com esse método é possível modificar o css sempre que o componente for atualizado como mostrado acima. Além disso, diferente da outra maneira, o next só coloca esse estilo na página se o componente for solicitado pela renderização, isso é bom para evitar carregamento desnecessário de css que não será usado.

Hospedagem

A Hospedagem fica por conta da Netlify que faz o deploy automático (Continuous deployment) a cada novo commit neste repositório remoto e distribui os arquivos estáticos gerados pelo NextJS.

Fluxograma:

Link do projeto na Netlify.

OBS: O domínio está registrado na Umbler.