Skip to content

Commit 323a666

Browse files
dev-muhammaddev-muhammad
committed
v1
0 parents  commit 323a666

File tree

6 files changed

+2797
-0
lines changed

6 files changed

+2797
-0
lines changed

‎.github/copilot-instructions.md‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
# GitHub Copilot Instructions for AI Tools Seminar Project
2+
3+
## Project Overview
4+
This project creates a web-based presentation for the "AI Tools – What to Use & When" seminar. The presentation should be deployable to GitHub Pages and support slide navigation.
5+
6+
## Development Guidelines
7+
8+
### HTML/CSS Standards
9+
- Use semantic HTML5 elements
10+
- Implement responsive design with mobile-first approach
11+
- Use CSS Grid and Flexbox for layout
12+
- Follow accessibility guidelines (ARIA labels, semantic markup)
13+
- Ensure clean, readable code structure
14+
15+
### JavaScript Best Practices
16+
- Use modern ES6+ syntax (modules, classes, arrow functions, destructuring)
17+
- Implement keyboard navigation (arrow keys, space, ESC)
18+
- Add smooth transitions between slides using CSS transforms
19+
- Keep code modular with single-responsibility principle
20+
- Write small, focused functions and classes (max 20-30 lines per function)
21+
- Handle edge cases gracefully (first/last slide navigation, network errors)
22+
- Use async/await for better readability over Promise chains
23+
- Implement proper error boundaries and user-friendly error messages
24+
- Prefer composition over inheritance for better testability
25+
- Use TypeScript JSDoc comments for better IDE support
26+
- Implement debouncing/throttling for performance-critical events
27+
- Create reusable utility functions in separate modules
28+
- Use event delegation for better performance with many elements
29+
- Implement lazy loading for non-essential features
30+
31+
### Presentation Requirements
32+
- Each section from the README should be a slide or group of slides
33+
- Include slide navigation (next/previous buttons)
34+
- Add slide counter (e.g., "5 / 12")
35+
- Implement fullscreen mode
36+
- Support touch/swipe gestures for mobile
37+
- Include presenter notes (hidden by default)
38+
39+
### GitHub Pages Deployment
40+
- Create simple, static HTML/CSS/JS structure
41+
- Ensure all assets are relative paths
42+
- Include proper meta tags for SEO
43+
- Add favicon and proper page title
44+
- Optimize for fast loading
45+
46+
### Styling Preferences
47+
- Use a modern, professional color scheme
48+
- Implement dark mode support
49+
- Use system fonts or web-safe alternatives
50+
- Ensure good contrast ratios for accessibility
51+
- Add subtle animations and transitions
52+
- Optimize for visual hierarchy and readability
53+
- Use consistent spacing and typography scales
54+
55+
### Theme Management (Dark/Light Mode)
56+
- Implement CSS custom properties (CSS variables) for all color values
57+
- Use `prefers-color-scheme` media query to detect system preference
58+
- Provide manual theme toggle button in presentation UI
59+
- Store user's theme preference in localStorage for persistence
60+
- Ensure smooth transitions between theme changes (200-300ms)
61+
- Test all components in both light and dark modes
62+
- Maintain WCAG contrast ratios in both themes (4.5:1 for normal text, 3:1 for large text)
63+
- Use semantic color naming (--color-primary, --color-background, --color-text)
64+
- Implement fallback colors for browsers without custom property support
65+
- Consider different opacity values for shadows and overlays in each theme
66+
- Ensure all interactive elements (buttons, links) have proper focus states in both themes
67+
- Test theme switching during presentation mode without disrupting user experience
68+
69+
### Performance Optimization
70+
- Minimize DOM manipulation and reflows
71+
- Use CSS transforms for animations (prefer transform over position changes)
72+
- Implement efficient event handling (debounce/throttle where needed)
73+
- Optimize images and assets for web delivery
74+
- Use CSS containment for slide isolation
75+
- Minimize bundle size with tree shaking
76+
- Implement lazy loading for non-critical resources
77+
- Use requestAnimationFrame for smooth animations
78+
- Avoid memory leaks in event listeners
79+
- Optimize CSS selectors for performance
80+
81+
### User Experience (UX) Guidelines
82+
- Ensure intuitive navigation with clear visual feedback
83+
- Implement progressive disclosure of information
84+
- Design for accessibility (keyboard navigation, screen readers)
85+
- Provide loading states and smooth transitions
86+
- Handle edge cases gracefully (network issues, slow devices)
87+
- Implement error handling with user-friendly messages
88+
- Design for multiple input methods (keyboard, mouse, touch)
89+
- Ensure consistent interaction patterns across slides
90+
- Provide clear visual hierarchy and information architecture
91+
- Optimize for presentation flow and pacing
92+
- Include visual indicators for slide progress and navigation state
93+
- Design for presenter mode with helpful tools and shortcuts
94+
- Theme switching should be discoverable but not distracting during presentations
95+
- Provide visual feedback when theme changes (subtle animation or confirmation)
96+
- Ensure theme preference persists across browser sessions and page reloads
97+
- Consider reduced motion preferences when implementing theme transitions
98+
- Test theme switching accessibility with screen readers and keyboard navigation
99+
100+
101+
### File Size Guidelines
102+
- **HTML**: Keep main file under 200 lines, use templates for repeated content
103+
- **CSS**: Split into focused files under 300 lines each
104+
- **JavaScript**: Keep modules under 200 lines, classes under 150 lines
105+
- **Total bundle**: Aim for <100KB total compressed size
106+
- **Lazy load**: Non-critical functionality in separate modules
107+
108+
## Browser Compatibility
109+
Target modern browsers (Chrome, Firefox, Safari, Edge) with graceful degradation for older versions.

‎.github/workflows/deploy.yml‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [ main ]
6+
pull_request:
7+
branches: [ main ]
8+
9+
permissions:
10+
contents: read
11+
pages: write
12+
id-token: write
13+
14+
concurrency:
15+
group: "pages"
16+
cancel-in-progress: false
17+
18+
jobs:
19+
deploy:
20+
environment:
21+
name: github-pages
22+
url: ${{ steps.deployment.outputs.page_url }}
23+
runs-on: ubuntu-latest
24+
steps:
25+
- name: Checkout
26+
uses: actions/checkout@v4
27+
- name: Setup Pages
28+
uses: actions/configure-pages@v4
29+
- name: Upload artifact
30+
uses: actions/upload-pages-artifact@v3
31+
with:
32+
path: '.'
33+
- name: Deploy to GitHub Pages
34+
id: deployment
35+
uses: actions/deploy-pages@v4

0 commit comments

Comments
 (0)