| 3 | import ReactGA from 'react-ga4'; |
| 4 | |
| 5 | export class Terminal extends Component { |
| 6 | constructor() { |
| 7 | super(); |
| 8 | this.cursor = ""; |
| 9 | this.terminal_rows = 1; |
| 10 | this.current_directory = "~"; |
| 11 | this.curr_dir_name = "root"; |
| 12 | this.prev_commands = []; |
| 13 | this.commands_index = -1; |
| 14 | this.child_directories = { |
| 15 | root: ["books", "projects", "personal-documents", "skills", "languages", "PDPU", "interests"], |
| 16 | PDPU: ["Sem-6"], |
| 17 | books: ["Eric-Jorgenson_The-Almanack-of-Naval-Ravikant.pdf", "Elon Musk: How the Billionaire CEO of SpaceX.pdf", "The $100 Startup_CHRIS_GUILLEBEAU.pdf", "The_Magic_of_Thinking_Big.pdf"], |
| 18 | skills: ["Front-end development", "React.js", "jQuery", "Flutter", "Express.js", "SQL", "Firebase"], |
| 19 | projects: ["vivek9patel-personal-portfolio", "synonyms-list-react", "economist.com-unlocked", "Improve-Codeforces", "flutter-banking-app", "Meditech-Healthcare", "CPU-Scheduling-APP-React-Native"], |
| 20 | interests: ["Software Engineering", "Deep Learning", "Computer Vision"], |
| 21 | languages: ["Javascript", "C++", "Java", "Dart"], |
| 22 | }; |
| 23 | this.state = { |
| 24 | terminal: [], |
| 25 | } |
| 26 | } |
| 27 | |
| 28 | componentDidMount() { |
| 29 | this.reStartTerminal(); |
| 30 | } |
| 31 | |
| 32 | componentDidUpdate() { |
| 33 | clearInterval(this.cursor); |
| 34 | this.startCursor(this.terminal_rows - 2); |
| 35 | } |
| 36 | |
| 37 | componentWillUnmount() { |
| 38 | clearInterval(this.cursor); |
| 39 | } |
| 40 | |
| 41 | reStartTerminal = () => { |
| 42 | clearInterval(this.cursor); |
| 43 | $('#terminal-body').empty(); |
| 44 | this.appendTerminalRow(); |
| 45 | } |
| 46 | |
| 47 | appendTerminalRow = () => { |
| 48 | let terminal = this.state.terminal; |
| 49 | terminal.push(this.terminalRow(this.terminal_rows)); |
| 50 | this.setState({ terminal }); |
| 51 | this.terminal_rows += 2; |
| 52 | } |
| 53 | |
| 54 | terminalRow = (id) => { |
| 55 | return ( |
| 56 | <React.Fragment key={id}> |
| 57 | <div className="flex w-full h-5"> |
| 58 | <div className="flex"> |
| 59 | <div className=" text-ubt-green">vivek@Dell</div> |
| 60 | <div className="text-white mx-px font-medium">:</div> |
| 61 | <div className=" text-ubt-blue">{this.current_directory}</div> |
| 62 | <div className="text-white mx-px font-medium mr-1">$</div> |