Add files via upload

IseeJ · Nov 8, 2024 · 3f82edb · 3f82edb
1 parent 4cad220
commit 3f82edb
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>I-seeWJ</title>
+    <title>I-see's Site</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Comfortaa&family=Montserrat:wght@400;700&display=swap">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <link rel="icon" type="image/x-icon" href="siteIMG/IzeeCon.PNG">
@@ -125,6 +125,16 @@ <h2>Clubs / Student Organizations:</h2>
         <!-- Art Section -->
         <section id="art" class="tab-content">
             <p>I enjoy drawing as a hobby and I contribute to student organizations, lab groups, and conferences by designing merchandise and logos.</p>
+
+            <div class="p-container">
+                <h4>Particle Physics Comics</h4>
+                <ul class="p-content">
+                    <div class="image-container">
+                        <img src="siteIMG/C1.png" alt="Image 1" class="side-by-side-image" onclick= "openInNewTab('siteIMG/C1.png')">
+                        <img src="siteIMG/C2.png" alt="Image 2" class="side-by-side-image"   onclick= "openInNewTab('siteIMG/C2.png')">
+                        <img src="siteIMG/C4.png" alt="Image 2" class="side-by-side-image"   onclick= "openInNewTab('siteIMG/C4.png')">
+                </div>
+
             <h4>Designs for Wellesley College class council and students organizations</h4>
             <div class="gallery5">
                 <div class="gallery-item">
@@ -195,6 +205,7 @@ <h2>Publications</h2>
                     <li>2016 - Present | Columnist: <a href="https://www.nstda.or.th/sci2pub/sarawit/" target="_blank">Sarawit Magazine</a>, National Science and Technology Development Agency, Thailand (NSTDA) - Publishing a monthly article</li>
                 </ul>
             </div>
+
         <h2>Talks / Posters</h2>
             <div class="gallery4">
                 <div class="gallery-item">
@@ -230,7 +241,6 @@ <h3>Tanner Conference</h3>
                     </div>
                 </div>
               </div>
-              </section2>
 
 
         </section>
@@ -239,12 +249,13 @@ <h3>Tanner Conference</h3>
         <section id="project" class="tab-content" style="display:none;">
 
             <div class="p-container">
-                <h2>Coding: Cosmos Persona</h2>
+                <h2>Cosmos Persona</h2>
                 <ul class="p-content">
                     <p>March 2024: I developed an astronomy-themed personality quiz using JavaScript, HTML, and CSS as a learning resource. </p>
                     <div class="image-container">
                         <img src="siteIMG/Cosmos0.gif" alt="Image 1" class="side-by-side-image" onclick= "openInNewTab('https://iseej.github.io/CosmosPersona/')">
                         <img src="siteIMG/cosmos1_1.png" alt="Image 2" class="side-by-side-image"   onclick= "openInNewTab('https://www.instagram.com/p/C4l6R75vHGG/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==')">
+                        <img src="siteIMG/cosmos1_2.png" alt="Image 2" class="side-by-side-image"   onclick= "openInNewTab('https://www.instagram.com/p/C4l6R75vHGG/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==')">
                     </div>
                     </ul>
 
@@ -253,13 +264,21 @@ <h2>Coding: Cosmos Persona</h2>
             <div class="p-container">
                 <iframe src="https://iseej.github.io/Boink/" frameborder="0"></iframe>
             </div>
-
             <div class="p-container">
-                <h2>Electronics/Engineering: Focus Bot</h2>
+                <h2>Tickle Alarm Socks</h2>
+                <ul class="p-content">
+                    <p>Back in 2014... I want to make an alarm that doesn't make noises</p>
+                    <img src="project-image2.jpg" alt="Project Image 2" class="responsive">
+            </div>
+            <div class="p-container">
+                <h2>Focus Bot</h2>
                 <ul class="p-content">
                     <p>In PHYS210: Experimental Techniques class, I made 'Focus Bot', a robot that will hit you if you spend too much time on your phone. I used Arduino IDE, pressure sensors, and servo motors in the circuits.</p>
                     <img src="project-image2.jpg" alt="Project Image 2" class="responsive">
             </div>
+
+
+
         </section>
     </main>
 

diff --git a/styles.css b/styles.css
@@ -662,7 +662,7 @@ header img {
 .image-container {
     display: grid;
     gap: 10px; /* Space between images */
-    grid-template-columns: repeat(2, 1fr); /* Change the 3 to set the number of images per row */
+    grid-template-columns: repeat(3, 1fr);
 }
 
 .side-by-side-image {
@@ -674,8 +674,8 @@ header img {
 .side-by-side-image:hover {
     cursor: pointer;
     transform: scale(1.05);
-
 }
 
 
 
+