misc cleanup

src/app/term/page.tsx

@@ -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'>
+                    createCommandButton(
-                        <button
+                        'help',
-                            key='clear'
+                        'Help (this command) - List available commands',
-                            onClick={() => {
+                    ),
-                                setInput('help');
+                    createCommandButton(
-                                inputRef.current?.focus();
+                        'about',
-                            }}
+                        'About - Learn more about Sticks and his projects',
-                            className='text-blue-500 hover:underline'
+                    ),
-                        >
+                    createCommandButton(
-                            Help (this command)
+                        'projects',
-                        </button>
+                        'Projects - List of projects created by Sticks',
-                        {' - Display this help message'}
+                    ),
-                    </div>,
+                    createCommandButton(
-                    <div key='about'>
+                        'experience',
-                        <button
+                        "Experience - View Sticks's experience",
-                            key='clear'
+                    ),
-                            onClick={() => {
+                    createCommandButton(
-                                setInput('about');
+                        'contact',
-                                inputRef.current?.focus();
+                        'Contact - Get in touch with Sticks',
-                            }}
+                    ),
-                            className='text-blue-500 hover:underline'
+                    createCommandButton(
-                        >
+                        'back',
-                            About
+                        'Back - Return to the home page',
-                        </button>
+                    ),
-                        {' - Learn more about Sticks and his projects'}
+                    createCommandButton('clear', 'Clear - Clear the screen'),
-                    </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>,
                 ]);
                 break;
             case 'about':
                 setOutput((prevOutput) => [
                     ...prevOutput,
-                    <div key='about' className='flex flex-row'>
+                    <About key='about' />,
-                        <About />
-                    </div>,
                 ]);
                 break;
-
             case 'projects':
                 setOutput((prevOutput) => [
                     ...prevOutput,
-                    <div key='projects' className='flex flex-row'>
+                    <Projects key='projects' />,
-                        <Projects />
-                    </div>,
                 ]);
                 break;
             case 'experience':
                 setOutput((prevOutput) => [
                     ...prevOutput,
-                    <div key='experience' className='flex flex-row'>
+                    <Experience key='experience' />,
-                        <Experience />
-                    </div>,
                 ]);
                 break;
             case 'back':
@@ -184,9 +108,7 @@ export default function Home() {
             case 'contact':
                 setOutput((prevOutput) => [
                     ...prevOutput,
-                    <div key='contact'>
+                    <Contact key='contact' />,
-                        <Contact />
-                    </div>,
                 ]);
                 break;
             case 'clear':
@@ -199,41 +121,59 @@ export default function Home() {
             default:
                 setOutput((prevOutput) => [
                     ...prevOutput,
-                    <div key='error'>
+                    <div key='error' className='text-red-500'>
-                        <span className='text-red-500'>Error:</span> Bad command
+                        Error:{' '}
-                        or file name: {command}
+                        <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
+            setInput('');
-            setSuggestion(''); // Clear the suggestion
+            setSuggestion('');
         } else if (e.key === 'Tab' && suggestion) {
+            e.preventDefault();
             keyAudio.current?.play();
-            e.preventDefault(); // Prevent the default tab behavior
+            setInput(suggestion);
-            setInput(suggestion); // Set input to the full suggestion
+            setSuggestion('');
-            setSuggestion(''); // Clear the suggestion
         } else if (e.key === 'Escape') {
             keyAudio.current?.play();
-            setInput(''); // Clear the input
+            setInput('');
-            setSuggestion(''); // Clear the suggestion
+            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'>
                     &lt; Back
                 </a>

src/components/Projects.tsx

@@ -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> &nbsp;|
                     <p>&nbsp;{project.description}</p>|
-                    <a href={project.link} className="hover:text-blue-500 duration-200" target="blank">&nbsp;{project.link}</a>
+                    <a
+                        href={project.link}
+                        className='hover:text-blue-500 duration-200'
+                        target='blank'
+                    >
+                        &nbsp;{project.link}
+                    </a>
                 </div>
             ))}