@tsparticles/template-portfolio 4.1.3 → 4.2.1

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [4.2.1](https://github.com/tsparticles/tsparticles/compare/v4.2.0...v4.2.1) (2026-06-18)
+
+### Bug Fixes
+
+- fixed some various issues ([8534979](https://github.com/tsparticles/tsparticles/commit/85349791a4978f80f98f141a94a403a7e15785c0))
+
+# [4.2.0](https://github.com/tsparticles/tsparticles/compare/v4.1.3...v4.2.0) (2026-06-17)
+
+### Features
+
+- adding templates to cli create ([bc118ef](https://github.com/tsparticles/tsparticles/commit/bc118efa3f40497f9fa84186ac6102411a19fda7))

package/README.md

@@ -0,0 +1,3 @@
+# @tsparticles/template-portfolio
+
+tsParticles portfolio template. Use with `create-tsparticles-app` to scaffold a new portfolio project with animated particle background.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/template-portfolio",
-  "version": "4.1.3",
+  "version": "4.2.1",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -8,7 +8,8 @@
   "scripts": {
     "prebuild": "node scripts/prebuild.js",
     "build": "pnpm run prebuild",
-    "build:ci": "pnpm run prebuild"
+    "build:ci": "pnpm run prebuild",
+    "version": "pnpm run build && git add template.json"
   },
-  "gitHead": "0551736c55ae8eec3855a693af8a99b1b4420350"
+  "gitHead": "e2a7699c1f4212bbda4e6933970c062e6fc000dc"
 }

package/template/angular/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "{{packageName}}",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "dev": "ng serve",
+    "build": "ng build",
+    "preview": "ng serve",
+    "watch": "ng build --watch --configuration development"
+  },
+  "dependencies": {
+    "@angular/animations": "~22.0.0",
+    "@angular/common": "~22.0.0",
+    "@angular/compiler": "~22.0.0",
+    "@angular/core": "~22.0.0",
+    "@angular/forms": "~22.0.0",
+    "@angular/platform-browser": "~22.0.0",
+    "@angular/platform-browser-dynamic": "~22.0.0",
+    "@angular/router": "~22.0.0",
+    "@tsparticles/angular": "^4.1.3",
+    "@tsparticles/configs": "^4.0.0",
+    "@tsparticles/slim": "^4.0.0",
+    "rxjs": "~7.8.2",
+    "tslib": "^2.8.1",
+    "zone.js": "~0.16.2"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~22.0.0",
+    "@angular/cli": "~22.0.0",
+    "@angular/compiler-cli": "~22.0.0",
+    "typescript": "~6.0.3"
+  }
+}

package/template/angular/src/app/app.component.css

@@ -0,0 +1,180 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  color: #fff;
+  background: #0a0a1a;
+}
+
+#navbar {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 100;
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+  padding: 1rem;
+  background: rgba(10, 10, 26, 0.8);
+  backdrop-filter: blur(10px);
+}
+
+.nav-link {
+  color: rgba(255, 255, 255, 0.7);
+  text-decoration: none;
+  font-size: 0.9em;
+  transition: color 0.2s;
+}
+
+.nav-link:hover {
+  color: #6c5ce7;
+}
+
+.section {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#hero {
+  position: relative;
+}
+
+.hero-content {
+  text-align: center;
+  z-index: 10;
+}
+
+.hero-content h1 {
+  font-size: 3.5em;
+  margin-bottom: 0.5rem;
+}
+
+.highlight {
+  color: #6c5ce7;
+}
+
+.subtitle {
+  font-size: 1.3em;
+  opacity: 0.7;
+}
+
+.content-section {
+  padding: 6rem 1rem;
+  min-height: auto;
+}
+
+.container {
+  max-width: 900px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+h2 {
+  font-size: 2.2em;
+  margin-bottom: 2rem;
+  color: #6c5ce7;
+}
+
+p {
+  line-height: 1.7;
+  opacity: 0.85;
+  font-size: 1.1em;
+}
+
+.project-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+}
+
+.project-card {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 1.5rem;
+  transition: transform 0.2s, border-color 0.2s;
+}
+
+.project-card:hover {
+  transform: translateY(-4px);
+  border-color: #6c5ce7;
+}
+
+.project-card h3 {
+  margin-bottom: 0.5rem;
+}
+
+.skill-bar {
+  margin-bottom: 1.2rem;
+}
+
+.skill-name {
+  display: block;
+  margin-bottom: 0.3em;
+  font-size: 0.95em;
+  opacity: 0.8;
+}
+
+.bar {
+  height: 10px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.fill {
+  height: 100%;
+  background: linear-gradient(90deg, #6c5ce7, #a29bfe);
+  border-radius: 5px;
+  transition: width 1s ease;
+}
+
+#contactForm {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 500px;
+}
+
+#contactForm input,
+#contactForm textarea {
+  padding: 0.8em 1em;
+  font-size: 1em;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.05);
+  color: #fff;
+  outline: none;
+  font-family: inherit;
+}
+
+#contactForm input:focus,
+#contactForm textarea:focus {
+  border-color: #6c5ce7;
+}
+
+#contactForm button {
+  padding: 0.8em;
+  font-size: 1em;
+  font-weight: 600;
+  border: none;
+  border-radius: 8px;
+  background: #6c5ce7;
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+#contactForm button:hover {
+  background: #a29bfe;
+}

package/template/angular/src/app/app.component.html

@@ -0,0 +1,53 @@
+<ngx-particles id="tsparticles" [options]="options" />
+
+<nav id="navbar">
+  <a *ngFor="let item of navItems" [href]="'#' + item.toLowerCase()" class="nav-link">{{ item }}</a>
+</nav>
+
+<section id="hero" class="section">
+  <div class="hero-content">
+    <h1>Hello, I'm <span class="highlight">Your Name</span></h1>
+    <p class="subtitle">Full-Stack Developer &amp; Designer</p>
+  </div>
+</section>
+
+<section id="about" class="section content-section">
+  <div class="container">
+    <h2>About Me</h2>
+    <p>A passionate developer who loves building beautiful and performant web applications. Experienced in modern JavaScript frameworks, cloud infrastructure, and UI/UX design.</p>
+  </div>
+</section>
+
+<section id="projects" class="section content-section">
+  <div class="container">
+    <h2>Projects</h2>
+    <div class="project-grid">
+      <div *ngFor="let p of projects" class="project-card">
+        <h3>{{ p.title }}</h3>
+        <p>{{ p.desc }}</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id="skills" class="section content-section">
+  <div class="container">
+    <h2>Skills</h2>
+    <div *ngFor="let s of skills" class="skill-bar">
+      <span class="skill-name">{{ s.name }}</span>
+      <div class="bar"><div class="fill" [style.width.%]="s.pct"></div></div>
+    </div>
+  </div>
+</section>
+
+<section id="contact" class="section content-section">
+  <div class="container">
+    <h2>Contact</h2>
+    <form #contactForm="ngForm" (ngSubmit)="onSubmit(contactForm.form)">
+      <input type="text" placeholder="Your Name" required />
+      <input type="email" placeholder="Your Email" required />
+      <textarea placeholder="Your Message" rows="5" required></textarea>
+      <button type="submit">Send Message</button>
+    </form>
+  </div>
+</section>

package/template/angular/src/app/app.component.ts

@@ -0,0 +1,47 @@
+import { Component, OnInit } from "@angular/core";
+import { NgParticlesService } from "@tsparticles/angular";
+import { loadSlim } from "@tsparticles/slim";
+import configs from "@tsparticles/configs";
+import type { ISourceOptions } from "@tsparticles/engine";
+
+@Component({
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.css"],
+})
+export class AppComponent implements OnInit {
+  constructor(private readonly ngParticlesService: NgParticlesService) {}
+
+  options!: ISourceOptions;
+
+  navItems = ["Home", "About", "Projects", "Skills", "Contact"];
+  skills = [
+    { name: "TypeScript", pct: 90 },
+    { name: "React", pct: 85 },
+    { name: "Node.js", pct: 80 },
+    { name: "CSS", pct: 88 },
+  ];
+  projects = [
+    { title: "Project One", desc: "A web application built with React and TypeScript." },
+    { title: "Project Two", desc: "Real-time dashboard with data visualization." },
+    { title: "Project Three", desc: "Mobile-first e-commerce platform." },
+  ];
+
+  ngOnInit(): void {
+    const keys = Object.keys(configs);
+    const randomKey = keys[Math.floor(Math.random() * keys.length)] as keyof typeof configs;
+    this.options = {
+      ...(configs[randomKey] as ISourceOptions),
+      fullScreen: { enable: true, zIndex: -1 },
+    };
+
+    void this.ngParticlesService.init(async (engine) => {
+      await loadSlim(engine);
+    });
+  }
+
+  onSubmit(form: HTMLFormElement): void {
+    alert("Message sent! (demo)");
+    form.reset();
+  }
+}

package/template/angular-confetti/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "{{packageName}}",
+  "private": true,
+  "version": "{{version}}",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "dev": "ng serve",
+    "build": "ng build",
+    "preview": "ng serve",
+    "watch": "ng build --watch --configuration development"
+  },
+  "dependencies": {
+    "@angular/animations": "~22.0.0",
+    "@angular/common": "~22.0.0",
+    "@angular/compiler": "~22.0.0",
+    "@angular/core": "~22.0.0",
+    "@angular/forms": "~22.0.0",
+    "@angular/platform-browser": "~22.0.0",
+    "@angular/platform-browser-dynamic": "~22.0.0",
+    "@angular/router": "~22.0.0",
+    "@tsparticles/angular": "^4.1.3",
+    "@tsparticles/engine": "^4.0.0",
+    "@tsparticles/slim": "^4.0.0",
+    "@tsparticles/configs": "^4.0.0",
+    "rxjs": "~7.8.2",
+    "tslib": "^2.8.1",
+    "zone.js": "~0.16.2"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~22.0.0",
+    "@angular/cli": "~22.0.0",
+    "@angular/compiler-cli": "~22.0.0",
+    "typescript": "~6.0.3"
+  }
+}

package/template/angular-confetti/src/app/app.component.css

@@ -0,0 +1,180 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  color: #fff;
+  background: #0a0a1a;
+}
+
+#navbar {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 100;
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+  padding: 1rem;
+  background: rgba(10, 10, 26, 0.8);
+  backdrop-filter: blur(10px);
+}
+
+.nav-link {
+  color: rgba(255, 255, 255, 0.7);
+  text-decoration: none;
+  font-size: 0.9em;
+  transition: color 0.2s;
+}
+
+.nav-link:hover {
+  color: #6c5ce7;
+}
+
+.section {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#hero {
+  position: relative;
+}
+
+.hero-content {
+  text-align: center;
+  z-index: 10;
+}
+
+.hero-content h1 {
+  font-size: 3.5em;
+  margin-bottom: 0.5rem;
+}
+
+.highlight {
+  color: #6c5ce7;
+}
+
+.subtitle {
+  font-size: 1.3em;
+  opacity: 0.7;
+}
+
+.content-section {
+  padding: 6rem 1rem;
+  min-height: auto;
+}
+
+.container {
+  max-width: 900px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+h2 {
+  font-size: 2.2em;
+  margin-bottom: 2rem;
+  color: #6c5ce7;
+}
+
+p {
+  line-height: 1.7;
+  opacity: 0.85;
+  font-size: 1.1em;
+}
+
+.project-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+}
+
+.project-card {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 1.5rem;
+  transition: transform 0.2s, border-color 0.2s;
+}
+
+.project-card:hover {
+  transform: translateY(-4px);
+  border-color: #6c5ce7;
+}
+
+.project-card h3 {
+  margin-bottom: 0.5rem;
+}
+
+.skill-bar {
+  margin-bottom: 1.2rem;
+}
+
+.skill-name {
+  display: block;
+  margin-bottom: 0.3em;
+  font-size: 0.95em;
+  opacity: 0.8;
+}
+
+.bar {
+  height: 10px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.fill {
+  height: 100%;
+  background: linear-gradient(90deg, #6c5ce7, #a29bfe);
+  border-radius: 5px;
+  transition: width 1s ease;
+}
+
+#contactForm {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 500px;
+}
+
+#contactForm input,
+#contactForm textarea {
+  padding: 0.8em 1em;
+  font-size: 1em;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.05);
+  color: #fff;
+  outline: none;
+  font-family: inherit;
+}
+
+#contactForm input:focus,
+#contactForm textarea:focus {
+  border-color: #6c5ce7;
+}
+
+#contactForm button {
+  padding: 0.8em;
+  font-size: 1em;
+  font-weight: 600;
+  border: none;
+  border-radius: 8px;
+  background: #6c5ce7;
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+#contactForm button:hover {
+  background: #a29bfe;
+}

package/template/angular-confetti/src/app/app.component.html

@@ -0,0 +1,53 @@
+<ngx-particles id="tsparticles" [options]="options" />
+
+<nav id="navbar">
+  <a *ngFor="let item of navItems" [href]="'#' + item.toLowerCase()" class="nav-link">{{ item }}</a>
+</nav>
+
+<section id="hero" class="section">
+  <div class="hero-content">
+    <h1>Hello, I'm <span class="highlight">Your Name</span></h1>
+    <p class="subtitle">Full-Stack Developer &amp; Designer</p>
+  </div>
+</section>
+
+<section id="about" class="section content-section">
+  <div class="container">
+    <h2>About Me</h2>
+    <p>A passionate developer who loves building beautiful and performant web applications. Experienced in modern JavaScript frameworks, cloud infrastructure, and UI/UX design.</p>
+  </div>
+</section>
+
+<section id="projects" class="section content-section">
+  <div class="container">
+    <h2>Projects</h2>
+    <div class="project-grid">
+      <div *ngFor="let p of projects" class="project-card">
+        <h3>{{ p.title }}</h3>
+        <p>{{ p.desc }}</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id="skills" class="section content-section">
+  <div class="container">
+    <h2>Skills</h2>
+    <div *ngFor="let s of skills" class="skill-bar">
+      <span class="skill-name">{{ s.name }}</span>
+      <div class="bar"><div class="fill" [style.width.%]="s.pct"></div></div>
+    </div>
+  </div>
+</section>
+
+<section id="contact" class="section content-section">
+  <div class="container">
+    <h2>Contact</h2>
+    <form #contactForm="ngForm" (ngSubmit)="onSubmit(contactForm.form)">
+      <input type="text" placeholder="Your Name" required />
+      <input type="email" placeholder="Your Email" required />
+      <textarea placeholder="Your Message" rows="5" required></textarea>
+      <button type="submit">Send Message</button>
+    </form>
+  </div>
+</section>

package/template/angular-confetti/src/app/app.component.ts

@@ -0,0 +1,47 @@
+import { Component, OnInit } from "@angular/core";
+import { NgParticlesService } from "@tsparticles/angular";
+import { loadSlim } from "@tsparticles/slim";
+import configs from "@tsparticles/configs";
+import type { ISourceOptions } from "@tsparticles/engine";
+
+@Component({
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.css"],
+})
+export class AppComponent implements OnInit {
+  constructor(private readonly ngParticlesService: NgParticlesService) {}
+
+  options!: ISourceOptions;
+
+  navItems = ["Home", "About", "Projects", "Skills", "Contact"];
+  skills = [
+    { name: "TypeScript", pct: 90 },
+    { name: "Angular", pct: 85 },
+    { name: "Node.js", pct: 80 },
+    { name: "CSS", pct: 88 },
+  ];
+  projects = [
+    { title: "Project One", desc: "A web application built with Angular and TypeScript." },
+    { title: "Project Two", desc: "Real-time dashboard with data visualization." },
+    { title: "Project Three", desc: "Mobile-first e-commerce platform." },
+  ];
+
+  ngOnInit(): void {
+    const keys = Object.keys(configs);
+    const randomKey = keys[Math.floor(Math.random() * keys.length)] as keyof typeof configs;
+    this.options = {
+      ...(configs[randomKey] as ISourceOptions),
+      fullScreen: { enable: true, zIndex: -1 },
+    };
+
+    void this.ngParticlesService.init(async (engine) => {
+      await loadSlim(engine);
+    });
+  }
+
+  onSubmit(form: HTMLFormElement): void {
+    alert("Message sent! (demo)");
+    form.reset();
+  }
+}