Merge pull request #8 from Ribeirosk8/master

Update people page: alumni/current member

Author: Ribeirosk8

css/people.css

@@ -98,3 +98,64 @@ header {
 /*    margin-left: auto;*/
 /*    margin-right: auto;*/
 /*}*/
+
+/* Member grids */
+.people-container { margin-top:40px; }
+.people-container h2 { font-size:22px; margin:25px 0 15px; }
+.members-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:26px; justify-items:center; }
+
+/* Alumni specific 4x4 grid */
+.alumni-members .members-grid { 
+    grid-template-columns: repeat(4, 1fr); 
+    max-width: 800px; 
+    margin: 0 auto 0 0; 
+    gap: 20px; 
+    justify-items: start;
+    padding-left: 0;
+}
+
+.member-card { text-align:center; font-size:14px; padding:6px 0; }
+.member-photo { 
+    width: 150px; 
+    height: 150px; 
+    object-fit: cover; 
+    border-radius: 10px; 
+    box-shadow: 0 3px 8px rgba(0,0,0,.30); 
+    border: 1px solid rgba(0,0,0,.10); 
+    transition: transform .18s ease, box-shadow .18s ease; 
+    background: #f5f5f5; 
+    display: block;
+}
+.member-card:hover .member-photo { transform:scale(1.03); box-shadow:0 4px 10px rgba(0,0,0,.35); }
+.member-name { margin-top:6px; line-height:1.2; font-weight:600; }
+.member-role { margin-top:2px; color:#555; font-size:13px; }
+
+/* Image error handling */
+.member-photo:not([src]), .member-photo[src=""] {
+    background: #f5f5f5;
+    border: 2px dashed #ccc;
+    color: #999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 120px;
+    width: 120px;
+}
+.member-photo:not([src])::after, .member-photo[src=""]::after {
+    content: "No Image";
+    font-size: 12px;
+}
+
+/* Low-res indicator removed per user request */
+
+/* Carousel image tighten */
+.carousel-item { display:flex; justify-content:center; align-items:center; }
+.carousel-image { max-height:260px; width:auto; height:100%; object-fit:contain; }
+
+/* Emphasis for section headings */
+.people-container .current-members h2,
+.people-container .alumni-members h2 {
+    color: #d32f2f !important; /* red */
+    text-decoration: underline;
+    text-underline-offset: 3px;
+}

data/members.csv

@@ -1,13 +1,15 @@
 first_name,last_name,full_name,name_on_pub,program,join_semester,disable,alumni,image,cv,homepage,linkedin,github,scholar,research_gate,orcid_qr,orcid,researcher_id,youtube,introduction,publication_list
 Tommy,Dang,Tommy Dang,Tommy Dang,Assistant Professor,Fall 2016,,,images/people/tommy_idvl_2019.jpg,file/TommyDang-2016-CV.pdf,http://www.myweb.ttu.edu/tnhondan/,http://www.linkedin.com/in/tuan-dang-ab6221a,http://github.com/Tommy-Dang,http://scholar.google.com/citations?user=jobGGfEAAAAJ,https://www.researchgate.net/profile/Tommy_Dang2,images/icons/orcid_qrcode.png,http://orcid.org/0000-0001-8322-0014,http://www.researcherid.com/rid/P-9915-2016,,"Tommy Dang leads the interactive Data Visualization Lab (iDVL). He is currently an Assistant Professor in the Computer Science Department at Texas Tech University. His research on interactive visual analytics has appeared in Computer Graphics Forum and IEEE Transactions on Visualization and Computer Graphics and has been presented at VIS, EuroVis, BioVis, and PacificVis, among others.",
+RPhornsawan,Roemsri,Phornsawan Roemsri,Phornsawan Roemsri,Ph.D. student,Fall 2023,,,images/people/roemsri.png,file/RoemsriCV.pdf,,,https://github.com/rinriko,,,,,,,"Roemsri is currently pursuing her Ph.D. in Computer Science at Texas Tech University, where she works in the interactive Data Visualization Lab (iDVL) under the guidance of her advisor, Dr. Tommy Dang. Her research interests primarily revolve around network security, data visualization, and analysis. Before coming to the United States, she earned her Bachelor's degree in Computer Engineering from Mahidol University in Bangkok, Thailand, in 2019.",
+Amauri,Ribeiro,Amauri Ribeiro,Amauri Ribeiro,Ph.D. student,Fall 2025,,,images/people/amauri_ribeiro.jpg,file/AmauriRibeiroCV.pdf,,,https://github.com/Ribeirosk8,,,,,,,"Amauri is currently pursuing his Ph.D. in Computer Science at Texas Tech University.",
+Thinh,Pham,Thinh Pham,Thinh Pham,Ph.D. student,Fall 2025,,,images/people/thinh_hoang.jpg,file/ThinhPhamCV.pdf,,,https://github.com/thinhhoangpham,,,,,,,"Research interests placeholder.",
 Vung,Pham,Pham Van Vung,Vung Pham,Ph.D. student,Summer 2018,,1,images/people/vung_idvl_2019.jpg,file/vung.pdf,http://www.myweb.ttu.edu/vunpham,https://www.linkedin.com/in/phamvanvung/,https://github.com/phamvanvung,https://scholar.google.com.vn/citations?hl=en&user=QMpiK3UAAAAJ,,,,,https://www.youtube.com/channel/UCTiix4xPlgA8DmlUYPIL0eA,"Vung received his Bachelor of Science in Information Technologies from President University (Indonesia) in 2005 and became a lecturer at President University for one and a half years. He then took his Master of Science in Computer Systems Engineering at Politecnico di Milano and completed it in 2010. After his Master degree, he became a lecturer at FPT University (Vietnam) from 2010 until 2018. He has a great interest in data analytics and data visualization and so he decided to take his PhD in Computer Science at TTU and work at the IDV Lab to strengthen his research skills and his knowledge in these fields.",
-Ngan,Nguyen,Ngan Vuong Thuy Nguyen,Ngan Nguyen,Ph.D. student,Fall 2018,,,images/people/ngan_idvl_2019.jpg,file/Ngan.pdf,http://www.myweb.ttu.edu/ngu00336/,https://www.linkedin.com/in/ngan-nguyen-6a0246128/,https://github.com/nvtNgan,https://scholar.google.com.vn/citations?hl=vi&user=yRClsxgAAAAJ,https://www.researchgate.net/profile/Ngan-Nguyen-24,images/icons/orcid_qrcode.png,https://orcid.org/0000-0001-5039-8019,https://www.researchgate.net/profile/Ngan-Nguyen-24,,"Ngan earned her Bachelor's Degree in Physics and Engineering Physics at University of Science, VNU-HCM (Vietnam) in 2014. In 2016, she took her Master of Science in Applied Physics at VNU-HCM. From 2015 to 2018, she worked as Teaching Assitant at Department of Physics and Computer Science at VNU-HCM. Her research interests are in simulation, signal processing (ECG and EEG), IoT and user interface most recently focusing on the application of pattern recognization on EEG.",
-Jake,Gonzalez,Jake Grant Gonzalez,Jake Gonzalez,Ph.D. student,Summer 2020,,,images/people/jake.jpg,,,https://www.linkedin.com/in/jake-gonzalez-551306b4/,https://github.com/JakeTTU,,,,,,,,
+Ngan,Nguyen,Ngan Vuong Thuy Nguyen,Ngan Nguyen,Ph.D. student,Fall 2018,,1,images/people/ngan_idvl_2019.jpg,file/Ngan.pdf,http://www.myweb.ttu.edu/ngu00336/,https://www.linkedin.com/in/ngan-nguyen-6a0246128/,https://github.com/nvtNgan,https://scholar.google.com.vn/citations?hl=vi&user=yRClsxgAAAAJ,https://www.researchgate.net/profile/Ngan-Nguyen-24,images/icons/orcid_qrcode.png,https://orcid.org/0000-0001-5039-8019,https://www.researchgate.net/profile/Ngan-Nguyen-24,,"Ngan earned her Bachelor's Degree in Physics and Engineering Physics at University of Science, VNU-HCM (Vietnam) in 2014. In 2016, she took her Master of Science in Applied Physics at VNU-HCM. From 2015 to 2018, she worked as Teaching Assitant at Department of Physics and Computer Science at VNU-HCM. Her research interests are in simulation, signal processing (ECG and EEG), IoT and user interface most recently focusing on the application of pattern recognization on EEG.",
+Jake,Gonzalez,Jake Grant Gonzalez,Jake Gonzalez,Ph.D. student,Summer 2020,,1,images/people/jake.jpg,,,https://www.linkedin.com/in/jake-gonzalez-551306b4/,https://github.com/JakeTTU,,,,,,,,
 Vinh,Nguyen,Vinh The Nguyen,Vinh Nguyen,Ph.D. student,Spring 2017,,1,images/people/vinh_idvl_2019.jpg,https://github.com/iDataVisualizationLab/web/raw/master/file/vinh.pdf,https://myweb.ttu.edu/vinhtngu,https://www.linkedin.com/in/vinh-nguyen-the-74242187,https://github.com/Alex-Nguyen,https://scholar.google.com/citations?hl=en&user=6rZWCbcAAAAJ,,,,,,"Vinh got his Bachelor of Science at College of Information Technology, Vietnam National University Hanoi in 2007. After several years working in software industry (such as FPT), he dicided to pursue and finished his Master degree in Management Information System at Oklahoma State University, Stillwater, OK in 2013. Since then, he had worked as a lecturer in programming and E-commerce at Thai Nguyen University. In 2016, he received the Vietnam International Education Development (VIED) - Ministry of Education and Training scholarship to pursue his PhD at Texas Tech University.",
-Huyen,Nguyen,Huyen Ngoc Nguyen,Huyen Nguyen,Ph.D. student,Fall 2018,,,images/people/huyen_idvl_2019.jpg,file/Huyen.pdf,http://www.myweb.ttu.edu/huyenngu,https://www.linkedin.com/in/huyen-n-nguyen/,https://github.com/huyen-nguyen,https://scholar.google.com.vn/citations?hl=en&user=tsrO-ZgAAAAJ,https://www.researchgate.net/profile/Huyen_Nguyen140,,https://orcid.org/0000-0001-6554-2327,,https://www.youtube.com/channel/UC73eEp4YZ6SBHUKIg-YwQWQ,"Huyen is a Ph.D. student in Computer Science at Texas Tech University, advised by Dr. Tommy Dang in the Interactive Data Visualization Lab. Across the vast range of interactive data, her research interests include data visualization and analysis, visual analytics, HCI, and computer vision. She studies interactive visualization techniques and applications that enhance the understanding of large-scale data, including quantitative and qualitative data. Before coming to Lubbock, Huyen earned her Bachelor's Degree in Information Systems at Hanoi University of Science and Technology (Vietnam) in 2018.",
+Huyen,Nguyen,Huyen Ngoc Nguyen,Huyen Nguyen,Ph.D. student,Fall 2018,,1,images/people/huyen_idvl_2019.jpg,file/Huyen.pdf,http://www.myweb.ttu.edu/huyenngu,https://www.linkedin.com/in/huyen-n-nguyen/,https://github.com/huyen-nguyen,https://scholar.google.com.vn/citations?hl=en&user=tsrO-ZgAAAAJ,https://www.researchgate.net/profile/Huyen_Nguyen140,,https://orcid.org/0000-0001-6554-2327,,https://www.youtube.com/channel/UC73eEp4YZ6SBHUKIg-YwQWQ,"Huyen is a Ph.D. student in Computer Science at Texas Tech University, advised by Dr. Tommy Dang in the Interactive Data Visualization Lab. Across the vast range of interactive data, her research interests include data visualization and analysis, visual analytics, HCI, and computer vision. She studies interactive visualization techniques and applications that enhance the understanding of large-scale data, including quantitative and qualitative data. Before coming to Lubbock, Huyen earned her Bachelor's Degree in Information Systems at Hanoi University of Science and Technology (Vietnam) in 2018.",
 Bao,Nguyen,Bao Nguyen,Bao Nguyen,M.S Student,Fall 2019,1,1,images/people/bao_idvl_2019.jpg,file/BaoCV.pdf,http://www.myweb.ttu.edu/ngu50806/index.html,,https://github.com/BaoDNguyen,,,,,,,"Bao got his Bachelor of Science in Physics and Engineering Physics at VNUHCM - University of Science in 2014, before receiving a Master in Science in 2017 at the same University. After that, he became Research and Teaching Assistant at Department of Nuclear Physics and Nuclear Engineering. His interests are data analysis, visual analytics, and simulations, so he decided to take a Ph.D. program at Texas Tech University and work as Research Assistant at the IDV Lab to study these fields from August 2019.",
 Chau,Pham,Minh Chau Pham,Chau Pham,Ph.D. student,Spring 2020,1,1,images/people/chau.jpg,file/chau.pdf,http://www.myweb.ttu.edu/chaupham,https://www.linkedin.com/in/chau-pham-347220150/,https://github.com/chaupmcs,,,,,,,"Chau got his Bachelor of Engineering Degree (Honors Program) in Computer Science at Ho Chi Minh City University of Technology (HCMUT) in 2018. After graduation, he worked as a Research Data Scientist at Zalo, VNG Corporation. His research interests are Machine Learning, Explainable AI, and Data Visualization.",
 Nhat,Le,Nhat Le,Nhat Le,M.S Student,Fall 2018,,1,images/people/nhat.jpg,file/nhat.pdf,http://www.myweb.ttu.edu/hoangnle/,,https://github.com/nhatmusic,,,,,,,"Nhat got his Bachelor degree in Embedded System at Da Nang University of Technology, DUT (Vietnam) in 2015 and then his Master degree in Electrical Engineering at Texas Tech University, Lubbock, TX in 2018. Currently, his primary interest research is Music Visualization and Music Information Retrieval.",
 Lino,Virgen,Lino Gracia Virgen,Lino Virgen,M.S Student,Fall 2018,,1,images/people/VirgenGraciaLino.png,,,,,,,,,,,,
-Juanita,Benjamin,Juanita Benjamin,,Undergraduate Student,,,1,images/people/juanita.jpg,,,,,,,,,,,,
-RPhornsawan,Roemsri,Phornsawan Roemsri,Phornsawan Roemsri,Ph.D. student,Fall 2023,,,images/people/roemsri.png,file/RoemsriCV.pdf,,,https://github.com/rinriko,,,,,,,"Roemsri is currently pursuing her Ph.D. in Computer Science at Texas Tech University, where she works in the interactive Data Visualization Lab (iDVL) under the guidance of her advisor, Dr. Tommy Dang. Her research interests primarily revolve around network security, data visualization, and analysis. Before coming to the United States, she earned her Bachelor's degree in Computer Engineering from Mahidol University in Bangkok, Thailand, in 2019.",
+Juanita,Benjamin,Juanita Benjamin,,Undergraduate Student,,,1,images/people/juanita.jpg,,,,,,,,,,,,

footer.html

@@ -1,6 +1,6 @@
 <div>
 <footer>
-    <p>Last revised: Dec 4, 2020 | Copyright &copy; iDVL, TTU</p>
+    <p>Last revised: Sept 4, 2025 | Copyright &copy; iDVL, TTU</p>
 </footer>
 </div>
 

images/people/amauri_ribeiro.jpg

@@ -22,12 +22,13 @@ function formatTime(d) {
     return time_current;
 }
 
-d3.csv('data/members.csv').then(function (_data) {
-    const data = _data.filter(d=>!d.disable);
+d3.csv('data/members.csv?v=' + Date.now()).then(function (_data) {
+    // normalize alumni flag and filter out disabled
+    const data = _data.filter(d=>!d.disable).map(rec=>{rec.alumni = rec.alumni && rec.alumni.trim() !== '' ? 1 : 0; return rec;});
     d3.tsv('data/publication.tsv').then(function (publications) {
         profileList = data;
-        debugger
-        data.sort((a, b) => a.alumni - b.alumni);
+    // cache busting applied via query param above; removed stray debugger
+    data.sort((a, b) => a.alumni - b.alumni);
         alumni =[];
         notalumni = data.filter((d,i) => {
             d.index=i
@@ -37,6 +38,42 @@ d3.csv('data/members.csv').then(function (_data) {
                 alumni.push(d)
             }
         });
+        // populate current and alumni member grids
+        try {
+            const currentContainer = d3.select('.people-container .current-members .members-grid');
+            const alumniContainer = d3.select('.people-container .alumni-members .members-grid');
+            currentContainer.selectAll('*').remove();
+            alumniContainer.selectAll('*').remove();
+
+            const card = cont => sel => {
+                const c = sel.append('div').attr('class','member-card');
+                     c.append('img')
+                      .attr('src',d=>d.image)
+                      .attr('alt',d=>d.full_name)
+                      .attr('class','member-photo')
+                      .attr('loading','lazy')
+                      .attr('decoding','async')
+                      .on('error', function() {
+                          console.error('Failed to load image:', d3.select(this).attr('src'));
+                          d3.select(this).style('background', '#ddd').style('border', '2px dashed #999');
+                      })
+                     // using simpler image handling without srcset for reliability
+                c.append('div').attr('class','member-name').text(d=>d.full_name);
+                c.append('div').attr('class','member-role').text(d=>d.program || '');
+            };
+            currentContainer.selectAll('.member-card')
+                .data(notalumni)
+                .enter()
+                .call(card(currentContainer));
+            alumniContainer.selectAll('.member-card')
+                .data(alumni)
+                .enter()
+                .call(card(alumniContainer));
+
+            // removed automatic low-res flagging per user feedback
+        } catch(e){
+            console.error('Error populating member grids', e);
+        }
         alumni[0].marginLeft = '20px';
         if (alumni.length % 2) {
             alumni[Math.round(alumni.length / 2)].text = 'Alumni';

images/people/thinh_hoang.jpg

@@ -71,6 +71,21 @@
             <div class="publications"></div>
         </div>
 
+        <div class="people-container">
+            <div class="current-members">
+                <h2>Current Members</h2>
+                <div class="members-grid">
+                    <!-- Member photos and info -->
+                </div>
+            </div>
+            <div class="alumni-members">
+                <h2>Alumni / Former Members</h2>
+                <div class="members-grid">
+                    <!-- Alumni photos and info -->
+                </div>
+            </div>
+        </div>
+
 
     </div>
 </div>