origin
This commit is contained in:
commit
d25dae734c
24
.gitignore
vendored
Executable file
24
.gitignore
vendored
Executable file
@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
28
eslint.config.js
Executable file
28
eslint.config.js
Executable file
@ -0,0 +1,28 @@
|
|||||||
|
import js from '@eslint/js';
|
||||||
|
import globals from 'globals';
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks';
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh';
|
||||||
|
import tseslint from 'typescript-eslint';
|
||||||
|
|
||||||
|
export default tseslint.config(
|
||||||
|
{ ignores: ['dist'] },
|
||||||
|
{
|
||||||
|
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
'react-hooks': reactHooks,
|
||||||
|
'react-refresh': reactRefresh,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
...reactHooks.configs.recommended.rules,
|
||||||
|
'react-refresh/only-export-components': [
|
||||||
|
'warn',
|
||||||
|
{ allowConstantExport: true },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
13
index.html
Executable file
13
index.html
Executable file
@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Vite + React + TS</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
5548
package-lock.json
generated
Executable file
5548
package-lock.json
generated
Executable file
File diff suppressed because it is too large
Load Diff
37
package.json
Executable file
37
package.json
Executable file
@ -0,0 +1,37 @@
|
|||||||
|
{
|
||||||
|
"name": "vite-react-typescript-starter",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"gray-matter": "^4.0.3",
|
||||||
|
"lucide-react": "^0.344.0",
|
||||||
|
"react": "^18.3.1",
|
||||||
|
"react-dom": "^18.3.1",
|
||||||
|
"react-markdown": "^9.0.3",
|
||||||
|
"remark-gfm": "^4.0.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.9.1",
|
||||||
|
"@tailwindcss/typography": "^0.5.16",
|
||||||
|
"@types/react": "^18.3.5",
|
||||||
|
"@types/react-dom": "^18.3.0",
|
||||||
|
"@vitejs/plugin-react": "^4.3.1",
|
||||||
|
"autoprefixer": "^10.4.18",
|
||||||
|
"eslint": "^9.9.1",
|
||||||
|
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.11",
|
||||||
|
"globals": "^15.9.0",
|
||||||
|
"postcss": "^8.4.35",
|
||||||
|
"tailwindcss": "^3.4.1",
|
||||||
|
"typescript": "^5.5.3",
|
||||||
|
"typescript-eslint": "^8.3.0",
|
||||||
|
"vite": "^5.4.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
postcss.config.js
Executable file
6
postcss.config.js
Executable file
@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
};
|
||||||
18
public/content/projects.md
Normal file
18
public/content/projects.md
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
# My Projects
|
||||||
|
|
||||||
|
## Project 1: Personal Portfolio
|
||||||
|
- **Tech Stack:** React, TypeScript, Tailwind CSS
|
||||||
|
- **Description:** A retro TV-themed portfolio website showcasing my work and skills
|
||||||
|
- [View Source](https://github.com/username/portfolio)
|
||||||
|
|
||||||
|
## Project 2: Task Manager
|
||||||
|
- **Tech Stack:** Node.js, Express, MongoDB
|
||||||
|
- **Description:** RESTful API for managing tasks and projects
|
||||||
|
- [Live Demo](https://demo.example.com)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Currently Working On
|
||||||
|
* Cloud infrastructure optimization
|
||||||
|
* Open source contributions
|
||||||
|
* Machine learning side projects
|
||||||
106
src/App.tsx
Executable file
106
src/App.tsx
Executable file
@ -0,0 +1,106 @@
|
|||||||
|
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;
|
||||||
43
src/components/GlitchyLink.tsx
Normal file
43
src/components/GlitchyLink.tsx
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
|
interface GlitchyLinkProps {
|
||||||
|
text: string;
|
||||||
|
url: string;
|
||||||
|
type?: 'email' | 'link';
|
||||||
|
}
|
||||||
|
|
||||||
|
const GlitchyLink: React.FC<GlitchyLinkProps> = ({ text, url, type = 'link' }) => {
|
||||||
|
const [copied, setCopied] = useState(false);
|
||||||
|
|
||||||
|
const handleClick = async (e: React.MouseEvent) => {
|
||||||
|
if (type === 'email') {
|
||||||
|
e.preventDefault();
|
||||||
|
if (copied) return;
|
||||||
|
await navigator.clipboard.writeText(text);
|
||||||
|
setCopied(true);
|
||||||
|
setTimeout(() => setCopied(false), 2000);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
href={url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
onClick={handleClick}
|
||||||
|
className="group relative inline-block hover:text-green-400 transition-colors"
|
||||||
|
>
|
||||||
|
<span className="relative inline-block animate-glitch-1">
|
||||||
|
{copied ? 'Copied!' : text}
|
||||||
|
</span>
|
||||||
|
<span className="absolute top-0 left-0 w-full h-full opacity-0 group-hover:opacity-70 group-hover:animate-glitch-1">
|
||||||
|
{copied ? 'Copied!' : text}
|
||||||
|
</span>
|
||||||
|
<span className="absolute top-0 left-0 w-full h-full opacity-0 group-hover:opacity-70 group-hover:animate-glitch-2">
|
||||||
|
{copied ? 'Copied!' : text}
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default GlitchyLink;
|
||||||
60
src/components/ProfileContent.tsx
Executable file
60
src/components/ProfileContent.tsx
Executable file
@ -0,0 +1,60 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Mail, Github, Linkedin, User, Code, BookOpen, Building, MapPin } from 'lucide-react';
|
||||||
|
import GlitchyLink from './GlitchyLink';
|
||||||
|
|
||||||
|
const ProfileContent: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<div className="flex-1 overflow-auto">
|
||||||
|
<div className="space-y-8">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<User className="w-6 h-6" />
|
||||||
|
<h2 className="text-2xl font-bold">José Henrique Ivanchechen</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Code className="w-6 h-6" />
|
||||||
|
<p className="text-lg">Software Engineer</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Building className="w-6 h-6" />
|
||||||
|
<p className="text-lg">EposNow</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<MapPin className="w-6 h-6" />
|
||||||
|
<p className="text-lg">Curitiba, PR - Brazil</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<BookOpen className="w-6 h-6" />
|
||||||
|
<p className="text-lg">5+ Years Experience</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-12 space-y-6">
|
||||||
|
<h3 className="text-xl font-semibold">> Contact Info:</h3>
|
||||||
|
<div className="space-y-4 pl-6">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Mail className="w-5 h-5" />
|
||||||
|
<GlitchyLink
|
||||||
|
text="jose.henrique.ivan@gmail.com"
|
||||||
|
url="mailto:jose.henrique.ivan@gmail.com"
|
||||||
|
type="email"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Github className="w-5 h-5" />
|
||||||
|
<GlitchyLink text="@ivanch" url="https://github.com/ivanch" />
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Linkedin className="w-5 h-5" />
|
||||||
|
<GlitchyLink text="/in/joseivanch" url="https://linkedin.com/in/joseivanch" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ProfileContent;
|
||||||
46
src/components/ProjectsContent.tsx
Normal file
46
src/components/ProjectsContent.tsx
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ReactMarkdown from 'react-markdown';
|
||||||
|
import remarkGfm from 'remark-gfm';
|
||||||
|
import { FileWarning } from 'lucide-react';
|
||||||
|
|
||||||
|
interface ProjectsContentProps {
|
||||||
|
markdownPath: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ProjectsContent: React.FC<ProjectsContentProps> = ({ markdownPath }) => {
|
||||||
|
const [content, setContent] = React.useState<string>('');
|
||||||
|
const [error, setError] = React.useState<string>('');
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
fetch(markdownPath)
|
||||||
|
.then(response => {
|
||||||
|
if (!response.ok) throw new Error('Failed to load content');
|
||||||
|
return response.text();
|
||||||
|
})
|
||||||
|
.then(text => setContent(text))
|
||||||
|
.catch(err => setError(err.message));
|
||||||
|
}, [markdownPath]);
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className="flex-1 flex items-center justify-center">
|
||||||
|
<div className="text-center space-y-4">
|
||||||
|
<FileWarning className="w-12 h-12 mx-auto" />
|
||||||
|
<p className="text-lg">Error loading content: {error}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="prose prose-invert prose-green max-w-none">
|
||||||
|
<ReactMarkdown remarkPlugins={[remarkGfm]}>
|
||||||
|
{content}
|
||||||
|
</ReactMarkdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ProjectsContent;
|
||||||
34
src/components/TerminalButton.tsx
Executable file
34
src/components/TerminalButton.tsx
Executable file
@ -0,0 +1,34 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { ChevronRight } from 'lucide-react';
|
||||||
|
|
||||||
|
interface TerminalButtonProps {
|
||||||
|
children: React.ReactNode;
|
||||||
|
onClick?: () => void;
|
||||||
|
isSelected?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const TerminalButton: React.FC<TerminalButtonProps> = ({ children, onClick, isSelected }) => {
|
||||||
|
const playKeyPress = () => {
|
||||||
|
const audio = new Audio('data:audio/wav;base64,UklGRnQGAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YU8GAACBhYqFbF1fdH2Dg4R/gIKFi4SAgX98eoCFhQAAhIWKhWxdX3R9g4OEf4CChYuEgIF/fHqAhYUAAP//');
|
||||||
|
audio.volume = 0.2;
|
||||||
|
audio.play().catch(() => {});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClick = (e: React.MouseEvent) => {
|
||||||
|
playKeyPress();
|
||||||
|
onClick?.(e);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
className={`terminal-button group ${isSelected ? 'terminal-button-selected' : ''}`}
|
||||||
|
onClick={handleClick}
|
||||||
|
>
|
||||||
|
<div className="glare-effect"></div>
|
||||||
|
<ChevronRight className="inline-block mr-2 w-4 h-4 transition-transform group-hover:translate-x-1" />
|
||||||
|
{children}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default TerminalButton;
|
||||||
252
src/index.css
Executable file
252
src/index.css
Executable file
@ -0,0 +1,252 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'VT323';
|
||||||
|
src: url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer utilities {
|
||||||
|
.typing-effect {
|
||||||
|
border-right: 2px solid #00FF00;
|
||||||
|
animation: cursor-blink 1s step-end infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tv-frame {
|
||||||
|
@apply rounded-[50px] p-8;
|
||||||
|
background: linear-gradient(145deg, #4a4a4a, #2a2a2a);
|
||||||
|
box-shadow:
|
||||||
|
20px 20px 60px #1a1a1a,
|
||||||
|
-20px -20px 60px #3a3a3a,
|
||||||
|
inset 0 2px 20px rgba(255, 255, 255, 0.1);
|
||||||
|
border: 12px solid #1a1a1a;
|
||||||
|
border-radius: 50px;
|
||||||
|
transform: perspective(1000px) rotateX(2deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tv-frame::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -12px;
|
||||||
|
left: -12px;
|
||||||
|
right: -12px;
|
||||||
|
bottom: -12px;
|
||||||
|
background: linear-gradient(145deg, #3a3a3a, #1a1a1a);
|
||||||
|
border-radius: 60px;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tv-frame::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 40%;
|
||||||
|
background: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgba(255, 255, 255, 0.1) 0%,
|
||||||
|
transparent 100%
|
||||||
|
);
|
||||||
|
border-radius: 40px 40px 0 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tv-screen-container {
|
||||||
|
background: #000;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 0 50px rgba(0, 0, 0, 0.5),
|
||||||
|
inset 0 0 100px rgba(0, 0, 0, 0.3);
|
||||||
|
transform: perspective(1000px) rotateX(1deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tv-screen-convex {
|
||||||
|
content: '';
|
||||||
|
background: radial-gradient(
|
||||||
|
circle at center,
|
||||||
|
transparent 0%,
|
||||||
|
rgba(0, 0, 0, 0) 50%,
|
||||||
|
rgba(0, 0, 0, 0.3) 100%
|
||||||
|
);
|
||||||
|
border-radius: 50% / 5%;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 40;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tv-screen-convex::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: radial-gradient(
|
||||||
|
circle at 50% 0%,
|
||||||
|
rgba(255, 255, 255, 0.1) 0%,
|
||||||
|
rgba(255, 255, 255, 0.05) 25%,
|
||||||
|
transparent 50%
|
||||||
|
);
|
||||||
|
border-radius: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-button {
|
||||||
|
@apply relative w-full px-6 py-3 font-mono text-lg
|
||||||
|
transition-all duration-150 overflow-hidden
|
||||||
|
border border-[#00FF00]/30 select-none;
|
||||||
|
font-family: 'VT323', 'Courier New', monospace;
|
||||||
|
background: linear-gradient(180deg,
|
||||||
|
rgba(0, 25, 0, 0.9) 0%,
|
||||||
|
rgba(0, 20, 0, 0.95) 100%
|
||||||
|
);
|
||||||
|
color: #4AFF4A;
|
||||||
|
text-shadow: 0 0 8px rgba(74, 255, 74, 0.5);
|
||||||
|
box-shadow:
|
||||||
|
inset 0 0 15px rgba(0, 255, 0, 0.1),
|
||||||
|
0 0 2px rgba(0, 255, 0, 0.5),
|
||||||
|
0 0 5px rgba(0, 255, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-button-selected {
|
||||||
|
@apply text-[110%] font-bold;
|
||||||
|
background: linear-gradient(180deg,
|
||||||
|
rgba(0, 35, 0, 0.95) 0%,
|
||||||
|
rgba(0, 30, 0, 1) 100%
|
||||||
|
);
|
||||||
|
color: #7FFF7F;
|
||||||
|
text-shadow: 0 0 12px rgba(74, 255, 74, 0.8);
|
||||||
|
box-shadow:
|
||||||
|
inset 0 0 25px rgba(0, 255, 0, 0.2),
|
||||||
|
0 0 4px rgba(0, 255, 0, 0.6),
|
||||||
|
0 0 8px rgba(0, 255, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-button::before {
|
||||||
|
content: '';
|
||||||
|
@apply absolute inset-0 opacity-0 transition-opacity duration-150;
|
||||||
|
background: linear-gradient(180deg,
|
||||||
|
rgba(0, 255, 0, 0.1) 0%,
|
||||||
|
rgba(0, 255, 0, 0.05) 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-button:hover {
|
||||||
|
color: #7FFF7F;
|
||||||
|
text-shadow: 0 0 8px rgba(74, 255, 74, 0.8);
|
||||||
|
box-shadow:
|
||||||
|
inset 0 0 20px rgba(0, 255, 0, 0.2),
|
||||||
|
0 0 4px rgba(0, 255, 0, 0.6),
|
||||||
|
0 0 8px rgba(0, 255, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-button:hover::before {
|
||||||
|
@apply opacity-100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-button:active {
|
||||||
|
@apply transform scale-[0.98];
|
||||||
|
background: linear-gradient(180deg,
|
||||||
|
rgba(0, 35, 0, 0.95) 0%,
|
||||||
|
rgba(0, 30, 0, 1) 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-button::after {
|
||||||
|
content: '';
|
||||||
|
@apply absolute inset-0 pointer-events-none;
|
||||||
|
background: repeating-linear-gradient(
|
||||||
|
0deg,
|
||||||
|
rgba(0, 255, 0, 0.03),
|
||||||
|
rgba(0, 255, 0, 0.03) 1px,
|
||||||
|
transparent 1px,
|
||||||
|
transparent 2px
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.glare-effect {
|
||||||
|
@apply absolute inset-0 pointer-events-none;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
transparent 0%,
|
||||||
|
rgba(74, 255, 74, 0.1) 25%,
|
||||||
|
rgba(74, 255, 74, 0.1) 75%,
|
||||||
|
transparent 100%
|
||||||
|
);
|
||||||
|
animation: glare 3s ease-in-out infinite;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.screen-glare {
|
||||||
|
@apply absolute inset-0 pointer-events-none z-30;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
transparent 0%,
|
||||||
|
rgba(255, 255, 255, 0.03) 45%,
|
||||||
|
rgba(255, 255, 255, 0.07) 50%,
|
||||||
|
rgba(255, 255, 255, 0.03) 55%,
|
||||||
|
transparent 100%
|
||||||
|
);
|
||||||
|
animation: horizontal-glare 4s linear infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes cursor-blink {
|
||||||
|
from, to { border-color: transparent }
|
||||||
|
50% { border-color: #00FF00 }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes glare {
|
||||||
|
0% {
|
||||||
|
transform: translateX(-200%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(200%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes horizontal-glare {
|
||||||
|
from {
|
||||||
|
transform: translateX(-200%);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateX(200%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom scrollbar for the terminal */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: #001100;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #00FF00;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #00CC00;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom Scrollbar */
|
||||||
|
.custom-scrollbar::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-track {
|
||||||
|
background: rgba(0, 51, 0, 0.3);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||||
|
background: #00FF00;
|
||||||
|
border-radius: 4px;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #00CC00;
|
||||||
|
}
|
||||||
10
src/main.tsx
Executable file
10
src/main.tsx
Executable file
@ -0,0 +1,10 @@
|
|||||||
|
import { StrictMode } from 'react';
|
||||||
|
import { createRoot } from 'react-dom/client';
|
||||||
|
import App from './App.tsx';
|
||||||
|
import './index.css';
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>
|
||||||
|
);
|
||||||
1
src/vite-env.d.ts
vendored
Executable file
1
src/vite-env.d.ts
vendored
Executable file
@ -0,0 +1 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
39
tailwind.config.js
Executable file
39
tailwind.config.js
Executable file
@ -0,0 +1,39 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
keyframes: {
|
||||||
|
glitch: {
|
||||||
|
'0%, 100%': { transform: 'translateX(0)' },
|
||||||
|
'20%': { transform: 'translateX(-2px)' },
|
||||||
|
'40%': { transform: 'translateX(2px)' },
|
||||||
|
'60%': { transform: 'skewX(2deg)' },
|
||||||
|
'80%': { transform: 'skewX(-2deg)' },
|
||||||
|
},
|
||||||
|
'glitch-1': {
|
||||||
|
'0%, 100%': { clip: 'rect(44px, 450px, 56px, 0)' },
|
||||||
|
'20%': { clip: 'rect(12px, 450px, 32px, 0)' },
|
||||||
|
'40%': { clip: 'rect(62px, 450px, 84px, 0)' },
|
||||||
|
'60%': { clip: 'rect(22px, 450px, 11px, 0)' },
|
||||||
|
'80%': { clip: 'rect(59px, 450px, 71px, 0)' },
|
||||||
|
},
|
||||||
|
'glitch-2': {
|
||||||
|
'0%, 100%': { clip: 'rect(24px, 450px, 36px, 0)' },
|
||||||
|
'20%': { clip: 'rect(82px, 450px, 92px, 0)' },
|
||||||
|
'40%': { clip: 'rect(32px, 450px, 44px, 0)' },
|
||||||
|
'60%': { clip: 'rect(72px, 450px, 81px, 0)' },
|
||||||
|
'80%': { clip: 'rect(19px, 450px, 31px, 0)' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
'glitch': 'glitch 1s infinite',
|
||||||
|
'glitch-1': 'glitch-1 0.8s infinite',
|
||||||
|
'glitch-2': 'glitch-2 0.8s infinite',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
require('@tailwindcss/typography'),
|
||||||
|
],
|
||||||
|
};
|
||||||
24
tsconfig.app.json
Executable file
24
tsconfig.app.json
Executable file
@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
7
tsconfig.json
Executable file
7
tsconfig.json
Executable file
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
22
tsconfig.node.json
Executable file
22
tsconfig.node.json
Executable file
@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2022",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
10
vite.config.ts
Executable file
10
vite.config.ts
Executable file
@ -0,0 +1,10 @@
|
|||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import react from '@vitejs/plugin-react';
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
optimizeDeps: {
|
||||||
|
exclude: ['lucide-react'],
|
||||||
|
},
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user