update index.html

lizlam · Sep 3, 2024 · fd2c11f · fd2c11f
1 parent 0ae01ce
commit fd2c11f
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 6 deletions.
diff --git a/3d/church.png b/3d/church.png
diff --git a/3d/grep/index.html b/3d/grep/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>man salad</title>
+    <title>3D Text</title>
   <script type="module" crossorigin src="assets/index.bacadfec.js"></script>
   <link rel="stylesheet" href="assets/index.794bdd8f.css">
 </head>

diff --git a/3d/index.html b/3d/index.html
@@ -1,3 +1,4 @@
+
 <html>
 <style>
 body {
@@ -8,6 +9,13 @@
   display: flex;
   justify-content: center;
 }
+
+main {
+  display: flex;
+  flex-flow: row wrap;
+  width: 100%;
+}
+
 .tag-container {
   display: flex;    
   justify-content: center; 
@@ -25,12 +33,27 @@
 
 .card {
   color: cornsilk;
+  flex: auto;
+  height: 250px;
+  min-width: 150px;
+  border: 1px solid cornsilk;
+  border-radius: 5px;
+  margin: 5px;
+  padding: 10px;
 }
 
 a {
   text-decoration: none;
   color: cornsilk;
 }
+
+img {
+  padding: 10px;
+  width: 100px;
+  height: 100px;
+  border-radius: 100px;
+  filter: drop-shadow(2px 4px 6px);
+}
 </style>
 <body>
   <h1>Liz Learns 3D</h1>
@@ -43,23 +66,55 @@ <h1>Liz Learns 3D</h1>
   </div>
   <main>
     <div class="card">
-      <a href="https://lizlam.github.io/3d/1dchess">1D Chess</a>
+      <a href="https://lizlam.github.io/3d/1dchess">
+	1D Chess
+        <div>
+          <img src="text-geometry.png"></img>
+        </div>
+        <p>work in progress...</p>
+      </a>
     </div>
     <div class="card">
-      <a href="https://lizlam.github.io/3d/grep">3D ABC's of grep</a>
+      <a href="https://lizlam.github.io/3d/grep">
+	3D ABC's of grep
+        <div>
+          <img src="text-geometry.png"></img>
+        </div>
+      </a>
+      <p>  An exercise with three.js and text geometries.
+      </p>
       <a href="https://github.com/lizlam/3d-abcs-of-grep">{code}</a>
     </div>
     <div class="card">
-      <a href="https://lizlam.github.io/3d/webgl-tri">WebGL Triangle</a>
+      <a href="https://lizlam.github.io/3d/webgl-tri">
+        WebGL Triangle
+        <div>
+          <img src="triangle.png"></img>
+        </div>
+        <p>First webgl triangle.</p>
+      </a>
       <a href="https://github.com/lizlam/lizlam.github.io/blob/master/3d/webgl-tri/index.html">{code}</a>
     </div>
     <div class="card">
-      <a href="https://lizlam.github.io/3d/church">3D Church</a>
+      <a href="https://lizlam.github.io/3d/church">
+   	3D Church
+        <div>
+          <img src="church.png"></img>
+        </div>
+        <p>Church using basic geometries in three.js.</p>
+      </a>
       <a href="https://github.com/lizlam/church">{code}</a>
     </div>
     <div class="card">
-      <a href="https://lizlam.github.io/3d/p4v-3dpreview">P4V 3D Preview</a>
+      <a href="https://lizlam.github.io/3d/p4v-3dpreview">
+	P4V 3D Preview
+        <div>
+          <img src="text-geometry.png"></img>
+        </div>
+        <p>An experiment with P4VJS api and model-viewer component.</p>
+      </a>
     </div>
   </main>
 </body>
 </html>
+
diff --git a/3d/text-geometry.png b/3d/text-geometry.png
diff --git a/3d/triangle.png b/3d/triangle.png