'roy'

actuallyroy · actuallyroy · commit b62e642cf876 · 2022-09-04T21:54:28.000+05:30
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+/test.html
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -12,7 +12,7 @@ body{
     overflow: overlay;
 }
 *::-webkit-scrollbar{
-    height: 10px;
+    height: 0px;
     width: 3px;
 }
 *::-webkit-scrollbar-thumb{
@@ -29,12 +29,11 @@ body{
 .header{
     position: fixed;
     top: 0px;
-    width: 50%;
+    width: 100%;
     height: 100px;
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    padding: 0 25%;
+    justify-content: center;
     background-color: #6116bd;
     z-index: 1;
 }
@@ -48,6 +47,7 @@ body{
     border-bottom: 3px solid transparent;
     -webkit-user-select: none;
     user-select: none;
+    margin: 1vw;
 }
 
 .cont{
@@ -87,6 +87,7 @@ body{
 .subcont{
     height: calc(100vh - 100px);
     display: inline-block;
+    position: relative;
     padding-top: 100px;
 }
 .cards-cont{
@@ -99,18 +100,26 @@ body{
     grid-template-rows: 1fr 1fr;
     align-items: center;
     justify-content: center;
+    perspective: 2000px;
+}
+.in{
+    background-color: transparent !important
 }
 
 .card{
+    position: relative;
     height: 250px;
     width: 450px;
-    background-color: #17162D;
-    border-radius: 10px;
     margin: 0 30px;
-    box-shadow: 50px 50px 70px rgba(0, 0, 0, 0.268);
     padding: 30px;
     box-sizing: border-box;
-    color: white;
+    transition: 200ms scale ease-in;
+    transform-style: preserve-3d;
+    -webkit-user-select: none;
+    user-select: none;
+}
+.card:hover{
+    scale: 1.05;
 }
 
 .card-title{
@@ -134,27 +143,77 @@ body{
     width: 100%;
     height: 40px;
     grid-template-columns: 1fr 1fr 3fr 1fr 1fr;
+    justify-items: center;
+}
+
+
+.card-back, .card-front{
+    border-radius: 10px;
+    background-color: #ab79c0;
+    box-sizing: border-box;
+    padding: 30px;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+.card-front{
+    transform: translateZ(1px);
 }
+.card-back{
+    transform: rotateY(-180deg);
+}
+.card-description{
+    white-space: pre-line;
+}
+
 a{
-    color: white;
+    color: black;
     text-decoration: none;
 }
-.ico{
+.ico, .bi{
     opacity: 0.8;
 }
-.ico:hover{
+.ico:hover, .bi:hover{
     opacity: 1;
 }
-.ico::before, .ico{
+.ico::before, .ico, .bi::before{
     margin-right: 5px;
     font-size: 40px;
     cursor: pointer;
 }
+
+.rl-btn{
+    position: absolute;
+    height: 60px;
+    width: 60px;
+    margin: 20px;
+    top: calc(150vh);
+    opacity: 0.04;
+    filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.56));
+    transition: 150ms opacity ease-in;
+}
+.l{
+    display: none;
+}
+.r{
+    right: 0;
+}
+.rl-btn::before{
+    font-size: 60px;
+    color: white;
+}
+.rl-btn:hover{
+    opacity: 0.8
+}
+
 #work{
     background-color: #7f349f;
     width: 100vw;
     overflow-y: hidden;
     overflow-x: overlay;
+    scroll-behavior: smooth;
 }
 #edu{
     background-color: #9d5281;
@@ -223,4 +282,35 @@ a{
     100%{
         opacity: 1;
     }
+}
+
+@keyframes flipLeft {
+    100%{
+        transform: rotateY(-180deg)
+    }
+}
+
+@keyframes flipRight {
+    0%{
+        transform: rotateY(-180deg);
+    }
+    100%{
+        transform: rotateY(0deg);
+    }
+    
+}
+
+
+@media (max-width: 550px) {
+    .headerBtns{
+        font-size: small;
+        height: 15px;
+    }
+    .cards-cont{
+        grid-template-rows: 1fr 1fr 1fr;
+    }
+    .card{
+        width: 380px;
+        height: 200px;
+    }
 }
diff --git a/assets/scripts/script.js b/assets/scripts/script.js
@@ -79,47 +79,118 @@ fetch("https://api.github.com/users/actuallyroy/starred")
   .then(response => response.json())
   .then(data => {
     data.forEach(item => {
+      let projT = undefined
+      if (item.topics.includes("website"))
+        projT = 'website'
+      if (item.topics.includes("android"))
+        projT = 'android'
+      if (item.topics.includes("windows"))
+        projT = 'windows'
+      if (item.topics.includes('console'))
+        projT = 'console'
+      let des = ""
+      if (item.description)
+        des = item.description
       if (item.owner.login === 'actuallyroy') {
         item.topics.length = 3
         document.getElementById("cardsCont").innerHTML += `<div class="card">
-                <div class="card-title">${item.name}</div>
-                <div class="card-tags-cont">
-                  ${item.topics.map(topic => {
-                    return `<span class="card-tags">${topic}</span>`
+          <div class="card-front">
+            <div class="card-title">${item.name}</div>
+            <div class="card-tags-cont">
+                ${item.topics.map((topic) => {
+                    return `<span class="card-tags">${topic}</span>`;
                   }).join("")}
-                </div>
-                <div class="card-ico-cont">
-                  <a href="${item.html_url}" target="_blank"><i class="bi bi-github ico"></i></a>
-                  <a href="https://github.com/actuallyroy/${item.name}/fork" target="_blank">
-                    <svg class="ico" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                      <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 8.125C12.5 8.62228 12.3025 9.0992 11.9508 9.45083C11.5992 9.80246 11.1223 10 10.625 10C10.1277 10 9.65082 9.80246 9.29919 9.45083C8.94756 9.0992 8.75001 8.62228 8.75001 8.125C8.75001 7.62772 8.94756 7.15081 9.29919 6.79918C9.65082 6.44755 10.1277 6.25 10.625 6.25C11.1223 6.25 11.5992 6.44755 11.9508 6.79918C12.3025 7.15081 12.5 7.62772 12.5 8.125V8.125ZM12.5 13.43C13.751 12.9877 14.8054 12.1174 15.4768 10.9729C16.1482 9.82833 16.3934 8.48331 16.169 7.1755C15.9446 5.8677 15.2651 4.68132 14.2506 3.82606C13.2361 2.97079 11.9519 2.5017 10.625 2.5017C9.2981 2.5017 8.0139 2.97079 6.9994 3.82606C5.9849 4.68132 5.3054 5.8677 5.08102 7.1755C4.85664 8.48331 5.10181 9.82833 5.7732 10.9729C6.4446 12.1174 7.49899 12.9877 8.75001 13.43V15.625C8.75001 17.1168 9.34264 18.5476 10.3975 19.6025C11.4524 20.6574 12.8832 21.25 14.375 21.25H18.125V26.57C16.8733 27.0123 15.8182 27.883 15.1464 29.028C14.4745 30.173 14.2291 31.5187 14.4535 32.8271C14.6779 34.1356 15.3576 35.3226 16.3726 36.1784C17.3876 37.0341 18.6724 37.5035 20 37.5035C21.3276 37.5035 22.6124 37.0341 23.6274 36.1784C24.6424 35.3226 25.3222 34.1356 25.5465 32.8271C25.7709 31.5187 25.5255 30.173 24.8536 29.028C24.1818 27.883 23.1267 27.0123 21.875 26.57V21.25H25.625C27.1169 21.25 28.5476 20.6574 29.6025 19.6025C30.6574 18.5476 31.25 17.1168 31.25 15.625V13.43C32.501 12.9877 33.5554 12.1174 34.2268 10.9729C34.8982 9.82833 35.1434 8.48331 34.919 7.1755C34.6946 5.8677 34.0151 4.68132 33.0006 3.82606C31.9861 2.97079 30.7019 2.5017 29.375 2.5017C28.0481 2.5017 26.7639 2.97079 25.7494 3.82606C24.7349 4.68132 24.0554 5.8677 23.831 7.1755C23.6066 8.48331 23.8518 9.82833 24.5232 10.9729C25.1946 12.1174 26.249 12.9877 27.5 13.43V15.625C27.5 16.1223 27.3025 16.5992 26.9508 16.9508C26.5992 17.3025 26.1223 17.5 25.625 17.5H14.375C13.8777 17.5 13.4008 17.3025 13.0492 16.9508C12.6976 16.5992 12.5 16.1223 12.5 15.625V13.43ZM21.875 31.875C21.875 32.3723 21.6775 32.8492 21.3258 33.2008C20.9742 33.5525 20.4973 33.75 20 33.75C19.5027 33.75 19.0258 33.5525 18.6742 33.2008C18.3226 32.8492 18.125 32.3723 18.125 31.875C18.125 31.3777 18.3226 30.9008 18.6742 30.5492C19.0258 30.1975 19.5027 30 20 30C20.4973 30 20.9742 30.1975 21.3258 30.5492C21.6775 30.9008 21.875 31.3777 21.875 31.875ZM29.375 10C29.8723 10 30.3492 9.80246 30.7008 9.45083C31.0525 9.0992 31.25 8.62228 31.25 8.125C31.25 7.62772 31.0525 7.15081 30.7008 6.79918C30.3492 6.44755 29.8723 6.25 29.375 6.25C28.8777 6.25 28.4008 6.44755 28.0492 6.79918C27.6976 7.15081 27.5 7.62772 27.5 8.125C27.5 8.62228 27.6976 9.0992 28.0492 9.45083C28.4008 9.80246 28.8777 10 29.375 10Z" fill="white"/>
-                    </svg>
-                  </a>
-                  <div></div>
-                  <a href="https://actuallyroy.github.io/${item.name}" target="_blank">
-                    <i class="bi bi-globe ico"></i>
-                  </a>
-                  <i class="bi bi-filetype-html ico"></i>
-                </div>
-              </div>`;
+            </div>
+            <div class="card-ico-cont">
+              <a href="${item.html_url}" target="_blank"><i class="bi bi-github ico"></i></a>
+              <a href="https://github.com/actuallyroy/${item.name}/fork" target="_blank">
+                <svg class="ico" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 8.125C12.5 8.62228 12.3025 9.0992 11.9508 9.45083C11.5992 9.80246 11.1223 10 10.625 10C10.1277 10 9.65082 9.80246 9.29919 9.45083C8.94756 9.0992 8.75001 8.62228 8.75001 8.125C8.75001 7.62772 8.94756 7.15081 9.29919 6.79918C9.65082 6.44755 10.1277 6.25 10.625 6.25C11.1223 6.25 11.5992 6.44755 11.9508 6.79918C12.3025 7.15081 12.5 7.62772 12.5 8.125V8.125ZM12.5 13.43C13.751 12.9877 14.8054 12.1174 15.4768 10.9729C16.1482 9.82833 16.3934 8.48331 16.169 7.1755C15.9446 5.8677 15.2651 4.68132 14.2506 3.82606C13.2361 2.97079 11.9519 2.5017 10.625 2.5017C9.2981 2.5017 8.0139 2.97079 6.9994 3.82606C5.9849 4.68132 5.3054 5.8677 5.08102 7.1755C4.85664 8.48331 5.10181 9.82833 5.7732 10.9729C6.4446 12.1174 7.49899 12.9877 8.75001 13.43V15.625C8.75001 17.1168 9.34264 18.5476 10.3975 19.6025C11.4524 20.6574 12.8832 21.25 14.375 21.25H18.125V26.57C16.8733 27.0123 15.8182 27.883 15.1464 29.028C14.4745 30.173 14.2291 31.5187 14.4535 32.8271C14.6779 34.1356 15.3576 35.3226 16.3726 36.1784C17.3876 37.0341 18.6724 37.5035 20 37.5035C21.3276 37.5035 22.6124 37.0341 23.6274 36.1784C24.6424 35.3226 25.3222 34.1356 25.5465 32.8271C25.7709 31.5187 25.5255 30.173 24.8536 29.028C24.1818 27.883 23.1267 27.0123 21.875 26.57V21.25H25.625C27.1169 21.25 28.5476 20.6574 29.6025 19.6025C30.6574 18.5476 31.25 17.1168 31.25 15.625V13.43C32.501 12.9877 33.5554 12.1174 34.2268 10.9729C34.8982 9.82833 35.1434 8.48331 34.919 7.1755C34.6946 5.8677 34.0151 4.68132 33.0006 3.82606C31.9861 2.97079 30.7019 2.5017 29.375 2.5017C28.0481 2.5017 26.7639 2.97079 25.7494 3.82606C24.7349 4.68132 24.0554 5.8677 23.831 7.1755C23.6066 8.48331 23.8518 9.82833 24.5232 10.9729C25.1946 12.1174 26.249 12.9877 27.5 13.43V15.625C27.5 16.1223 27.3025 16.5992 26.9508 16.9508C26.5992 17.3025 26.1223 17.5 25.625 17.5H14.375C13.8777 17.5 13.4008 17.3025 13.0492 16.9508C12.6976 16.5992 12.5 16.1223 12.5 15.625V13.43ZM21.875 31.875C21.875 32.3723 21.6775 32.8492 21.3258 33.2008C20.9742 33.5525 20.4973 33.75 20 33.75C19.5027 33.75 19.0258 33.5525 18.6742 33.2008C18.3226 32.8492 18.125 32.3723 18.125 31.875C18.125 31.3777 18.3226 30.9008 18.6742 30.5492C19.0258 30.1975 19.5027 30 20 30C20.4973 30 20.9742 30.1975 21.3258 30.5492C21.6775 30.9008 21.875 31.3777 21.875 31.875ZM29.375 10C29.8723 10 30.3492 9.80246 30.7008 9.45083C31.0525 9.0992 31.25 8.62228 31.25 8.125C31.25 7.62772 31.0525 7.15081 30.7008 6.79918C30.3492 6.44755 29.8723 6.25 29.375 6.25C28.8777 6.25 28.4008 6.44755 28.0492 6.79918C27.6976 7.15081 27.5 7.62772 27.5 8.125C27.5 8.62228 27.6976 9.0992 28.0492 9.45083C28.4008 9.80246 28.8777 10 29.375 10Z" fill="black"/>
+                </svg>
+              </a>
+              <div></div>
+              <a href="${item.homepage}" target="_blank">
+                ${projTypIcon[projT]}
+              </a>
+              ${langIcons[item.language]}
+            </div>
+          </div>
+          <div class="card-back">
+            <div>Description</div>
+            <p class="card-description"><em>${des}</em></p>
+            <div class="card-back in"></div>
+          </div>
+        </div>`;
       }
     })
-  })
-
-let obj = [
-  "css",
-  "firebase",
-  "html",
-  "javasctipt",
-  "personal-website",
-  "portfolio",
-  "portfolio-website",
-  "resume",
-];
-
-let obj1 = obj.map((topic) => {
-  return `<span class="card-tags">${topic}</span>`;
-});
+    let cards = document.querySelectorAll(".card")
+    cards.forEach(card => {
+      card.addEventListener("click", () => {
+        if (card.style.animation == "800ms ease 0s 1 normal forwards running flipLeft") {
+          card.style.animation = "800ms flipRight forwards";
+        } else {
+          card.style.animation = "800ms flipLeft forwards";
+        }
+      })
+      card.firstElementChild.nextElementSibling.addEventListener("mouseout", () => {
+        card.style.animation = "800ms flipRight forwards";
+      })
+    })
+})
 
-console.log(obj1)
-  
+
+const langIcons = {
+  JavaScript: '<i class="bi bi-filetype-js"></i>',
+  HTML: '<i class="bi bi-filetype-html"></i>',
+  Java: '<i class="bi bi-filetype-java"></i>',
+  null: ""
+};
+
+const projTypIcon = {
+  website: '<i class="bi bi-globe ico"></i>',
+  android: '<i class="bi bi-android2"></i>',
+  windows: '<i class="bi bi-microsoft"></i>',
+  console: '<i class="bi bi-terminal-fill"></i>',
+  undefined: ""
+};
+
+
+let work = document.getElementById("work")
+let l = document.querySelector(".l")
+let r = document.querySelector(".r");
+work.onscroll = () => {
+  if (work.scrollLeft > 100) {
+    l.style.display = 'block'
+  } else {
+    l.style.display = "none";
+  }
+  if (work.scrollLeft > work.scrollWidth - window.innerWidth - 100) {
+    r.style.display = 'none'
+  } else {
+    r.style.display = "block";
+  }
+}
+
+r.onclick = () => {
+  work.scrollLeft += 400
+}
+ 
+l.onclick = () => {
+  work.scrollLeft -= 400;
+};
+
+
+let rectR = r.getBoundingClientRect();
+let y = rectR.top + 30;
+let x = rectR.left + 30;
+let rectL = l.getBoundingClientRect();
+let y1 = rectL.top + 30;
+let x1 = rectL.left + 30;
+
+
+window.onmousemove = (e) => {
+  let d = Math.sqrt((x - e.x) ** 2 + (y - e.y) ** 2)
+  let d1 = Math.sqrt((x1 - e.x) ** 2 + (y1 - e.y) ** 2);
+  r.style.opacity = 0.8 - d / 2000
+  l.style.opacity = 0.9 - d1 / 2000
+}
diff --git a/index.html b/index.html
@@ -13,7 +13,7 @@
 <body>
   <div class="header" id="header">
     <span class="headerBtns">Home</span>
-    <span class="headerBtns">My work</span>
+    <span class="headerBtns">My works</span>
     <span class="headerBtns">Education</span>
     <span class="headerBtns">Skills</span>
     <span class="headerBtns">Blog</span>
@@ -34,10 +34,12 @@
   <div class="cont" id="work">
     <div class="subcont" >
       <div class="cards-cont" id="cardsCont">
-          
+        
       </div>
     </div>
   </div>
+  <i class="bi bi-arrow-left-circle-fill rl-btn l"></i>
+    <i class="bi bi-arrow-right-circle-fill rl-btn r"></i>
   <div class="cont" id="edu">
 
   </div>
diff --git a/push.bat b/push.bat
@@ -0,0 +1,3 @@
+git add .
+git commit -m 'roy'
+git push

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+git add .`
	`2`	`+git commit -m 'roy'`
	`3`	`+git push`