Skip to content

Commit 154431a

Browse files
tdavidcltdavidcl
committed
add talks
1 parent 2382453 commit 154431a

File tree

5 files changed

+455
-0
lines changed

5 files changed

+455
-0
lines changed

‎README.md

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
# Shamrock Website
2+
3+
A modern, responsive website for the Shamrock scientific computing framework built with HTML, CSS, and JavaScript.
4+
5+
## 🚀 Features
6+
7+
- **Modern Design**: Clean, professional design with viridis-inspired color palette
8+
- **Responsive Layout**: Works perfectly on desktop, tablet, and mobile devices
9+
- **Interactive Elements**: Smooth animations, copy-to-clipboard functionality, and mobile navigation
10+
- **Fast Loading**: Optimized static files for quick loading times
11+
- **Accessibility**: Built with accessibility best practices
12+
13+
## 📁 Project Structure
14+
15+
```
16+
website-testing/
17+
├── index.html # Main HTML file
18+
├── styles.css # CSS styles with modern design
19+
├── script.js # JavaScript for interactivity
20+
├── _static/ # Static assets
21+
│ ├── logo.png # Shamrock logo
22+
│ └── no_background_nocolor.png # Shamrock banner
23+
├── .github/workflows/ # CI/CD configuration
24+
│ └── upload-page.yml # GitHub Pages deployment
25+
└── README.md # This file
26+
```
27+
28+
## 🎨 Design Features
29+
30+
### Color Palette
31+
- **Primary Purple**: `#440154` - Main brand color
32+
- **Secondary Purple**: `#482475` - Secondary brand color
33+
- **Blue**: `#355f8d` - Accent color
34+
- **Teal**: `#22a884` - Success/positive color
35+
- **Green**: `#7ad151` - Highlight color
36+
37+
### Typography
38+
- **Font Family**: Inter (Google Fonts)
39+
- **Responsive**: Scales appropriately across devices
40+
- **Hierarchy**: Clear typographic hierarchy with proper contrast
41+
42+
### Components
43+
- **Navigation**: Fixed header with mobile hamburger menu
44+
- **Hero Section**: Eye-catching introduction with call-to-action buttons
45+
- **Quick Links**: Grid of important links and resources
46+
- **Features**: Highlighted feature cards with icons
47+
- **Installation**: Code examples with copy functionality
48+
- **Documentation**: Links to various documentation resources
49+
- **Community**: Community links and contribution call-to-action
50+
- **Footer**: Comprehensive footer with links and social media
51+
52+
## 🛠️ Development
53+
54+
### Local Development
55+
1. Clone the repository
56+
2. Open `index.html` in your browser
57+
3. Make changes to HTML, CSS, or JavaScript files
58+
4. Refresh browser to see changes
59+
60+
### File Structure
61+
- **HTML**: Semantic structure with proper accessibility
62+
- **CSS**: Modern CSS with CSS Grid, Flexbox, and CSS Variables
63+
- **JavaScript**: Vanilla JS with modern ES6+ features
64+
65+
### Key JavaScript Features
66+
- Mobile navigation toggle
67+
- Copy-to-clipboard functionality
68+
- Smooth scrolling for anchor links
69+
- Intersection Observer for animations
70+
- Form validation utilities
71+
72+
## 🚀 Deployment
73+
74+
The website is automatically deployed to GitHub Pages via GitHub Actions.
75+
76+
### CI/CD Pipeline
77+
1. **Trigger**: Push to main branch or pull request
78+
2. **Build**: Copy static files to build directory
79+
3. **Deploy**: Upload to GitHub Pages
80+
4. **Result**: Website available at `https://shamrock-code.github.io/website-testing`
81+
82+
### Manual Deployment
83+
If you need to deploy manually:
84+
1. Run the build script locally
85+
2. Upload files to your web server
86+
3. Ensure all assets are accessible
87+
88+
## 📱 Responsive Design
89+
90+
The website is fully responsive with breakpoints at:
91+
- **Desktop**: 1200px and above
92+
- **Tablet**: 768px to 1199px
93+
- **Mobile**: Below 768px
94+
95+
### Mobile Features
96+
- Hamburger menu navigation
97+
- Touch-friendly buttons and links
98+
- Optimized typography for small screens
99+
- Proper spacing and padding
100+
101+
## 🎯 Performance
102+
103+
### Optimizations
104+
- **Minimal Dependencies**: Only Font Awesome for icons
105+
- **Efficient CSS**: CSS Grid and Flexbox for layout
106+
- **Fast Loading**: Optimized images and minimal JavaScript
107+
- **Caching**: Static assets can be cached effectively
108+
109+
### Best Practices
110+
- Semantic HTML structure
111+
- CSS custom properties for maintainability
112+
- Progressive enhancement
113+
- Accessibility compliance
114+
115+
## 🔧 Customization
116+
117+
### Colors
118+
Update the CSS variables in `styles.css`:
119+
```css
120+
:root {
121+
--primary-purple: #440154;
122+
--secondary-purple: #482475;
123+
/* ... other colors */
124+
}
125+
```
126+
127+
### Content
128+
- Update `index.html` for content changes
129+
- Modify `styles.css` for styling changes
130+
- Edit `script.js` for functionality changes
131+
132+
### Adding New Sections
133+
1. Add HTML structure to `index.html`
134+
2. Add corresponding CSS to `styles.css`
135+
3. Add any JavaScript functionality to `script.js`
136+
137+
## 📄 License
138+
139+
This website is part of the Shamrock project. See the main project repository for license information.
140+
141+
## 🤝 Contributing
142+
143+
1. Fork the repository
144+
2. Create a feature branch
145+
3. Make your changes
146+
4. Test locally
147+
5. Submit a pull request
148+
149+
## 📞 Support
150+
151+
For questions or issues:
152+
- Create an issue in the GitHub repository
153+
- Check the main Shamrock documentation
154+
- Join the community discussions
155+
156+
---
157+
158+
Built with ❤️ for the Shamrock community

‎index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
<ul class="nav-menu">
2222
<li><a href="index.html">Home</a></li>
2323
<li><a href="publications.html">Publications</a></li>
24+
<li><a href="talks.html">Talks</a></li>
2425
<li><a href="https://github.com/Shamrock-code/Shamrock" class="github-btn">
2526
<i class="fab fa-github"></i> GitHub
2627
</a></li>
@@ -29,6 +30,7 @@
2930
<span></span>
3031
<span></span>
3132
<span></span>
33+
<span></span>
3234
</div>
3335
</div>
3436
</nav>

‎publications.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
<ul class="nav-menu">
2222
<li><a href="index.html">Home</a></li>
2323
<li><a href="publications.html">Publications</a></li>
24+
<li><a href="talks.html">Talks</a></li>
2425
<li><a href="https://github.com/Shamrock-code/Shamrock" class="github-btn">
2526
<i class="fab fa-github"></i> GitHub
2627
</a></li>
@@ -29,6 +30,7 @@
2930
<span></span>
3031
<span></span>
3132
<span></span>
33+
<span></span>
3234
</div>
3335
</div>
3436
</nav>

‎styles.css

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1025,4 +1025,136 @@ body.loaded {
10251025
flex-direction: column;
10261026
gap: var(--spacing-xs);
10271027
}
1028+
}
1029+
1030+
/* Talks Page Styles */
1031+
.talks-hero {
1032+
background: linear-gradient(135deg, var(--primary-purple), var(--secondary-purple));
1033+
color: white;
1034+
padding: 4rem 0;
1035+
text-align: center;
1036+
}
1037+
1038+
.talks-title {
1039+
font-size: 3rem;
1040+
font-weight: 700;
1041+
margin-bottom: 1rem;
1042+
background: linear-gradient(135deg, #ffffff, #e0e0e0);
1043+
-webkit-background-clip: text;
1044+
-webkit-text-fill-color: transparent;
1045+
background-clip: text;
1046+
}
1047+
1048+
.talks-subtitle {
1049+
font-size: 1.2rem;
1050+
opacity: 0.9;
1051+
max-width: 600px;
1052+
margin: 0 auto;
1053+
}
1054+
1055+
.talks-section {
1056+
padding: 4rem 0;
1057+
background-color: var(--light-gray);
1058+
}
1059+
1060+
.talks-grid {
1061+
display: grid;
1062+
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
1063+
gap: 2rem;
1064+
margin-top: 2rem;
1065+
}
1066+
1067+
.talk-card {
1068+
background: white;
1069+
border-radius: var(--border-radius);
1070+
box-shadow: var(--shadow-lg);
1071+
padding: 1.5rem;
1072+
transition: transform 0.3s ease, box-shadow 0.3s ease;
1073+
}
1074+
1075+
.talk-card:hover {
1076+
transform: translateY(-5px);
1077+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
1078+
}
1079+
1080+
.talk-title {
1081+
font-size: 1.3rem;
1082+
font-weight: 600;
1083+
color: var(--primary-purple);
1084+
margin-bottom: 0.5rem;
1085+
line-height: 1.4;
1086+
}
1087+
1088+
.talk-author {
1089+
font-size: 1rem;
1090+
color: var(--gray);
1091+
margin-bottom: 1.5rem;
1092+
font-style: italic;
1093+
}
1094+
1095+
.talk-conference {
1096+
font-size: 0.9rem;
1097+
color: var(--gray);
1098+
font-weight: 500;
1099+
margin-bottom: 0.3rem;
1100+
text-transform: uppercase;
1101+
letter-spacing: 0.5px;
1102+
opacity: 0.7;
1103+
}
1104+
1105+
.video-container {
1106+
position: relative;
1107+
width: 100%;
1108+
height: 0;
1109+
padding-bottom: 56.25%; /* 16:9 aspect ratio */
1110+
border-radius: var(--border-radius);
1111+
overflow: hidden;
1112+
}
1113+
1114+
.video-container iframe {
1115+
position: absolute;
1116+
top: 0;
1117+
left: 0;
1118+
width: 100%;
1119+
height: 100%;
1120+
border: none;
1121+
border-radius: var(--border-radius);
1122+
}
1123+
1124+
/* Responsive Design for Talks */
1125+
@media (max-width: 768px) {
1126+
.talks-title {
1127+
font-size: 2rem;
1128+
}
1129+
1130+
.talks-subtitle {
1131+
font-size: 1rem;
1132+
}
1133+
1134+
.talks-grid {
1135+
grid-template-columns: 1fr;
1136+
gap: 1.5rem;
1137+
}
1138+
1139+
.talk-card {
1140+
padding: 1rem;
1141+
}
1142+
1143+
.talk-title {
1144+
font-size: 1.1rem;
1145+
}
1146+
}
1147+
1148+
@media (max-width: 480px) {
1149+
.talks-hero {
1150+
padding: 2rem 0;
1151+
}
1152+
1153+
.talks-title {
1154+
font-size: 1.8rem;
1155+
}
1156+
1157+
.talks-section {
1158+
padding: 2rem 0;
1159+
}
10281160
}

0 commit comments

Comments
 (0)