@tsparticles/template-portfolio 4.1.3 → 4.2.1

package/template/solid/src/index.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/solid/src/main.tsx

@@ -0,0 +1,9 @@
+import "./index.css";
+import { render } from "solid-js/web";
+import App from "./App";
+
+const root = document.getElementById("root");
+
+if (root) {
+  render(() => <App />, root);
+}

package/template/stencil/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "{{packageName}}",
+  "private": true,
+  "version": "{{version}}",
+  "type": "module",
+  "scripts": {
+    "dev": "stencil build --dev --watch",
+    "build": "stencil build",
+    "preview": "stencil build --dev --watch"
+  },
+  "dependencies": {
+    "@tsparticles/stencil": "^4.1.3",
+    "@tsparticles/engine": "^4.0.0",
+    "@tsparticles/slim": "^4.0.0",
+    "@tsparticles/configs": "^4.0.0",
+    "@stencil/core": "^4.20.0"
+  },
+  "devDependencies": {
+    "typescript": "~5.8.0"
+  }
+}

package/template/stencil/src/components/app-home/app-home.tsx

@@ -0,0 +1,109 @@
+import { Component, State, h } from "@stencil/core";
+import { ParticlesBase } from "@tsparticles/stencil";
+import { loadSlim } from "@tsparticles/slim";
+import configs from "@tsparticles/configs";
+import type { ISourceOptions } from "@tsparticles/engine";
+
+const keys = Object.keys(configs);
+const randomKey = keys[Math.floor(Math.random() * keys.length)] as keyof typeof configs;
+const options: ISourceOptions = {
+  ...configs[randomKey],
+  fullScreen: { enable: true, zIndex: -1 },
+} as ISourceOptions;
+
+@Component({
+  tag: "app-home",
+  styleUrl: "app-home.css",
+  scoped: true,
+})
+export class AppHome {
+  @State()
+  private navItems = ["Home", "About", "Projects", "Skills", "Contact"];
+
+  @State()
+  private projects = [
+    { title: "Project One", desc: "A web application built with Stencil and TypeScript." },
+    { title: "Project Two", desc: "Real-time dashboard with data visualization." },
+    { title: "Project Three", desc: "Mobile-first e-commerce platform." },
+  ];
+
+  @State()
+  private skills = [
+    { name: "TypeScript", pct: 90 },
+    { name: "Stencil", pct: 85 },
+    { name: "Node.js", pct: 80 },
+    { name: "CSS", pct: 88 },
+  ];
+
+  connectedCallback(): void {
+    void ParticlesBase.init(async (engine) => {
+      await loadSlim(engine);
+    });
+  }
+
+  private handleSubmit(e: Event): void {
+    e.preventDefault();
+    alert("Message sent! (demo)");
+    (e.target as HTMLFormElement).reset();
+  }
+
+  render() {
+    return (
+      <div>
+        <ts-particles id="tsparticles" options={options}></ts-particles>
+        <nav id="navbar">
+          {this.navItems.map((item) => (
+            <a 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">
+              {this.projects.map((p) => (
+                <div 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>
+            {this.skills.map((s) => (
+              <div 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 id="contactForm" onSubmit={this.handleSubmit}>
+              <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>
+      </div>
+    );
+  }
+}

package/template/svelte/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "{{packageName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tsparticles/svelte": "^4.1.3"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "svelte": "^5.55.7",
+    "svelte-check": "^3.7.1",
+    "tslib": "^2.8.1"
+  }
+}

package/template/svelte/src/App.svelte

@@ -0,0 +1,289 @@
+<script lang="ts">
+  import Particles from "@tsparticles/svelte";
+  import type { ISourceOptions } from "@tsparticles/engine";
+  import configs from "@tsparticles/configs";
+
+  const keys = Object.keys(configs);
+  const randomKey = keys[Math.floor(Math.random() * keys.length)] as keyof typeof configs;
+
+  const options: ISourceOptions = {
+    ...configs[randomKey],
+    fullScreen: { enable: true, zIndex: -1 },
+  };
+
+  function handleSubmit(e: Event): void {
+    e.preventDefault();
+    alert("Message sent! (demo)");
+    const form = e.target as HTMLFormElement;
+    form.reset();
+  }
+</script>
+
+<nav id="navbar">
+  <a class="nav-link" href="#hero">Home</a>
+  <a class="nav-link" href="#about">About</a>
+  <a class="nav-link" href="#projects">Projects</a>
+  <a class="nav-link" href="#skills">Skills</a>
+  <a class="nav-link" href="#contact">Contact</a>
+</nav>
+
+<section id="hero" class="section">
+  <div class="hero-content">
+    <h1>Hi, I'm <span class="highlight">Alex</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>
+      I'm a passionate developer with experience building modern web applications.
+      I love creating elegant solutions to complex problems, and I'm always
+      exploring new technologies to stay at the cutting edge.
+    </p>
+  </div>
+</section>
+
+<section id="projects" class="section content-section">
+  <div class="container">
+    <h2>Projects</h2>
+    <div class="project-grid">
+      <div class="project-card">
+        <h3>Project Alpha</h3>
+        <p>A real-time collaboration platform built with modern web technologies.</p>
+      </div>
+      <div class="project-card">
+        <h3>Project Beta</h3>
+        <p>An AI-powered analytics dashboard for data-driven decision making.</p>
+      </div>
+      <div class="project-card">
+        <h3>Project Gamma</h3>
+        <p>A cross-platform mobile app for tracking personal fitness goals.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id="skills" class="section content-section">
+  <div class="container">
+    <h2>Skills</h2>
+    <div class="skill-bar">
+      <span class="skill-name">TypeScript</span>
+      <div class="bar"><div class="fill" style="width: 90%"></div></div>
+    </div>
+    <div class="skill-bar">
+      <span class="skill-name">React</span>
+      <div class="bar"><div class="fill" style="width: 85%"></div></div>
+    </div>
+    <div class="skill-bar">
+      <span class="skill-name">Node.js</span>
+      <div class="bar"><div class="fill" style="width: 80%"></div></div>
+    </div>
+    <div class="skill-bar">
+      <span class="skill-name">Python</span>
+      <div class="bar"><div class="fill" style="width: 75%"></div></div>
+    </div>
+    <div class="skill-bar">
+      <span class="skill-name">Svelte</span>
+      <div class="bar"><div class="fill" style="width: 70%"></div></div>
+    </div>
+  </div>
+</section>
+
+<section id="contact" class="section content-section">
+  <div class="container">
+    <h2>Contact</h2>
+    <form id="contactForm" onsubmit={handleSubmit}>
+      <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>
+
+<Particles id="tsparticles" options={options} />
+
+<style>
+  :global(*) {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  :global(html) {
+    scroll-behavior: smooth;
+  }
+
+  :global(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;
+  }
+</style>

package/template/svelte/src/main.ts

@@ -0,0 +1,12 @@
+import { mount } from "svelte";
+import { initParticlesEngine } from "@tsparticles/svelte";
+import { loadSlim } from "@tsparticles/slim";
+import App from "./App.svelte";
+
+void initParticlesEngine(async (engine) => {
+  await loadSlim(engine);
+});
+
+const app = mount(App, { target: document.getElementById("app")! });
+
+export default app;

package/template/vanilla/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Matteo Bruni
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/template/vanilla/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "{{projectName}}",
+  "name": "{{packageName}}",
   "private": true,
   "version": "1.0.0",
   "type": "module",

package/template/vue2/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "{{packageName}}",
+  "private": true,
+  "version": "{{version}}",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tsparticles/vue2": "^4.1.3",
+    "@tsparticles/engine": "^4.0.0",
+    "@tsparticles/slim": "^4.0.0",
+    "@tsparticles/configs": "^4.0.0",
+    "vue": "^2.7.16"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue2": "^2.3.0",
+    "typescript": "~5.8.0",
+    "vite": "^7.0.0"
+  }
+}