Introdução

Hey guys, in only 12 minutes, we will build this website from scratch. The website is entirely written in python and even mobile responsive. To create the website, we will be using the streamlit library. I will show you very cool tips and tricks in streamlit, how to insert animations like this one and even how to implement a fully functional contact form.

Ok, and without further ado, let us get started.

Instalação e configuração inicial

Primeiro, precisamos instalar as dependências necessárias. Como já mencionado, usaremos o Streamlit para construir o site.

Abra o terminal/Prompt de comando e digite:

pip install streamlit

Após isso, vou criar um novo arquivo Python chamado app.py. Abra este arquivo no editor de sua preferência.

3. app.py – Configuração inicial

No topo do script, importo o Streamlit e configuro a página.

import streamlit as st

st.set_page_config(
    page_title="My Webpage",
    page_icon=":trophy:",
    layout="wide"
)

Observação: por padrão, o layout do Streamlit é centralizado. Queremos usar a tela inteira, então configuramos o layout para wide.

Ok, com isso pronto, vamos configurar o cabeçalho no próximo passo.

4. Cabeçalho e contexto

Para adicionar o cabeçalho, crio os componentes usando as funções do Streamlit. Acompanhe:

# ⬇️ ADICIONADO: Seção de cabeçalho
st.subheader("Hi, I am Sven :wave:")
st.title("A Data Analyst From Germany")
st.write("I am passionate about finding ways to use Python and VBA to be more efficient and effective in business settings.")
st.write("[Learn More >](https://pythonandvba.com)")

Esta é a parte textual adicional que contextualiza o leitor, e o link que leva a um blog (o texto entre colchetes aparece na página).

Com isso, vamos testar a página.

Teste da aplicação

Para executar, abra o terminal no diretório do app.py e rode:

streamlit1 app.py

Após pressionar Enter, o Streamlit abre o navegador exibindo a aplicação.

Ao visualizar, veremos o ícone da página, título da página, o subheader, o cabeçalho e o parágrafo adicional. Se clicarmos em “learn more”, seremos redirecionados ao website correspondente.

5. Organização do código em containers (opcional)

Conforme visto, envolvo os elementos em um container para organizar melhor o código.

# ⬇️ ADICIONADO: Container para organizar código
with st.container():
    st.subheader("Hi, I am Sven :wave:")
    st.title("A Data Analyst From Germany")
    st.write("I am passionate about finding ways to use Python and VBA to be more efficient and effective in business settings.")
    st.write("[Learn More >](https://pythonandvba.com)")

Esta etapa é opcional, mas ajuda a manter o código mais legível.

6. Inserindo uma animação com Lottie

Para deixar a página mais atraente, vamos inserir um arquivo de animação Lottie. Um arquivo Lottie é um JSON que representa a animação e funciona em qualquer dispositivo sem perda de qualidade.

Primeiro, encontre uma animação no LottieFiles.com. Registre-se, pesquise algo relacionado a código e copie a URL.

Em seguida, instale as bibliotecas necessárias:

pip install streamlit-lottie
pip install requests

Depois, importe as bibliotecas e crie a função para buscar o JSON da animação:

import requests
from streamlit_lottie import st_lottie

def load_lottieurl(url):
    r = requests.get(url)
    if r.status_code != 200:
        return None
    return r.json()

A URL da animação fica armazenada em uma variável e a exibimos com st_lottie:

lottie_url = "URL_AQUI"

st_lottie(load_lottieurl(lottie_url), height=300, key="coding")

Resultado: fica visível a animação ao lado do texto.

7. Mostrando trabalhos com texto e imagem (layout de duas colunas)

Vamos usar uma estrutura de duas colunas, onde a segunda coluna é o texto e tem o dobro do tamanho da imagem da primeira coluna.

# Exemplo de layout com duas colunas
col1, col2 = st.columns([1, 2])

# Coluna da esquerda (imagem)
with col1:
    image1 = Image.open("images/project1.png")
    st.image(image1, use_column_width=True)

# Coluna da direita (texto)
with col2:
    st.subheader("Projeto 1")
    st.write("Descrição do projeto 1. Link para o vídeo relacionado.")
    st.markdown("[Vídeo do projeto 1](https://youtu.be/EXEMPLO) 

Logo, vamos também inserir outra página com outro projeto, mantendo a mesma lógica.

8. Exibição de imagens com Pillow

Para trabalhar com imagens, instalamos Pillow e carregamos os arquivos da pasta images.

from PIL import Image

image_path1 = "images/project1.png"
image_path2 = "images/project2.png"

image1 = Image.open(image_path1)
image2 = Image.open(image_path2)

st.image(image1, caption="Project 1", use_column_width=True)
st.image(image2, caption="Project 2", use_column_width=True)

Crie a pasta images na raiz e coloque project1.png e project2.png dentro dela.

9. Novo projeto com outra imagem

Repetindo o padrão, com outra imagem e texto ajustado para o segundo projeto.

# Configuração semelhante ao anterior
col1, col2 = st.columns([1, 2])

with col1:
    image3 = Image.open("images/project2.png")
    st.image(image3, use_column_width=True)

with col2:
    st.subheader("Projeto 2")
    st.write("Descrição e link para o vídeo correspondente.")

10. Formulário de Contato totalmente funcional

Para o formulário, usamos o serviço gratuito Forms Submit. Acesse formsubmit.co e copie o código para a área de texto.

Cria-se uma variável com o HTML do formulário e injeta-se na página.

contact_form = """

  
  
  
  
  Send

"""

Para evitar que o formulário ocupe toda a tela, crio duas colunas e insiro o HTML na coluna esquerda com unsafe_allow_html.

col_left, col_right = st.columns([1, 1])
with col_left:
    st.markdown(contact_form, unsafe_allow_html=True)
with col_right:
    st.empty()

Agora, ao enviar uma mensagem, o formulário é utilizado sem sair da página.

11. Estilização com CSS externo

Para melhorar a aparência, crio uma pasta style e adiciono um CSS personalizado. A ideia é esconder a branding do Streamlit e deixar a aparência alinhada ao tema.

Conteúdo do CSS (style/style.css):

/* Estilização do formulário de contato */
input[type=text], input[type=email], textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
}

input[type=submit] {
    background-color: #04AA6D;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #45a049;
}

/* Remover branding do Streamlit */
#MainMenu {visibility: hidden;}
footer {visibility: hidden;}
header {visibility: hidden;}

Para aplicar o CSS no app, crio uma função para ler o conteúdo do arquivo e injetar no HTML da página:

def local_css(file_name):
    with open(file_name) as f:
        st.markdown(f'', unsafe_allow_html=True)

local_css("style/style.css")

Atualizando, o formulário fica com melhor estilo e o botão ganha efeito de hover.

12. Tema personalizado

Para alterar o tema, há uma página bem escrita de Streamlit com instruções. Crie o diretório .streamlit na raiz do seu app e adicione o config.toml com as cores desejadas.

[theme]
primaryColor = "#FF4B4B"
backgroundColor = "#0E1117"
secondaryBackgroundColor = "#262730"
textColor = "#FAFAFA"
font = "sans serif"

Após salvar, é preciso reiniciar a aplicação (parando com Ctrl+C e iniciando novamente) para aplicar o tema.

13. Estrutura de diretórios

Estrutura sugerida pelo autor:

web_page/
├── app.py
├── .streamlit/
│   └── config.toml
├── style/
│   └── style.css
└── images/
    ├── project1.png
    └── project2.png

14. Deploy e próximos passos

Você pode publicar rapidamente este site na internet de graça. O deployment leva apenas alguns minutos. O tutorial correspondente é linkado no card de informações do vídeo original.

Se tiver alguma dúvida, deixe nos comentários. Obrigado por acompanhar e até o próximo vídeo!