@tsparticles/template-portfolio 4.1.3 → 4.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/README.md +3 -0
  3. package/package.json +4 -3
  4. package/template/angular/package.json +35 -0
  5. package/template/angular/src/app/app.component.css +180 -0
  6. package/template/angular/src/app/app.component.html +53 -0
  7. package/template/angular/src/app/app.component.ts +47 -0
  8. package/template/angular-confetti/package.json +36 -0
  9. package/template/angular-confetti/src/app/app.component.css +180 -0
  10. package/template/angular-confetti/src/app/app.component.html +53 -0
  11. package/template/angular-confetti/src/app/app.component.ts +47 -0
  12. package/template/angular-fireworks/package.json +36 -0
  13. package/template/angular-fireworks/src/app/app.component.css +180 -0
  14. package/template/angular-fireworks/src/app/app.component.html +53 -0
  15. package/template/angular-fireworks/src/app/app.component.ts +47 -0
  16. package/template/astro/package.json +21 -0
  17. package/template/astro/src/pages/index.astro +131 -0
  18. package/template/ember/app/templates/application.hbs +61 -0
  19. package/template/ember/package.json +25 -0
  20. package/template/inferno/package.json +23 -0
  21. package/template/inferno/src/App.css +180 -0
  22. package/template/inferno/src/App.tsx +100 -0
  23. package/template/jquery/package.json +23 -0
  24. package/template/jquery/src/main.ts +33 -0
  25. package/template/jquery/src/style.css +180 -0
  26. package/template/lit/package.json +22 -0
  27. package/template/lit/src/my-app.ts +117 -0
  28. package/template/lit/src/style.css +180 -0
  29. package/template/nextjs/package.json +25 -0
  30. package/template/nextjs/src/app/page.tsx +94 -0
  31. package/template/nextjs/src/app/providers.tsx +20 -0
  32. package/template/nuxt2/package.json +21 -0
  33. package/template/nuxt2/pages/index.vue +124 -0
  34. package/template/nuxt3/app.vue +116 -0
  35. package/template/nuxt3/package.json +22 -0
  36. package/template/nuxt4/app.vue +116 -0
  37. package/template/nuxt4/package.json +22 -0
  38. package/template/preact/package.json +22 -0
  39. package/template/preact/src/App.css +180 -0
  40. package/template/preact/src/App.tsx +98 -0
  41. package/template/qwik/package.json +22 -0
  42. package/template/qwik/src/App.tsx +104 -0
  43. package/template/react/package.json +19 -0
  44. package/template/react/src/App.css +180 -0
  45. package/template/react/src/App.tsx +85 -0
  46. package/template/riot/package.json +23 -0
  47. package/template/riot/src/app.riot +121 -0
  48. package/template/solid/package.json +18 -0
  49. package/template/solid/src/App.tsx +99 -0
  50. package/template/solid/src/index.css +180 -0
  51. package/template/solid/src/main.tsx +9 -0
  52. package/template/stencil/package.json +21 -0
  53. package/template/stencil/src/components/app-home/app-home.tsx +109 -0
  54. package/template/svelte/package.json +20 -0
  55. package/template/svelte/src/App.svelte +289 -0
  56. package/template/svelte/src/main.ts +12 -0
  57. package/template/vanilla/LICENSE +21 -0
  58. package/template/vue2/package.json +22 -0
  59. package/template/vue2/src/App.vue +273 -0
  60. package/template/vue3/package.json +19 -0
  61. package/template/vue3/src/App.vue +264 -0
  62. package/template/vue3/src/main.ts +14 -0
  63. package/template/webcomponents/package.json +21 -0
  64. package/template/webcomponents/src/main.ts +38 -0
  65. package/template/webcomponents/src/style.css +180 -0
package/template/webcomponents/src/style.css ADDED
@@ -0,0 +1,180 @@
1
+ * {
2
+ margin: 0;
3
+ padding: 0;
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ html {
8
+ scroll-behavior: smooth;
9
+ }
10
+
11
+ body {
12
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
13
+ color: #fff;
14
+ background: #0a0a1a;
15
+ }
16
+
17
+ #navbar {
18
+ position: fixed;
19
+ top: 0;
20
+ width: 100%;
21
+ z-index: 100;
22
+ display: flex;
23
+ justify-content: center;
24
+ gap: 2rem;
25
+ padding: 1rem;
26
+ background: rgba(10, 10, 26, 0.8);
27
+ backdrop-filter: blur(10px);
28
+ }
29
+
30
+ .nav-link {
31
+ color: rgba(255, 255, 255, 0.7);
32
+ text-decoration: none;
33
+ font-size: 0.9em;
34
+ transition: color 0.2s;
35
+ }
36
+
37
+ .nav-link:hover {
38
+ color: #6c5ce7;
39
+ }
40
+
41
+ .section {
42
+ min-height: 100vh;
43
+ display: flex;
44
+ align-items: center;
45
+ justify-content: center;
46
+ }
47
+
48
+ #hero {
49
+ position: relative;
50
+ }
51
+
52
+ .hero-content {
53
+ text-align: center;
54
+ z-index: 10;
55
+ }
56
+
57
+ .hero-content h1 {
58
+ font-size: 3.5em;
59
+ margin-bottom: 0.5rem;
60
+ }
61
+
62
+ .highlight {
63
+ color: #6c5ce7;
64
+ }
65
+
66
+ .subtitle {
67
+ font-size: 1.3em;
68
+ opacity: 0.7;
69
+ }
70
+
71
+ .content-section {
72
+ padding: 6rem 1rem;
73
+ min-height: auto;
74
+ }
75
+
76
+ .container {
77
+ max-width: 900px;
78
+ width: 100%;
79
+ margin: 0 auto;
80
+ }
81
+
82
+ h2 {
83
+ font-size: 2.2em;
84
+ margin-bottom: 2rem;
85
+ color: #6c5ce7;
86
+ }
87
+
88
+ p {
89
+ line-height: 1.7;
90
+ opacity: 0.85;
91
+ font-size: 1.1em;
92
+ }
93
+
94
+ .project-grid {
95
+ display: grid;
96
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
97
+ gap: 1.5rem;
98
+ }
99
+
100
+ .project-card {
101
+ background: rgba(255, 255, 255, 0.05);
102
+ border: 1px solid rgba(255, 255, 255, 0.1);
103
+ border-radius: 12px;
104
+ padding: 1.5rem;
105
+ transition: transform 0.2s, border-color 0.2s;
106
+ }
107
+
108
+ .project-card:hover {
109
+ transform: translateY(-4px);
110
+ border-color: #6c5ce7;
111
+ }
112
+
113
+ .project-card h3 {
114
+ margin-bottom: 0.5rem;
115
+ }
116
+
117
+ .skill-bar {
118
+ margin-bottom: 1.2rem;
119
+ }
120
+
121
+ .skill-name {
122
+ display: block;
123
+ margin-bottom: 0.3em;
124
+ font-size: 0.95em;
125
+ opacity: 0.8;
126
+ }
127
+
128
+ .bar {
129
+ height: 10px;
130
+ background: rgba(255, 255, 255, 0.1);
131
+ border-radius: 5px;
132
+ overflow: hidden;
133
+ }
134
+
135
+ .fill {
136
+ height: 100%;
137
+ background: linear-gradient(90deg, #6c5ce7, #a29bfe);
138
+ border-radius: 5px;
139
+ transition: width 1s ease;
140
+ }
141
+
142
+ #contactForm {
143
+ display: flex;
144
+ flex-direction: column;
145
+ gap: 1rem;
146
+ max-width: 500px;
147
+ }
148
+
149
+ #contactForm input,
150
+ #contactForm textarea {
151
+ padding: 0.8em 1em;
152
+ font-size: 1em;
153
+ border: 1px solid rgba(255, 255, 255, 0.1);
154
+ border-radius: 8px;
155
+ background: rgba(255, 255, 255, 0.05);
156
+ color: #fff;
157
+ outline: none;
158
+ font-family: inherit;
159
+ }
160
+
161
+ #contactForm input:focus,
162
+ #contactForm textarea:focus {
163
+ border-color: #6c5ce7;
164
+ }
165
+
166
+ #contactForm button {
167
+ padding: 0.8em;
168
+ font-size: 1em;
169
+ font-weight: 600;
170
+ border: none;
171
+ border-radius: 8px;
172
+ background: #6c5ce7;
173
+ color: #fff;
174
+ cursor: pointer;
175
+ transition: background 0.2s;
176
+ }
177
+
178
+ #contactForm button:hover {
179
+ background: #a29bfe;
180
+ }