Skip to content

Commit de6aab1

Browse files
rocky2210rocky2210
committed
Magic box color fix
1 parent 886e45e commit de6aab1

File tree

2 files changed

+65
-72
lines changed

2 files changed

+65
-72
lines changed

‎index.html

+64-71
Original file line numberDiff line numberDiff line change
@@ -82,15 +82,15 @@ <h1 class="name" title="Rocky">Rocky</h1>
8282
<polygon
8383
transform="rotate(45 100 100)"
8484
stroke-width="1"
85-
stroke="hsl(138, 100%, 71%)"
85+
stroke="hsl(128, 100%, 68%)"
8686
fill="none"
8787
points="70,70 148,50 130,130 50,150"
8888
id="bounce"
8989
></polygon>
9090
<polygon
9191
transform="rotate(45 100 100)"
9292
stroke-width="1"
93-
stroke="hsl(138, 100%, 71%)"
93+
stroke="hsl(128, 100%, 68%)"
9494
fill="none"
9595
points="70,70 148,50 130,130 50,150"
9696
id="bounce2"
@@ -118,7 +118,7 @@ <h1 class="name" title="Rocky">Rocky</h1>
118118
transform="translate(20, 31)"
119119
stroke-width="2"
120120
stroke=""
121-
fill="hsl(138, 100%, 71%)"
121+
fill="hsl(128, 100%, 68%)"
122122
points="80,50 80,75 80,99 40,75"
123123
></polygon>
124124
<polygon
@@ -130,19 +130,15 @@ <h1 class="name" title="Rocky">Rocky</h1>
130130
></polygon>
131131
<defs>
132132
<linearGradient y2="100%" x2="0%" y1="-17%" x1="10%" id="gradiente2">
133-
<stop style="stop-color: hsla(138, 100%, 71%, 0)" offset="20%"></stop>
134-
<stop
135-
style="stop-color: hsla(138, 100%, 71%, 0.5); stop-opacity:1"
136-
offset="100%"
137-
id="animatedStop"
138-
></stop>
133+
<stop style="stop-color: hsla(128, 100%, 68%, 0)" offset="20%"></stop>
134+
<stop style="stop-color: hsla(128, 100%, 68%, 0.5); stop-opacity:1" offset="100%" id="animatedStop"></stop>
139135
</linearGradient>
140136
</defs>
141137
<polygon
142138
transform="rotate(180 100 100) translate(20, 20)"
143139
stroke-width="2"
144140
stroke=""
145-
fill="hsl(138, 100%, 71%)"
141+
fill="hsl(128, 100%, 68%)"
146142
points="80,50 80,75 80,99 40,75"
147143
></polygon>
148144
<polygon
@@ -154,38 +150,34 @@ <h1 class="name" title="Rocky">Rocky</h1>
154150
></polygon>
155151
<defs>
156152
<linearGradient y2="100%" x2="10%" y1="0%" x1="0%" id="gradiente3">
157-
<stop style="stop-color: hsla(138, 100%, 71%, 0)" offset="20%"></stop>
158-
<stop
159-
style="stop-color: hsla(138, 100%, 71%, 0.5); stop-opacity:1"
160-
offset="100%"
161-
id="animatedStop"
162-
></stop>
153+
<stop style="stop-color: hsla(128, 100%, 68%, 0)" offset="20%"></stop>
154+
<stop style="stop-color: hsla(128, 100%, 68%, 0.5); stop-opacity:1" offset="100%" id="animatedStop"></stop>
163155
</linearGradient>
164156
</defs>
165157
<polygon
166-
transform="rotate(45 100 100) translate(80, 95)"
167-
stroke-width="2"
168-
stroke=""
169-
fill="hsl(138, 100%, 71%)"
170-
points="5,0 5,5 0,5 0,0"
171-
id="particles"
172-
></polygon>
173-
<polygon
174-
transform="rotate(45 100 100) translate(80, 55)"
175-
stroke-width="2"
176-
stroke=""
177-
fill="hsl(138, 100%, 71%)"
178-
points="6,0 6,6 0,6 0,0"
179-
id="particles"
180-
></polygon>
181-
<polygon
182-
transform="rotate(45 100 100) translate(70, 80)"
183-
stroke-width="2"
184-
stroke=""
185-
fill="hsl(138, 100%, 71%)"
186-
points="2,0 2,2 0,2 0,0"
187-
id="particles"
188-
></polygon>
158+
transform="rotate(45 100 100) translate(80, 95)"
159+
stroke-width="2"
160+
stroke=""
161+
fill="hsl(128, 100%, 68%)"
162+
points="5,0 5,5 0,5 0,0"
163+
id="particles"
164+
></polygon>
165+
<polygon
166+
transform="rotate(45 100 100) translate(80, 55)"
167+
stroke-width="2"
168+
stroke=""
169+
fill="hsl(128, 100%, 68%)"
170+
points="6,0 6,6 0,6 0,0"
171+
id="particles"
172+
></polygon>
173+
<polygon
174+
transform="rotate(45 100 100) translate(70, 80)"
175+
stroke-width="2"
176+
stroke=""
177+
fill="hsl(128, 100%, 68%)"
178+
points="2,0 2,2 0,2 0,0"
179+
id="particles"
180+
></polygon>
189181
<polygon
190182
stroke-width="2"
191183
stroke=""
@@ -201,6 +193,7 @@ <h1 class="name" title="Rocky">Rocky</h1>
201193
></polygon>
202194
</g>
203195
</svg>
196+
204197
<p class="title">Python Programmer</p>
205198
</div>
206199
<button class="info-more-btn" data-sidebar-btn>
@@ -519,81 +512,81 @@ <h3 class="h3 form-title">Contact Form</h3>
519512
});
520513

521514

522-
class ClickSpark extends HTMLElement {
523-
constructor() {
515+
class ClickSpark extends HTMLElement {
516+
constructor() {
524517
super();
525518
this.attachShadow({ mode: "open" });
526-
}
519+
}
527520

528-
connectedCallback() {
521+
connectedCallback() {
529522
this.shadowRoot.innerHTML = this.createSpark();
530523
this.svg = this.shadowRoot.querySelector("svg");
531524
this._parent = this.parentNode;
532525
this._parent.addEventListener("click", this);
533-
}
526+
}
534527

535-
disconnectedCallback() {
528+
disconnectedCallback() {
536529
this._parent.removeEventListener("click", this);
537530
delete this._parent;
538-
}
531+
}
539532

540-
handleEvent(e) {
533+
handleEvent(e) {
541534
this.setSparkPosition(e);
542535
this.animateSpark();
543-
}
536+
}
544537

545-
animateSpark() {
538+
animateSpark() {
546539
let sparks = [...this.svg.children];
547540
let size = parseInt(sparks[0].getAttribute("y1"));
548541
let offset = size / 2 + "px";
549542

550543
let keyframes = (i) => {
551544
let deg = `calc(${i} * (360deg / ${sparks.length}))`;
552545

553-
return [
546+
return [
554547
{
555548
strokeDashoffset: size * 3,
556-
transform: `rotate(${deg}) translateY(${offset})`
549+
transform: `rotate(${deg}) translateY(${offset})`
557550
},
558551
{
559-
strokeDashoffset: size,
560-
transform: `rotate(${deg}) translateY(0)`
552+
strokeDashoffset: size,
553+
transform: `rotate(${deg}) translateY(0)`
561554
}
562-
];
555+
];
563556
};
564557

565558
let options = {
566-
duration: 660,
567-
easing: "cubic-bezier(0.25, 1, 0.5, 1)",
568-
fill: "forwards"
559+
duration: 660,
560+
easing: "cubic-bezier(0.25, 1, 0.5, 1)",
561+
fill: "forwards"
569562
};
570563

571564
sparks.forEach((spark, i) => spark.animate(keyframes(i), options));
572-
}
565+
}
573566

574-
setSparkPosition(e) {
567+
setSparkPosition(e) {
575568
this.style.left = e.pageX - this.clientWidth / 2 + "px";
576569
this.style.top = e.pageY - this.clientHeight / 2 + "px";
577-
}
570+
}
578571

579-
createSpark() {
572+
createSpark() {
580573
return `
581-
<style>
574+
<style>
582575
:host {
583-
position: absolute;
584-
pointer-events: none;
585-
z-index: 10;
576+
position: absolute;
577+
pointer-events: none;
578+
z-index: 10;
586579
}
587-
</style>
588-
<svg width="30" height="30" viewBox="0 0 100 100" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" stroke="hsl(128, 100%, 68%)" transform="rotate(-20)">
580+
</style>
581+
<svg width="30" height="30" viewBox="0 0 100 100" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" stroke="hsl(128, 100%, 68%)" transform="rotate(-20)">
589582
${Array.from(
590-
{ length: 8 },
591-
(_) =>
583+
{ length: 8 },
584+
(_) =>
592585
`<line x1="50" y1="30" x2="50" y2="4" stroke-dasharray="30" stroke-dashoffset="30" style="transform-origin: center" />`
593586
).join("")}
594-
</svg>
587+
</svg>
595588
`;
596-
}
589+
}
597590
}
598591

599592
customElements.define("click-spark", ClickSpark);

‎style.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -422,7 +422,7 @@ main{
422422
}
423423

424424
/* Sidebar radial gradient */
425-
.sidebar{
425+
.sidebar, .about{
426426
background-image: radial-gradient(circle at 100% 0%,hsla(0,0%,100%,0.08) 10.5%,hsla(0,0%,100%,0) 10%),
427427
radial-gradient(circle at 100% 0%,hsla(0,0%,100%,0.08) 15.5%,hsla(0,0%,100%,0) 15%),
428428
radial-gradient(circle at 100% 0%,hsla(0,0%,100%,0.08) 20.5%,hsla(0,0%,100%,0) 20%);

0 commit comments

Comments
 (0)