Ana | Portfólio

Olá, eu sou a Ana

Desenvolvedora Full Stack & Designer de Experiências

Sobre mim

Sou apaixonada por transformar ideias em realidade digital. Com foco em interfaces intuitivas e código limpo, busco sempre a melhor solução para o usuário final.

Projetos Selecionados

Projeto 1

E-commerce Moderno

Interface focada em conversão e UX.

Projeto 2

App de Finanças

Dashboards dinâmicos e intuitivos.

Projeto 3

Social Media UI

Redesign completo de plataforma social.

Vamos conversar?

Estou disponível para novos projetos e colaborações.

Enviar Email

/* Reset básico */ * { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; line-height: 1.6; color: #333; background-color: #fff; } /* Navegação */ nav { display: flex; justify-content: space-between; align-items: center; padding: 2rem 10%; position: sticky; top: 0; background: #fff; z-index: 1000; } nav .logo { font-size: 1.5rem; font-weight: 700; letter-spacing: -1px; } nav .logo b { color: #6366f1; } nav ul { display: flex; list-style: none; } nav ul li { margin-left: 2rem; } nav ul li a { text-decoration: none; color: #333; font-weight: 400; transition: 0.3s; } nav ul li a:hover { color: #6366f1; } /* Hero */ header { height: 80vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 10%; } .hero-content h1 { font-size: 4rem; margin-bottom: 1rem; } .hero-content h1 span { color: #6366f1; } .hero-content p { font-size: 1.2rem; color: #666; margin-bottom: 2rem; } /* Botões */ .btn { background: #6366f1; color: #fff; padding: 1rem 2rem; text-decoration: none; border-radius: 5px; font-weight: bold; transition: 0.3s; } .btn:hover { background: #4f46e5; } .btn-outline { border: 2px solid #6366f1; color: #6366f1; padding: 0.8rem 2rem; text-decoration: none; border-radius: 5px; font-weight: bold; } /* Seções */ .container { padding: 5rem 10%; text-align: center; } .bg-light { background: #f9fafb; padding: 5rem 10%; } h2 { font-size: 2.5rem; margin-bottom: 3rem; } /* Grid de Projetos */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .card { background: #fff; padding: 1.5rem; border-radius: 10px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); transition: transform 0.3s; } .card:hover { transform: translateY(-10px); } .img-placeholder { background: #e5e7eb; height: 200px; display: flex; align-items: center; justify-content: center; border-radius: 5px; margin-bottom: 1rem; font-weight: bold; color: #9ca3af; } /* Footer */ footer { padding: 2rem; text-align: center; font-size: 0.9rem; color: #999; }