Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@BeatriceVaienti
BeatriceVaienti authored Dec 18, 2023
1 parent d9ba543 commit fd3a331
Showing 1 changed file with 79 additions and 110 deletions.
189 changes: 79 additions & 110 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,94 +2,7 @@
<html>
<head>
<title>Beatrice Vaienti - PhD Student @ DHLAB, EPFL</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

*, *:before, *:after {
box-sizing: border-box;
}
body, h1, h2, p, a {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}

body {
background: linear-gradient(135deg, #EF629F 0%, #EECDA3 100%);
color: #333;
line-height: 1.6;
}

.header {
padding: 80px;
text-align: center;
color: white;
}

.navigation {
background-color: transparent;
color: white;
overflow: hidden;
padding: 10px 0;
text-align: right;
}
.navigation a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
text-transform: uppercase;
font-weight: 700;
}
.navigation a:hover {
color: #EF629F;
}

.section {
padding: 20px;
text-align: center;
}
.section-light {
background-color: rgba(255, 255, 255, 0.8);
margin: 20px;
padding: 40px;
border-radius: 10px;
}

.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.gallery-item {
margin: 10px;
background: #fff;
border-radius: 10px;
overflow: hidden;
transition: transform 0.3s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.gallery-item:hover {
transform: translateY(-5px);
}
.gallery-image {
width: 100%;
height: auto;
display: block;
}

.footer {
background-color: #EF629F;
color: white;
padding: 20px;
text-align: center;
}

/* Add your own styles here to match the example */
/* Example: Change font sizes, add new sections, modify colors, etc. */

</style>
<!-- Style and head content -->
</head>
<body>

Expand All @@ -99,33 +12,89 @@ <h1 id="header-title"></h1>
</div>

<div class="navigation">
<a id="navigation-work"></a>
<a id="navigation-about"></a>
<!-- Add other links as needed -->
<a href="#work" id="navigation-work">Work</a>
<a href="#about" id="navigation-about">About</a>
<!-- Add other navigation links as needed -->
</div>

<div class="section" id="bio">
<div class="section-light">
<h2 id="about-title"></h2>
<p id="about-description"></p>
</div>
</div>

<div class="section" id="cv">
<div class="section-light">
<h2 id="cv-title"></h2>
<p id="cv-summary"></p>
</div>
</div>

<div class="section" id="projects">
<div class="section-light">
<h2>My Projects</h2>
<div class="gallery" id="projects-gallery">
<!-- Projects will be inserted here -->
</div>
</div>
</div>

<!-- Add your content sections here following the example -->
<!-- Each section should have a .section-light class and contain a .gallery for projects -->
<div class="section" id="contact">
<div class="section-light">
<h2>Contact Me</h2>
<p id="contact-prompt"></p>
<!-- Contact form elements -->
</div>
</div>

<div class="footer">
<p> id="footer-copyright" ></p>
<p id="footer-copyright"></p>
</div>

<!-- JavaScript to load content from JSON -->
<script>
fetch('content.json')
.then(response => response.json())
.then(data => {
// Inject header content
document.getElementById('header-title').textContent = data.header.title;
document.getElementById('header-subtitle').textContent = data.header.subtitle;
document.getElementById('navigation-work').textContent = data.navigation.work;
document.getElementById('navigation-about').textContent = data.navigation.about;
document.getElementById('footer-copyright').textContent = data.footer.copyright;
})
.catch(error => {
console.error('Error fetching content:', error);

<script>
fetch('content.json')
.then(response => response.json())
.then(data => {
// Header
document.getElementById('header-title').textContent = data.header.title;
document.getElementById('header-subtitle').textContent = data.header.subtitle;

// Navigation (if required)
// document.getElementById('navigation-work').textContent = 'Work'; // Text is static, as it's just a label
// document.getElementById('navigation-about').textContent = 'About'; // Text is static, as it's just a label

// About section
document.getElementById('about-title').textContent = data.about.title;
document.getElementById('about-description').textContent = data.about.description;

// CV section
document.getElementById('cv-title').textContent = data.cv.title;
document.getElementById('cv-summary').textContent = data.cv.summary;

// Projects section
const projectsGallery = document.getElementById('projects-gallery');
data.projects.forEach(project => {
const projectItem = document.createElement('div');
projectItem.className = 'gallery-item';
projectItem.innerHTML = `
<img class="gallery-image" src="${project.image}" alt="${project.title}">
<p>${project.title}</p>
<p>${project.description}</p>
`;
projectsGallery.appendChild(projectItem);
});
</script>

// Contact section
document.getElementById('contact-prompt').textContent = data.contact.prompt;

// Footer
document.getElementById('footer-copyright').textContent = data.footer.copyright;
})
.catch(error => {
console.error('Error fetching content:', error);
});
</script>

</body>
</html>

0 comments on commit fd3a331

Please sign in to comment.