About This Website
Development Stack
Frontend Framework
• Next.js 14 (React Framework)
• Material-UI (MUI) for component styling
• Tailwind CSS for custom styling
Development Tools
• Visual Studio Code
• Git for version control
• npm for package management
Development Environment
The website was developed using a modern development environment:
- Node.js runtime environment
- Next.js development server with hot reloading
- ESLint for code quality and consistency
- Prettier for code formatting
- Responsive design testing across multiple devices
GitHub Repository
The project is hosted on GitHub, providing:
- Version control and change tracking
- Issue tracking and project management
- Collaborative development features
- Code review and pull request workflow
Deployment
The website is deployed on Vercel, offering:
- Automatic deployments from GitHub
- Global CDN for fast content delivery
- SSL/TLS encryption
- Continuous deployment pipeline
- Environment variable management
Code Examples
Navigation Component
// Client-side navigation component
export default function ClientLayout({ children }) {
const [isSidebarOpen, setIsSidebarOpen] = React.useState(false);
const pathname = usePathname();
const navItems = [
{ name: 'Home', path: '/' },
{ name: 'Introduction', path: '/group-work' },
{ name: 'Team', path: '/team' },
// ... more navigation items
];
return (
<div className="min-h-screen bg-gray-900">
<IconButton onClick={toggleSidebar}>
<RocketLaunchIcon />
</IconButton>
{/* Sidebar and main content */}
</div>
);
}Component Styling with MUI
// Example of Material-UI component styling
<Typography
variant="h6"
sx={{
color: "#FCD34D",
fontWeight: 600,
letterSpacing: "0.025em",
fontSize: { xs: '0.875rem', sm: '1rem' },
cursor: 'default',
position: 'absolute',
left: '50%',
transform: 'translateX(-50%)',
'&:hover': {
transform: 'translateX(-50%) scale(1.05)'
}
}}
>
SPECIFICATIONS
</Typography>Data Structure Example
// Component measurements data structure
const componentMeasurements = [
{
name: 'Bottle',
volume: '2000 cm³',
mass: '0.05 kg',
weight: '0.49 N',
dimensions: '36cm × 10.2cm',
surfaceArea: 'N/A'
},
{
name: 'Cone',
volume: '313303.718 mm³',
mass: '0.313 kg',
weight: '3.07 N',
dimensions: '15.5cm × 16.8cm',
surfaceArea: '0.00174 m²'
}
// ... more components
];Responsive Design with Tailwind
// Example of responsive design classes
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<div className="p-4 bg-[#3B82F6] rounded-lg
transition-all duration-300
hover:bg-[#2563EB] hover:shadow-xl
hover:scale-105 cursor-pointer">
{/* Component content */}
</div>
</div>