25 |

dtaggart:$|

26 |

Find me online:

27 |

29 | YouTube 30 |
32 | Twitter 33 |
35 | GitHub 36 |
38 | CodePen 39 |

41 |

contact-me:$|

You can contact me at the email and phone number below

58 | -------------------------------------------------------------------------------- /terminal style landing page/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;700&display=swap"); 2 | > 3 | * { 4 | box-sizing: border-box; 5 | padding: 0; 6 | margin: 5; 7 | } 8 | 9 | :root { 10 | --text-color: #00aa00; 11 | } 12 | 13 | body { 14 | font-family: "Roboto Mono", sans-serif; 15 | background-color: #333; 16 | color: #ccc; 17 | font-size: 18px; 18 | line-height: 1.6; 19 | } 20 | 21 | .container { 22 | max-width: 600px; 23 | margin: auto; 24 | display: flex; 25 | flex-direction: column; 26 | justify-content: center; 27 | align-items: center; 28 | min-height: 100vh; 29 | } 30 | 31 | ul { 32 | list-style-type: none; 33 | } 34 | 35 | nav { 36 | width: 40%; 37 | } 38 | 39 | nav ul { 40 | display: flex; 41 | justify-content: space-around; 42 | align-items: center; 43 | } 44 | 45 | nav ul li { 46 | color: var(--text-color); 47 | cursor: pointer; 48 | } 49 | 50 | h1 { 51 | color: var(--text-color); 52 | font-size: 50px; 53 | letter-spacing: -5px; 54 | margin-bottom: 20px; 55 | } 56 | 57 | h2 { 58 | color: var(--text-color); 59 | } 60 | 61 | h3 { 62 | margin-bottom: 10px; 63 | } 64 | 65 | a { 66 | color: var(--text-color); 67 | text-decoration: none; 68 | } 69 | 70 | .hidden { 71 | display: none; 72 | } 73 | 74 | .wb-body { 75 | background-color: #111; 76 | padding: 20px; 77 | } 78 | 79 | p { 80 | margin: 20px 0; 81 | } 82 | 83 | .cursor { 84 | font-weight: 700; 85 | animation: 1s blink step-end infinite; 86 | } 87 | 88 | @keyframes blink { 89 | from, 90 | to { 91 | color: transparent; 92 | } 93 | 50% { 94 | color: var(--text-color); 95 | } 96 | } 97 | .........///jhgf 98 | ///////////////// 99 | //////////////////////// 100 | ////////////////// 101 | ////////////////////////// 102 | ////////////////// 103 | //////////////////////// 104 | /////////////////////// 105 | /////////////// 106 | ////////////////////////////// 107 | ///////////////////// 108 | //////////////////////////////// 109 | /////////////////// 110 | /////////////////////////// 111 | ///////////////////////// 112 | /////////////////////// 113 | ///////////// 114 | /////////////// 115 | ////////////////////////////// 116 | /////////////////// 117 | //////////////// 118 | ///////////////// 119 | /////////////// 120 | //////////////// 121 | ///////////////////// 122 | ///////////////////// 123 | /////////////////////// 124 | ///////////////// 125 | /////////////////// 126 | ////////////// 127 | //////////////// 128 | ///////////////// 129 | ///////////// 130 | ///////////// 131 | ////////// 132 | //////////// 133 | ///////////// 134 | //////////// 135 | /////////////// 136 | ////////////// 137 | //////// 138 | ///////// 139 | ////// 140 | ////////// 141 | ///////////// 142 | ///////// 143 | -------------------------------------------------------------------------------- /terminal style landing page/script.js: -------------------------------------------------------------------------------- 1 | const about = document.querySelector("#about"); 2 | const contact = document.querySelector("#contact"); 3 | const aboutContent = document.querySelector("#about-content"); 4 | const contactContent = document.querySelector("#contact-content"); 5 | const about = document.querySelector("#about"); 6 | const contact = document.querySelector("#contact"); 7 | const aboutContent = document.querySelector("#about-content"); 8 | const contactContent = document.querySelector("#contact-content"); 9 | about.addEventListener("click", () => { 10 | const aboutBox = new WinBox({ 11 | title: "About Me", 12 | // modal: true, 13 | width: "400px", 14 | height: "400px", 15 | top: 50, 16 | right: 50, 17 | bottom: 50, 18 | left: 50, 19 | mount: aboutContent, 20 | onfocus: function () { 21 | this.setBackground("var(--text-color)"); 22 | }, 23 | onblur: function () { 24 | this.setBackground("#777"); 25 | }, 26 | }); 27 | }); 28 | 29 | contact.addEventListener("click", () => { 30 | const contactBox = new WinBox({ 31 | title: "Contact Me", 32 | width: "400px", 33 | height: "400px", 34 | top: 100, 35 | right: 50, 36 | bottom: 50, 37 | left: 150, 38 | mount: contactContent, 39 | onfocus: function () { 40 | this.setBackground("var(--text-color)"); 41 | }, 42 | onblur: function () { 43 | this.setBackground("#777"); 44 | }, 45 | }); 46 | }); 47 | . 48 | . 49 | /////// 50 | main 51 | 123 52 | // 53 | .....////// 54 | /////////// 55 | ////////////// 56 | ............. 57 | /////////// 58 | /////////// 59 | ////////// 60 | //////////// 61 | //////////// 62 | //////////// 63 | /////////// 64 | > 65 | 66 | 70 | 71 | 72 | 73 | > 74 | 75 | 79 | 80 | 81 | 82 | > 83 | 84 | 88 | 89 | 90 | 91 | > 92 | 93 | 97 | 98 | 99 | 100 | > 101 | 102 | 106 | 107 | 108 | 109 | ///////////////////////// 110 | ///////////////////////////// 111 | /////////////////////////// 112 | ////////////////////// 113 | ///////////////////// 114 | /////////////////////// 115 | //////////////////// 116 | ///////////////////////////// 117 | /////////////////////// 118 | /////////////////////////// 119 | //////////////////// 120 | //////////////// 121 | ///////////////////////// 122 | //////////////// 123 | ////////////// 124 | /////////////////////// 125 | /////////////////////// 126 | /////////////////////////////////////// 127 | //////////////////////////////// 128 | //////////////////////// 129 | ////////////////////////////// 130 | //////////////////////////// 131 | ///////////////////// 132 | /////////////////////////////////// 133 | ////////////////////////////// 134 | ////////////////////////////////////////// 135 | ////////////////////////////////// 136 | ////////////////////////////// 137 | ///////////////////////////// 138 | /////////////////////// 139 | ///////////// 140 | ///////////////// 141 | //////////////// 142 | ///////////////// 143 | ////////////// 144 | ////////////////// 145 | ///////////////////////////////////////// 146 | ///////////////////// 147 | /////////////////// 148 | ///////////////////////////////////////// 149 | 150 | ///////////////////// 151 | //////////////////////// 152 | /////////////////////////////// 153 | //////////////////////////////////// 154 | ////////////////////////////////////////////////////// 155 | ///////////////////// 156 | ///////////////////////// 157 | ////////////////// 158 | ////////////// 159 | //////////////////////// 160 | /////////////////////// 161 | ////////////////////////////// 162 | /////////////////////////////////// 163 | /////////////////////////////////////// 164 | ////////////////////////////// 165 | ///////////////////////////// 166 | //////////////////////////////// 167 | /////////////////////////////// 168 | //////////////////////////////// 169 | //////////////////////////////////// 170 | ///////////// 171 | ////////////// 172 | //////////////////// 173 | /////////////////// 174 | /////////////// 175 | //////////////////////////// 176 | //////////////// 177 | ////////// 178 | /////////////// 179 | /////////////////////////// 180 | / 181 | --------------------------------------------------------------------------------

dtaggart:$|

Find me online:

about-me:$|

contact-me:$|