Made the website.

jsachdeva7 · Jan 15, 2024 · 31315c7 · 31315c7
commit 31315c7
Show file tree

Hide file tree

Showing 29 changed files with 203 additions and 0 deletions.
diff --git a/fonts/Inter-VariableFont_slnt,wght.ttf b/fonts/Inter-VariableFont_slnt,wght.ttf
diff --git a/images/100.png b/images/100.png
diff --git a/images/books.png b/images/books.png
diff --git a/images/bulb.png b/images/bulb.png
diff --git a/images/camera.png b/images/camera.png
diff --git a/images/cant.png b/images/cant.png
diff --git a/images/china.png b/images/china.png
diff --git a/images/cs.png b/images/cs.png
diff --git a/images/favicon.png b/images/favicon.png
diff --git a/images/globe.png b/images/globe.png
diff --git a/images/globewmeridians.png b/images/globewmeridians.png
diff --git a/images/home.png b/images/home.png
diff --git a/images/industrialdesign.png b/images/industrialdesign.png
diff --git a/images/link.png b/images/link.png
diff --git a/images/massage.png b/images/massage.png
diff --git a/images/meche.png b/images/meche.png
diff --git a/images/peace.png b/images/peace.png
diff --git a/images/pfp.jpg b/images/pfp.jpg
diff --git a/images/philippines.png b/images/philippines.png
diff --git a/images/rocket.png b/images/rocket.png
diff --git a/images/sun.png b/images/sun.png
diff --git a/images/temporary.png b/images/temporary.png
diff --git a/images/tennis.png b/images/tennis.png
diff --git a/images/top.png b/images/top.png
diff --git a/images/weightlifting.png b/images/weightlifting.png
diff --git a/images/womancook.png b/images/womancook.png
diff --git a/index.html b/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="icon" type="image/png" href="images/favicon.png">
+    <title>hi, i'm jugs💯</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="index.js"></script>
+</head>
+<body>
+    <div class="center-vert center-hor">
+        <!-- <div class="icon-container">
+            <div class="icon" style="background-image: url('images/globe.png');"></div>
+            <div class="icon" style="background-image: url('images/books.png');"></div>
+            <div class="icon" style="background-image: url('images/bulb.png');"></div>
+            <div class="icon" style="background-image: url('images/massage.png');"></div>
+        </div> -->
+        <div id="circle-wrapper">
+            <div id="circle">
+                <div class="pfp"></div>
+                <div class="slide" id="images/globe.png" style="display: none">
+                    <p>i'm from the <span style="font-weight: bold">philippines</span> <img src="images/philippines.png" height="25px"><br><br>
+                    i was born in manila, and when <br> i was 1, my family moved to <br> <span style="font-weight: bold">shanghai, china</span> <img src="images/china.png" height="25px"> <br><br> after 9 years there, we moved<br>back to the philippines
+                    and<br> have lived there since <img src="images/home.png" height="25px"></p>
+                </div>
+                <div class="slide" id="images/books.png" style="display:none">
+                    <p>i'm a  <span style="font-weight: bold">mech e</span> major <img src="images/meche.png" height="25px"><br>but i'm likely switching to <span style="font-weight: bold">cs</span> <img src="images/cs.png" height="25px"><br><br>coding comes way more naturally <br>to me + i love being able to quickly experiment and make things <img src="images/rocket.png" height="25px">
+                    <br><br>i also intend on minoring in<br><span style="font-weight: bold">industrial design</span> <img src="images/industrialdesign.png" height="25px">
+                    </p>
+                </div>
+                <div class="slide" id="images/bulb.png" style="display:none">
+                    <p>i want to make the energy<br>transition more <span style="font-weight: bold">inclusive</span> <img src="images/globewmeridians.png" height="25px"><br><br>in high school, my ngo and i<br>worked with an <span style="font-weight: bold">indigenous filipino tribe</span> to deploy <span style="font-weight: bold">solar power</span> <img src="images/sun.png" height="25px"><br><br>we <span style="font-weight: bold">can't</span> leave off-the-grid communities behind <img src="images/cant.png" height="25px"></p>
+                </div>
+                <div class="slide" id="images/massage.png" style="display:none">
+                    <p>in my free time, i like to play<br>tennis <img src="images/tennis.png" height="25px"> work out <img src="images/weightlifting.png" height="25px"> and <br>work on my mom's business <img src="images/womancook.png" height="25px"><br><br>i also love listening to music—<br>frank ocean and kid cudi <img src="images/top.png" height="25px"></p>
+                </div>
+            </div>
+        </div>
+        <p class="hi">
+            hi, i'm <span class="bold">jugs</span> <img src="images/100.png" height="40px">
+        </p>
+    </div>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,61 @@
+/**
+ * @param {string[]} icons 
+ */
+function circle(icons) {
+    const ICON_DIAMETER = 125;
+    const BONUS_OFFSET = 90;
+    const angle = 360 / icons.length;
+    const pfp = document.querySelector(".pfp")
+
+    const container = document.getElementById('circle');
+    const offsetToParentCenter = parseInt(container.offsetWidth / 2); // assumes parent is square
+    const radius = offsetToParentCenter + BONUS_OFFSET;
+    const totalOffset = offsetToParentCenter - (ICON_DIAMETER / 2);
+    for (let i = 1; i <= icons.length; ++i) {
+        const iconSrc = icons[i - 1];
+
+        if (!iconSrc) continue;
+
+        const icon = document.createElement('div');
+
+        const slide = document.getElementById(iconSrc)
+
+        icon.addEventListener('mouseenter', () => {
+            icon.style.boxShadow = '0px 0px 100px rgb(120,120,120,0.5)';
+            pfp.style.display = "none";
+            slide.style.display = "flex";
+        });
+
+        icon.addEventListener('mouseleave', () => {
+            icon.style.boxShadow = '';
+            pfp.style.display = "block";
+            slide.style.display = "none";
+        });
+
+        icon.className = 'icon';
+        icon.style.position = 'absolute';
+        icon.style.width = ICON_DIAMETER + 'px';
+        icon.style.height = ICON_DIAMETER + 'px';
+        icon.style.backgroundImage = `url('${iconSrc}')`;
+        const y = Math.sin((angle * i) * (Math.PI / 180)) * radius;
+        const x = Math.cos((angle * i) * (Math.PI / 180)) * radius;
+        icon.style.top = (y + totalOffset).toString() + "px";
+        icon.style.left = (x + totalOffset).toString() + "px";
+        container.appendChild(icon);
+    }
+
+    const wrapper = document.getElementById('circle-wrapper');
+    const maxIconDistance = (radius * 2) + ICON_DIAMETER;
+    wrapper.style.width = maxIconDistance + 'px';
+    wrapper.style.height = maxIconDistance + 'px';
+}
+
+const icons = [,,,,,'images/globe.png','images/books.png', 'images/bulb.png', 'images/massage.png',,];
+
+window.addEventListener('DOMContentLoaded', () => {
+    circle(icons);
+});
+
+window.addEventListener('resize', () => {
+    circle(icons);
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,99 @@
+@font-face {
+    src: url(fonts/Inter-VariableFont_slnt\,wght.ttf);
+    font-family: "Inter";
+}
+
+body {
+    background-color: rgb(27, 27, 27);
+    margin: 0;
+}
+
+.center-hor {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100vh;
+}
+
+.center-vert {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 100vh;
+}
+
+.icon-container {
+    display: flex;
+    gap: 20px;
+}
+
+#circle-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#circle {
+    position: relative;
+    width: 450px;
+    height: 450px;
+}
+
+.icon {
+    background-size: 60%;
+    border-radius: 50%;
+    background-color: rgb(47, 47, 47);
+    background-position: center center;
+    background-repeat: no-repeat;
+    position: absolute;
+    transition: box-shadow 0.5s ease;
+}
+
+#circle:nth-child(1):hover{
+    animation-name: glow;
+    animation-duration: 1.0s;
+}
+
+/* .icon:nth-child(1) { top: 50%; left: 0%; transform: translate(300%, -100%); }
+.icon:nth-child(2) { top: 50%; left: 0%; transform: translate(400%, -235%); }
+.icon:nth-child(3) { top: 50%; right: 0%; transform: translate(-400%, -235%); }
+.icon:nth-child(4) { top: 50%; right: 0%; transform: translate(-300%, -100%); } */
+
+.pfp {
+    width: 450px;
+    height: 450px;
+    background-image: url("images/pfp.jpg");
+    background-size: cover;
+    border-radius: 50%;
+    overflow: hidden;
+    margin-top: auto;
+    position: relative;
+}
+
+.slide {
+    width: 450px;
+    height: 450px;
+    border-radius: 50%;
+    background-color: rgb(47, 47, 47);
+    overflow: hidden;
+    text-align: center;
+    display:flex;
+    flex-direction:column;
+    justify-content: center;
+    font-size: 25px;
+    font-weight: 500;
+    color: white;
+    font-family: Inter;
+}
+
+.hi {
+    font-size: 45px;
+    font-family: "Inter";
+    color: white;
+    font-weight: 500;
+    margin: -125px 0 0 0;
+}
+
+.bold {
+    font-weight: 700;
+}