diff --git a/assets/2147811240.jpg b/assets/2147811240.jpg new file mode 100644 index 00000000..acd659ba Binary files /dev/null and b/assets/2147811240.jpg differ diff --git a/assets/2147835077.jpg b/assets/2147835077.jpg new file mode 100644 index 00000000..a33c5e35 Binary files /dev/null and b/assets/2147835077.jpg differ diff --git a/assets/241130_04h46m22s_screenshot.png b/assets/241130_04h46m22s_screenshot.png new file mode 100644 index 00000000..6982c85e Binary files /dev/null and b/assets/241130_04h46m22s_screenshot.png differ diff --git a/assets/54362.jpg b/assets/54362.jpg new file mode 100644 index 00000000..3eecaff2 Binary files /dev/null and b/assets/54362.jpg differ diff --git a/assets/back.jpg b/assets/back.jpg new file mode 100644 index 00000000..7139a1dc Binary files /dev/null and b/assets/back.jpg differ diff --git a/assets/eshanized.png b/assets/eshanized.png deleted file mode 100644 index 3f1fe78e..00000000 Binary files a/assets/eshanized.png and /dev/null differ diff --git a/assets/iconixed.jpg b/assets/iconixed.jpg deleted file mode 100644 index ca5498aa..00000000 Binary files a/assets/iconixed.jpg and /dev/null differ diff --git a/assets/utkarsh.jpg b/assets/utkarsh.jpg deleted file mode 100644 index 0f6f9bb7..00000000 Binary files a/assets/utkarsh.jpg and /dev/null differ diff --git a/developers.css b/developers.css index 52e24f6f..cbd23f31 100644 --- a/developers.css +++ b/developers.css @@ -9,10 +9,12 @@ body { min-height: 100vh; - display: flex; + display: block; justify-content: center; align-items: center; - background: url(./assets/background.png); + background: url(./assets/back.jpg); + background-repeat: no-repeat; + background-size: cover; transition: 0.5s; font-family: "Ubuntu", sans-serif; font-weight: 400; @@ -20,7 +22,7 @@ body { } body:has(.box[data-color="clr1"]:hover) { - background: url(./assets/eshanized.png); + background: url(./assets/54362.jpg); background-repeat: no-repeat; background-size: cover; } @@ -29,12 +31,184 @@ body:has(.box[data-color="clr2"]:hover) { background-repeat: no-repeat; background-size: cover; } + body:has(.box[data-color="clr3"]:hover) { - background: url(./assets/iconixed.jpg); + background: url(./assets/2147811240.jpg); background-repeat: no-repeat; background-size: cover; } +body:has(.box[data-color="clr4"]:hover) { + background: url(./assets/2147835077.jpg); + background-repeat: no-repeat; + background-size: cover; +} +/* nav */ + +.navbar { + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + width: 100%; + top: 0; + background-color: rgba(26, 31, 44, 0); + z-index: 1000; + padding-inline: 5rem; + backdrop-filter: blur(5px); +} + +.logo { + height: 40px; +} + +a { + color: #000; + position: relative; + text-decoration: none; +} + +a::before { + background: #754ffe; + content: ""; + inset: 0; + position: absolute; + transform: scaleX(0); + transform-origin: left; + transition: transform 0.5s ease-in-out; + z-index: -1; +} + +a:hover::before { + transform: scaleX(1); + transform-origin: left; +} + +.nav-links { + display: flex; + gap: 2rem; +} + +.nav-links a { + color: white; + text-decoration: none; + font-size: 0.9rem; + text-transform: uppercase; + font-weight: 800; +} + + +/* devs */ +* { + font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + color: white; + font-size: 12px; +} +.git-i{ + display: flex; + justify-content: center; + align-items: center; + margin-top: 20px; +} +.git-contributions { + width: 500x; + height: 160px; + padding: 20px; + margin: 10px; + border: solid 1px #3d444d; + border-radius: 10px; + +} + +.contribute-calendar { + display: flex; +} + +.weeks { + display: flex; + flex-direction: column; + justify-content: start; + gap: 6px; + margin-top: 12px; + margin-left: 4px; +} + +.weeks p { + margin: 0; +} + +.months { + display: flex; + width: 90%; + height: 22px; + gap: 20px; + margin-left: 38px; +} + +.bottom-scale { + display: flex; + align-items: center; + justify-content: end; + gap: 4px; + margin-right: 12px; +} + +.bottom-scale p { + margin: 0; + color: #9198a1; +} + +.color-box { + height: 10px; + width: 10px; + border-radius: 2px; +} + +.legend-1 { + background-color: #171c21; +} + +.legend-2 { + background-color: #1f432b; +} +.legend-3 { + background-color: #2e6b38; +} +.legend-4 { + background-color: #52a44f; +} +.legend-5 { + background-color: #6cd064; +} + +#led-container { + padding: 10px; +} +.led-row { + display: flex; +} +.led { + width: 6px; + height: 6px; + margin: 1.8px; + border-radius: 20%; + background-color: #171c21; +} +.led.on-1 { + background-color: #1f432b; +} +.led.on-2 { + background-color: #2e6b38; +} +.led.on-3 { + background-color: #52a44f; +} + +.led.on-4 { + background-color: #6cd064; +} + + section { overflow: hidden; padding-top: 3em; @@ -167,3 +341,4 @@ h2 { } } } + diff --git a/developers.html b/developers.html index 1c970832..45e4f051 100644 --- a/developers.html +++ b/developers.html @@ -6,9 +6,74 @@ Snigdha OS | Developers +
-

Meet The Developers

+ + + +
+
+
+

Jan

+

Feb

+

Mar

+

Apr

+

May

+

Jun

+

Jul

+

Aug

+

Sep

+

Oct

+

Nov

+

Dec

+
+
+
+

Mon

+

Wed

+

Fri

+
+
+
+
+

Less

+
+
+
+
+
+

More

+
+
+
+
+
+ + + + +
@@ -47,16 +112,16 @@
-
+
- Werewolf + Werewolf

Utkarsh Gaur
Developer

diff --git a/developers.js b/developers.js new file mode 100644 index 00000000..f4ec8d77 --- /dev/null +++ b/developers.js @@ -0,0 +1,346 @@ +const container = document.getElementById("led-container"); +const ROWS = 7; +const COLS = 50; +const ledMatrix = []; + +// Create LED matrix // +for (let i = 0; i < ROWS; i++) { + const row = document.createElement("div"); + row.className = "led-row"; + ledMatrix[i] = []; + for (let j = 0; j < COLS; j++) { + const led = document.createElement("div"); + led.className = "led"; + row.appendChild(led); + ledMatrix[i][j] = led; + } + container.appendChild(row); +} + +// LED +const font = { + A: [ + [0, 1, 1, 1, 0], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [1, 1, 1, 1, 1], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1] + ], + B: [ + [1, 1, 1, 1, 0], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [1, 1, 1, 1, 0], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [1, 1, 1, 1, 0] + ], + C: [ + [0, 1, 1, 1, 1], + [1, 0, 0, 0, 0], + [1, 0, 0, 0, 0], + [1, 0, 0, 0, 0], + [1, 0, 0, 0, 0], + [1, 0, 0, 0, 0], + [0, 1, 1, 1, 1] + ], + D: [ + [1, 1, 1, 1, 0], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [1, 1, 1, 1, 0] + ], + E: [ + [1, 1, 1, 1, 1], + [1, 0, 0, 0, 0], + [1, 0, 0, 0, 0], + [1, 1, 1, 1, 0], + [1, 0, 0, 0, 0], + [1, 0, 0, 0, 0], + [1, 1, 1, 1, 1] + ], + F: [ + [1, 1, 1, 1, 1], + [1, 0, 0, 0, 0], + [1, 0, 0, 0, 0], + [1, 1, 1, 1, 0], + [1, 0, 0, 0, 0], + [1, 0, 0, 0, 0], + [1, 0, 0, 0, 0] + ], + G: [ + [0, 1, 1, 1, 1], + [1, 0, 0, 0, 0], + [1, 0, 0, 0, 0], + [1, 0, 0, 1, 1], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [0, 1, 1, 1, 0] + ], + H: [ + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [1, 1, 1, 1, 1], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1] + ], + I: [ + [1, 1, 1, 1, 1], + [0, 0, 1, 0, 0], + [0, 0, 1, 0, 0], + [0, 0, 1, 0, 0], + [0, 0, 1, 0, 0], + [0, 0, 1, 0, 0], + [1, 1, 1, 1, 1] + ], + J: [ + [0, 0, 0, 1, 1], + [0, 0, 0, 0, 1], + [0, 0, 0, 0, 1], + [0, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [0, 1, 1, 1, 0] + ], + K: [ + [1, 0, 0, 0, 1], + [1, 0, 0, 1, 0], + [1, 0, 1, 0, 0], + [1, 1, 0, 0, 0], + [1, 0, 1, 0, 0], + [1, 0, 0, 1, 0], + [1, 0, 0, 0, 1] + ], + L: [ + [1, 0, 0, 0, 0], + [1, 0, 0, 0, 0], + [1, 0, 0, 0, 0], + [1, 0, 0, 0, 0], + [1, 0, 0, 0, 0], + [1, 0, 0, 0, 0], + [1, 1, 1, 1, 1] + ], + M: [ + [1, 0, 0, 0, 1], + [1, 1, 0, 1, 1], + [1, 0, 1, 0, 1], + [1, 0, 1, 0, 1], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1] + ], + N: [ + [1, 0, 0, 0, 1], + [1, 1, 0, 0, 1], + [1, 0, 1, 0, 1], + [1, 0, 1, 0, 1], + [1, 0, 0, 1, 1], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1] + ], + O: [ + [0, 1, 1, 1, 0], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [0, 1, 1, 1, 0] + ], + P: [ + [1, 1, 1, 1, 0], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [1, 1, 1, 1, 0], + [1, 0, 0, 0, 0], + [1, 0, 0, 0, 0], + [1, 0, 0, 0, 0] + ], + Q: [ + [0, 1, 1, 1, 0], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [1, 0, 1, 0, 1], + [1, 0, 0, 1, 0], + [0, 1, 1, 0, 1] + ], + R: [ + [1, 1, 1, 1, 0], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [1, 1, 1, 1, 0], + [1, 0, 1, 0, 0], + [1, 0, 0, 1, 0], + [1, 0, 0, 0, 1] + ], + S: [ + [0, 1, 1, 1, 1], + [1, 0, 0, 0, 0], + [1, 0, 0, 0, 0], + [0, 1, 1, 1, 0], + [0, 0, 0, 0, 1], + [0, 0, 0, 0, 1], + [1, 1, 1, 1, 0] + ], + T: [ + [1, 1, 1, 1, 1], + [0, 0, 1, 0, 0], + [0, 0, 1, 0, 0], + [0, 0, 1, 0, 0], + [0, 0, 1, 0, 0], + [0, 0, 1, 0, 0], + [0, 0, 1, 0, 0] + ], + U: [ + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [0, 1, 1, 1, 0] + ], + V: [ + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [0, 1, 0, 1, 0], + [0, 0, 1, 0, 0] + ], + W: [ + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [1, 0, 1, 0, 1], + [1, 0, 1, 0, 1], + [1, 1, 0, 1, 1], + [1, 0, 0, 0, 1] + ], + X: [ + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [0, 1, 0, 1, 0], + [0, 0, 1, 0, 0], + [0, 1, 0, 1, 0], + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1] + ], + Y: [ + [1, 0, 0, 0, 1], + [1, 0, 0, 0, 1], + [0, 1, 0, 1, 0], + [0, 0, 1, 0, 0], + [0, 0, 1, 0, 0], + [0, 0, 1, 0, 0], + [0, 0, 1, 0, 0] + ], + Z: [ + [1, 1, 1, 1, 1], + [0, 0, 0, 0, 1], + [0, 0, 0, 1, 0], + [0, 0, 1, 0, 0], + [0, 1, 0, 0, 0], + [1, 0, 0, 0, 0], + [1, 1, 1, 1, 1] + ], + "-": [ + [0, 0, 0, 0, 0], + [0, 0, 0, 0, 0], + [0, 0, 0, 0, 0], + [1, 1, 1, 1, 1], + [0, 0, 0, 0, 0], + [0, 0, 0, 0, 0], + [0, 0, 0, 0, 0] + ], + " ": [ + [0, 0, 0, 0, 0], + [0, 0, 0, 0, 0], + [0, 0, 0, 0, 0], + [0, 0, 0, 0, 0], + [0, 0, 0, 0, 0], + [0, 0, 0, 0, 0], + [0, 0, 0, 0, 0] + ], + 0: [ + [1, 1, 1, 1, 1], + [1, 0, 0, 1, 1], + [1, 0, 0, 1, 1], + [1, 0, 1, 1, 1], + [1, 1, 1, 0, 1], + [1, 1, 0, 0, 1], + [1, 1, 1, 1, 1] + ] +}; + +function getTextMatrix(text) { + let matrix = Array(7) + .fill() + .map(() => []); + for (let char of text.toUpperCase()) { + if (font[char]) { + for (let i = 0; i < 7; i++) { + matrix[i] = matrix[i].concat(font[char][i]); + matrix[i].push(0); + } + } + } + return matrix; +} +const classNames = ["on-1", "on-2", "on-3", "on-4"]; + +function displayScrollingText(text) { + const textMatrix = getTextMatrix(text + " "); // Add some space at the end + let startCol = -COLS; // Start off-screen to the left + let lastUpdate = performance.now(); + const delay = 100; // Adjust this value to control speed (higher = slower, in milliseconds) + + function updateDisplay() { + const now = performance.now(); + if (now - lastUpdate >= delay) { + lastUpdate = now; + + for (let i = 0; i < ROWS; i++) { + for (let j = 0; j < COLS; j++) { + const textCol = (startCol + j) % textMatrix[0].length; + + if (textCol >= 0) { + const isOn = textMatrix[i][textCol] === 1; + const randomClass = + classNames[Math.floor(Math.random() * classNames.length)]; + + // Remove all possible 'on' classes + ledMatrix[i][j].classList.remove("on-1", "on-2", "on-3", "on-4"); + + if (isOn) { + ledMatrix[i][j].classList.add(randomClass); + } + } else { + // Remove all possible 'on' classes if off-screen + ledMatrix[i][j].classList.remove("on-1", "on-2", "on-3", "on-4"); + } + } + } + + startCol++; + + if (startCol > textMatrix[0].length) { + startCol = -COLS; + } + } + requestAnimationFrame(updateDisplay); + } + + updateDisplay(); +} +// Text Display - TODO: Numbers +displayScrollingText("Meet The Developers");