Luther Angular 22 Portfolio Template Documentation

• Node.js: a version supported by Angular 22 (^22.22.3, ^24.15.0 or >=26). Download from nodejs.org.
• npm: version 8 or newer (included with Node.js).
• Angular CLI 22.
• A code editor such as VS Code.

1. Install Angular CLI

npm install -g @angular/cli

2. Open the template folder

cd bob-portfolio-angular-22

3. Install dependencies

npm install

4. Start the development server

npm start

Open http://localhost:4200/ in your browser. The app reloads automatically whenever you change a source file.

bob-portfolio-angular-22/
├── public/                    # favicon and static files
├── src/
│   ├── index.html
│   ├── main.ts
│   ├── styles.scss
│   ├── assets/
│   │   ├── images/            # profile, portfolio and author images
│   │   └── scss/              # variables, themes, sections, plugins
│   └── app/
│       ├── app.ts / app.html  # root component
│       ├── app.config.ts      # providers (router, http, animations)
│       ├── app.routes.ts      # index … index6 routes
│       ├── core/layout/       # header, header2, sidebar, footer, preloader, scrolltop, settingbox
│       ├── pages/             # index, index2 … index6 home pages
│       └── shared/
│           ├── components/    # abouts, contacts, homes, portfolios, pricings,
│           │                  # resumes, services, skills, testimonials …
│           ├── directives/    # counter, parallax, scrollspy, skills
│           └── services/      # navlink, settingbox (theme)
├── angular.json
└── package.json

Each home page is a standalone component registered in src/app/app.routes.ts. The root path redirects to /index.

To make a different home page your default, change the redirectTo value of the empty path in app.routes.ts.

Edit content from data files

Text, icons, prices and images come from typed data.ts files, so you rarely need to touch a template.

Replace images

Put your own photos in src/assets/images/ and update the file names in the matching data file.

Fonts and icons

Fonts (Poppins and Great Vibes) are imported in src/assets/scss/fonts/_fonts.scss. Icons come from Unicons, used like <i class="uil uil-camera"></i>.

Each home page is built by stacking section components. The top menu items are defined as a simple array in the page component, and the scrollspy directive highlights the active item while visitors scroll.

// src/app/pages/index/index.component.ts
navigations: Array<string> = ['Intro', 'About', 'Works', 'Contact'];

The order of the labels matches the order of the sections in the page template, where every section carries a data-scroll-index attribute. To add or remove a menu item:

1. Add or remove the section component in the page's .html file.
2. Update the navigations array in the page's .ts file so the labels and section order stay in sync.
3. Make sure the section component is listed in the page's imports.

Every home page supports dark and light mode through the theme switcher (the settingbox component) and the SettingBoxService. Both themes are included on every page, so visitors can switch at any time.

Theme colors live in src/assets/scss/_variables.scss:

$primary: #02E4C0;        // dark theme accent
$light-primary: #fa292a;  // light theme accent

Change these values (and the matching entries in the dark and light theme maps in the same file) to rebrand the whole template.

Packages

• @angular/animations
• @angular/common
• @angular/compiler
• @angular/core
• @angular/forms
• @angular/localize
• @angular/platform-browser
• @angular/router
• @iconscout/unicons
• @ng-bootstrap/ng-bootstrap
• aos
• bootstrap
• jarallax
• ng-particles
• ngx-owl-carousel-o
• ngx-page-scroll
• rxjs
• tslib
• tsparticles
• tsparticles-engine
• typed.js

Dev packages

• @angular/build
• @angular/cli
• @angular/compiler-cli
• @types/aos
• jsdom
• prettier
• typescript
• vitest

Known minor vulnerabilities

Last checked with npm audit on October 01, 2026. One moderate-severity advisory is reported, and it comes from a nested package, not from Luther's own code.

• uuid < 11.1.1 (moderate, GHSA-w5hq-g745-h8pq): missing buffer bounds check in v3/v5/v6 when a buf argument is passed. It is installed as a dependency of @iconscout/unicons (uuid 3.4.0). Luther never calls uuid, so the template is not affected. Re-run npm audit after updating @iconscout/unicons to check whether a newer release clears it.

Create an optimized production build:

npm run build

The output is written to the dist/ folder. Upload its contents to any static host. Because the template uses Angular routing, configure your server to serve index.html for unknown paths.

Hosting options

Any static host works. Popular choices:

• Netlify
• Vercel
• Firebase Hosting
• GitHub Pages
• Cloudflare Pages
• Nginx
• Apache

Server rewrite rule

Since routes such as /index2 are handled by Angular, send unknown paths to index.html. Example for Nginx:

location / {
  try_files $uri $uri/ /index.html;
}

Testing

Run unit tests with Vitest:

npm test

npm install fails

Check your Node.js version against the requirements above. Delete node_modules and package-lock.json only if you must, then run npm install again.

Port 4200 is already in use

npm start -- --port 4300

Page shows 404 after refresh on the live site

Add the rewrite rule shown in the Build & Deploy section so every path serves index.html.

Changes to SCSS variables do not appear

Stop and restart npm start, then hard-refresh the browser to clear cached styles.

Images are not showing

Confirm the file exists in src/assets/images/ and that the name in the data file matches exactly, including the extension and letter case.

• Angular
• Bootstrap
• ng-bootstrap
• Unicons
• AOS
• Typed.js
• Owl Carousel
• tsParticles
• Jarallax
• Poppins (Google Fonts)
• Great Vibes (Google Fonts)

Demo images are for preview purposes only. Replace them with your own before publishing.

Need help with the Luther Angular portfolio template? Check the troubleshooting and FAQ sections first. Contact LettstartDesign through the support link on your purchase page, and include your template version and a short description of the issue.