← Voltar ao Blog

Como Criei Meu Portfólio Profissional com React, Vite e TinaCMS

Conheça o processo de criação do meu portfólio profissional utilizando React, TypeScript, Vite, Tailwind CSS e TinaCMS, além dos desafios e aprendizados durante o desenvolvimento.

Por Anthonny Baia·
ReactTypeScriptViteTailwind CSSTinaCMSDesenvolvimento WebFrontendPortfólio SEOVercelProgramação Tecnologia
Como Criei Meu Portfólio Profissional com React, Vite e TinaCMS

Como Criei Meu Portfólio Profissional com React, Vite e TinaCMS

Criar um portfólio profissional sempre esteve entre meus objetivos. Mais do que apenas reunir projetos em uma página, eu queria construir um espaço que representasse minha trajetória, minhas habilidades e minha evolução como desenvolvedor.

Após pesquisar diversas alternativas, decidi desenvolver meu próprio portfólio utilizando React, TypeScript, Vite e Tailwind CSS. Além disso, implementei um blog integrado utilizando TinaCMS para compartilhar conhecimento e documentar projetos futuros.

O objetivo do projeto

Meu principal objetivo era criar uma plataforma moderna que servisse para:

- Apresentar meus projetos;

- Exibir certificações e experiências profissionais;

- Centralizar informações acadêmicas e técnicas;

- Publicar artigos sobre tecnologia, desenvolvimento de software e direito;

- Construir uma presença digital profissional.

Tecnologias utilizadas

Durante o desenvolvimento utilizei as seguintes ferramentas:

- React

- TypeScript

- Vite

- Tailwind CSS

- TinaCMS

- Vercel

Essa combinação permitiu criar uma aplicação rápida, moderna e com excelente experiência de navegação.

O desafio de implementar um blog

Inicialmente o portfólio seria apenas uma vitrine de projetos. No entanto, percebi que um blog poderia trazer benefícios importantes.

Além de compartilhar conhecimento, os artigos publicados ajudam no SEO e aumentam as chances de que outras pessoas encontrem o site por meio dos mecanismos de busca.

A implementação do TinaCMS exigiu algumas adaptações, mas o resultado final foi bastante satisfatório. Agora consigo criar e editar artigos de forma simples, sem precisar alterar manualmente o código do projeto.

O que aprendi durante o processo

O desenvolvimento deste portfólio reforçou diversos conhecimentos importantes:

- Estruturação de aplicações React;

- Organização de componentes reutilizáveis;

- Gerenciamento de conteúdo com CMS Headless;

- Hospedagem e deploy utilizando Vercel;

- Conceitos básicos de SEO;

- Planejamento de experiência do usuário.

Próximos passos

Pretendo continuar aprimorando o projeto com novas funcionalidades, melhorias de design e publicação frequente de conteúdos técnicos.

Este é apenas o primeiro artigo do blog e também um registro do início de uma jornada que pretendo construir de forma consistente ao longo dos próximos anos.

Obrigado pela visita e seja bem-vindo ao meu espaço na web.