{"id":29016765,"url":"https://github.com/ffzanini/portfolio-personal","last_synced_at":"2026-04-09T11:04:13.827Z","repository":{"id":299132646,"uuid":"995459118","full_name":"ffzanini/portfolio-personal","owner":"ffzanini","description":"Protifolio v3 with Next15, Tailwind and TypeScript! 🛠️","archived":false,"fork":false,"pushed_at":"2025-06-23T20:05:42.000Z","size":5556,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-23T20:44:04.340Z","etag":null,"topics":["frontend","javascript","motion","next15","portifolio-page","tailwindcss","typescript","vercel"],"latest_commit_sha":null,"homepage":"https://ffzanini.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ffzanini.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-03T14:08:44.000Z","updated_at":"2025-06-23T20:05:45.000Z","dependencies_parsed_at":"2025-06-23T20:54:14.442Z","dependency_job_id":null,"html_url":"https://github.com/ffzanini/portfolio-personal","commit_stats":null,"previous_names":["ffzanini/portifolio-personal","ffzanini/portfolio-personal"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ffzanini/portfolio-personal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ffzanini%2Fportfolio-personal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ffzanini%2Fportfolio-personal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ffzanini%2Fportfolio-personal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ffzanini%2Fportfolio-personal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ffzanini","download_url":"https://codeload.github.com/ffzanini/portfolio-personal/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ffzanini%2Fportfolio-personal/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261966517,"owners_count":23237623,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["frontend","javascript","motion","next15","portifolio-page","tailwindcss","typescript","vercel"],"created_at":"2025-06-25T22:41:27.236Z","updated_at":"2026-04-09T11:04:13.822Z","avatar_url":"https://github.com/ffzanini.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Next.js-16-black?style=for-the-badge\u0026logo=next.js\" alt=\"Next.js\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/TypeScript-5.9-3178C6?style=for-the-badge\u0026logo=typescript\" alt=\"TypeScript\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Tailwind-4-38B2AC?style=for-the-badge\u0026logo=tailwind-css\" alt=\"Tailwind CSS\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/React-19-61DAFB?style=for-the-badge\u0026logo=react\" alt=\"React\" /\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003ePortfolio Pessoal · ffzanini.dev\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  Site institucional e portfólio profissional com i18n, tema claro/escuro e formulário de contato integrado ao Notion.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#-sobre-o-projeto\"\u003eSobre\u003c/a\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"#-funcionalidades\"\u003eFuncionalidades\u003c/a\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"#-tecnologias\"\u003eTecnologias\u003c/a\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"#-estrutura-do-projeto\"\u003eEstrutura\u003c/a\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"#-como-executar\"\u003eComo executar\u003c/a\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"#-contato\"\u003eContato\u003c/a\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"#-licença\"\u003eLicença\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n## 📋 Sobre o projeto\n\nEste repositório concentra a **versão 3** do portfólio pessoal ([ffzanini.dev](https://www.ffzanini.dev)), desenvolvido com foco em **performance**, **internacionalização** e **experiência do usuário**. O site apresenta página inicial, sobre mim, projetos e stack tecnológica de forma clara e visual, além de formulário de contato que persiste as mensagens em um banco **Notion** para gestão centralizada.\n\nO projeto foi desenvolvido com **Next.js**, **TypeScript** e **Tailwind CSS**, priorizando boa experiência em dispositivos móveis e desktop, SEO e acessibilidade.\n\n---\n\n## ✨ Funcionalidades\n\n- **Idiomas:** Português, Inglês e Espanhol (i18n)\n- **Tema:** Alternância entre modo claro e escuro com persistência da preferência\n- **Contato:** Formulário integrado ao Notion para recebimento e gestão de mensagens\n- **SEO:** Sitemap, metadados e estrutura semântica para indexação e leitores de tela\n- **Analytics:** Integração com Vercel Analytics e Speed Insights (opcional)\n- **Layout responsivo:** Adaptado para mobile, tablet e desktop\n\n---\n\n## 🛠 Tecnologias\n\n### Principais\n\n| Tecnologia | Uso |\n|------------|-----|\n| [Next.js](https://nextjs.org/) | Framework React, App Router, SSR, rotas dinâmicas |\n| [TypeScript](https://www.typescriptlang.org/) | Tipagem estática |\n| [Tailwind CSS](https://tailwindcss.com/) | Estilização e tema claro/escuro |\n| [React](https://react.dev/) | Interface e componentes |\n| [Vercel](https://vercel.com/) | Hospedagem e deploy |\n\n### Complementares\n\n| Tecnologia | Uso |\n|------------|-----|\n| [Framer Motion](https://motion.dev/) | Animações e transições |\n| [next-themes](https://github.com/pacocoursey/next-themes) | Tema claro/escuro |\n| [react-hook-form](https://react-hook-form.com/) | Formulário de contato com validação |\n| [@notionhq/client](https://github.com/makenotion/notion-sdk-js) | Persistência de mensagens no Notion |\n| [react-hot-toast](https://react-hot-toast.com/) | Notificações (toast) |\n| [react-icons](https://react-icons.github.io/react-icons/) | Ícones |\n| [react-medium-image-zoom](https://github.com/rpearce/react-medium-image-zoom) | Zoom em imagens |\n| [DOMPurify](https://github.com/cure53/DOMPurify) | Sanitização de HTML (XSS) |\n| [next-sitemap](https://github.com/iamvishnusankar/next-sitemap) | Geração de sitemap |\n| [clsx](https://github.com/lukeed/clsx) + [tailwind-merge](https://github.com/dcastil/tailwind-merge) | Classes condicionais e merge de estilos |\n| [Turbopack](https://turbo.build/pack) | Servidor de desenvolvimento (Next.js) |\n\n---\n\n## 📁 Estrutura do Projeto\n\n- **`src/app`** — Rotas (App Router), layouts, estilos globais, API e dados.\n- **`src/components`** — Componentes reutilizáveis (Navbar, Footer, Cards, etc.).\n- **`src/constants`** — Dados estáticos (stack, about, SEO, socials).\n- **`src/context`** — Contexto de internacionalização.\n- **`src/locales`** — Traduções (pt, en, es) por página.\n- **`src/providers`** — Providers (tema, i18n).\n- **`src/libs`** — Funções utilitárias (cn, animate, browser).\n- **`public`** — Imagens, fontes, PDFs e arquivos estáticos.\n\n---\n\n## 🚀 Como executar\n\n### Pré-requisitos\n\n- [Node.js](https://nodejs.org/) 18+ (recomendado: LTS)\n- npm, yarn ou pnpm\n- Conta no [Notion](https://www.notion.so/) (opcional; apenas para o formulário de contato)\n\n### Variáveis de ambiente (formulário de contato)\n\nPara o envio de mensagens para o Notion, crie um arquivo `.env.local` na raiz:\n\n```env\nNEXT_PUBLIC_NOTION_API_KEY=sua_chave_integration\nNEXT_PUBLIC_NOTION_DATABASE_KEY=id_do_banco_de_dados\n```\n\n- **Notion API Key:** em [Notion Integrations](https://www.notion.so/my-integrations), crie uma integração e use o \"Internal Integration Secret\".\n- **Database ID:** no banco onde as mensagens serão salvas, use \"Copy link\" e pegue o ID na URL.\n\nSem essas variáveis, o restante do site funciona; apenas o envio do formulário de contato ficará indisponível.\n\n### Passos\n\n**1. Clonar o repositório**\n\n```bash\ngit clone https://github.com/ffzanini/portfolio-personal.git\ncd portfolio-personal\n```\n\n**2. Instalar dependências**\n\n```bash\nnpm install\n```\n\n**3. Rodar em desenvolvimento**\n\n```bash\nnpm run dev\n```\n\nAcesse [http://localhost:3000](http://localhost:3000). O projeto usa Turbopack por padrão.\n\n**4. Build para produção**\n\n```bash\nnpm run build\nnpm start\n```\n\nO `postbuild` gera automaticamente o `sitemap.xml` (e `sitemap-0.xml` quando aplicável).\n\n**5. Lint**\n\n```bash\nnpm run lint\n```\n\n### Scripts disponíveis\n\n| Script | Descrição |\n|--------|-----------|\n| `npm run dev` | Sobe o servidor de desenvolvimento (Turbopack) |\n| `npm run build` | Gera o build de produção |\n| `npm run start` | Inicia o servidor em modo produção |\n| `npm run lint` | Executa o ESLint |\n\n---\n\n## 👋 Contato\n\nDúvidas sobre o projeto, consultoria ou interesse em produtos digitais e desenvolvimento? Entre em contato:\n\n- **Site:** [ffzanini.dev](https://www.ffzanini.dev)\n- **LinkedIn:** [linkedin.com/in/ffzanini](https://www.linkedin.com/in/ffzanini/)\n\nOu utilize o formulário de contato disponível no próprio portfólio.\n\n---\n\n## 📄 Licença\n\nEste projeto está sob a licença [MIT](LICENSE).\n\n---\n\n\u003cp align=\"center\"\u003e\n  Feito com 💙 por Felipe Frantz Zanini\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fffzanini%2Fportfolio-personal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fffzanini%2Fportfolio-personal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fffzanini%2Fportfolio-personal/lists"}