Add sites

VladimirSaenko · Jun 16, 2024 · 8c3031f · 8c3031f
1 parent dcdc091
commit 8c3031f
Show file tree

Hide file tree

Showing 707 changed files with 36,094 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1,2 +1,3 @@
 # Portfolio
- My Portfolio
+## My Portfolio
+## All sites
diff --git a/icon/favicon.ico b/icon/favicon.ico
diff --git a/index.html b/index.html
diff --git a/sites/3D-Astronaut-Model/Astronaut.glb b/sites/3D-Astronaut-Model/Astronaut.glb
diff --git a/sites/3D-Astronaut-Model/icon.png b/sites/3D-Astronaut-Model/icon.png
diff --git a/sites/3D-Astronaut-Model/img-portfolio.jpg b/sites/3D-Astronaut-Model/img-portfolio.jpg
diff --git a/sites/3D-Astronaut-Model/index.html b/sites/3D-Astronaut-Model/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>3D Astronaut Model</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="icon" href="icon.png">
+    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
+</head>
+<body>
+    <div class="demo">
+        <model-viewer id="model" src="Astronaut.glb" auto-rotate camera-controls animation-name="" skybox-image="kloppenheim_02_1k.hdr" autoplay></model-viewer>
+    </div>
+</body>
+</html>
diff --git a/sites/3D-Astronaut-Model/kloppenheim_02_1k.hdr b/sites/3D-Astronaut-Model/kloppenheim_02_1k.hdr
diff --git a/sites/3D-Astronaut-Model/style.css b/sites/3D-Astronaut-Model/style.css
@@ -0,0 +1,80 @@
+
+* {
+    margin: 0;
+    padding: 0;
+    user-select: none;
+    box-sizing: border-box;
+}
+
+.demo {
+    height: 100vh;
+    width: 100%;
+}
+
+.demo model-viewer {
+    width: 100%;
+    height: 100%;
+    /* text-align: center; */
+}
+
+.btn-container {
+    position: absolute;
+    bottom: 50px;
+    width: 100%;
+    text-align: center;
+    overflow: hidden;
+    opacity: 1;
+    visibility: visible;
+    transition: 1s;
+    /* display: flex; */
+    /* justify-content: center; */
+}
+
+/* .demo .btn-container button {
+    border: none;
+    background: #edda73;
+    border-radius: 15px;
+    border-color: transparent;
+    height: 40px;
+    width: 150px;
+    margin: 5px 15px;
+    cursor: pointer;
+    font-weight: bold;
+    font-size: 20px;
+    outline: none;
+    flex-wrap: wrap;
+}
+
+.btn-container .hide {
+    opacity: 0;
+    visibility: hidden;
+} */
+
+/* .demo .hidenBtn {
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    border: none;
+    background: #edda73;
+    border-radius: 15px;
+    border-color: transparent;
+    height: 40px;
+    width: 150px;
+    cursor: pointer;
+    font-weight: bold;
+    font-size: 20px;
+    outline: none;
+    flex-wrap: wrap;
+    transition: 1s;
+} */
+
+/* @media screen and (min-width: 300px) and (max-width: 800px) {
+    .btn-container {
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        top: 50%;
+        flex-wrap: wrap;
+    }
+} */
diff --git a/sites/3D-Robot-Model/RobotExpressive.glb b/sites/3D-Robot-Model/RobotExpressive.glb
diff --git a/sites/3D-Robot-Model/icon.png b/sites/3D-Robot-Model/icon.png
diff --git a/sites/3D-Robot-Model/img-portfolio.jpg b/sites/3D-Robot-Model/img-portfolio.jpg
diff --git a/sites/3D-Robot-Model/index.html b/sites/3D-Robot-Model/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>3D Robot Model</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="icon" href="icon.png">
+    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
+</head>
+<body>
+    <div class="demo">
+        <model-viewer id="model" src="RobotExpressive.glb" auto-rotate camera-controls animation-name="" skybox-image="stadium_01_1k.hdr" autoplay></model-viewer>
+        <div class="btn-container">
+            <button>Idle</button>
+            <!-- <button onclick="Anim(this)">Idle</button> -->
+            <button>Dance</button>
+            <button>Running</button>
+            <button>Death</button>
+            <button>Walking</button>
+            <button>Wave</button>
+            <button>No</button>
+            <button>Yes</button>
+            <button>Jump</button>
+            <button>Punch</button>
+            <!-- <button>Sitting</button> -->
+            <!-- <button>Standing</button> -->
+            <button>ThumbsUp</button>
+        </div>
+    </div>
+    <script src="mainscript.js"></script>
+</body>
+</html>
diff --git a/sites/3D-Robot-Model/mainscript.js b/sites/3D-Robot-Model/mainscript.js
@@ -0,0 +1,51 @@
+
+"use strict";
+
+const modelViewer = document.getElementById('model');
+const animBtn = document.querySelectorAll('.btn-container button');
+
+animBtn.forEach(btns => {
+    btns.onclick = () => {
+        modelViewer.animationName = btns.innerHTML;
+    }
+})
+
+// hidenBtn.onclick = () => {
+//     document.querySelector('.btn-container').classList.toggle('hide');
+//     if(hidenBtn.innerHTML == 'Hide') {
+//         hidenBtn.innerHTML = 'Show';
+//     }
+//     else {
+//         hidenBtn.innerHTML = 'Hide';
+//     }
+// }
+
+// внизу два способа
+
+// function Anim(e) {
+//     modelViewer.animationName = e.innerHTML;
+// }
+
+// function Idle() {
+//     modelViewer.animationName = 'Idle';
+// }
+
+// function Dance() {
+//     modelViewer.animationName = 'Dance';
+// }
+
+// function Running() {
+//     modelViewer.animationName = 'Running';
+// }
+
+// function Death() {
+//     modelViewer.animationName = 'Death';
+// }
+
+// function Jump() {
+//     modelViewer.animationName = 'Jump';
+// }
+
+// function Walking() {
+//     modelViewer.animationName = 'Walking';
+// }
diff --git a/sites/3D-Robot-Model/stadium_01_1k.hdr b/sites/3D-Robot-Model/stadium_01_1k.hdr
diff --git a/sites/3D-Robot-Model/style.css b/sites/3D-Robot-Model/style.css
@@ -0,0 +1,60 @@
+
+* {
+    margin: 0;
+    padding: 0;
+    user-select: none;
+    box-sizing: border-box;
+}
+
+button {
+    outline: none;
+}
+
+.demo {
+    height: 100vh;
+    width: 100%;
+}
+
+.demo model-viewer {
+    width: 100%;
+    height: 100%;
+    /* text-align: center; */
+}
+
+.btn-container {
+    position: absolute;
+    bottom: 50px;
+    width: 100%;
+    text-align: center;
+    overflow: hidden;
+    opacity: 1;
+    visibility: visible;
+    transition: 1s;
+    /* display: flex; */
+    /* justify-content: center; */
+}
+
+.demo .btn-container button {
+    border: none;
+    background: #edda73;
+    border-radius: 15px;
+    border-color: transparent;
+    height: 40px;
+    width: 150px;
+    margin: 5px 15px;
+    cursor: pointer;
+    font-weight: bold;
+    font-size: 20px;
+    outline: none;
+    flex-wrap: wrap;
+}
+
+@media screen and (min-width: 300px) and (max-width: 800px) {
+    .btn-container {
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        top: 50%;
+        flex-wrap: wrap;
+    }
+}
diff --git a/sites/All Seasons Year site/.vscode/settings.json b/sites/All Seasons Year site/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/sites/All Seasons Year site/css/defaultStyle.css b/sites/All Seasons Year site/css/defaultStyle.css
@@ -0,0 +1,36 @@
+
+/* * {
+  box-sizing: border-box;
+  user-select: none;
+  margin: 0;
+  padding: 0;
+  outline: none;
+} */
+
+/* * {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0; 
+} */
+
+body {
+  margin: 0;
+  font-family: 'Bad Script', sans-serif;
+}
+
+@media (max-width: 640px) {
+  .slider {
+    height: 100vh;
+    flex-direction: column;
+  }
+
+  .item {
+    width: 100%;
+    user-select: none;
+    cursor: none;
+  }
+
+  .item:hover {
+    flex-grow: 30%;
+  }
+}