106 lines
4.2 KiB
TypeScript
Executable File
106 lines
4.2 KiB
TypeScript
Executable File
import React from 'react';
|
|
import { Terminal } from 'lucide-react';
|
|
import TerminalButton from './components/TerminalButton';
|
|
import ProfileContent from './components/ProfileContent';
|
|
import ProjectsContent from './components/ProjectsContent';
|
|
|
|
function App() {
|
|
const [activeSection, setActiveSection] = React.useState('about');
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-900 flex items-center justify-center overflow-hidden">
|
|
{/* TV Container */}
|
|
<div className="w-[95%] max-w-[1400px] relative h-[80vh]">
|
|
{/* TV Frame */}
|
|
<div className="absolute inset-0 tv-frame">
|
|
{/* Screen Container with Convex Effect */}
|
|
<div className="relative w-full h-full rounded-[20px] overflow-hidden tv-screen-container">
|
|
{/* Convex Screen Effect */}
|
|
<div className="absolute inset-0 tv-screen-convex"></div>
|
|
|
|
{/* Screen Content */}
|
|
<div className="relative h-full w-full bg-[#003300] p-6 font-mono text-[#00FF00] overflow-hidden z-10">
|
|
<div className="animate-pulse mb-4">
|
|
<Terminal className="inline-block mr-2" />
|
|
<span className="text-sm">echo "Hey there!"</span>
|
|
</div>
|
|
|
|
{/* Split Screen Container */}
|
|
<div className="flex gap-8 h-[calc(100%-3rem)]">
|
|
{/* Left Column - Navigation */}
|
|
<div className="w-64 space-y-3 overflow-y-auto custom-scrollbar">
|
|
<TerminalButton
|
|
onClick={() => setActiveSection('about')}
|
|
isSelected={activeSection === 'about'}
|
|
>
|
|
ABOUT
|
|
</TerminalButton>
|
|
<TerminalButton
|
|
onClick={() => setActiveSection('projects')}
|
|
isSelected={activeSection === 'projects'}
|
|
>
|
|
PROJECTS
|
|
</TerminalButton>
|
|
<TerminalButton
|
|
onClick={() => setActiveSection('skills')}
|
|
isSelected={activeSection === 'skills'}
|
|
>
|
|
SKILLS
|
|
</TerminalButton>
|
|
<TerminalButton
|
|
onClick={() => setActiveSection('contact')}
|
|
isSelected={activeSection === 'contact'}
|
|
>
|
|
CONTACT
|
|
</TerminalButton>
|
|
<TerminalButton
|
|
onClick={() => setActiveSection('resume')}
|
|
isSelected={activeSection === 'resume'}
|
|
>
|
|
RESUME
|
|
</TerminalButton>
|
|
</div>
|
|
|
|
{/* Vertical Separator */}
|
|
<div className="w-px h-full bg-[#00FF00] opacity-30"></div>
|
|
|
|
{/* Right Column - Content */}
|
|
<div className="flex-1 overflow-y-auto pr-4 custom-scrollbar">
|
|
{activeSection === 'about' && <ProfileContent />}
|
|
{activeSection === 'projects' && (
|
|
<ProjectsContent markdownPath="/content/projects.md" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Scan Line Effect */}
|
|
<div className="absolute inset-0 pointer-events-none z-20" style={{
|
|
background: 'linear-gradient(rgba(0, 17, 0, 0.1) 50%, rgba(0, 17, 0, 0.2) 50%)',
|
|
backgroundSize: '100% 4px'
|
|
}}></div>
|
|
|
|
{/* Screen Glare */}
|
|
<div className="screen-glare"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* TV Controls */}
|
|
<div className="absolute -bottom-10 right-20 flex space-x-6">
|
|
<div className="w-8 h-8 bg-gray-700 rounded-full shadow-inner"></div>
|
|
<div className="w-8 h-8 bg-gray-700 rounded-full shadow-inner"></div>
|
|
<div className="w-8 h-8 bg-gray-700 rounded-full shadow-inner"></div>
|
|
</div>
|
|
|
|
{/* TV Speaker Grills */}
|
|
<div className="absolute -bottom-6 left-20 flex space-x-1.5">
|
|
{[...Array(10)].map((_, i) => (
|
|
<div key={i} className="w-1.5 h-6 bg-gray-700 rounded-full opacity-50"></div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App; |