Deakin Rover Space Website Development Assistant
Expert guidance for working with the Deakin Rover Team's official website codebase - a modern Next.js 14 space-themed portfolio with 3D animations and interactive elements.
What This Skill Does
This skill provides comprehensive knowledge about the Deakin Rover Team website architecture, development patterns, and best practices. It helps you navigate the codebase, understand the component structure, and make changes that align with the project's established patterns.
Instructions
When assisting with this codebase, follow these guidelines:
1. Development Workflow
Always install dependencies using `npm install --legacy-peer-deps` or `yarn install --legacy-peer-deps`Run `npm run dev` for local development serverRun `npm run build` to verify production build before committingUse `npm run lint` to check code quality2. Architecture Understanding
The project uses **Next.js 14 App Router** - all pages live in the `app/` directoryComponents are organized into `components/main/` (page sections) and `components/sub/` (reusable components)All static data is centralized in `constants/index.ts` using const assertions for type safetySite metadata lives in `config/index.ts`3. Adding New Content
**To add a new skill:**
Add the skill icon to `public/skills/` (80x80px optimized)Update the appropriate category in `constants/index.ts` (Frontend/Backend/Fullstack/Other)Follow the existing `{ skill_name, Image, width, height }` structure**To add a new project:**
Add project image to `public/projects/`Add entry to `Socials` array in `constants/index.ts`Include: `title`, `description`, `image`, `link` fields**To modify navigation:**
Update `NavLinks` array in `constants/index.ts`Ensure corresponding section IDs exist in main page components4. Styling Guidelines
Use the `cn()` utility for conditional Tailwind classes (clsx + tailwind-merge)Maintain space theme color scheme: dark background `#030014`, purple accent `rgb(112,66,248)`Follow mobile-first responsive design patternsUse custom backdrop-blur for glassmorphism effectsPath alias `@/*` maps to root directory5. Component Patterns
Mark components using Three.js with `'use client'` directive (client-side only)Use React Intersection Observer for scroll-based animationsLeverage Framer Motion for transitions and entrance animationsMaintain fixed navbar with responsive hamburger menu patternKeep StarsCanvas as animated background layer6. TypeScript Best Practices
Strict mode is enabled - maintain full type safetyUse path aliases consistently (`@/components`, `@/constants`)Leverage const assertions for static data in `constants/index.ts`Follow existing type patterns for props and component interfaces7. Asset Management
Organize static assets by type in `public/` directoryLogo is `/deakin_rover_logo_white.svg`Optimize all images for web before addingSkills icons should be approximately 80x80pxUse WebP format for project images when possible8. Common Tasks
**Updating social links:**
Modify `Socials` array in `constants/index.ts`**Changing footer content:**
Update `footerData` in `constants/index.ts`**Modifying hero section:**
Edit `components/main/Hero.tsx`**Adding new skill category:**
Add new array to `constants/index.ts`Create corresponding section in Skills component9. Important Constraints
Never modify Three.js components without `'use client'` directiveAlways maintain const assertions on data objects for type inferencePreserve the space theme aesthetic and animation patternsEnsure responsive behavior works across all viewport sizesTest Three.js animations in browser before committing10. Debugging Tips
If peer dependency issues arise, always use `--legacy-peer-deps` flagThree.js errors usually require client-side rendering checkTailwind classes not applying? Check if `cn()` utility is used correctlyAnimation issues? Verify Framer Motion variants are properly configuredScroll effects not working? Check Intersection Observer setupExamples
**Adding a new skill:**
```typescript
// In constants/index.ts
export const Frontend_skill = [
// ... existing skills
{
skill_name: "Vue.js",
Image: "/skills/vue.svg",
width: 80,
height: 80,
},
] as const;
```
**Adding a new project:**
```typescript
// In constants/index.ts
export const projects = [
// ... existing projects
{
title: "New Rover Component",
description: "Advanced navigation system for autonomous rover operation",
image: "/projects/rover-nav.webp",
link: "https://github.com/deakinrover/nav-system",
},
] as const;
```
**Using the styling utility:**
```typescript
import { cn } from "@/lib/utils";
<div className={cn(
"base-classes",
condition && "conditional-classes",
"more-classes"
)} />
```
Notes
This is a portfolio/showcase website, not a CRUD application - focus on visual impact and smooth animationsThree.js performance is critical - monitor frame rates when adding new 3D elementsThe space theme is core to the identity - maintain consistency when adding featuresAll content can be managed through `constants/index.ts` - no database required