add photo placeholders

Author: viktorpm

assets/css/style.css

@@ -436,6 +436,39 @@ body {
   color: #000;
 }
 
+.research-photos {
+  margin-top: 30px;
+}
+
+.photo-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 30px;
+  margin-top: 20px;
+}
+
+.photo-item {
+  text-align: center;
+  background: #f8f8f8;
+  padding: 20px;
+  border-radius: 8px;
+}
+
+.research-image {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  border-radius: 4px;
+  margin-bottom: 15px;
+}
+
+.photo-caption {
+  font-size: 14px;
+  color: #666;
+  font-style: italic;
+  margin: 0;
+}
+
 /* People page styles */
 .people-content {
   max-width: 900px;
@@ -457,6 +490,22 @@ body {
   background: #f8f8f8;
   padding: 40px;
   border-radius: 8px;
+  display: flex;
+  gap: 30px;
+  align-items: flex-start;
+}
+
+.person-photo {
+  flex-shrink: 0;
+}
+
+.person-image {
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 4px solid #fff;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
 }
 
 .person-info h3 {
@@ -957,4 +1006,18 @@ body {
   .highlights-grid {
     grid-template-columns: 1fr;
   }
+  
+  .person-card {
+    flex-direction: column;
+    text-align: center;
+  }
+  
+  .person-image {
+    width: 150px;
+    height: 150px;
+  }
+  
+  .photo-grid {
+    grid-template-columns: 1fr;
+  }
 }

people.html

@@ -52,6 +52,9 @@ <h1>People</h1>
       <section class="principal-investigator">
         <h2>Principal Investigator</h2>
         <div class="person-card">
+          <div class="person-photo">
+            <img src="assets/img/athena-akrami.jpg" alt="Dr. Athena Akrami" class="person-image">
+          </div>
           <div class="person-info">
             <h3>Dr. Athena Akrami</h3>
             <p class="person-title">Principal Investigator</p>

research.html

@@ -121,6 +121,30 @@ <h3>Computational Modeling</h3>
           <p>We develop theoretical frameworks and computational models to understand the principles governing learning, inference, and memory formation.</p>
         </div>
       </section>
+      
+      <section class="research-section">
+        <h2>Research Photos</h2>
+        <div class="research-photos">
+          <div class="photo-grid">
+            <div class="photo-item">
+              <img src="assets/img/research-setup-1.jpg" alt="Research setup" class="research-image">
+              <p class="photo-caption">Experimental setup for behavioral studies</p>
+            </div>
+            <div class="photo-item">
+              <img src="assets/img/research-setup-2.jpg" alt="Neural recording setup" class="research-image">
+              <p class="photo-caption">Neural recording equipment</p>
+            </div>
+            <div class="photo-item">
+              <img src="assets/img/lab-environment.jpg" alt="Lab environment" class="research-image">
+              <p class="photo-caption">Lab environment and workspace</p>
+            </div>
+            <div class="photo-item">
+              <img src="assets/img/data-analysis.jpg" alt="Data analysis" class="research-image">
+              <p class="photo-caption">Data analysis and computational modeling</p>
+            </div>
+          </div>
+        </div>
+      </section>
     </div>
   </main>