Serena - Wellness & Pilates
estilo: "Clean, Moderno, Sofisticado" papel: "full web-design + front end" stack: ["HTML","CSS", "JS","Bootstrap"]Ver projeto
Olá! Eu sou a
Ângela
Gamito
Web Designer & Front End Developer
Desenho sites.
E faço-os mexer.
O meu superpoder?
Fazer com que o complicado pareça simples. Um pixel de cada
vez.
/ Sobre mim
Desenho.
Programo.
Ligo os dois mundos.
Sou web designer e front-end developer, algures entre o gosto pelo pixel perfeito e a satisfação de ver tudo a funcionar. Gosto de explorar ideias, experimentar soluções e criar experiências digitais que não ficam só bonitas - fazem sentido.
- UI / UX
- HTML / CSS / JS
arrasta e espreita as 2 realidades
<article class="card">
<img src="obra.webp" alt="Edifício" >
<h3>Estúdio A</h3>
<p>Arquitetura que inspira.</p>
<a class="btn" href="/projeto">Ver projeto</a>
</article>
<style>
/* card.css */
.card {
border-radius: 14px;
padding: 24px;
box-shadow: 0 20px 40px #0002;
}
.btn { background: var(--laranja); }
</style>
Layers▸ CardImagemTítuloTextoBotão
Card · 320 × 380
24
14px
Ângela
Estúdio A
Arquitetura que inspira.
Ver projeto/ O meu processo
Primeiro percebo.
Depois dou vida.
- 01 Perceber Qual é o problema, na realidade?
- 02 Pesquisar O tema, as pessoas, as referências...
- 03 Desenhar Estrutura e soluções, antes da beleza.
- 04 Estilizar Cor, tipografia, criar cada detalhe.
- 05 Dar vida Código, movimento, interação.
/ Skills
O que uso.
O que aprendo.
Trabalho diariamente com HTML, CSS e JavaScript, entre interfaces responsivas, bibliotecas e controlo de versões com Git. Gosto de experimentar ferramentas novas e o próximo passo é aprofundar os meus conhecimentos em React.
explora os ficheiros
export const design = {
ferramentas: ["figma", "illustrator", "photoshop"],
skill: ["UI & UX", "prototipagem", "design systems", "tipografia"]
};
//é aqui que liberto a criatividade
//e me esqueço que depois sou eu quem vai programar
- Figma
- UI & UX
- Photoshop
- Illustrator
export const frontend = {
base: ["HTML", "CSS", "JavaScript"],
libs: ["Bootstrap", "GSAP", "Lenis", "AOS","Animate.css",
"jQuery", "Fancybox"],
nextLibs: ["Tailwind.css", "Motion", "HTMX"],
cms: ["WordPress", "PHP"],
sempre: ["responsivo", "acessível", "user friendly"],
};
- HTML
- CSS
- JavaScript
- Bibliotecas
- Responsivo
- CMS
export const diaADia = {
versoes: "Git + GitHub",
editor: "VS Code",
build: "Vite",
testo: "em vários viewports, sempre",
};
// Ctrl + Z: o meu atalho favorito
- Git
- GitHub
- VS Code
- Vite
// neste momento…
const aprender = {
tecnologia: "React",
estado: "a começar",
proximo: ["componentes", "hooks", "estado"],
};
$ npm run aprender:react
componentes20%
hooks10%
estado5%
// em construção ▍
Ideias para o Pavilhão
problema: "site datado, sem identidade" ideia: "nova imagem e organização" papel: "full web-design + front end" stack: ["HTML","CSS","JS","GSAP","LENIS", "Bootstrap"]Ver projeto
Floresta
desafio: "construir a página com poucos materiais gráficos" estilo: "Criativo + Clean" papel: "full web-design + front end" stack: ["HTML","CSS","JS","Bootstrap","CMS"]Ver projeto
/ Playground
Pequenas ideias.
Grandes detalhes.
interage. carrega em </> para ver o código.
Theme switch
const on = sw.classList.toggle("is-on");
sw.setAttribute("aria-checked", on);
gsap.to(knob, { x: on ? 26 : 0,
rotation: on ? 180 : 0 });
gsap.to(preview, {
backgroundColor: on ? "#1c1917" : "#fbf6ef",
color: on ? "#f4ece3" : "#2a2018"
});
Button states
clica para enviar
gsap.timeline()
.to(label, { opacity: 0 })
.to(btn, { width: 48 })
.to(spinner, { opacity: 1 })
// ...a enviar
.to(btn, { backgroundColor: "#2f9e6b" })
.from(check, { strokeDashoffset: len });
Copy email
hello@exemplo.pt
Copiado!
await navigator.clipboard.writeText(text);
icon.className = "bi bi-check2";
gsap.fromTo(btn,
{ scale: 0.7 },
{ scale: 1, ease: "back.out(3)" }
);
Accordion
Um site que todos conseguem usar chega a mais pessoas e funciona melhor para todos.
Desenhar primeiro para o ecrã mais pequeno e ir acrescentando para ecrãs maiores.
Quando ajuda a perceber o que mudou. Se só enfeita, provavelmente não é preciso.
gsap.to(answer, {
height: open ? 0 : "auto",
duration: 0.4,
ease: "power3.out"
});
gsap.to(icon, { rotation: open ? 0 : 45 });