diff --git a/assets/images/hydra.png b/assets/images/hydra.png
new file mode 100644
index 0000000..3e811ce
Binary files /dev/null and b/assets/images/hydra.png differ
diff --git a/config.toml b/config.toml
index cd5c885..118f4f9 100644
--- a/config.toml
+++ b/config.toml
@@ -17,7 +17,10 @@ enableGitInfo = true
languageName = '日本語'
contentDir = 'content.ja'
weight = 2
-
+[languages.pt]
+ languageName = 'Portuguese | Português'
+ contentDir = 'content.pt'
+ weight = 3
[menu]
# [[menu.before]]
diff --git a/content.pt/_index.md b/content.pt/_index.md
new file mode 100644
index 0000000..b32a8f3
--- /dev/null
+++ b/content.pt/_index.md
@@ -0,0 +1,25 @@
+---
+---
+# O que é Hydra?
+
+
+Hydra é um sintetizador de vídeo para codificação ao vivo (livecoding) que funciona no navegador. É software livre e pode ser usado tanto por iniciantes como por profissionais. Você pode simplesmente abrir o [hydra web editor](https://hydra.ojack.xyz) em um laptop ou dispositivo móvel para começar.
+
+Hydra é escrito em JavaScript e compila para WebGL por trás das cortinas. Sua sintaxe foi inspirada em sistemas analógicos e modulares de síntese de vídeo, onde são gerados visuais através da interconexão de sinais com diversas transformações.
+
+#### Hydra pode ser usado para:
+
+- mesclar e adicionar efeitos a imagens de uma câmera, uma captura de tela, transmissões ao vivo ou vídeos
+- criar visuais generativos e áudio reativos e compartilhar na internet com outras pessoas
+- combinar com outras bibliotecas de JavaScript, como p5.js, Tone.js, THREE.js ou gibber
+- adicionar efeitos de vídeo interativos em um website
+- experimentar e aprender sobre retroalimentação de vídeo (feedback), fractais e outras operações visuais
+- transmitir vídeo entre navegadores e fazer jams online com outras pessoas
+
+#### Demais recursos e próximos passos
+
+Para mais instruções e informações, acesse: [a documentação interativa em português](learning/getting-started.md), [uma lista de funções hydra (inglês)](https://hydra.ojack.xyz/api/), [a base de dados comunitária de projetos e tutoriais (inglês)](https://hydra.ojack.xyz/garden/), [uma galeria de sketches feitos por usuários](https://twitter.com/hydra_patterns) e o [código fonte no github](https://github.com/hydra-synth/hydra).
+
+Hydra é uma criação de [olivia jack](https://ojack.xyz) apoiada por uma comunidade de colaboradores. Se você gosta de usar o Hydra, considere por favor [incentivar seu desenvolvimento contínuo](https://opencollective.com/hydra-synth).
+
+Próximo: [Começando](learning/getting-started.md)
diff --git a/content.pt/docs/learning/_index.md b/content.pt/docs/learning/_index.md
new file mode 100644
index 0000000..a845151
--- /dev/null
+++ b/content.pt/docs/learning/_index.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/content.pt/docs/learning/additional-topics.md b/content.pt/docs/learning/additional-topics.md
new file mode 100644
index 0000000..6076ae9
--- /dev/null
+++ b/content.pt/docs/learning/additional-topics.md
@@ -0,0 +1,202 @@
+---
+title: Tópicos Adicionais
+---
+
+# Tópicos Adicionais
+
+## live coding: avaliar linhas ou blocos de código separado
+
+Pressione `ctrl+enter` para executar uma linha de código.
+Pressione `shift+ctrl+enter` para avaliar um bloco de código.
+Dica: podemos alternar entre diferentes linhas de código para uma performance de live coding.
+
+```javascript
+osc().out() // executar esta primeira
+
+noise().mult(osc(10,0.1,10)).out() // experimente este
+```
+
+## arrays
+
+Arrays (listas) em Hydra são uma coleção sequenciada de valores. Podem ser usadas para alterar vários parâmetros no tempo.
+
+```javascript
+osc(10,0.1,[10,0,2,0.5]).out()
+
+shape([3,4,200,2]).out()
+```
+
+## audio
+
+Faça visuais reativos a áudio. O sinal de áudio funciona como um parâmetro de entrada e podemos multiplicar este valor a fim de alterar a quantidade de mudanças.
+
+```javascript
+osc(20,0.1, ()=>a.ff[0]*10).out()
+```
+
+
+## funções glsl personalizadas: https://hydra-book.glitch.me/#/glsl (inglês)
+
+
+## do documento antigo:
+
+## Passando funções como variáveis
+Cada parâmetro pode ser definido como uma função ao invés de uma variável estática. Por exemplo,
+```javascript
+osc(function(){return 100 * Math.sin(time * 0.1)}).out()
+```
+modifica a frequência do oscilador em uma função do tempo (tempo é uma variável global que representa os segundos que passaram desde o carregamento da página). Isto pode ser escrito de forma mais concisa usando a sintaxe es6:
+```javascript
+osc(() => (100 * Math.sin(time * 0.1))).out()
+```
+
+## Captura da área de trabalho
+Abra um diálogo para selecionar uma aba de tela a ser usada como textura de entrada:
+```javascript
+s0.initScreen()
+src(s0).out()
+```
+
+## Conectando a streams remotos
+Qualquer instância de Hydra pode usar outras instâncias/janelas contendo Hydra como fontes de entrada, desde que estejam conectadas à internet e não bloqueadas por um firewall. Hydra usa a webrtc (webstreaming em tempo real) em segundo plano para compartilhar fluxos de vídeo entre janelas abertas. O módulo incluso rtc-patch-bay gerencia conexões entre janelas conectadas e também pode ser usado como um módulo autônomo para converter qualquer website em uma fonte dentro de Hydra (veja fonte de câmera autônoma abaixo, por exemplo).
+
+Para começar, abra Hydra simultaneamente em duas janelas separadas.
+Em uma das janelas, defina um nome para a fonte de patch-bay dada:
+```javascript
+pb.setName("myGraphics")
+```
+O título da janela deve mudar para o nome inserido em `setName()`.
+
+A partir da outra janela, inicie "myGraphics" como uma fonte de stream.
+```javascript
+s0.initStream("myGraphics")
+```
+renderize para a tela:
+```javascript
+s0.initStream("myGraphics")
+src(s0).out()
+```
+As conexões às vezes levam alguns segundos para serem estabelecidas; abra o console do navegador para ver o progresso.
+Para listar as fontes disponíveis, digite o seguinte no console:
+```javascript
+pb.list()
+```
+
+## Usando p5.js com Hydra
+
+```javascript
+// Inicializa uma nova instância p5. Só é necessário chamar uma vez
+p5 = new P5() // {width: window.innerWidth, height:window.innerHeight, mode: 'P2D'}
+
+// desenha um retângulo no ponto 300, 100
+p5.rect(300, 100, 100, 100)
+
+// Note que P5 roda em modo instância, portanto, todas as funções precisam começar com a variável onde P5 foi inicializado (neste caso p5)
+// referência para P5: https://P5js.org/reference/ (inglês)
+// explicação do modo de instância: https://github.com/processing/P5.js/wiki/Global-and-instance-mode (inglês)
+
+// Durante o livecoding, a função "setup()" do P5.js basicamente não tem utilidade; qualquer coisa que for chamada em setup pode simplesmente ser chamada fora de qualquer função.
+
+p5.clear()
+
+for(var i = 0; i < 100; i++){
+ p5.fill(i*10, i%30, 255)
+ p5.rect(i*20, 200, 10,200)
+}
+
+// Para programar animações ao vivo, você pode redefinir a função de desenho do P5 da seguinte forma:
+// (um retângulo que segue o mouse)
+p5.draw = () => {
+ p5.fill(p5.mouseX/5, p5.mouseY/5, 255, 100)
+ p5.rect(p5.mouseX, p5.mouseY, 30, 150)
+}
+
+// Para usar P5 como entrada para Hydra, basta usar o canvas como fonte:
+s0.init({src: p5.canvas})
+
+// Depois, renderize o canvas
+src(s0).repeat().out()
+```
+
+## Carregando scripts externos
+A função `await loadScript()` permite carregar outras bibliotecas empacotadas Javascript dentro do editor da Hydra. Qualquer código Javascript pode ser executado no editor Hydra.
+
+Aqui está um exemplo usando o Three.js no editor web:
+```javascript
+await loadScript("https://threejs.org/build/three.js")
+
+scene = new THREE.Scene()
+camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
+
+renderer = new THREE.WebGLRenderer()
+renderer.setSize(width, height)
+material = new THREE.MeshBasicMaterial({color: 0x00ff00})
+geometry = new THREE.BoxGeometry()
+cube = new THREE.Mesh(geometry, material);
+scene.add(cube)
+camera.position.z = 1.5
+
+// 'update' é uma função reservada que será executada toda vez que o contexto de renderização principal de Hydra for atualizado
+update = () => {
+ cube.rotation.x += 0.01;
+ cube.rotation.y += 0.01;
+ renderer.render( scene, camera );
+}
+
+s0.init({ src: renderer.domElement })
+
+src(s0).repeat().out()
+```
+
+E aqui está um exemplo carregando a biblioteca Tone.js:
+```javascript
+await loadScript("https://unpkg.com/tone")
+
+synth = new Tone.Synth().toDestination();
+synth.triggerAttackRelease("C4", "8n");
+```
+
+
+
+## Responsividade a áudio
+A funcionalidade FFT está disponível por meio de um objeto de áudio acessado via "a". O editor usa https://github.com/meyda/meyda para análise de áudio. Para mostrar os compartimentos fft,
+```
+a.show()
+```
+Defina o número de compartimentos fft:
+```
+a.setBins(6)
+```
+Acesse o valor do compartimento mais à esquerda (frequência mais baixa):
+```
+a.fft[0]
+```
+Use o valor para controlar uma variável:
+```
+osc(10, 0, () => (a.fft[0]*4))
+ .out()
+```
+É possível calibrar a responsividade alterando o valor mínimo e máximo detectado (representado por linhas de desfoque sobre o fft). Para definir o valor mínimo detectado:
+```
+a.setCutoff(4)
+```
+
+Definir a escala altera o intervalo detectado.
+```
+a.setScale(2)
+```
+`fft[<índice>]` retornará um valor entre 0 e 1, onde 0 representa o corte e 1 corresponde ao máximo.
+
+Você pode definir a suavização entre as leituras de nível de áudio (valores entre 0 e 1). 0 corresponde a nenhuma suavização (mais saltos, tempo de reação mais rápido), enquanto 1 significa que o valor nunca mudará.
+```
+a.setSmooth(0.8)
+```
+Para ocultar a onda de áudio:
+```
+a.hide()
+```
+## MIDI (experimental)
+
+Controladores MIDI podem trabalhar com Hydra via WebMIDI. Um exemplo pode ser visto em [/docs/midi.md](https://github.com/ojack/hydra/blob/master/docs/midi.md).
+
+*Tradução por [A1219](https://github.com/a-1219) e [Vagné L.](https://github.com/muziekmutantti)*
diff --git a/content.pt/docs/learning/getting-started.md b/content.pt/docs/learning/getting-started.md
new file mode 100644
index 0000000..4600ef4
--- /dev/null
+++ b/content.pt/docs/learning/getting-started.md
@@ -0,0 +1,313 @@
+---
+title: Começando
+weight: 1
+---
+
+# Começando
+
+Este documento é uma introdução à criação de visuais ao vivo usando o Hydra. Abrange o básico da escrita de código no navegador para gerar e combinar fontes de vídeo em tempo real. Nenhuma experiência com programação ou vídeo é necessária!
+
+Quem quiser apenas começar em 60 segundos, também pode visitar:
+* [Getting started short version (inglês)](https://hackmd.io/@r08UjGF3QMCfvNmdjuY7iQ/rJCpsbNNc)
+
+Este tutorial é pensado para ser usado dentro do [editor web hydra](https://hydra.ojack.xyz/). Também é interativo -- podemos alterar o código em cada bloco para ver como isso afeta os visuais.
+
+### Conhecendo o editor do navegador
+Para começar, abra o [editor web hydra](https://hydra.ojack.xyz/) em uma janela separada. Feche a janela em destaque clicando no [x] no canto superior direito.
+
+
+
+Você verá alguns visuais coloridos em segundo plano com textos no canto superior esquerdo da tela. Este é o código que gera os visuais ao fundo.
+
+No canto superior direito, você encontrará uma barra de ferramentas com estes botões:
+
+1. **Executar tudo** executa todo o código na página (tecla de atalho *ctrl+shift+enter).
+2. **Fazer upload para a galeria** envia o sketch para a galeria da Hydra e cria um curto URL.
+3. **Limpar editor** redefine o ambiente e limpa o texto do editor.
+4. **Mostrar um sketch aleatório** carrega exemplos de esboços aleatórios. Sempre é uma boa maneira de aprender Hydra estudando o código de outra pessoa.
+5. **Aplicar mudanças aleatórias** modifica valores automaticamente. Experimente com alguns dos exemplos de esboço.
+6. **Mostrar janela de informação** mostra uma janela em sobreposição com texto de ajuda e links
+
+
+## Primeira linha de código
+
+Use o botão ***clear all*** 
+para apagar o sketch anterior.
+
+Em seguida, digite ou cole o seguinte no editor:
+```javascript
+osc().out()
+```
+Aperte o botão ***run*** 
para executar este código e atualizar os visuais. Você verá algumas listras rolando na tela.
+
+```hydra
+osc().out()
+```
+
+Isso cria um oscilador visual. Tente modificar os parâmetros do oscilador colocando um número dentro dos parênteses de `osc()`, por exemplo ```osc(10).out()```.
+
+Execute novamente o código pressionando o botão ***run*** novamente e vendo a atualização do visual. Tente adicionar outros valores para controlar os parâmetros `frequency` (frequência), `sync` (sincronização) e `color offset` (deslocamento de cor) do oscilador.
+
+```hydra
+osc(5, -0.126, 0.514).out()
+```
+
+
+*Dica: você também pode usar o atalho* **‘ctrl + shift + enter’** *para ter o mesmo efeito do botão executar.*
+
+
+## Adicionando transformações
+Podemos adicionar outra transformação ao oscilador acima, adicionando a função `rotate()` depois do oscilador:
+```hydra
+osc(5,-0.126,0.514).rotate().out()
+```
+
+Como você pode ver, temos primeiro uma fonte de entrada `osc()` ae as coisas que vêm depois (`rotate()` and `out()`) são conectadas com um ponto '.'
+Nesse sentido, Hydra é inspirado por [síntese modular](https://en.wikipedia.org/wiki/Modular_synthesizer) (inglês).
+Em vez de conectar cabos, você conecta diferentes tipos de funções javascript.
+
+###### fonte [Sandin Image Processor](https://en.wikipedia.org/wiki/Sandin_Image_Processor)
+
+Podemos continuar adicionando transformações a esta cadeia de funções. Por exemplo:
+```hydra
+osc(5,-0.126,0.514).rotate(0, 0.2).kaleid().out()
+```
+
+Repetir:
+```hydra
+osc(5,-0.126,0.514).rotate(0, 0.2).kaleid().repeat().out()
+```
+
+
+Para obter mais fontes e transformações disponíveis, consulte a [referência interativa de funções (inglês)](https://hydra.ojack.xyz/api).
+A lógica é começar com uma ***source*** (fonte) (como `osc()`, `shape()`, ou `noise()`), e depois adicionar transformações a ***geometry*** (geometria) e ***color*** (cor) (como `.rotate()`, `.kaleid()`, `.pixelate()`), e no final sempre conecte a cadeia de transformações à tela de saída `.out()`.
+
+
+```hydra
+noise(4).color(-2, 1).colorama().out()
+```
+
+```hydra
+shape(3).repeat(3, 2).scrollX(0, 0.1).out()
+```
+
+
+## O que é um erro?
+Às vezes, você tentará executar uma linha de código e nada acontecerá. Se você tiver um erro, notará um texto em vermelho na parte inferior esquerda da tela. Algo como ‘Unexpected token ‘.’ (em vermelho) aparecerá. Isso não afeta seu código, mas você não poderá continuar codificando até corrigir o erro. Geralmente é um erro de digitação ou algo relacionado à sintaxe.
+
+## O que é um comentário?
+
+```javascript
+// Olá, sou uma linha de comentários. Eu sou um texto que não vai mudar o seu código. Você pode escrever anotações, seu nome ou até mesmo um poema aqui.
+```
+
+## Salve seu esboço na internet
+
+
+Ao avaliar todo o código com o botão ***run*** ou com `shift + ctrl + enter`, o Hydra gera automaticamente uma URL que contém as últimas alterações do seu esboço. Podemos copiar e colar o url da barra de URL para salvá-lo ou compartilhá-lo com outras pessoas. É possível também usar as setas `voltar` e `avançar` do navegador para navegar para versões anteriores de seu esboço.
+
+
+## Usando a webcam
+Além de usar fontes de dentro do Hydra (como `osc()` e `shape()`), podemos usar o Hydra para processar fontes de vídeo externas, como uma webcam.
+Para inicializar a webcam, execute o seguinte código:
+```javascript
+s0.initCam()
+```
+
+Isso ativa a fonte da webcam dentro de uma variável chamada `s0`, e você deve ver a luz da sua webcam acender. No entanto, você ainda não verá a imagem da webcam na tela. Para usar a câmera em um esboço Hydra, você precisa usá-la dentro da função `src()`.
+
+```hydra
+s0.initCam() // inicializa a webcam como fonte externa 's0'
+src(s0).out() // usa a fonte externa 's0' dentro do Hydra
+```
+
+Semelhante à adição de transformações acima, podemos adicionar transformações de cor e geometria à saída da câmera, adicionando funções à cadeia:
+
+```hydra
+s0.initCam()
+src(s0).color(-1, 1).out()
+```
+
+```hydra
+s0.initCam()
+src(s0).color(-1, 1).kaleid().out()
+```
+
+Caso tenha várias webcams, poderá acessá-las separadamente adicionando um número dentro de `initCam`, por exemplo `s0.initCam(1)` ou `s0.initCam(2)`.
+
+
+
+
+## Saídas múltiplas
+
+Por padrão, o Hydra contém quatro saídas virtuais separadas que podem renderizar visuais diferentes e ser misturadas entre si para criar visuais mais complexos. As variáveis `o0`, `o1`, `o2` e `o3` correspondem às diferentes saídas.
+
+Para ver todas as quatro saídas de uma vez, use a função `render()`. Isso dividirá a tela em quatro, mostrando cada saída em uma seção diferente da tela.
+
+
+
+Usar uma variável diferente dentro da função `.out()` renderiza a cadeia para uma saída diferente. Por exemplo, `.out(o1)` renderizará uma cadeia de funções para o buffer gráfico `o1`.
+
+
+```hydra
+gradient(1).out(o0) // renderiza um gradiente para saída o0
+osc().out(o1) // renderiza voronoi para saída o1
+voronoi().out(o2) // renderiza voronoi na saída o2
+noise().out(o3) // renderiza ruído na saída o3
+
+render() // mostra todas as saídas
+```
+
+Por padrão, apenas a saída `o0` é renderizada na tela, enquanto o comando `render()` divide a tela em quatro. Mostre uma saída específica na tela adicionando-a dentro de `render()`, por exemplo, `render(o2)` para mostrar o buffer `o2`.
+
+
+```hydra
+gradient(1).out(o0) // renderiza um gradiente para saída o0
+osc().out(o1) // renderiza voronoi para saída o1
+voronoi().out(o2) // renderiza voronoi na saída o2
+noise().out(o3) // renderiza ruído na saída o3
+
+render(o2) // mostra apenas a saída o2
+```
+
+
+*Dica: tente criar esboços diferentes e trocá-los em sua performance ao vivo ou até mesmo combiná-los.*
+
+
+```hydra
+gradient(1).out(o0)
+osc().out(o1)
+render(o0) //switch render output
+// render(o1)
+```
+
+## Combinando várias fontes juntas
+Podemos usar funções ***blend*** (mescla/mistura) para combinar várias fontes visuais. `.blend()` combina as cores de duas fontes para criar uma terceira fonte.
+
+```hydra
+s0.initCam()
+
+src(s0).out(o0) // renderiza a webcam na saída o0
+
+osc(10).out(o1) // renderiza um oscilador na saída o1
+
+src(o0).blend(o1).out(o2) // começa com o0, mistura com o1 e envia para o2
+
+render() // renderiza todas as quatro saídas de uma vez
+```
+
+Tente adicionar transformações às fontes acima (como `osc(10).rotate(0, 0.1).out(o1)`) para ver como isso afeta a imagem combinada. Podemos também especificar a quantidade de mistura adicionando um parâmetro separado a `.blend()`, por exemplo `.blend(o1, 0.9)`.
+
+Há vários [modos de mescla (inglês)](https://en.wikipedia.org/wiki/Blend_modes) em Hydra, semelhantes aos modos de mesclagem que você pode encontrar em um programa gráfico como Photoshop ou GIMP. Veja a [referência de funções (inglês)](https://hydra.ojack.xyz/api/) para mais possibilidades.
+
+```hydra
+
+s0.initCam()
+
+src(s0).out(o0) // renderiza a webcam na saída o0
+
+osc(10).out(o1) // renderiza um oscilador na saída o1
+
+src(o0).diff(o1).out(o2) // combina sinais diferentes por diferença de cor (as partes escuras ficam invertidas).
+
+render() // renderiza todas as quatro saídas de uma vez
+```
+
+
+## Modulação
+Enquanto funções ***blend*** combinam as cores de duas fontes visuais, as funções ***modulate*** (modulação) usam as cores de uma fonte para afetar a geometria da segunda fonte. Isso cria uma espécie de efeito de deformação ou distorção. Uma analogia no mundo real seria olhar através de uma janela de vidro texturizada. `modulate()` não altera cor ou luminosidade, mas distorce uma fonte visual usando outra fonte visual.
+
+Usando as mesmas fontes acima, podemos usar um oscilador para modular ou distorcer a imagem da câmera:
+
+```hydra
+s0.initCam()
+
+src(s0).out(o0) // renderiza a webcam na saída o0
+osc(10).out(o1) // renderiza um oscilador na saída o1
+
+src(o0).modulate(o1).out(o2) // usa a fonte o1 para distorcer a fonte o0, áreas mais claras são distorcidas mais
+
+render() // renderiza todas as quatro saídas de uma vez
+```
+
+Você pode adicionar um segundo parâmetro à função `modulate()` para controlar a quantidade de distorção: `modulate(o1, 0.9)`. Neste caso, os canais vermelho e verde do oscilador estão sendo convertidos em deslocamento x e y da imagem da câmera.
+
+Todas as transformações de geometria têm funções de modulação correspondentes que permitem usar uma fonte para distorcer outra fonte. Por exemplo, `modulateRotate()` é semelhante a `rotate()`, porém nos permite aplicar diferentes intensidades de rotação em diferentes partes da fonte visual. Veja a [referência de funções](https://hydra.ojack.xyz/api/) para mais exemplos.
+
+```hydra
+s0.initCam()
+
+src(s0).out(o0) // renderiza a webcam na saída o0
+osc(10).out(o1) // renderiza um oscilador na saída o1
+
+src(o0).modulateRotate(o1, 2).out(o2)
+
+render() // renderiza todas as quatro saídas de uma vez
+```
+
+## Mais combinações e modulações
+
+Além de usar várias saídas para juntar imagens, podemos também pode combinar várias fontes dentro da mesma cadeia de funções, sem transformá-las em saídas separadas.
+
+```hydra
+osc(10, 0.1, 1.2).blend(noise(3)).out(o0)
+
+render(o0) // renderiza a saída o0
+```
+
+Isto permite utilizar muitas fontes, modos de combinação e modulação, tudo a partir da mesma cadeia de funções.
+
+```hydra
+osc(10, 0.1, 1.2).blend(noise(3)).diff(shape(4, 0.6).rotate(0, 0.1)).out()
+```
+
+*Dica: use `ctrl + shift + f` no editor web para formatar automaticamente seu código.*
+
+#### Modulando com a câmera
+```hydra
+s0.initCam() // carrega uma câmera
+
+shape().modulate(src(s0)).out() // forma modulada por uma câmera
+```
+```hydra
+s0.initCam() // carrega uma câmera
+
+src(s0).modulate(shape()).out() //câmera modulada por uma forma
+```
+
+
+
+
+
+
+```hydra
+
+noise().out(o1)
+shape().out(o3)
+
+src(o1).add(src(o3)).out(o2) // luz aditiva. A cor apenas fica mais brilhante
+
+render()
+```
+
+```hydra
+osc(10).out(o0)
+
+shape().out(o1)
+
+src(o0).diff(o1).out(o2) // combine diferentes sinais por diferença de cor (cor negativa/invertida/oposta).
+
+render()
+```
+```hydra
+osc().mult(src(o1)).out() // multiplica as fontes juntas
+shape(5).out(o1)
+```
+
+
+Cobrimos agora todos os tipos básicos de funções dentro de Hydra: ***source***, ***geometry***, ***color***, ***blending***, e ***modulation***! Descubra onde você pode chegar combinando elas.
+
+
+#### Aproveite!
+
+*Tradução por [A1219](https://github.com/a-1219) e [Vagné L.](https://github.com/muziekmutantti)*
diff --git a/content.pt/images/hydra.png b/content.pt/images/hydra.png
new file mode 100644
index 0000000..3e811ce
Binary files /dev/null and b/content.pt/images/hydra.png differ
diff --git a/content/_index.md b/content/_index.md
index c3bfbea..b313b7b 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -7,7 +7,7 @@ description: "tutorials and reference for using hydra"
---
# What is Hydra?
-
+
Hydra is a live code-able video synth and coding environment that runs directly in the browser. It is free and open-source, and made for beginners and experts alike. You can simply open the [hydra web editor](https://hydra.ojack.xyz) on a laptop or mobile device to get started.
@@ -27,6 +27,8 @@ For more information and instructions, see: [Getting Started](docs/quick-start.m
Hydra was created by [olivia jack](https://ojack.xyz) and is supported by a community of contributers. If you enjoy using Hydra, please consider [dontating to support continued development](https://opencollective.com/hydra-synth).
+Extra special thanks the [Clinic for Open Source Arts](https://clinicopensourcearts.org) for generously supporting the creation of this documentation website!
+
We recognize all types of contributions. This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Instructions to add yourself or add contribution emojis to your name are [here](https://github.com/hydra-synth/hydra/issues/265).
diff --git a/content/posts/hydra-meetup-8/index.md b/content/posts/hydra-meetup-8/index.md
new file mode 100644
index 0000000..4b2b7e0
--- /dev/null
+++ b/content/posts/hydra-meetup-8/index.md
@@ -0,0 +1,22 @@
+---
+title: "hydra meetup #8 is today!"
+author: "olivia"
+description: ""
+tags: [
+ # "grants"
+]
+date: "2023-11-21"
+categories: [
+ # "hydra-grants",
+ # "projects"
+]
+tags: ["meetup", "grants"]
+menu: "main"
+---
+
+ Join us today at 15:00UTC for [hydra meetup #8](https://hydra-meetup-8.glitch.me)! There will be talks from [hydra microgrant recipients](https://hydra.ojack.xyz/grants/recipients/) Aida El-Oweidy, David Matunda, and Vagné L., as well as a chance for show and tell.
+
+ Signups at: https://hydra-meetup-8.glitch.me
+
+ 
+
diff --git a/content/posts/hydra-meetup-8/meetup.png b/content/posts/hydra-meetup-8/meetup.png
new file mode 100644
index 0000000..d4d4956
Binary files /dev/null and b/content/posts/hydra-meetup-8/meetup.png differ