├── assets ├── favicon.ico └── Ahsan_Khan_CV.pdf ├── index.html ├── js ├── data.js └── script.js ├── README.md ├── css └── style.css └── LICENSE /assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ahsankhan26/TermFolio/HEAD/assets/favicon.ico -------------------------------------------------------------------------------- /assets/Ahsan_Khan_CV.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ahsankhan26/TermFolio/HEAD/assets/Ahsan_Khan_CV.pdf -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Terminal Portfolio - Ahsan Khan 9 | 10 | 11 | 12 | 13 | 14 |

15 |

16 |

17 |

18 |

19 |

20 |

21 | 22 |

23 | 24 |

25 | Welcome to TermFolio! A Porfolio Terminal
26 | Use "help" to view list of commands
27 | > 28 |

29 |

30 |

31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /js/data.js: -------------------------------------------------------------------------------- 1 | var data = { 2 | name : [ 3 | {name: 'Name', value: 'Ahsan Khan'} 4 | ], 5 | bio: [ 6 | {name: 'Name', value: 'Ahsan Khan'}, 7 | {name: 'Email', value: 'm.ahsankhan26@hotmail.com'}, 8 | {name: 'Phone', value: '+92-344-0200963'}, 9 | {name: 'Country', value: 'Pakistan'}, 10 | {name: 'City', value: 'Karachi'} 11 | ], 12 | github: [ 13 | {name: 'GitHub', value: 'ahsankhan26'} 14 | ], 15 | projects: [ 16 | {name: 'Book Blog', value: 'https://github.com/ahsankhan26/Book-Blog'}, 17 | {name: 'Bomberman Replica', value: 'https://github.com/ahsankhan26/Bomberman-Replica'}, 18 | {name: 'WhatsApp Chat Parser', value: 'https://github.com/ahsankhan26/Whatsapp-Chat-Parser'}, 19 | {name: 'Laser Data Transmission', value: 'https://github.com/ahsankhan26/Laser-Data-Transmission'}, 20 | {name: 'Color Guessing Game', value: 'https://github.com/ahsankhan26/Color-Guessing-Game'}, 21 | {name: 'GPA Calculator', value: 'https://github.com/ahsankhan26/gpa-calculator'}, 22 | {name: 'Hello World but unnecessarily complex', value: 'https://github.com/ahsankhan26/hello-world'} 23 | ], 24 | resume: 'Ahsan_Khan_CV.pdf', 25 | socials: [ 26 | {name: 'LinkedIn', value: 'https://linkedin/in/ahsankhan26'}, 27 | {name: 'GitHub', value: 'https://github.com/ahsankhan26'}, 28 | {name: 'Instagram', value: 'https://instagram/ahsankhan26'}, 29 | {name: 'Website', value: 'https://ahsankhan.me'} 30 | ] 31 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

TermFolio

2 | 3 |

:desktop_computer: A Portfolio Website that looks and acts like a Terminal :computer:

4 | 5 |

6 | 7 | 8 | 9 |

10 | 11 |

12 | 13 |

14 | 15 |

Preview

16 |

17 | 18 |

19 | 20 |

Setup

21 | 22 | 1. Clone the repository 23 | 24 | ```ruby 25 | # Clone this repository 26 | $ git clone https://github.com/ahsankhan26/TermFolio.git 27 | 28 | # Go to the repository folder 29 | $ cd TermFolio 30 | ``` 31 | 2. Open the `index.html` file in your browser to view the site 32 | 33 |

Resume

34 | 35 | just place your resume in the 'assets' directory and add the name of the file in 'data.js'. 36 | 37 |

data.js

38 | 39 | ```javascript 40 | var data = { 41 | name : [ 42 | {name: 'Name', value: 'YOUR NAME HERE'} 43 | ], 44 | bio: [ 45 | {name: 'Name', value: 'YOUR NAME HERE'}, 46 | {name: 'Email', value: 'YOUR EMAIL HERE'} 47 | ], 48 | github: [ 49 | {name: 'GitHub', value: 'YOUR GITHUB USERNAME HERE'} 50 | ], 51 | projects: [ 52 | {name: 'ProjectName1', value: 'PROJECT LINK HERE'}, 53 | {name: 'ProjectName1', value: 'PROJECT LINK HERE'} 54 | ], 55 | resume: 'ResumeName.pdf', 56 | socials: [ 57 | {name: 'LinkedIn', value: 'SITE URL'}, 58 | {name: 'Github', value: 'SITE URL'} 59 | ] 60 | } 61 | ``` 62 | 63 |

Made Using :wrench:

64 | 65 | * HTML 66 | * CSS 67 | * JavaScript 68 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #16161a; 3 | color: #ddd; 4 | } 5 | 6 | #terminalContent { 7 | font: 1em Consolas, monaco, monospace; 8 | top: 5em; 9 | bottom: 6em; 10 | } 11 | 12 | .container { 13 | width: 90%; 14 | max-width: 900px; 15 | position: fixed; 16 | } 17 | 18 | #terminalHeader { 19 | height: 1.75em; 20 | background-color: #ddd; 21 | border-radius: 20px 20px 0 0; 22 | } 23 | 24 | #headerName { 25 | position: absolute; 26 | border-radius: 10px; 27 | width: 40%; 28 | height: 15px; 29 | margin: 8px 5px 0 20px; 30 | display: inline-block; 31 | vertical-align: middle; 32 | background-color: white; 33 | } 34 | 35 | .button { 36 | border-radius: 50%; 37 | width: 15px; 38 | height: 15px; 39 | margin: 8px 5px 0 0; 40 | display: inline-block; 41 | vertical-align: middle; 42 | } 43 | 44 | .buttonRed { 45 | margin-left: 20px; 46 | background-color: #ff6464; 47 | transition: 0.2s ease-in-out; 48 | } .buttonRed:hover { background-color: #860000;} 49 | 50 | .buttonGreen { 51 | background-color: #64ff64; 52 | transition: 0.2s ease-in-out; 53 | } .buttonGreen:hover {background-color: #008600;} 54 | 55 | .buttonYellow { 56 | background-color: #ffff64; 57 | transition: 0.2s ease-in-out; 58 | } .buttonYellow:hover {background-color: #868600;} 59 | 60 | #githubIcon { 61 | float: right; 62 | color: black; 63 | transform: scale(1.3,1.3); 64 | margin-right: 25px; 65 | transition: 0.2s ease-in-out; 66 | } 67 | #githubIcon:hover { 68 | transform: scale(1.5, 1.5); 69 | } 70 | 71 | #terminalBody { 72 | padding: 2% 5% 0 2%; 73 | background-color: #242629; 74 | height: 30em; 75 | border-radius: 0 0 20px 20px; 76 | overflow-y: auto; 77 | border: solid 5px #ddd; 78 | } 79 | 80 | #BodyContent { 81 | float: left; 82 | } 83 | 84 | input { 85 | width: 30%; 86 | background-color: #242629; 87 | border-width: 0; 88 | color: #ddd; 89 | font: 1em Consolas, monaco, monospace; 90 | font-weight: 700; 91 | } 92 | input:focus { 93 | outline: none; 94 | } 95 | 96 | a { 97 | color: #0dd; 98 | transition: 0.2s ease-in-out; 99 | } 100 | a:hover { 101 | color: #EF4F4F; 102 | } -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | let input = document.querySelector("input"); 2 | let terminalBody = document.querySelector("#terminalBody"); 3 | 4 | let commandList = ['bio', 'clear', 'echo', 'github', 'name', 'projects', 'resume', 'socials']; 5 | 6 | const functionCalls = () => { 7 | checkWindowClick(); 8 | checkPressedEnter(); 9 | } 10 | 11 | 12 | const checkWindowClick = () => { 13 | terminalBody.addEventListener('click', () => input.focus()); 14 | } 15 | 16 | const checkPressedEnter = () => { 17 | input.addEventListener('keydown', (e) => { 18 | if (e.key === 'Enter') { 19 | execute(input.value); 20 | } 21 | }); 22 | } 23 | 24 | const execute = (inputValue) => { 25 | let temp = input.value; 26 | input.remove(); 27 | terminalBody.innerHTML += temp; 28 | checkCommand(temp); 29 | addInput(); 30 | } 31 | 32 | const executeCommand = (command) => { 33 | 34 | terminalBody.innerHTML += '
' 35 | 36 | for(let i=0; i${data[command][i].value}` ; 42 | } else{ 43 | terminalBody.innerHTML += `${data[command][i].value}` ; 44 | } 45 | } 46 | } 47 | 48 | const checkCommand = (inputCommand) => { 49 | 50 | terminalBody.innerHTML += '
'; 51 | let command = inputCommand.split(" ")[0]; 52 | 53 | if(command){ 54 | if(command === 'clear'){ commandClear();} 55 | else if(command === 'echo') {commandEcho(inputCommand);} 56 | else if(command === 'github'){ commandGithub(command)} 57 | else if(command === 'help'){ commandHelp();} 58 | else if(command === 'resume'){ commandResume();} 59 | else if(commandList.includes(command)){ executeCommand(command);} 60 | else{ 61 | terminalBody.innerHTML += inputCommand + ' is not recognized as a command, Try \"help\"'; 62 | } 63 | } 64 | terminalBody.innerHTML += '
'; 65 | } 66 | 67 | function addInput() { 68 | terminalBody.innerHTML += ' > '; 69 | input = document.querySelector("input"); 70 | input.focus(); 71 | functionCalls(); 72 | } 73 | 74 | const commandClear = () => { terminalBody.innerHTML = '' } 75 | 76 | function commandHelp() { 77 | terminalBody.innerHTML += `
${commandList.join('
')}`; 78 | } 79 | 80 | function commandGithub() { 81 | terminalBody.innerHTML += `