body.html
Changed around line 1
+
+
+
Computational Physics
+
+
+
+
+ Home
+ Team
+ Projects
+
+
+
+
+
+
+
+
Advancing Scientific Computing
+
We specialize in designing and optimizing massively parallel code for heterogeneous systems at CINECA
+
+
+
+
+
+
Our Team
+
+
+
+
+
+
+
+
+
Projects
+
+
+
SPACE
+
Advanced computational modeling for space applications
+
+
+
PNNR
+
High-performance computing solutions for scientific research
+
+
+
+
+
+
+
+
Work with Us
+
We're actively seeking collaborations in HPC+AI projects. If you have an interesting project, we'd love to hear from you.
+
+
+
+
+
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://compphys.scroll.pub
+ metaTags
+ description "Computational Physics Group at CINECA - Specializing in HPC, GPU optimization, and parallel computing for scientific applications"
+ keywords "computational physics, HPC, GPU computing, parallel computing, CINECA, scientific computing"
+ editButton /edit.html
+ title Computational Physics Group | CINECA
+ style.css
+ body.html
+ script.js
readme.scroll
Changed around line 1
+ # compphys.scroll.pub
+ Website generated by Claude from prompt: We are small group of Computational Physics at HPC computation center CINECA, where we desgin, optimize, port to the gpus, delpoy code Massivily parallel code on heterogensous system and provide support at high level support to Industry and University. I want to create website for my group: Group Name: Computational Physics Member: here whenenver i click the name of each person it shoul open a url with brief bio of each member Project: SPACE, PNNR Work with us: If you have an intersting project HPC+AI then reach out with us. We are constantly looking for collaboration
script.js
Changed around line 1
+ // Team members data
+ const teamMembers = [
+ {
+ name: "Dr. John Doe",
+ role: "Group Leader",
+ bio: "Specialist in GPU optimization"
+ },
+ {
+ name: "Dr. Jane Smith",
+ role: "Senior Researcher",
+ bio: "Expert in parallel computing"
+ },
+ // Add more team members as needed
+ ];
+
+ // Populate team members
+ function populateTeam() {
+ const teamGrid = document.getElementById('teamGrid');
+ teamMembers.forEach(member => {
+ const memberElement = document.createElement('div');
+ memberElement.className = 'team-member';
+ memberElement.innerHTML = `
+
${member.name}
+
${member.role}
+ `;
+ memberElement.addEventListener('click', () => showBio(member));
+ teamGrid.appendChild(memberElement);
+ });
+ }
+
+ // Show member bio in a modal
+ function showBio(member) {
+ alert(`${member.name}\n${member.role}\n\n${member.bio}`);
+ // In a real implementation, replace with a proper modal
+ }
+
+ // Mobile navigation toggle
+ document.querySelector('.nav-toggle').addEventListener('click', () => {
+ document.querySelector('.nav-links').classList.toggle('active');
+ });
+
+ // Smooth scroll for navigation links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+
+ // Initialize
+ document.addEventListener('DOMContentLoaded', () => {
+ populateTeam();
+ });
style.css
Changed around line 1
+ :root {
+ --primary-color: #2c3e50;
+ --accent-color: #3498db;
+ --text-color: #2c3e50;
+ --background-color: #f9f9f9;
+ --card-background: #ffffff;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background-color: var(--background-color);
+ }
+
+ .container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 2rem;
+ }
+
+ /* Header & Navigation */
+ header {
+ background-color: var(--primary-color);
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 1000;
+ }
+
+ nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 2rem;
+ }
+
+ .logo {
+ color: white;
+ font-size: 1.5rem;
+ font-weight: bold;
+ }
+
+ .nav-links {
+ display: flex;
+ list-style: none;
+ gap: 2rem;
+ }
+
+ .nav-links a {
+ color: white;
+ text-decoration: none;
+ transition: color 0.3s ease;
+ }
+
+ .nav-links a:hover {
+ color: var(--accent-color);
+ }
+
+ /* Hero Section */
+ .hero {
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
+ color: white;
+ text-align: center;
+ }
+
+ .hero h1 {
+ font-size: 3.5rem;
+ margin-bottom: 1rem;
+ }
+
+ /* Team Section */
+ .team-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ padding: 2rem 0;
+ }
+
+ .team-member {
+ background: var(--card-background);
+ padding: 1.5rem;
+ border-radius: 8px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s ease;
+ cursor: pointer;
+ }
+
+ .team-member:hover {
+ transform: translateY(-5px);
+ }
+
+ /* Projects Section */
+ .project-cards {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ padding: 2rem 0;
+ }
+
+ .project-card {
+ background: var(--card-background);
+ padding: 2rem;
+ border-radius: 8px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ }
+
+ /* Collaborate Section */
+ .collaborate {
+ background-color: var(--primary-color);
+ color: white;
+ padding: 4rem 0;
+ text-align: center;
+ }
+
+ .cta-button {
+ display: inline-block;
+ padding: 1rem 2rem;
+ background-color: var(--accent-color);
+ color: white;
+ text-decoration: none;
+ border-radius: 4px;
+ margin-top: 2rem;
+ transition: background-color 0.3s ease;
+ }
+
+ .cta-button:hover {
+ background-color: #2980b9;
+ }
+
+ /* Mobile Responsive */
+ .nav-toggle {
+ display: none;
+ flex-direction: column;
+ gap: 6px;
+ cursor: pointer;
+ }
+
+ .nav-toggle span {
+ width: 25px;
+ height: 2px;
+ background-color: white;
+ transition: 0.3s;
+ }
+
+ @media (max-width: 768px) {
+ .nav-toggle {
+ display: flex;
+ }
+
+ .nav-links {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background-color: var(--primary-color);
+ flex-direction: column;
+ padding: 1rem;
+ }
+
+ .nav-links.active {
+ display: flex;
+ }
+
+ .hero h1 {
+ font-size: 2.5rem;
+ }
+ }