portfolio-angular — Angular 作品集模板

SHA-256: 216309e20046c71f6dbbb04b0601adc199beeff2567e5ac987f5ae44070980a4

2026-10-14T00:58:54.147Z

# Creative Studio Portfolio / Angular

[Leia em português](./README.pt-BR.md)

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE) ![Free](https://img.shields.io/badge/price-free-brightgreen)

A creative studio website with a sales back office, built with Angular 19 standalone components and Tailwind CSS v4. The public side shows the work: case studies with the challenge, what was done and the numbers that moved, a service catalogue with deliverables and pricing, an about page with the team and a timeline, a contact form and a four-step brief that turns a visitor into a lead. Behind the login sits the commercial side: a lead funnel you drag between stages, proposals with an item editor and discount, and CRUD for case studies, services and testimonials. Everything runs on mock data persisted to `localStorage`, so there is no backend to set up.

Live preview: https://template.dev.br/preview/portfolio-angular/

## Pages included

16 screens, covering the public site and the authenticated area:

- Home: hero, numbers, services, featured cases, process, testimonials, clients and a call to action
- Services: cards by category with deliverables and price, the five-step process, FAQ accordion
- Cases: search and category filter over the portfolio, with pagination
- Case detail: cover, client and year, challenge, solution, results, gallery, client quote and the next case
- About: story, working principles, team, timeline and client logos
- Contact: validated form that creates a lead, plus the contact channels
- Brief: four-step wizard (scope, budget and timeline, contact, review) that submits a lead
- Login and Register: standalone auth screens
- Dashboard: leads this month, open proposals, win rate, closed revenue, revenue and lead charts, funnel by stage and revenue by service
- Leads: kanban by stage with drag and drop, filters by source, detail drawer and one-click conversion into a proposal
- Proposals: list by status plus an item editor with quantity, unit price, discount and totals
- Case studies admin: CRUD with publish and feature toggles
- Services admin: CRUD with category, price, timeline and deliverables
- Testimonials: CRUD with approval, rating and link to a case
- Settings: profile, studio details, notifications, theme and language
- Not found: 404 page

## Tech stack

- Angular 19 with standalone components and the new control flow syntax
- Tailwind CSS v4, precompiled by `@tailwindcss/cli` (the npm scripts run it before ng)
- TypeScript 5.6 in strict mode
- Angular signals for the domain, auth and ui services
- Angular Router with lazy routes and an `authGuard` on the app area
- `@angular/service-worker` 19.2 for the PWA build
- Transloco 8.3 for i18n (en, es, pt-BR)
- ApexCharts 5 via ng-apexcharts
- Reactive forms for validation

## Requirements

- Node.js 18 or newer
- npm (the Angular CLI comes from the local devDependencies)

## Getting started

```bash
npm install
npm start      # ng serve at http://localhost:4200
```

Authentication is simulated in an Angular service, so no backend is required. Demo credentials:

- `[email protected]` / `demo123`

Any non-empty email and password logs in; the pair above is the account suggested on the login screen and the one the seed data belongs to.

## Build for production

```bash
npm run build
```

The Angular CLI writes the production build to `dist/`. The service worker is enabled in the production configuration, so test the PWA against the built output rather than `ng serve`.

## Project structure

```
public/assets/i18n/    en.json, es.json, pt-BR.json
src/
├── app/
│   ├── components/{layout,pf,ui}/
│   ├── core/{data,guards,services}/
│   ├── pages/{public,app}/
│   └── app.routes.ts
└── styles.css
```

## Theming and customization

Tailwind CSS v4 is configured in CSS, not in a JavaScript config file. The stylesheet imports Tailwind, declares the dark variant and defines the design tokens inside `@theme`: the Outfit font family, extra breakpoints and the brand color ramp (`--color-brand-25` through `--color-brand-950`). Semantic surface tokens use the `--tx-` prefix (sidebar, header, card, border, text). Dark mode is a class on the root element, toggled at runtime and persisted. To rebrand, change the brand ramp and the `--tx-` values together.

## Internationalization

Three locales ship in `public/assets/i18n/`: English, Spanish and Brazilian Portuguese. Transloco loads them at runtime and the header switcher persists the choice. Currency, dates and numbers are formatted per locale, so a proposal in Spanish shows euros and a Brazilian one shows reais.

## The same system in other stacks

The same system exists in five stacks, all sharing the screens and the visual identity, and all of them are free:

- React 19: https://github.com/danilo62x/portfolio-react
- Vue 3.5: https://github.com/danilo62x/portfolio-vue3
- Laravel 11 + Blade: https://github.com/danilo62x/portfolio-laravel
- Static HTML: https://github.com/danilo62x/portfolio-html

The full catalog of free and paid templates is at https://template.dev.br

## Support this project

This template is free and MIT licensed. If it saves you time, you can support the work with a donation at https://template.dev.br/doar?template=portfolio-angular

## License

[MIT](./LICENSE), copyright 2026 Danilo Quinelato.