Skip to content

Commit

Permalink
timeline
Browse files Browse the repository at this point in the history
  • Loading branch information
@soohoonc
soohoonc committed Dec 11, 2023
1 parent c4070c5 commit 00cec0c
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 40 deletions.
9 changes: 7 additions & 2 deletions src/components/terminal-content.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
import React from 'react'

import { getWelcomeMessage } from '@/lib/commands';
import { useTerminalState } from '@/app/providers'
import { getFormattedDate } from '@/lib/utils';

export const TerminalContent = () => {
const { showWelcome, inputs, outputs, prompt } = useTerminalState();
return (
<div className="bg-transparent outline-none resize-none break-all" suppressHydrationWarning>
{showWelcome && <span>{getWelcomeMessage()}</span>}
{showWelcome && (
<p suppressHydrationWarning>
soohoonchoi ({getFormattedDate()})<br/>
Type &quot;help&quot;, &quot;credits&quot; or &quot;license&quot; for more.
</p>
)}
{inputs.map((input, index) => (
<React.Fragment key={index}>
<span>{`${prompt} ${input}`}</span>
Expand Down
138 changes: 100 additions & 38 deletions src/lib/commands.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,5 @@
"use client"

import { getFormattedDate } from './utils';

export const getWelcomeMessage = () => {
return (
<p suppressHydrationWarning>
soohoonchoi ({getFormattedDate()})<br/>
Type &quot;help&quot;, &quot;credits&quot; or &quot;license&quot; for more.
</p>
)
};

const commands: { [key: string] : string} = {
'about': 'about me',
'resume': 'view my resume',
'source': 'view the source code',
'clear': 'clear the terminal screen',
'(+ more)': 'try messing around, still in the works',
};

const about = () => {
return (
<p>
<a className="text-indigo-400" target="_blank" href="https://bento.me/soohoonchoi">soohoonchoi</a><br/>
i am a cofounder over at <a className="text-indigo-400" target="_blank" href="https://getonboardai.com">onboard ai</a>.<br/>
recently graduated from <a className="text-indigo-400" target="_blank" href="https://www.gatech.edu/">gt</a> with a degree in math and cs.<br/>
i also like to <a className="text-indigo-400" target="_blank" href="https://instagram.com/soohoon.art">art</a>
</p>
)
}

export const handleCommand = (command: string) => {
// still better than yandere dev
switch(command.split(' ')[0]) {
Expand All @@ -44,7 +14,7 @@ export const handleCommand = (command: string) => {
case 'cp':
return <p>nope, not yet</p>
case 'cat':
return <p>🐱🐱🐱 meow 🐱🐱🐱</p>
return <p>meow</p>
case 'whoami':
return <p>guest</p>
case 'echo':
Expand All @@ -60,7 +30,7 @@ export const handleCommand = (command: string) => {
return (
<ul>
<li>[command]: [description]</li>
{Object.keys(commands).map((key, index) => (
{Object.keys(listedCommands).map((key, index) => (
<li key={index} className="flex flex-row">
<span className="ml-[1ch] w-[8ch]">
{key}
Expand All @@ -69,27 +39,119 @@ export const handleCommand = (command: string) => {
{': '}
</span>
<span className="ml-[2ch]">
{commands[key]}
{listedCommands[key]}
</span>
</li>
))}
</ul>
)
case 'license':
return (<p><a className='text-indigo-400' target="_blank" href="https://opensource.org/license/mit/">MIT</a></p>)
return (<p><a className='link' target="_blank" href="https://opensource.org/license/mit/">MIT</a></p>)
case 'credits':
return (<p>
<a className="text-indigo-400" target="_blank" href="https://bento.me/soohoonchoi">soohoonchoi</a>
<a className="link" target="_blank" href="https://bento.me/soohoonchoi">soohoonchoi</a>
</p>)
case 'about':
return about();
case 'resume':
return <p><a className='text-indigo-400' target="_blank" href="https://www.dropbox.com/scl/fi/8zasyts7ohnhqqxddoxt1/SooHoon_Choi_Resume.pdf?rlkey=4bbgzq53nuyzvw1u4h7llwgxk&dl=0">see my resume</a></p>
return <p><a className='link' target="_blank" href="https://www.dropbox.com/scl/fi/8zasyts7ohnhqqxddoxt1/SooHoon_Choi_Resume.pdf?rlkey=4bbgzq53nuyzvw1u4h7llwgxk&dl=0">see my resume</a></p>
case 'timeline':
return (
<ul>
<li>
<span className="w-[5ch]">[time]:</span>
<span className="ml-[1ch] w-[16ch]">[location]</span>
<span className="ml-[5ch]">:{" "}[event]</span></li>
{timeline.map((item, index) => (
<li key={index} className="flex flex-row">
<span className="ml-[1ch] w-[5ch]">
{item.time}
</span>
<span>
{': '}
</span>
<span className="ml-[2ch] w-[14ch]">
{item.location}
</span>
<span>
{': '}
</span>
<span className="ml-[2ch]">
{item.event}
</span>
</li>
))}
</ul>
)
case 'source':
return <p><a className='text-indigo-400' target="_blank" href='https://github.com/soohoonc/soohoonc.github.io'>github</a></p>
return <p><a className='link' target="_blank" href='https://github.com/soohoonc/soohoonc.github.io'>github</a></p>
case '':
return <p> </p>
default:
return <p>{`${command.split(' ')[0]}: command not found`}</p>
}
}
}

const listedCommands: { [key: string] : string} = {
'about': 'about me',
'resume': 'view my resume',
'timeline': 'some of my notable moments',
'source': 'view the source code',
'clear': 'clear the terminal screen',
'(+ more)': 'try messing around, still in the works',
};

const about = () => {
return (
<p>
<a className="link" target="_blank" href="https://bento.me/soohoonchoi">soohoonchoi</a><br/>
i am a cofounder over at <a className="link" target="_blank" href="https://getonboardai.com">onboard ai</a>.<br/>
recently graduated from <a className="link" target="_blank" href="https://www.gatech.edu/">gt</a> with a degree in math and cs.<br/>
i also like to <a className="link" target="_blank" href="https://instagram.com/soohoon.art">art</a>
</p>
)
}

interface Timeline {
time: string
event: React.ReactElement
location: React.ReactElement
}

const timeline: Timeline[] = [
{
time: '1998',
event: <span>born</span>,
location: <a className="link" target="_blank" href="https://www.google.com/maps/place/seoul">seoul</a>
},
{
time: '2001',
event: <span>move to philippines</span>,
location: <a className="link" target="_blank" href="https://www.google.com/maps/place/makati">makati</a>
},
{
time: '2018',
event: <span>graduate highschool</span>,
location: <a className="link" target="_blank" href="https://www.faith.edu.ph">faith academy</a>
},
{
time: '2018',
event: <span>move to us</span>,
location: <a className="link" target="_blank" href="https://www.google.com/maps/place/atlanta">atlanta</a>
},
{
time: '2019',
event: <span>start college</span>,
location: <a className="link" target="_blank" href="https://www.gatech.edu">georgia tech</a>
},
{
time: '2023',
event: <span>graduate college</span>,
location: <a className="link" target="_blank" href="https://www.gatech.edu">georgia tech</a>
},
{
time: '2023',
event: <span>start ups full time</span>,
location: <a className="link" target="_blank" href="https://www.google.com/maps/place/sanfrancisco">san francisco</a>
},
]
4 changes: 4 additions & 0 deletions src/styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,10 @@

--radius: 0.5rem;
}

.link {
color: rgb(129 140 248);
}
}

@layer base {
Expand Down

0 comments on commit 00cec0c

Please sign in to comment.