misc cleanup
This commit is contained in:
parent
5c168d4e4a
commit
8f454e5ce8
@ -2,7 +2,7 @@
|
||||
|
||||
import About from '@/components/About';
|
||||
import { Contact } from '@/components/Contact';
|
||||
import Experience from '@/components/Experince';
|
||||
import Experience from '@/components/Experience';
|
||||
import Projects from '@/components/Projects';
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
|
||||
@ -15,12 +15,10 @@ export default function Home() {
|
||||
]);
|
||||
const [suggestion, setSuggestion] = useState('');
|
||||
const inputRef = useRef<HTMLInputElement | null>(null);
|
||||
|
||||
const keyAudio = useRef<HTMLAudioElement | null>(null);
|
||||
const enterAudio = useRef<HTMLAudioElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
// Load the key press sound
|
||||
keyAudio.current = new Audio('/key.mp3');
|
||||
keyAudio.current.volume = 0.1;
|
||||
enterAudio.current = new Audio('/enter.mp3');
|
||||
@ -42,7 +40,6 @@ export default function Home() {
|
||||
const { value } = e.target;
|
||||
setInput(value);
|
||||
|
||||
// Generate suggestion only if 3 or more characters are entered
|
||||
if (value.trim().length < 3) {
|
||||
setSuggestion('');
|
||||
return;
|
||||
@ -51,131 +48,58 @@ export default function Home() {
|
||||
const matchedCommand = commands.find((command) =>
|
||||
command.startsWith(value.trim().toLowerCase()),
|
||||
);
|
||||
setSuggestion(matchedCommand ? matchedCommand : '');
|
||||
setSuggestion(matchedCommand || '');
|
||||
};
|
||||
|
||||
function processCommand(command: string) {
|
||||
const processCommand = (command: string) => {
|
||||
switch (command.trim().toLowerCase()) {
|
||||
case 'help':
|
||||
setOutput((prevOutput) => [
|
||||
...prevOutput,
|
||||
'Available commands (click to autocomplete):',
|
||||
<div key='help'>
|
||||
<button
|
||||
key='clear'
|
||||
onClick={() => {
|
||||
setInput('help');
|
||||
inputRef.current?.focus();
|
||||
}}
|
||||
className='text-blue-500 hover:underline'
|
||||
>
|
||||
Help (this command)
|
||||
</button>
|
||||
{' - Display this help message'}
|
||||
</div>,
|
||||
<div key='about'>
|
||||
<button
|
||||
key='clear'
|
||||
onClick={() => {
|
||||
setInput('about');
|
||||
inputRef.current?.focus();
|
||||
}}
|
||||
className='text-blue-500 hover:underline'
|
||||
>
|
||||
About
|
||||
</button>
|
||||
{' - Learn more about Sticks and his projects'}
|
||||
</div>,
|
||||
<div key='projects'>
|
||||
<button
|
||||
key='clear'
|
||||
onClick={() => {
|
||||
setInput('projects');
|
||||
inputRef.current?.focus();
|
||||
}}
|
||||
className='text-blue-500 hover:underline'
|
||||
>
|
||||
Projects
|
||||
</button>
|
||||
{' - List of projects created by Sticks'}
|
||||
</div>,
|
||||
<div key='experience'>
|
||||
<button
|
||||
key='clear'
|
||||
onClick={() => {
|
||||
setInput('experience');
|
||||
inputRef.current?.focus();
|
||||
}}
|
||||
className='text-blue-500 hover:underline'
|
||||
>
|
||||
Experience
|
||||
</button>
|
||||
{" - View Sticks's experience and past positions"}
|
||||
</div>,
|
||||
<div key='contact'>
|
||||
<button
|
||||
key='clear'
|
||||
onClick={() => {
|
||||
setInput('contact');
|
||||
inputRef.current?.focus();
|
||||
}}
|
||||
className='text-blue-500 hover:underline'
|
||||
>
|
||||
Contact
|
||||
</button>
|
||||
{' - Get in touch with Sticks'}
|
||||
</div>,
|
||||
<div key='back'>
|
||||
<button
|
||||
key='clear'
|
||||
onClick={() => {
|
||||
setInput('back');
|
||||
inputRef.current?.focus();
|
||||
}}
|
||||
className='text-blue-500 hover:underline'
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
{' - Return to the home page'}
|
||||
</div>,
|
||||
<div key='clear'>
|
||||
<button
|
||||
key='clear'
|
||||
onClick={() => {
|
||||
setInput('clear');
|
||||
inputRef.current?.focus();
|
||||
}}
|
||||
className='text-blue-500 hover:underline'
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
{' - Clear the screen'}
|
||||
</div>,
|
||||
createCommandButton(
|
||||
'help',
|
||||
'Help (this command) - List available commands',
|
||||
),
|
||||
createCommandButton(
|
||||
'about',
|
||||
'About - Learn more about Sticks and his projects',
|
||||
),
|
||||
createCommandButton(
|
||||
'projects',
|
||||
'Projects - List of projects created by Sticks',
|
||||
),
|
||||
createCommandButton(
|
||||
'experience',
|
||||
"Experience - View Sticks's experience",
|
||||
),
|
||||
createCommandButton(
|
||||
'contact',
|
||||
'Contact - Get in touch with Sticks',
|
||||
),
|
||||
createCommandButton(
|
||||
'back',
|
||||
'Back - Return to the home page',
|
||||
),
|
||||
createCommandButton('clear', 'Clear - Clear the screen'),
|
||||
]);
|
||||
break;
|
||||
case 'about':
|
||||
setOutput((prevOutput) => [
|
||||
...prevOutput,
|
||||
<div key='about' className='flex flex-row'>
|
||||
<About />
|
||||
</div>,
|
||||
<About key='about' />,
|
||||
]);
|
||||
break;
|
||||
|
||||
case 'projects':
|
||||
setOutput((prevOutput) => [
|
||||
...prevOutput,
|
||||
<div key='projects' className='flex flex-row'>
|
||||
<Projects />
|
||||
</div>,
|
||||
<Projects key='projects' />,
|
||||
]);
|
||||
break;
|
||||
case 'experience':
|
||||
setOutput((prevOutput) => [
|
||||
...prevOutput,
|
||||
<div key='experience' className='flex flex-row'>
|
||||
<Experience />
|
||||
</div>,
|
||||
<Experience key='experience' />,
|
||||
]);
|
||||
break;
|
||||
case 'back':
|
||||
@ -184,9 +108,7 @@ export default function Home() {
|
||||
case 'contact':
|
||||
setOutput((prevOutput) => [
|
||||
...prevOutput,
|
||||
<div key='contact'>
|
||||
<Contact />
|
||||
</div>,
|
||||
<Contact key='contact' />,
|
||||
]);
|
||||
break;
|
||||
case 'clear':
|
||||
@ -199,41 +121,59 @@ export default function Home() {
|
||||
default:
|
||||
setOutput((prevOutput) => [
|
||||
...prevOutput,
|
||||
<div key='error'>
|
||||
<span className='text-red-500'>Error:</span> Bad command
|
||||
or file name: {command}
|
||||
<div key='error' className='text-red-500'>
|
||||
Error:{' '}
|
||||
<span className='text-red-400'>
|
||||
{command} is not a valid command or batch file.
|
||||
</span>
|
||||
</div>,
|
||||
]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleCommandInput = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === 'Enter') {
|
||||
enterAudio.current?.play();
|
||||
setOutput((prevOutput) => [...prevOutput, `S:\\> ${input}.exe`]);
|
||||
processCommand(input);
|
||||
setInput(''); // Clear the input
|
||||
setSuggestion(''); // Clear the suggestion
|
||||
setInput('');
|
||||
setSuggestion('');
|
||||
} else if (e.key === 'Tab' && suggestion) {
|
||||
e.preventDefault();
|
||||
keyAudio.current?.play();
|
||||
e.preventDefault(); // Prevent the default tab behavior
|
||||
setInput(suggestion); // Set input to the full suggestion
|
||||
setSuggestion(''); // Clear the suggestion
|
||||
setInput(suggestion);
|
||||
setSuggestion('');
|
||||
} else if (e.key === 'Escape') {
|
||||
keyAudio.current?.play();
|
||||
setInput(''); // Clear the input
|
||||
setSuggestion(''); // Clear the suggestion
|
||||
setInput('');
|
||||
setSuggestion('');
|
||||
} else {
|
||||
keyAudio.current?.play();
|
||||
}
|
||||
};
|
||||
|
||||
// Adjustments to the component
|
||||
const createCommandButton = (command: string, label: string) => (
|
||||
<div key={command}>
|
||||
<button
|
||||
className='text-white'
|
||||
onClick={() => {
|
||||
setInput(command);
|
||||
inputRef.current?.focus();
|
||||
}}
|
||||
>
|
||||
{label.split(' - ')[0]} -{' '}
|
||||
<span className='text-white hover:underline hover:text-blue-500 duration-300'>
|
||||
{label.split(' - ')[1] || (
|
||||
<span className='text-gray-500'>No description</span>
|
||||
)}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className='bg-black'>
|
||||
<div className='absolute z-[1] top-0 left-0 text-white font-mono p-10 overflow-auto min-h-screen min-w-screen'>
|
||||
{/* Back Link */}
|
||||
<a href='/home' className='hover:text-blue-500 duration-200'>
|
||||
< Back
|
||||
</a>
|
||||
|
||||
@ -26,9 +26,6 @@ export default function Projects() {
|
||||
const maxDescriptionLength = Math.max(
|
||||
...projects.map((project) => project.description.length),
|
||||
);
|
||||
const maxLinkLength = Math.max(
|
||||
...projects.map((project) => project.link.length),
|
||||
);
|
||||
|
||||
// Step 2: Prepare projects with padded strings for rendering
|
||||
const preparedProjects = projects.map((project) => ({
|
||||
@ -41,13 +38,20 @@ export default function Projects() {
|
||||
<div className='bg-black font-mono text-white'>
|
||||
<h1 className='text-white font-mono text-md mb-4'>
|
||||
--- Reading database projects.db ---<br></br>
|
||||
Found {projects.length} projects in database. Displaying all projects:
|
||||
Found {projects.length} projects in database. Displaying all
|
||||
projects:
|
||||
</h1>
|
||||
{preparedProjects.map((project, index) => (
|
||||
<div key={index} className='flex flex-row'>
|
||||
<p>{project.title}</p> |
|
||||
<p> {project.description}</p>|
|
||||
<a href={project.link} className="hover:text-blue-500 duration-200" target="blank"> {project.link}</a>
|
||||
<a
|
||||
href={project.link}
|
||||
className='hover:text-blue-500 duration-200'
|
||||
target='blank'
|
||||
>
|
||||
{project.link}
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user