1fe4716728
This commit sets up the foundational structure for the m5rcel portfolio website. It includes: - Basic Vite project configuration with React and TypeScript. - Essential dependencies like React, Framer Motion, and Lucide React. - Initial HTML structure with meta tags and Tailwind CSS setup. - Placeholder data structures for projects and timeline. - A basic loading screen component. - Updated README with local run instructions.
32 lines
941 B
TypeScript
32 lines
941 B
TypeScript
import React, { useEffect } from 'react';
|
|
import { Apple } from 'lucide-react';
|
|
|
|
interface LoadingScreenProps {
|
|
onComplete: () => void;
|
|
}
|
|
|
|
const LoadingScreen: React.FC<LoadingScreenProps> = ({ onComplete }) => {
|
|
useEffect(() => {
|
|
// Simulate classic boot time
|
|
const timer = setTimeout(() => {
|
|
onComplete();
|
|
}, 2000);
|
|
return () => clearTimeout(timer);
|
|
}, [onComplete]);
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-[#bfbfbf]">
|
|
{/* Mac OS X Boot Logo */}
|
|
<div className="mb-12">
|
|
<Apple size={96} className="text-[#555555] fill-[#555555]" />
|
|
</div>
|
|
|
|
{/* Classic Mac Spinner */}
|
|
<div className="relative w-8 h-8">
|
|
<div className="absolute inset-0 border-4 border-[#888888] border-t-[#444444] rounded-full animate-spin"></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LoadingScreen; |