Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@phanosh
phanosh authored Jan 9, 2025
1 parent 4efb0e5 commit 373acd1
Showing 1 changed file with 160 additions and 20 deletions.
180 changes: 160 additions & 20 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,6 @@
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
a {
color: black;
Expand Down Expand Up @@ -116,14 +115,131 @@ <h1>✌️Hi, this is Phanos</h1>
<a href="https://github.com/phanosh" target="_blank">github</a> | <a href="https://www.linkedin.com/in/phanosha/" target="_blank">linkedin</a> | <a href="https://twitter.com/phanosha" target="_blank">X</a> | <a href="https://medium.com/@hadjikyriakou.phanos" target="_blank">blog</a>
</p>
<p>
<button id="projects-toggle-button" class="btn cube" style="margin: 0 auto;">
<div class="bg-top"><div class="bg-inner"></div></div>
<div class="bg"><div class="bg-inner"></div></div>
<div class="bg-right"><div class="bg-inner"></div></div>
<div class="text">See projects</div>
</button>
<p style="display: flex; justify-content: center; gap: 20px;">
<button id="projects-toggle-button" class="btn cube">
<div class="bg-top"><div class="bg-inner"></div></div>
<div class="bg"><div class="bg-inner"></div></div>
<div class="bg-right"><div class="bg-inner"></div></div>
<div class="text">See projects</div>
</button>
<button id="writings-toggle-button" class="btn cube">
<div class="bg-top"><div class="bg-inner"></div></div>
<div class="bg"><div class="bg-inner"></div></div>
<div class="bg-right"><div class="bg-inner"></div></div>
<div class="text">Writings & Podcasts</div>
</button>
</p>
<div id="projects-content" style="margin-top: 20px; display: none;"></div>
<div id="writings-content" style="margin-top: 20px; display: none;">
<div style="font-size: 1.2em; line-height: 1.6; text-align: left; max-width: 800px; margin: 0 auto;">
<!-- Articles Section -->
<div style="margin-bottom: 40px;">
<h2 style="font-size: 1.5em; margin-bottom: 20px; display: flex; align-items: center; color: #333;">
<span style="margin-right: 15px; font-size: 1.2em;">📝</span>
Articles
</h2>
<ul>
<li style="margin-bottom: 2px; font-size: 0.85em; padding-left: 35px; display: flex; align-items: center; gap: 2px;">
<a href="https://www.linkedin.com/pulse/ai-agents-data-revolution-2025-phanos-hadjikyriakou-6uv2c/?trackingId=iz4QSQ8%2BRQSVU48%2BOMg8UQ%3D%3D" target="_blank" >- AI Agents and Data: The Revolution of 2025 (LinkedIn)</a>

</li>
<li style="margin-bottom: 2px; font-size: 0.85em; padding-left: 35px; display: flex; align-items: center; gap: 2px;">
<a href="https://www.linkedin.com/pulse/climate-data-enrichment-aec-mapping-carbon-project-hadjikyriakou-cyade/?trackingId=iz4QSQ8%2BRQSVU48%2BOMg8UQ%3D%3D" target="_blank" >- Climate Data Enrichment in AEC: Mapping Carbon to Project Data (LinkedIn)</a>

</li>
<li style="margin-bottom: 2px; font-size: 0.85em; padding-left: 35px; display: flex; align-items: center; gap: 2px;">
<a href="https://www.linkedin.com/pulse/fit-purpose-guide-using-embodied-carbon-data-phanos-hadjikyriakou-dkwec/?trackingId=N%2BKjT2RdRFOtaXx9vghyJg%3D%3D" target="_blank" >- Fit for Purpose: A Guide to Using Embodied Carbon Data (LinkedIn)</a>

</li>
<li style="margin-bottom: 2px; font-size: 0.85em; padding-left: 35px; display: flex; align-items: center; gap: 2px;">
<a href="https://www.linkedin.com/pulse/6-insights-data-climate-digital-construction-after-3-hadjikyriakou-wrxoc/?trackingId=N%2BKjT2RdRFOtaXx9vghyJg%3D%3D" target="_blank" >- 6 Insights on Data, Climate, and Digital Construction After 3 Years (LinkedIn)</a>

</li>
<li style="margin-bottom: 2px; font-size: 0.85em; padding-left: 35px; display: flex; align-items: center; gap: 2px;">
<a href="https://www.linkedin.com/pulse/opinion-moving-away-from-lcas-towards-carbon-budgets-hadjikyriakou-rei1c/?trackingId=N%2BKjT2RdRFOtaXx9vghyJg%3D%3D" target="_blank" >- Opinion: Moving Away from LCAs Towards Carbon Budgets (LinkedIn)</a>

</li>
<li style="margin-bottom: 2px; font-size: 0.85em; padding-left: 35px; display: flex; align-items: center; gap: 2px;">
<a href="https://blog.2050-materials.com/the-data-value-chains-role-in-tackling-the-climate-crisis-a1f91e1d0af8" target="_blank" >- The Data Value Chain's Role in Tackling the Climate Crisis (2050 Materials Blog)</a>

</li>
<li style="margin-bottom: 2px; font-size: 0.85em; padding-left: 35px; display: flex; align-items: center; gap: 2px;">
<a href="https://blog.2050-materials.com/data-first-technology-second-theres-no-ai-without-good-data-6cd491279459" target="_blank" >- Data First, Technology Second: There’s No AI Without Good Data (2050 Materials Blog)</a>

</li>
<li style="margin-bottom: 2px; font-size: 0.85em; padding-left: 35px; display: flex; align-items: center; gap: 2px;">
<a href="https://blog.2050-materials.com/the-aec-industrys-obsession-with-yetanothercarbontool-93cdffc3867e" target="_blank" >- The AEC Industry's Obsession with #YetAnotherCarbonTool (2050 Materials Blog)</a>

</li>
<li style="margin-bottom: 2px; font-size: 0.85em; padding-left: 35px; display: flex; align-items: center; gap: 2px;">
<a href="https://blog.2050-materials.com/harnessing-chatgpt-in-aec-latent-space-activation-through-prompting-803861a4fed7" target="_blank" >- Harnessing ChatGPT in AEC: Latent Space Activation Through Prompting (2050 Materials Blog)</a>

</li>
<li style="margin-bottom: 2px; font-size: 0.85em; padding-left: 35px; display: flex; align-items: center; gap: 2px;">
<a href="https://blog.2050-materials.com/breaking-down-sbti-carbon-benchmarks-for-buildings-aka-how-much-upfront-carbon-is-ok-6d48449930f6" target="_blank" >- Breaking Down SBTi Carbon Benchmarks for Buildings (2050 Materials Blog)</a>

</li>
<li style="margin-bottom: 2px; font-size: 0.85em; padding-left: 35px; display: flex; align-items: center; gap: 2px;">
<a href="https://blog.2050-materials.com/the-role-of-open-apis-in-material-passports-4aa139ed969b" target="_blank" >- The Role of Open APIs in Material Passports (2050 Materials Blog)</a>

</li>
<li style="margin-bottom: 2px; font-size: 0.85em; padding-left: 35px; display: flex; align-items: center; gap: 2px;">
<a href="https://blog.2050-materials.com/aecdata-an-open-source-python-library-to-do-more-with-construction-data-f19084a5b0fb" target="_blank" >- AECData: An Open Source Python Library to Do More with Construction Data (2050 Materials Blog)</a>

</li>
<li style="margin-bottom: 2px; font-size: 0.85em; padding-left: 35px; display: flex; align-items: center; gap: 2px;">
<a href="https://blog.2050-materials.com/net-zero-is-a-data-integration-problem-b387ed8acd03" target="_blank" >- Net Zero is a Data Integration Problem (2050 Materials Blog)</a>

</li>
<li style="margin-bottom: 2px; font-size: 0.85em; padding-left: 35px; display: flex; align-items: center; gap: 2px;">
<a href="https://medium.com/@hadjikyriakou.phanos/6-1-insights-on-data-climate-and-digital-construction-after-3-years-of-talking-to-the-aec-a04241729541" target="_blank" >- 6+1 Insights on Data, Climate, and Digital Construction (Medium)</a>

</li>
<li style="margin-bottom: 2px; font-size: 0.85em; padding-left: 35px; display: flex; align-items: center; gap: 2px;">
<a href="https://blog.2050-materials.com/why-a-bim-library-with-embodied-carbon-data-might-be-the-perfect-climate-nudge-b58c4c39abff" target="_blank" >- Why a BIM Library with Embodied Carbon Data Might Be the Perfect Climate Nudge (2050 Materials Blog)</a>

</li>
<li style="margin-bottom: 2px; font-size: 0.85em; padding-left: 35px; display: flex; align-items: center; gap: 2px;">
<a href="https://blog.2050-materials.com/the-2050-materials-manifesto-d89deb63d712" target="_blank" >- The 2050 Materials Manifesto (2050 Materials Blog)</a>

</li>
<li style="margin-bottom: 2px; font-size: 0.85em; padding-left: 35px; display: flex; align-items: center; gap: 2px;">
<a href="https://www.longfinance.net/programmes/sustainable-futures/london-accord/reports/climate-risk-analysis-space-remote-sensing-machine-learning-and-future-measuring-climate-related-risk/" target="_blank" >- Climate Risk Analysis: Space, Remote Sensing, and Machine Learning (London Accord)</a>

</li>
</ul>

</div>

<!-- Podcasts Section -->
<div style="margin-bottom: 40px;">
<h2 style="font-size: 1.5em; margin-bottom: 20px; display: flex; align-items: center; color: #333;">
<span style="margin-right: 15px; font-size: 1.2em;">🎙️</span>
Podcasts
</h2>
<ul>
<li style="margin-bottom: 2px; font-size: 0.85em; padding-left: 35px; display: flex; align-items: center; gap: 2px;">
<a href="https://open.spotify.com/episode/3PjKkQQaPSPaEnwsGw0e1a?si=GQdheNwDRSmqVOWBjpETCQ" target="_blank">- The Transformative Power of Data and Technology in Sustainable Construction (Spotify)</a>
</li>
<li style="margin-bottom: 2px; font-size: 0.85em; padding-left: 35px; display: flex; align-items: center; gap: 2px;">
<a href="https://open.spotify.com/episode/3t3pDUiNTDADVB1l8Nf0np?si=1fmI16ujS5mEKEym81i_cg" target="_blank">- Post-COP27 Roadmap for the Built Environment (Spotify)</a>
</li>
<li style="margin-bottom: 2px; font-size: 0.85em; padding-left: 35px; display: flex; align-items: center; gap: 2px;">
<a href="https://www.rics.org/news-insights/the-transformative-power-of-data-and-technology-in-the-realm-of-sustainable-construction" target="_blank">- The Transformative Power of Data and Technology in Sustainable Construction (RICS)</a>
</li>
<li style="margin-bottom: 2px; font-size: 0.85em; padding-left: 35px; display: flex; align-items: center; gap: 2px;">
<a href="https://biofilico.com/news/sustainable-building-data-2050-materials" target="_blank">- Sustainable Building Data: Insights from 2050 Materials (Biofilico)</a>
</li>
<li style="margin-bottom: 2px; font-size: 0.85em; padding-left: 35px; display: flex; align-items: center; gap: 2px;">
<a href="https://www.shareyourgreendesign.com/media/10-piers-taylor/" target="_blank">- Interview with Piers Taylor on Sustainable Design (Share Your Green Design)</a>
</li>
<li style="margin-bottom: 2px; font-size: 0.85em; padding-left: 35px; display: flex; align-items: center; gap: 2px;">
<a href="https://constructive-voices.com/episode-46-what-is-the-post-cop27-roadmap-for-the-built-environment/" target="_blank">- Post-COP27 Roadmap for the Built Environment (Constructive Voices)</a>
</li>
</ul>
</div>
</div>
</div>

<style>
/* Button Styles */
Expand Down Expand Up @@ -286,11 +402,18 @@ <h1>✌️Hi, this is Phanos</h1>

<script>
document.addEventListener("DOMContentLoaded", function() {
const button = document.getElementById("projects-toggle-button");
const content = document.getElementById("projects-content");
const projectsButton = document.getElementById("projects-toggle-button");
const projectsContent = document.getElementById("projects-content");

// Writings button functionality
const writingsButton = document.getElementById("writings-toggle-button");
const writingsContent = document.getElementById("writings-content");


// Set initial button texts
projectsButton.querySelector(".text").textContent = "See projects";
writingsButton.querySelector(".text").textContent = "Writings & Podcasts";

// Set the initial button text
button.querySelector(".text").textContent = "See projects";

// Project HTML content
const projectHTML = `
Expand Down Expand Up @@ -325,7 +448,7 @@ <h1>✌️Hi, this is Phanos</h1>
</div>
</div>
<div class="card">
<img src="imgs/strength.png" alt="Climate KPIs" class="card__image">
<img src="imgs/strength.png" alt="Strength Benchmarking" class="card__image">
<div class="card__content">
<p class="card__title">Strength Benchmarking</p>
<p class="card__description">A project to easily benchmark your strength based on basic lifts and global data.</p>
Expand Down Expand Up @@ -382,15 +505,32 @@ <h1>✌️Hi, this is Phanos</h1>
</div>
`;

button.addEventListener("click", function() {
if (content.style.display === "none") {
content.style.display = "flex";
content.innerHTML = projectHTML;
button.querySelector(".text").textContent = "Hide projects";
// Projects button click handler
projectsButton.addEventListener("click", function() {
if (projectsContent.style.display === "none") {
projectsContent.style.display = "flex";
writingsContent.style.display = "none"; // Hide writings when showing projects
projectsContent.innerHTML = projectHTML;
projectsButton.querySelector(".text").textContent = "Hide projects";
writingsButton.querySelector(".text").textContent = "Writings & Podcasts";
} else {
projectsContent.style.display = "none";
projectsContent.innerHTML = "";
projectsButton.querySelector(".text").textContent = "See projects";
}
});
// Writings button click handler
writingsButton.addEventListener("click", function() {
if (writingsContent.style.display === "none") {
writingsContent.style.display = "block";
projectsContent.style.display = "none"; // Hide projects when showing writings
projectsContent.innerHTML = ""; // Clear projects content
writingsButton.querySelector(".text").textContent = "Hide writings";
projectsButton.querySelector(".text").textContent = "See projects";
} else {
content.style.display = "none";
content.innerHTML = ""; // Clear the content to prevent keeping it in memory
button.querySelector(".text").textContent = "See projects";
writingsContent.style.display = "none";
// Remove this line: writingsContent.innerHTML = "";
writingsButton.querySelector(".text").textContent = "Writings & Podcasts";
}
});
});
Expand Down

0 comments on commit 373acd1

Please sign in to comment.