commit 5828b2a46ad050227b46a927c2744be3a5dbc19f Author: GuiSantos1367890 <159533313+GuiSantos1367890@users.noreply.github.com> Date: Fri Jun 12 11:30:57 2026 +0100 remove node_modules diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..8bcd3a8 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,32 @@ +# syntax=docker/dockerfile:1 + +# ── Stage 1: build (Node) ─────────────────────────────────────────────────── +# Compila o site Vite. Corre `tsc -b` (gate de TypeScript) + `vite build`. +FROM node:22-alpine AS build +WORKDIR /app + +# Instala dependências primeiro (camada cacheável). +COPY package.json package-lock.json* ./ +RUN npm ci || npm install + +# Copia o resto do código e gera o build estático. +COPY . . +RUN npm run build + +# ── Stage 2: runtime (nginx) ──────────────────────────────────────────────── +# Imagem final isolada: serve `dist/` estático. Sem Node nem código-fonte. +FROM nginx:1.27-alpine AS runtime + +# Config nginx (SPA fallback + gzip + cache de assets). +COPY nginx.conf /etc/nginx/conf.d/default.conf + +# Conteúdo estático compilado. +COPY --from=build /app/dist /usr/share/nginx/html + +EXPOSE 80 + +# Healthcheck simples (página inicial responde 200). +HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \ + CMD wget -q --spider http://localhost/ || exit 1 + +CMD ["nginx", "-g", "daemon off;"] diff --git a/README.md b/README.md new file mode 100644 index 0000000..f08fb42 --- /dev/null +++ b/README.md @@ -0,0 +1,56 @@ +# RESILIENCE — Microsite + +Single-page institutional microsite for the **RESILIENCE** research project +(*Residential Energy-Efficiency Strategies Incorporating Lifecycle Sustainability +and Circular Economy*), INESC Coimbra. + +- **Project code (Streamline):** SLC20260008 +- **Client:** INESC Coimbra — Álvaro Gomes +- **Methodology:** Spec-Driven Development — see [`specs/`](./specs) + +## Stack +Vite · React · TypeScript · Tailwind CSS v4 · shadcn/ui · @tanstack/react-router +· framer-motion · lucide-react. + +## Getting started +```bash +npm install +npm run dev # dev server (http://localhost:5173) +npm run build # type-check (tsc -b) + production build +npm run preview # preview the production build +``` + +> **Requisito:** Node.js ≥ 18 e npm instalados e disponíveis no PATH. + +## Docker (funcionamento isolado — recomendado) +Não requer Node no host: o build corre dentro da imagem (multi-stage node→nginx). +```bash +docker build -t resilience-microsite . +docker run --rm -p 8080:80 resilience-microsite # http://localhost:8080 +# ou: +docker compose up --build +``` +Ver [`specs/06-deployment.md`](./specs/06-deployment.md) para detalhes. + +## Structure +``` +src/ + data/project.ts # conteúdo canónico (fonte: input_files/) + lib/ # utils + scroll helper + components/ + ui/ # primitivos shadcn (button, card, badge, dialog, sheet) + layout/ # Header, Footer, Section + sections/ # Hero, Goal, WorkPlan, Gantt, Indicators + App.tsx # composição da single page + router.tsx # @tanstack/react-router (rota /) +``` + +## Sections +Header (anchors: Home · Work plan · Indicators) → Hero → Goal & contribution → +Work plan (cards + interactive Gantt) → Indicators (clickable cards) → Footer +(partners + funding). + +## Notes +- Conteúdo em inglês; fonte de verdade em `input_files/` (não inventar conteúdo). +- Logos dos parceiros são placeholders até serem fornecidos (ver `specs/CHANGELOG.md`). +- Paleta navy institucional definida em `src/index.css` (afinável). diff --git a/boot.md b/boot.md new file mode 100644 index 0000000..c17ccbb --- /dev/null +++ b/boot.md @@ -0,0 +1,159 @@ +# Prompt de arranque + +# Contexto +Gestor de projeto na empresa Streamline, responsável pela área de web-design e web-development + +# Cliente +INESCC - Álvaro Gomes + +# Metodologia +Spec-driven development (SDD) + +# Regras de negócio +- Deve ser registado um código de projeto associado para cada situação +- Existem sistemas próprios da Streamline +- Existem sistemas associados a clientes específicos, algumas dedicadas, outras em sistemas partilhados da Streamline +- O site tem de ser obrigatoriamente em inglês, e deve seguir o design system do INESCC, mas também deve ser moderno e institucional, seguindo as melhores práticas de UX/UI + +# Objetivos +Manter uma estrutura de pastas para fazer perfil e guardar histórico e rastreabilidade de caracterização, manutenção e operação da infraestrutura TI, para a própria empresa Streamline, mas também para os seus clientes que têm contratualizada a gestão da sua infraestrutura TI. + +# Tarefas do agente IA +- Implementar o frontend do projeto em react, seguindo os ficheiros presentes no input files. +- Arquitetura em react e pacotes utilizados: + - tantstack router - para âncoras e navegação entre secções com scroll suave + - shadcn (para componentes) + - tailwind (para estilos) + - motion para animações + - lucide para icones + +# Regras de prioridade +- Priorizar a implementação das secções principais e dos componentes mais importantes, seguindo a hierarquia apresentada nos ficheiros de input, e depois ir implementando os restantes componentes. +- Priorizar a implementação dos estilos do tailwind, seguindo as cores e estilos do design system do inescc, e depois ir ajustando os detalhes visuais e as animações. + +# Estrutura de entrega +- O projeto deve ser um micro-website de uma só página para apresentação de um projeto chamado "resilience", as informações acerca dele estão presentes no documento input_files\Notas Site.docx. + +# Critérios de aceitação +A aplicação deve arrancar com npm install e npm run dev, não pode ter erros de TypeScript, e as rotas principais devem estar acessíveis. + +# Critérios de instalação +- O projeto deve ser instalado utilizando npm, com um ficheiro package.json presente na raiz do projeto, e deve ser possível instalar as dependências utilizando o comando `npm install`. + +## Comandos por ordem de instalação de pacotes +1. npm create vite@latest +2. npm install tailwindcss @tailwindcss/vite +3. npm install -D @types/node +4. npx shadcn@latest init +5. npm i @tanstack/react-router @tanstack/react-router-devtools +6. npm i framer-motion +7. npm i lucide-react + +## Não esquecer de configurar o tsconfig.json para incluir os paths dos ficheiros de configuração do shadcn, tailwind e router +``` typescript +{ + "files": [], + "references": [ + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.node.json" + } + ], + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} +``` + +``` json +{ + "compilerOptions": { + // ... + "baseUrl": ".", + "paths": { + "@/*": [ + "./src/*" + ] + } + // ... + } +} +``` + +``` typescript +import path from "path" +import tailwindcss from "@tailwindcss/vite" +import react from "@vitejs/plugin-react" +import { defineConfig } from "vite" + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [react(), tailwindcss()], + resolve: { + alias: { + "@": path.resolve(__dirname, "./src"), + }, + }, +}) +``` + +# Regras de UX/UI +- Deve ser utilizado o design system shadcn para os componentes, e o tailwind para os estilos, seguindo as melhores práticas de design e usabilidade. +- O estilo visual deve ser institucional, mas moderno, seguindo as cores, botões e arredondamentos do inescc (https://www.inescc.pt/), e deve ser responsivo, adaptando-se a diferentes tamanhos de ecrã. +- Font: Outfit +- Animações, utilizando o motion, para transições suaves entre páginas e componentes, mas sem exageros, mantendo a simplicidade e a clareza da interface. + +# Regras sobre os input_files +Usar os ficheiros em input_files como fonte de verdade para conteúdo, estrutura e referências visuais. + +# Secções Obrigatórias +#### `Utiliza estrutura para organizar o conteúdo do microsite, seguindo a hierarquia apresentada nos ficheiros de input_files/Notas Site.docx` + +### Header +Nome do projeto e menu de navegação, seguindo o design system do shadcn para os componentes de header e menu, com ancoras para os seguintes tópicos: +- Home +- Work plan +- Indicadores + +### Hero +- Hero sobre o projeto: + - Nome + - Descrição + - Equipa + - Datas (inicio e fim) + - Project code + - Suporte financeiro + +### Objetivos e contributo +Esta secção apresenta de forma breve o objetivo central do projeto `Resilience`, o seu enquadramento e o contributo da equipa para a sua concretização. Deve explicar, em poucas linhas, qual o problema que o projeto aborda, qual a solução proposta e qual o impacto esperado para o cliente e para o contexto científico e técnico. +A apresentação deve combinar: + +- um texto introdutório breve `GOAL`; +- pontos-chave em destaque sobre o contributo da equipa; +- elementos visuais simples, como cartões ou ícones discretos; +- uma leitura fluida, com boa separação entre informação principal e secundária. + +### Work plan + - Secção interativa com o work plan - presente no documento input_files/Notas Site.docx, onde cada ponto do plano de trabalho é apresentado como um cartão, e ao dar hover no cartão `(desktop)` e clicar `(mobile)`, é apresentado um cronograma, cria esse componente em código, inspirado em shadcn, através da imagem input_files/cronograma.png. + +### Indicadores + - Secção de indicadores, onde são apresentados journals, conferências e outros indicadores de impacto do projeto, seguindo a estrutura apresentada no documento input_files/Notas Site.docx. + Cada um desses indicadores deve ser apresentado como um cartão, seguindo o design system do shadcn, e deve ser possível clicar em cada cartão para obter mais detalhes sobre o indicador. + +### Footer + - Logos dos parceiros, seguindo a hierarquia apresentada no documento input_files/Notas Site.docx, e seguindo o design system do shadcn para os cartões de cada parceiro - INESC Coimbra - Instituto de Engenharia de Sistemas e Computadores de Coimbra, Associação para o Desenvolvimento da Aerodinâmica Industrial, Instituto Politécnico de Coimbra – ISCAC. + +# Ordem de trabalhos +Antes de editar, apresentar um plano curto; depois, executar e no fim resumir o que foi alterado e o que ficou por fazer + +# Output +Criar pasta `specs/` com estrutura SDD + + +