Olá! 👋
Sou a Kiara, estudante de Engenharia de Software com foco em desenvolvimento Front-End.
Este projeto foi desenvolvido para apresentar meus projetos, certificados e evolução como desenvolvedora, com foco em design moderno, responsividade e experiência do usuário.
- 📱 Design totalmente responsivo (mobile, tablet e desktop)
- 🎯 Interface moderna e intuitiva
- ⚡ Navegação entre páginas
- 🎬 Animações e transições suaves
- 📂 Exibição de projetos e certificados
Antes de começar, você precisa ter instalado:
- Node.js (versão 14 ou superior)
- npm ou yarn
git clone https://github.com/kiaraengineer-dev/portfolio-react.git
cd portfolio-react
npm install
Se encontrar problemas de dependências de versões anteriores (peer dependencies), use:
npm install --legacy-peer-deps
Os dados do backend para este projeto (projetos e certificados) são gerenciados pelo Supabase.
- Vá para o Supabase e crie um novo projeto.
- Copie sua Project URL e sua anon public key. Você as encontra em Settings > API.
Execute o seguinte script SQL no SQL Editor do seu Supabase. Isso configurará as tabelas e políticas de segurança necessárias.
-- Cria a tabela 'projects' para os itens do portfólio
CREATE TABLE public.projects (
id bigint GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
created_at timestamp with time zone DEFAULT now() NOT NULL,
"Title" text,
"Description" text,
"Img" text,
"Link" text,
"Github" text,
"Features" jsonb,
"TechStack" jsonb
);
-- Cria a tabela 'certificates'
CREATE TABLE public.certificates (
id bigint GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
created_at timestamp with time zone DEFAULT now() NOT NULL,
"Img" text
);
-- Habilitar RLS
ALTER TABLE public.projects ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.certificates ENABLE ROW LEVEL SECURITY;
-- Políticas de Acesso Público para Leitura
CREATE POLICY "Acesso público de leitura para Projetos" ON public.projects FOR SELECT TO public USING (true);
CREATE POLICY "Acesso público de leitura para Certificados" ON public.certificates FOR SELECT TO public USING (true);
Crie um arquivo .env na raiz do projeto:
VITE_SUPABASE_URL=sua-url-do-supabase
VITE_SUPABASE_ANON_KEY=sua-chave-anon
Encontre essas informações no seu projeto Supabase em Configurações → API.
import { createClient } from '@supabase/supabase-js'
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY
if (!supabaseUrl || !supabaseKey) {
throw new Error('Credenciais do Supabase não encontradas. Verifique o arquivo .env')
}
export const supabase = createClient(supabaseUrl, supabaseKey)
Acesse o painel do Supabase → SQL Editor, Execute o script abaixo (apenas uma vez): OBS: A pasta de comments foi apagada desse projeto.
-- ============================
-- TABELAS
-- ============================
CREATE TABLE public.projects (
id bigint GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
title text,
description text,
img text,
link text,
github text,
features jsonb,
tech_stack jsonb,
is_published boolean DEFAULT true,
order_index int DEFAULT 0,
created_at timestamptz DEFAULT now()
);
CREATE TABLE public.certificates (
id bigint GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
img text,
created_at timestamptz DEFAULT now()
);
CREATE TABLE public.portfolio_comments (
id uuid DEFAULT gen_random_uuid() PRIMARY KEY,
content text NOT NULL,
user_name text NOT NULL,
profile_image text,
is_pinned boolean DEFAULT false,
created_at timestamptz DEFAULT now()
);
CREATE TABLE public.profiles (
id uuid PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE,
username text UNIQUE NOT NULL,
role text NOT NULL CHECK (role IN ('admin', 'user')),
created_at timestamptz DEFAULT now()
);
-- ============================
-- SEGURANÇA (RLS)
-- ============================
ALTER TABLE public.projects ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.certificates ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.portfolio_comments ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.profiles ENABLE ROW LEVEL SECURITY;
CREATE POLICY "Leitura pública de projetos"
ON public.projects FOR SELECT USING (true);
CREATE POLICY "Leitura pública de certificados"
ON public.certificates FOR SELECT USING (true);
CREATE POLICY "Leitura pública de comentários"
ON public.portfolio_comments FOR SELECT USING (true);
CREATE POLICY "Inserção pública de comentários"
ON public.portfolio_comments FOR INSERT
WITH CHECK (is_pinned = false);
CREATE POLICY "Admin gerencia projetos"
ON public.projects FOR ALL
USING (
EXISTS (
SELECT 1 FROM public.profiles
WHERE id = auth.uid() AND role = 'admin'
)
);
CREATE POLICY "Admin gerencia certificados"
ON public.certificates FOR ALL
USING (
EXISTS (
SELECT 1 FROM public.profiles
WHERE id = auth.uid() AND role = 'admin'
)
);
CREATE POLICY "Admin gerencia comentários"
ON public.portfolio_comments FOR UPDATE, DELETE
USING (
EXISTS (
SELECT 1 FROM public.profiles
WHERE id = auth.uid() AND role = 'admin'
)
);
-- ============================
-- STORAGE
-- ============================
INSERT INTO storage.buckets (id, name, public)
VALUES ('project-images', 'project-images', true)
ON CONFLICT DO NOTHING;
CREATE POLICY "Admin envia imagens de projetos"
ON storage.objects FOR INSERT
WITH CHECK (
bucket_id = 'project-images'
AND EXISTS (
SELECT 1 FROM public.profiles
WHERE id = auth.uid() AND role = 'admin'
)
);
CREATE POLICY "Leitura pública imagens de projetos"
ON storage.objects FOR SELECT
USING (bucket_id = 'project-images');
INSERT INTO storage.buckets (id, name, public)
VALUES ('certificate-images', 'certificate-images', true)
ON CONFLICT DO NOTHING;
CREATE POLICY "Admin envia imagens de certificados"
ON storage.objects FOR INSERT
WITH CHECK (
bucket_id = 'certificate-images'
AND EXISTS (
SELECT 1 FROM public.profiles
WHERE id = auth.uid() AND role = 'admin'
)
);
CREATE POLICY "Leitura pública imagens de certificados"
ON storage.objects FOR SELECT
USING (bucket_id = 'certificate-images');
Acesse a aplicação através do link exibido no seu terminal (geralmente http://localhost:5173).
Importante:
- Todas as variáveis de ambiente devem começar com
VITE_para que o Vite possa acessá-las. - Reinicie o servidor de desenvolvimento após criar ou modificar o arquivo
.env. - Nunca envie seu arquivo
.envpara o GitHub. Certifique-se de que ele está listado no seu arquivo.gitignore.
Se encontrar problemas ao rodar o projeto:
- Verifique se o Node.js está instalado corretamente.
- Verifique se você está no diretório correto do projeto.
- Certifique-se de que todas as dependências foram instaladas sem erros.
- Verifique se as credenciais no
.envestão corretas e se o servidor foi reiniciado. - Limpe o cache do navegador e tente novamente.
Se tiver dúvidas ou precisar de ajuda com a configuração, sinta-se à vontade para entrar em contato!
- Website: https://seu-site.com/
- GitHub: SeuUsuario
- E-mail:
⭐ Se este projeto te ajudou, considere dar uma estrela no GitHub!