(null);
41 |
42 | const generateStars = (width: number, height: number): StarProps[] => {
43 | const area = width * height;
44 | const numStars = Math.floor(area * starDensity);
45 | return Array.from({ length: numStars }, () => {
46 | const shouldTwinkle =
47 | allStarsTwinkle || Math.random() < twinkleProbability;
48 | return {
49 | x: Math.random() * width,
50 | y: Math.random() * height,
51 | radius: Math.random() * 0.05 + 0.5, // Random radius between 0.5 and 0.7
52 | opacity: Math.random() * 0.5 + 0.5, // Random opacity between 0.5 and 1
53 | twinkleSpeed: shouldTwinkle
54 | ? minTwinkleSpeed +
55 | Math.random() * (maxTwinkleSpeed - minTwinkleSpeed)
56 | : null,
57 | };
58 | });
59 | };
60 |
61 | useEffect(() => {
62 | const updateStars = () => {
63 | if (containerRef.current) {
64 | const { width, height } = containerRef.current.getBoundingClientRect();
65 | setStars(generateStars(width, height));
66 | }
67 | };
68 |
69 | updateStars(); // Initial generation
70 |
71 | const resizeObserver = new ResizeObserver(updateStars);
72 | if (containerRef.current) {
73 | resizeObserver.observe(containerRef.current);
74 | }
75 |
76 | return () => {
77 | if (containerRef.current) {
78 | resizeObserver.unobserve(containerRef.current);
79 | }
80 | };
81 | }, [
82 | starDensity,
83 | allStarsTwinkle,
84 | twinkleProbability,
85 | minTwinkleSpeed,
86 | maxTwinkleSpeed,
87 | ]);
88 |
89 | return (
90 |
91 |
102 |
103 | );
104 | };
105 |
106 | export default StarBackground;
107 |
--------------------------------------------------------------------------------
/src/components/TypingEffect.tsx:
--------------------------------------------------------------------------------
1 | import { ArrowIcon, HeartIcon } from "@/lib/common";
2 | import React, { useState, useEffect } from "react";
3 | import styled from "styled-components";
4 |
5 | interface Word {
6 | key: string;
7 | type: string;
8 | value: string;
9 | }
10 |
11 | interface TypingEffectProps {
12 | words: Word[];
13 | delayTypingChar?: number;
14 | delayBetweenWords?: number;
15 | }
16 |
17 | const TypingEffect: React.FC = ({
18 | words = [
19 | { key: "default1", type: "normal", value: "Default" },
20 | { key: "default2", type: "normal", value: "Words" },
21 | ],
22 | delayTypingChar = 200,
23 | delayBetweenWords = 2000,
24 | }) => {
25 | const [currentText, setCurrentText] = useState("");
26 | const [currentType, setCurrentType] = useState("");
27 | const [currentIndex, setCurrentIndex] = useState(0);
28 | const [isTyping, setIsTyping] = useState(true);
29 |
30 | useEffect(() => {
31 | if (!Array.isArray(words) || words.length === 0) {
32 | return;
33 | }
34 |
35 | let timeout: NodeJS.Timeout;
36 |
37 | const currentWord = words[currentIndex];
38 | if (
39 | !currentWord ||
40 | typeof currentWord.value !== "string" ||
41 | typeof currentWord.key !== "string"
42 | ) {
43 | return;
44 | }
45 |
46 | const combinedText = `${currentWord.value} ${currentWord.key}`;
47 | setCurrentType(`${currentWord.key}`);
48 | if (isTyping) {
49 | if (currentText.length < combinedText.length) {
50 | timeout = setTimeout(() => {
51 | setCurrentText((prev) => combinedText.slice(0, prev.length + 1));
52 | }, delayTypingChar);
53 | } else {
54 | timeout = setTimeout(() => setIsTyping(false), delayBetweenWords);
55 | }
56 | } else {
57 | if (currentText.length > 0) {
58 | timeout = setTimeout(() => {
59 | setCurrentText((prev) => prev.slice(0, -1));
60 | }, delayTypingChar);
61 | } else {
62 | setCurrentIndex((prev) => (prev + 1) % words.length);
63 | setIsTyping(true);
64 | }
65 | }
66 |
67 | return () => clearTimeout(timeout);
68 | }, [
69 | currentText,
70 | currentIndex,
71 | isTyping,
72 | words,
73 | delayTypingChar,
74 | delayBetweenWords,
75 | ]);
76 |
77 | const getIcon = (tag: string) => {
78 | switch (tag) {
79 | case "usage":
80 | default:
81 | return ;
82 | break;
83 | case "likes":
84 | return ;
85 | break;
86 | }
87 | };
88 | return (
89 |
90 | {getIcon(currentType)}
91 | {currentText}
92 | _
93 |
94 | );
95 | };
96 |
97 | export default TypingEffect;
98 |
99 | const MetaInfo = styled.div`
100 | display: flex;
101 | align-items: center;
102 | gap: 4px;
103 | span {
104 | font-size: 11px;
105 | }
106 | `;
107 |
--------------------------------------------------------------------------------
/src/components/footer.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import styled from "styled-components";
3 | import Link from "next/link";
4 |
5 | export default function Footer() {
6 | return (
7 |
8 |
9 |
10 | made by
11 |
12 |
13 | 
14 |
15 |
16 | at
17 |
18 |
22 | @overlayz
23 |
24 | {" "}
25 |
26 |
27 | ![]({"/icons/twitter.svg"})
28 |
29 |
30 |
31 |
16 |
17 |
18 | {/* */}
19 | 
20 |
21 | Figma plugins I made over the years
22 |
25 |
26 |
61 | 
65 | 
66 | 
69 | 
87 | 
42 | 
45 | 
48 |