Skip to content

Build academic website with research and CV sections #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Copilot wants to merge 3 commits into from
Closed

Build academic website with research and CV sections #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
54f0301
Initial plan
Copilot Dec 28, 2025
e277eb1
Create academic website with research and CV sections
Copilot Dec 28, 2025
be30fd7
Add active state styling for navigation links
Copilot Dec 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
212 changes: 212 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,212 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fergus Donnan - Academic Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav>
<div class="container">
<h1 class="logo">Fergus Donnan</h1>
<ul class="nav-links">
<li><a href="#about">About</a></li>
<li><a href="#research">Research</a></li>
<li><a href="#publications">Publications</a></li>
<li><a href="#cv">CV</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>

<header class="hero">
<div class="container">
<div class="hero-content">
<h1>Fergus Donnan</h1>
<p class="subtitle">Researcher | Academic | Scholar</p>
<p class="description">Exploring innovative solutions in [Your Research Field]</p>
</div>
</div>
</header>

<main>
<section id="about" class="section">
<div class="container">
<h2>About Me</h2>
<div class="about-content">
<div class="profile-image">
<div class="placeholder-image">Photo</div>
</div>
<div class="bio">
<p>Welcome to my academic website. I am a researcher focused on [Your Research Area]. My work encompasses [brief description of your work].</p>
<p>I am currently [your current position] at [your institution]. My research interests include:</p>
<ul>
<li>Research Interest 1</li>
<li>Research Interest 2</li>
<li>Research Interest 3</li>
</ul>
</div>
</div>
</div>
</section>

<section id="research" class="section bg-light">
<div class="container">
<h2>Research</h2>
<p class="section-intro">My research focuses on addressing key challenges in [your field]. Below are some of my current and past projects.</p>

<div class="research-grid">
<div class="research-card">
<h3>Research Project 1</h3>
<p class="research-meta">Timeline: 2023 - Present</p>
<p>Brief description of your first research project. Explain the problem, your approach, and key findings or goals.</p>
</div>

<div class="research-card">
<h3>Research Project 2</h3>
<p class="research-meta">Timeline: 2022 - 2023</p>
<p>Brief description of your second research project. Explain the problem, your approach, and key findings or goals.</p>
</div>

<div class="research-card">
<h3>Research Project 3</h3>
<p class="research-meta">Timeline: 2021 - 2022</p>
<p>Brief description of your third research project. Explain the problem, your approach, and key findings or goals.</p>
</div>
</div>
</div>
</section>

<section id="publications" class="section">
<div class="container">
<h2>Publications</h2>
<p class="section-intro">Selected publications from my research work.</p>

<div class="publications-list">
<div class="publication">
<h3>Publication Title 1</h3>
<p class="authors"><strong>Donnan, F.</strong>, Co-Author A., Co-Author B.</p>
<p class="venue"><em>Journal/Conference Name</em>, Year</p>
<p class="publication-description">Brief description of the publication and its contribution to the field.</p>
<div class="publication-links">
<a href="#" class="btn-link">Paper</a>
<a href="#" class="btn-link">Code</a>
</div>
</div>

<div class="publication">
<h3>Publication Title 2</h3>
<p class="authors"><strong>Donnan, F.</strong>, Co-Author C.</p>
<p class="venue"><em>Journal/Conference Name</em>, Year</p>
<p class="publication-description">Brief description of the publication and its contribution to the field.</p>
<div class="publication-links">
<a href="#" class="btn-link">Paper</a>
<a href="#" class="btn-link">Slides</a>
</div>
</div>

<div class="publication">
<h3>Publication Title 3</h3>
<p class="authors">Co-Author D., <strong>Donnan, F.</strong></p>
<p class="venue"><em>Journal/Conference Name</em>, Year</p>
<p class="publication-description">Brief description of the publication and its contribution to the field.</p>
<div class="publication-links">
<a href="#" class="btn-link">Paper</a>
</div>
</div>
</div>
</div>
</section>

<section id="cv" class="section bg-light">
<div class="container">
<h2>Curriculum Vitae</h2>

<div class="cv-section">
<h3>Education</h3>
<div class="cv-entry">
<h4>Ph.D. in [Your Field]</h4>
<p class="cv-meta">University Name | Year - Year</p>
<p>Dissertation: [Your Dissertation Title]</p>
</div>
<div class="cv-entry">
<h4>M.Sc. in [Your Field]</h4>
<p class="cv-meta">University Name | Year - Year</p>
</div>
<div class="cv-entry">
<h4>B.Sc. in [Your Field]</h4>
<p class="cv-meta">University Name | Year - Year</p>
</div>
</div>

<div class="cv-section">
<h3>Experience</h3>
<div class="cv-entry">
<h4>Position Title</h4>
<p class="cv-meta">Institution Name | Year - Present</p>
<p>Brief description of your role and responsibilities.</p>
</div>
<div class="cv-entry">
<h4>Previous Position</h4>
<p class="cv-meta">Institution Name | Year - Year</p>
<p>Brief description of your role and responsibilities.</p>
</div>
</div>

<div class="cv-section">
<h3>Awards & Honors</h3>
<div class="cv-entry">
<h4>Award Name</h4>
<p class="cv-meta">Awarding Organization | Year</p>
</div>
<div class="cv-entry">
<h4>Fellowship/Grant Name</h4>
<p class="cv-meta">Funding Organization | Year</p>
</div>
</div>

<div class="cv-download">
<a href="#" class="btn-primary">Download Full CV (PDF)</a>
</div>
</div>
</section>

<section id="contact" class="section">
<div class="container">
<h2>Contact</h2>
<div class="contact-content">
<p>I'm always interested in discussing research collaborations and opportunities.</p>

<div class="contact-info">
<div class="contact-item">
<strong>Email:</strong> your.email@institution.edu
</div>
<div class="contact-item">
<strong>Office:</strong> Building Name, Room Number, Institution
</div>
<div class="contact-item">
<strong>Address:</strong> Department, Institution Name, City, Country
</div>
</div>

<div class="social-links">
<a href="#" class="social-link">LinkedIn</a>
<a href="#" class="social-link">Google Scholar</a>
<a href="#" class="social-link">GitHub</a>
<a href="#" class="social-link">Twitter</a>
</div>
</div>
</div>
</section>
</main>

<footer>
<div class="container">
<p>&copy; 2024 Fergus Donnan. All rights reserved.</p>
</div>
</footer>

<script src="script.js"></script>
</body>
</html>
69 changes: 69 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
const navHeight = document.querySelector('nav').offsetHeight;
const targetPosition = target.offsetTop - navHeight;

window.scrollTo({
top: targetPosition,
behavior: 'smooth'
});
}
});
});

// Add active state to navigation links based on scroll position
window.addEventListener('scroll', () => {
const sections = document.querySelectorAll('.section');
const navLinks = document.querySelectorAll('.nav-links a');

let current = '';
const navHeight = document.querySelector('nav').offsetHeight;

sections.forEach(section => {
const sectionTop = section.offsetTop - navHeight - 100;
const sectionHeight = section.offsetHeight;

if (window.pageYOffset >= sectionTop &&
window.pageYOffset < sectionTop + sectionHeight) {
current = section.getAttribute('id');
}
});

navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href').substring(1) === current) {
link.classList.add('active');
}
});
});

// Add animation on scroll
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
};

const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);

// Observe elements for animation
document.addEventListener('DOMContentLoaded', () => {
const animatedElements = document.querySelectorAll('.research-card, .publication, .cv-entry');

animatedElements.forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(20px)';
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(el);
});
});
Loading