Creative Studio Portfolio / Angular

Leia em português

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

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

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

• estudio@agencia.com / 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

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, copyright 2026 Danilo Quinelato.