@tsparticles/template-portfolio 4.1.3 → 4.2.0

package/template/react/src/App.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/react/src/App.tsx

@@ -0,0 +1,85 @@
+import Particles, { ParticlesProvider } from "@tsparticles/react";
+import { loadSlim } from "@tsparticles/slim";
+import configs from "@tsparticles/configs";
+import type { Engine, ISourceOptions } from "@tsparticles/engine";
+import "./App.css";
+
+async function init(engine: Engine): Promise<void> {
+  await loadSlim(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;
+
+export default function App() {
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    alert("Message sent! (demo)");
+    (e.target as HTMLFormElement).reset();
+  }
+
+  return (
+    <ParticlesProvider init={init}>
+      <Particles id="tsparticles" options={options} />
+      <nav id="navbar">
+        {["Home", "About", "Projects", "Skills", "Contact"].map((item) => (
+          <a key={item} href={`#${item.toLowerCase()}`} className="nav-link">{item}</a>
+        ))}
+      </nav>
+      <section id="hero" className="section">
+        <div className="hero-content">
+          <h1>Hello, I'm <span className="highlight">Your Name</span></h1>
+          <p className="subtitle">Full-Stack Developer &amp; Designer</p>
+        </div>
+      </section>
+      <section id="about" className="section content-section">
+        <div className="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" className="section content-section">
+        <div className="container">
+          <h2>Projects</h2>
+          <div className="project-grid">
+            {[{ 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." }
+            ].map((p, i) => (
+              <div key={i} className="project-card">
+                <h3>{p.title}</h3>
+                <p>{p.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+      <section id="skills" className="section content-section">
+        <div className="container">
+          <h2>Skills</h2>
+          {[{ name: "TypeScript", pct: 90 }, { name: "React", pct: 85 }, { name: "Node.js", pct: 80 }, { name: "CSS", pct: 88 }].map((s, i) => (
+            <div key={i} className="skill-bar">
+              <span className="skill-name">{s.name}</span>
+              <div className="bar"><div className="fill" style={{ width: `${s.pct}%` }}></div></div>
+            </div>
+          ))}
+        </div>
+      </section>
+      <section id="contact" className="section content-section">
+        <div className="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>
+    </ParticlesProvider>
+  );
+}

package/template/riot/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "{{version}}",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tsparticles/riot": "^4.1.3",
+    "@tsparticles/engine": "^4.0.0",
+    "@tsparticles/slim": "^4.0.0",
+    "@tsparticles/configs": "^4.0.0",
+    "riot": "^9.5.0"
+  },
+  "devDependencies": {
+    "@riotjs/vite": "^9.2.0",
+    "typescript": "~5.8.0",
+    "vite": "^7.0.0"
+  }
+}

package/template/riot/src/app.riot

@@ -0,0 +1,121 @@
+<app>
+  <vue-particles id="tsparticles" :options="state.options" />
+
+  <nav id="navbar">
+    <a each="{ item in state.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 each="{ p in state.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 each="{ s in state.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 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>
+
+  <script>
+    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)];
+
+    export default {
+      state: {
+        options: {
+          ...configs[randomKey],
+          fullScreen: { enable: true, zIndex: -1 },
+        },
+        navItems: ["Home", "About", "Projects", "Skills", "Contact"],
+        projects: [
+          { title: "Project One", desc: "A web application built with Riot and TypeScript." },
+          { title: "Project Two", desc: "Real-time dashboard with data visualization." },
+          { title: "Project Three", desc: "Mobile-first e-commerce platform." },
+        ],
+        skills: [
+          { name: "TypeScript", pct: 90 },
+          { name: "Riot", pct: 85 },
+          { name: "Node.js", pct: 80 },
+          { name: "CSS", pct: 88 },
+        ],
+      },
+      handleSubmit(e) {
+        e.preventDefault();
+        alert("Message sent! (demo)");
+        e.target.reset();
+      },
+    };
+  </script>
+
+  <style>
+    * { 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; }
+  </style>
+</app>

package/template/solid/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "solid-js": "^1.8.11",
+    "@tsparticles/solid": "^4.1.3"
+  },
+  "devDependencies": {
+    "vite-plugin-solid": "^2.8.2"
+  }
+}

package/template/solid/src/App.tsx

@@ -0,0 +1,99 @@
+import { onMount } from "solid-js";
+import Particles, { initParticlesEngine } from "@tsparticles/solid";
+import { loadSlim } from "@tsparticles/slim";
+import configs from "@tsparticles/configs";
+import type { ISourceOptions } from "@tsparticles/engine";
+
+export default function App() {
+  onMount(() => {
+    void initParticlesEngine(async (engine) => {
+      await loadSlim(engine);
+    });
+  });
+
+  const keys = Object.keys(configs);
+  const randomKey = keys[Math.floor(Math.random() * keys.length)] as keyof typeof configs;
+  const presetConfig = configs[randomKey] as Record<string, unknown>;
+
+  const options: ISourceOptions = {
+    ...presetConfig,
+    fullScreen: { enable: true, zIndex: -1 },
+  } as ISourceOptions;
+
+  function handleSubmit(e: Event) {
+    e.preventDefault();
+    alert("Message sent! (demo)");
+    const form = e.target as HTMLFormElement;
+    form.reset();
+  }
+
+  return (
+    <>
+      <nav id="navbar">
+        <a href="#hero" class="nav-link">Home</a>
+        <a href="#about" class="nav-link">About</a>
+        <a href="#projects" class="nav-link">Projects</a>
+        <a href="#skills" class="nav-link">Skills</a>
+        <a href="#contact" class="nav-link">Contact</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 class="project-card">
+              <h3>Project One</h3>
+              <p>A web application built with React and TypeScript.</p>
+            </div>
+            <div class="project-card">
+              <h3>Project Two</h3>
+              <p>Real-time dashboard with data visualization.</p>
+            </div>
+            <div class="project-card">
+              <h3>Project Three</h3>
+              <p>Mobile-first e-commerce platform.</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">CSS</span><div class="bar"><div class="fill" style="width: 88%"></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} />
+    </>
+  );
+}