Skip to content

Commit 1470330

Browse files
gsainigsaini
committed
feat: Implement dynamic portfolio content rendering with interactive filtering, scroll animations, and project context.
1 parent 87fcd85 commit 1470330

File tree

1 file changed

+303
-0
lines changed

1 file changed

+303
-0
lines changed

‎CONTEXT.md‎

Lines changed: 303 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,303 @@
1+
# Context Engineering Instructions
2+
3+
## Project Overview
4+
5+
This is a **personal portfolio website** for Gopal Saini, a Full Stack Architect, Cloud Architect, and AI/ML Engineer. The site showcases professional experience, technical expertise, and AI/ML projects.
6+
7+
**Live URL**: https://gopalsaini.co.in
8+
**Repository**: https://github.com/gsaini/gsaini.github.io
9+
10+
## Tech Stack
11+
12+
- **Build Tool**: Vite (using Rolldown variant: `rolldown-vite@7.2.2`)
13+
- **Languages**: HTML5, Vanilla JavaScript (ES6+), CSS3
14+
- **Styling**: Vanilla CSS with CSS Custom Properties (no framework)
15+
- **Linting**: Biome (replaces ESLint + Prettier)
16+
- **Package Manager**: pnpm
17+
- **Pre-commit Hooks**: Husky + lint-staged
18+
- **Deployment**: GitHub Pages via GitHub Actions
19+
- **Node Version**: 24.x or higher
20+
21+
## Project Structure
22+
23+
```
24+
gsaini.github.io/
25+
├── .github/workflows/ # GitHub Actions for deployment
26+
├── .husky/ # Git hooks (pre-commit linting)
27+
├── src/
28+
│ ├── content.js # Portfolio content data
29+
│ ├── dynamic-content.js # Dynamic rendering & filtering logic
30+
│ ├── neural-network.js # Animated neural network background
31+
│ └── styles.css # All CSS styles
32+
├── dist/ # Build output (generated)
33+
├── biome.json # Biome configuration
34+
├── index.html # Main HTML file
35+
├── package.json # Dependencies and scripts
36+
├── vite.config.js # Vite configuration
37+
└── README.md # Project documentation
38+
```
39+
40+
## Key Features
41+
42+
### 1. Dynamic Content System
43+
44+
- Portfolio content is defined in `src/content.js` as structured data
45+
- `src/dynamic-content.js` dynamically renders projects, skills, and expertise
46+
- Supports filtering by category and technology tags
47+
- Cross-section filtering (clicking a tag filters across all sections)
48+
49+
### 2. Animated Background
50+
51+
- Custom neural network animation canvas (`src/neural-network.js`)
52+
- Particles with connections, responsive to viewport size
53+
- Performance-optimized with requestAnimationFrame
54+
55+
### 3. Scroll Animations
56+
57+
- Intersection Observer API for scroll-triggered animations
58+
- Fade-in effects on sections as they enter viewport
59+
- Smooth transitions and micro-animations
60+
61+
### 4. SEO Optimization
62+
63+
- Comprehensive meta tags (Open Graph, Twitter Cards)
64+
- Semantic HTML5 structure
65+
- Proper heading hierarchy
66+
- Google Analytics integration
67+
68+
## Development Guidelines
69+
70+
### Code Style
71+
72+
1. **JavaScript**:
73+
74+
- Use ES6+ features (modules, arrow functions, destructuring)
75+
- Prefer `for...of` loops over `forEach` (Biome lint rule)
76+
- Use `const` and `let`, never `var`
77+
- Module type: ES modules (`type="module"`)
78+
79+
2. **CSS**:
80+
81+
- Use CSS Custom Properties for theming
82+
- Mobile-first responsive design
83+
- BEM-like naming conventions for classes
84+
- Avoid inline styles
85+
86+
3. **HTML**:
87+
- Semantic HTML5 elements
88+
- Accessibility: proper ARIA labels, alt text
89+
- Unique IDs for all interactive elements
90+
91+
### Linting & Formatting
92+
93+
- **Biome** is used for both linting and formatting
94+
- Configuration: `biome.json`
95+
- Pre-commit hook runs `biome check --write` on staged files
96+
- Lint rules enforce:
97+
- No `forEach` (use `for...of` instead)
98+
- Consistent code style
99+
- Import organization
100+
101+
### Scripts
102+
103+
```bash
104+
pnpm dev # Start dev server (localhost:5173)
105+
pnpm build # Build for production
106+
pnpm preview # Preview production build
107+
pnpm lint # Run linter
108+
pnpm lint:fix # Fix linting issues
109+
pnpm format # Format code
110+
pnpm check # Lint + format check
111+
```
112+
113+
### Pre-commit Workflow
114+
115+
1. Husky runs on `git commit`
116+
2. lint-staged runs `biome check --write` on `*.{js,css}`
117+
3. Commit fails if linting errors exist
118+
4. Auto-fixes are staged automatically
119+
120+
## Content Management
121+
122+
### Adding/Editing Content
123+
124+
All content is in `src/content.js`:
125+
126+
```javascript
127+
export const projects = [
128+
{
129+
title: "Project Name",
130+
description: "Description",
131+
category: "category-slug",
132+
technologies: ["React", "Node.js"],
133+
link: "https://...",
134+
github: "https://github.com/...",
135+
},
136+
];
137+
138+
export const skills = [
139+
{
140+
name: "Skill Name",
141+
category: "category-slug",
142+
level: "Expert|Advanced|Intermediate",
143+
technologies: ["Tech1", "Tech2"],
144+
},
145+
];
146+
```
147+
148+
### Categories
149+
150+
- Projects: `web-app`, `ml-project`, `cloud-infra`, `api-service`
151+
- Skills: `frontend`, `backend`, `cloud`, `ai-ml`, `devops`
152+
153+
### Technology Tags
154+
155+
- Clicking a tag filters all sections by that technology
156+
- Tags are automatically extracted from content data
157+
- Styling: `.tech-tag` class with hover effects
158+
159+
## Deployment
160+
161+
### Automatic Deployment
162+
163+
- **Trigger**: Push to `source` branch
164+
- **Process**: GitHub Actions workflow (`.github/workflows/main.yml`)
165+
1. Checkout code
166+
2. Install dependencies (pnpm)
167+
3. Run linting (`pnpm lint`)
168+
4. Build (`pnpm build`)
169+
5. Deploy `dist/` to GitHub Pages
170+
- **Custom Domain**: gopalsaini.co.in (configured in GitHub Pages settings)
171+
172+
### Manual Deployment
173+
174+
```bash
175+
pnpm build
176+
# Deploy dist/ folder to hosting provider
177+
```
178+
179+
## Design System
180+
181+
### Color Palette
182+
183+
```css
184+
--primary: #00f2ff; /* Cyan accent */
185+
--primary-dark: #00b8c4; /* Darker cyan */
186+
--bg-dark: #0a0e27; /* Deep navy background */
187+
--bg-card: #1a1f3a; /* Card background */
188+
--text-primary: #ffffff; /* White text */
189+
--text-secondary: #a0aec0; /* Gray text */
190+
```
191+
192+
### Typography
193+
194+
- Font: System font stack (no external fonts)
195+
- Headings: Bold, large sizes with letter-spacing
196+
- Body: 16px base, 1.6 line-height
197+
198+
### Spacing
199+
200+
- Uses consistent spacing scale: 0.5rem, 1rem, 1.5rem, 2rem, 3rem, 4rem
201+
- Container max-width: 1200px
202+
- Section padding: 4rem vertical
203+
204+
## Browser Support
205+
206+
- Chrome (latest)
207+
- Firefox (latest)
208+
- Safari (latest)
209+
- Edge (latest)
210+
211+
## Performance Considerations
212+
213+
1. **Minimal JavaScript**: Only essential JS for interactivity
214+
2. **CSS Animations**: Use `transform` and `opacity` for 60fps
215+
3. **Lazy Loading**: Images use native lazy loading
216+
4. **Bundle Size**: Vite optimizes and minifies production build
217+
5. **Canvas Optimization**: Neural network animation uses RAF and throttling
218+
219+
## Accessibility
220+
221+
- WCAG 2.1 AA compliant
222+
- Keyboard navigation support
223+
- Screen reader friendly
224+
- Sufficient color contrast
225+
- Focus indicators on interactive elements
226+
227+
## Common Tasks
228+
229+
### Adding a New Project
230+
231+
1. Edit `src/content.js`
232+
2. Add project object to `projects` array
233+
3. Ensure category and technologies are correct
234+
4. Test filtering functionality
235+
5. Commit and push to `source` branch
236+
237+
### Updating Styles
238+
239+
1. Edit `src/styles.css`
240+
2. Use existing CSS custom properties
241+
3. Test responsiveness (mobile, tablet, desktop)
242+
4. Run `pnpm lint:fix` before committing
243+
244+
### Modifying Animations
245+
246+
1. Edit `src/neural-network.js` for background
247+
2. Edit `src/dynamic-content.js` for scroll animations
248+
3. Test performance (60fps target)
249+
4. Ensure animations are accessible (respect `prefers-reduced-motion`)
250+
251+
## Troubleshooting
252+
253+
### Build Errors
254+
255+
- **Issue**: Vite build fails
256+
- **Solution**: Check `vite.config.js`, ensure all imports are correct
257+
258+
### Linting Errors
259+
260+
- **Issue**: Pre-commit hook fails
261+
- **Solution**: Run `pnpm lint:fix` to auto-fix, or manually fix errors
262+
263+
### Deployment Issues
264+
265+
- **Issue**: GitHub Pages not updating
266+
- **Solution**: Check GitHub Actions logs, ensure `source` branch is set as deployment source
267+
268+
### Performance Issues
269+
270+
- **Issue**: Slow animations
271+
- **Solution**: Reduce particle count in `neural-network.js`, optimize CSS animations
272+
273+
## AI Assistant Guidelines
274+
275+
When working with this project:
276+
277+
1. **Respect the tech stack**: Use Vanilla JS/CSS, no frameworks unless explicitly requested
278+
2. **Follow Biome rules**: Use `for...of` instead of `forEach`
279+
3. **Maintain design consistency**: Use existing CSS custom properties and design patterns
280+
4. **Test responsiveness**: Always consider mobile, tablet, and desktop viewports
281+
5. **Update documentation**: If making significant changes, update README.md and this file
282+
6. **Preserve SEO**: Maintain meta tags, semantic HTML, and structured data
283+
7. **Performance first**: Keep bundle size small, optimize animations
284+
8. **Accessibility**: Ensure all changes maintain WCAG compliance
285+
286+
## Contact Information
287+
288+
- **Name**: Gopal Saini
289+
- **Email**: gopal.saini.work@gmail.com
290+
- **Phone**: +1 551 200 4845
291+
- **LinkedIn**: https://www.linkedin.com/in/gopal-saini
292+
- **GitHub**: https://github.com/gsaini
293+
- **Credly**: https://www.credly.com/users/gsaini/badges
294+
295+
## License
296+
297+
MIT License - Open source and available for use.
298+
299+
---
300+
301+
**Last Updated**: December 2, 2025
302+
**Maintained By**: Gopal Saini
303+
**Built with ❤️ & empowered by AI**

0 commit comments

Comments
 (0)