index.html 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Lee Morgan</title>
  6. <link rel="stylesheet" href="/style">
  7. </head>
  8. <body>
  9. <div class="sidebar">
  10. <h1>Hi, I'm Lee Morgan</h1>
  11. <p class="description">I'm a human being from planet Earth. I am also a developer. I often spend my time doing human things, and sometimes developer things. I sometimes write articles about relatable human/developer things. Sometimes I don't. I like to learn new human things such as human languages and computer languages.</p>
  12. <div class="leeLinks">
  13. <a href="https://github.com/MorganLee909">
  14. <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  15. <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
  16. </svg>
  17. <p>MorganLee909</p>
  18. </a>
  19. <a href="https://www.linkedin.com/in/lee-morgan-79575b1b/">
  20. <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  21. <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
  22. <rect x="2" y="9" width="4" height="12"></rect>
  23. <circle cx="4" cy="4" r="2"></circle>
  24. </svg>
  25. <p>Lee Morgan</p>
  26. </a>
  27. <a href="mailto:me@leemorgan.io">
  28. <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  29. <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
  30. <polyline points="22,6 12,13 2,6"></polyline>
  31. </svg>
  32. <p>me@leemorgan.io</p>
  33. </a>
  34. </div>
  35. </div>
  36. <div id="menu">
  37. <button id="aboutButton" class="active">
  38. <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  39. <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
  40. <circle cx="12" cy="7" r="4"></circle>
  41. </svg>
  42. <p>About Me</p>
  43. </button>
  44. <button id="projectsButton">
  45. <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  46. <polyline points="16 18 22 12 16 6"></polyline>
  47. <polyline points="8 6 2 12 8 18"></polyline>
  48. </svg>
  49. <p>My Projects</p>
  50. </button>
  51. <button id="writingButton">
  52. <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  53. <path d="M12 19l7-7 3 3-7 7-3-3z"></path>
  54. <path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"></path>
  55. <path d="M2 2l7.586 7.586"></path>
  56. <circle cx="11" cy="11" r="2"></circle>
  57. </svg>
  58. <p>My Writing</p>
  59. </button>
  60. <button id="linksButton">
  61. <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  62. <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
  63. <line x1="3" y1="9" x2="21" y2="9"></line>
  64. <line x1="9" y1="21" x2="9" y2="9"></line>
  65. </svg>
  66. <p>Fun Links</p>
  67. </button>
  68. </div>
  69. <div id="main">
  70. <div id="about">
  71. <h1>About Me</h1>
  72. </div>
  73. <div id="projects" class="cardContainer" style="display:none;">
  74. <a class="card" href="https://thesubline.com">
  75. <h2>The Subline</h2>
  76. <img src="/images/subline" alt="The Subline">
  77. <p>A web application to assist restaurant owners in managing their inventories. Providing insights into usage, waste and other details through the use of data.</p>
  78. </a>
  79. <a class="card" href="https://budgeteer.money">
  80. <h2>Budgeteer</h2>
  81. <img src="/images/budgeteer" alt="Budgeteer">
  82. <p>A simple web application to help people to budget their money in a simple and approachable manner.</p>
  83. </a>
  84. </div>
  85. <div id="writing" class="cardContainer" style="display:none;">
  86. <a class="card" href="/writing/touchscreens">
  87. <h2>Touchscreens, An Essay</h2>
  88. <img src="/images/touchscreen" alt="touchscreen">
  89. </a>
  90. </div>
  91. <div id="links" style="display:none;">
  92. <h1>Cool Links</h1>
  93. </div>
  94. </div>
  95. <script>
  96. let buttons = document.getElementById("menu").children;
  97. let content = document.getElementById("main").children;
  98. for(let i = 0; i < buttons.length; i++){
  99. buttons[i].onclick = ()=>{
  100. for(let j = 0; j < buttons.length; j++){
  101. buttons[j].classList.remove("active");
  102. }
  103. buttons[i].classList.add("active");
  104. for(let j = 0; j < content.length; j++){
  105. content[j].style.display = "none";
  106. }
  107. let string = buttons[i].id.replace("Button", "");
  108. document.getElementById(string).style.display = "flex";
  109. };
  110. }
  111. </script>
  112. </body>
  113. </html>