index.php 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. <?php declare(strict_types=1); ?>
  2. <!doctype html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <meta name="description" content="Junior desktop support specialist portfolio focused on approachable troubleshooting, user support, Windows, Microsoft 365, hardware, networking, and hands-on learning.">
  8. <meta name="theme-color" content="#07111f">
  9. <title>Junior Desktop Support | Jaden Portfolio</title>
  10. <link rel="preconnect" href="https://fonts.googleapis.com">
  11. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  12. <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
  13. <link rel="stylesheet" href="/assets/site.css">
  14. <script src="/assets/site.js" defer></script>
  15. </head>
  16. <body>
  17. <canvas id="particle-field" aria-hidden="true"></canvas>
  18. <div class="noise" aria-hidden="true"></div>
  19. <header class="site-header">
  20. <a class="brand" href="#top" aria-label="Back to top">
  21. <span class="brand-mark">JP</span>
  22. <span>Support Desk</span>
  23. </a>
  24. <nav aria-label="Primary navigation">
  25. <a href="#skills">Skills</a>
  26. <a href="#approach">Approach</a>
  27. <a class="nav-cta" href="#contact">Open a ticket</a>
  28. </nav>
  29. </header>
  30. <main id="top">
  31. <section class="hero section-shell">
  32. <div class="hero-copy reveal">
  33. <div class="availability"><span></span> Ready for a junior support role</div>
  34. <p class="eyebrow">Junior Desktop Support Specialist</p>
  35. <h1>Technical support with a <em>human signal.</em></h1>
  36. <p class="hero-lede">I turn “it stopped working” into calm, clear next steps. I’m building a career around patient troubleshooting, dependable follow-through, and making technology feel less intimidating.</p>
  37. <div class="hero-actions">
  38. <a class="button button-primary" href="#contact">Let’s troubleshoot together <span>↗</span></a>
  39. <a class="button button-ghost" href="#skills">Explore my toolkit</a>
  40. </div>
  41. <div class="quick-stats" aria-label="Portfolio highlights">
  42. <div><strong>01</strong><span>User-first mindset</span></div>
  43. <div><strong>02</strong><span>Hands-on home lab</span></div>
  44. <div><strong>03</strong><span>Always documenting</span></div>
  45. </div>
  46. </div>
  47. <div class="hero-console reveal" aria-label="Example support workflow">
  48. <div class="console-top">
  49. <div class="console-dots"><i></i><i></i><i></i></div>
  50. <span>support_session.log</span>
  51. <span class="live-pill">LIVE</span>
  52. </div>
  53. <div class="console-body">
  54. <div class="ticket-meta"><span>INC-0027</span><span class="priority">NORMAL</span></div>
  55. <p class="console-prompt"><span>user@desk:~$</span> My laptop can’t connect to Wi-Fi.</p>
  56. <ol class="diagnostic-list">
  57. <li class="complete"><i>✓</i><span><b>Listen first</b><small>Confirm impact and recent changes</small></span></li>
  58. <li class="complete"><i>✓</i><span><b>Isolate the cause</b><small>Adapter, network, credentials, or DNS</small></span></li>
  59. <li class="active"><i></i><span><b>Apply & verify</b><small>Restore service and test with the user</small></span></li>
  60. <li><i>4</i><span><b>Document clearly</b><small>Leave the next technician a useful trail</small></span></li>
  61. </ol>
  62. <div class="resolution"><span>Resolution confidence</span><strong>92%</strong><div><i></i></div></div>
  63. </div>
  64. </div>
  65. </section>
  66. <section class="ticker" aria-label="Core skills">
  67. <div><span>Windows 10/11</span><i>✦</i><span>Microsoft 365</span><i>✦</i><span>Hardware Support</span><i>✦</i><span>Active Directory Fundamentals</span><i>✦</i><span>Networking Basics</span><i>✦</i><span>Remote Support</span></div>
  68. </section>
  69. <section id="skills" class="section-shell skills-section">
  70. <div class="section-heading reveal">
  71. <p class="eyebrow">My growing toolkit</p>
  72. <h2>Strong foundations.<br><span>Curious by default.</span></h2>
  73. <p>I’m early in my IT career and serious about the fundamentals—the everyday skills that keep people productive and earn their trust.</p>
  74. </div>
  75. <div class="skill-grid">
  76. <article class="skill-card featured reveal">
  77. <div class="skill-icon">⌘</div><span class="skill-level">CORE FOCUS</span>
  78. <h3>Desktop troubleshooting</h3>
  79. <p>Methodical diagnosis for Windows issues, application errors, peripherals, updates, profiles, and everyday workstation problems.</p>
  80. <ul><li>Windows 10 & 11</li><li>Drivers & updates</li><li>Printers & peripherals</li></ul>
  81. </article>
  82. <article class="skill-card reveal">
  83. <div class="skill-icon">◎</div><span class="skill-level">BUILDING</span>
  84. <h3>Identity & access</h3>
  85. <p>Practicing the account lifecycle basics that help users get secure access without unnecessary friction.</p>
  86. <ul><li>Active Directory basics</li><li>Password resets</li><li>Groups & permissions</li></ul>
  87. </article>
  88. <article class="skill-card reveal">
  89. <div class="skill-icon">↯</div><span class="skill-level">PRACTICED</span>
  90. <h3>Hardware support</h3>
  91. <p>Comfortable identifying components, checking connections, replacing common parts, and narrowing down hardware faults.</p>
  92. <ul><li>PC components</li><li>Workstation setup</li><li>Preventive care</li></ul>
  93. </article>
  94. <article class="skill-card reveal">
  95. <div class="skill-icon">⌁</div><span class="skill-level">FOUNDATIONAL</span>
  96. <h3>Networking</h3>
  97. <p>Working knowledge of the path between a device and its destination—and the tools to find where that path breaks.</p>
  98. <ul><li>TCP/IP & DNS</li><li>Wi-Fi troubleshooting</li><li>ipconfig, ping & tracert</li></ul>
  99. </article>
  100. <article class="skill-card reveal">
  101. <div class="skill-icon">☁</div><span class="skill-level">LEARNING</span>
  102. <h3>Microsoft 365</h3>
  103. <p>Supporting the productivity tools people rely on, from sign-in and Outlook basics to Teams and OneDrive sync issues.</p>
  104. <ul><li>Outlook & Teams</li><li>OneDrive basics</li><li>Account support</li></ul>
  105. </article>
  106. </div>
  107. </section>
  108. <section id="approach" class="approach-section">
  109. <div class="section-shell approach-inner">
  110. <div class="approach-copy reveal">
  111. <p class="eyebrow">How I work the problem</p>
  112. <h2>No mystery fixes.<br><span>Just a clear process.</span></h2>
  113. <p>Great junior support isn’t about knowing every answer. It’s about asking useful questions, testing carefully, communicating honestly, and learning from every ticket.</p>
  114. <div class="principles">
  115. <span>Patient with people</span><span>Careful with systems</span><span>Hungry to learn</span>
  116. </div>
  117. </div>
  118. <div class="process" role="list">
  119. <article class="process-step reveal" role="listitem"><span>01</span><div><h3>Understand</h3><p>Listen without assumptions. Translate symptoms into a clear, shared problem statement.</p></div></article>
  120. <article class="process-step reveal" role="listitem"><span>02</span><div><h3>Investigate</h3><p>Start simple, gather evidence, and change one thing at a time so the result means something.</p></div></article>
  121. <article class="process-step reveal" role="listitem"><span>03</span><div><h3>Resolve</h3><p>Fix the root cause when possible, test the outcome, and confirm the user is truly back to work.</p></div></article>
  122. <article class="process-step reveal" role="listitem"><span>04</span><div><h3>Improve</h3><p>Document the path, share what worked, and add the lesson to my growing support playbook.</p></div></article>
  123. </div>
  124. </div>
  125. </section>
  126. <section class="lab-section section-shell">
  127. <div class="lab-card reveal">
  128. <div class="lab-copy">
  129. <p class="eyebrow">Currently in the lab</p>
  130. <h2>I learn by building the thing.</h2>
  131. <p>This portfolio runs on infrastructure I configured myself: Debian 13, Apache, MariaDB, PHP, Git-based deployments, webhooks, and automated TLS.</p>
  132. </div>
  133. <div class="lab-stack" aria-label="Technologies used for this portfolio">
  134. <span>Debian 13 <i>online</i></span><span>Apache <i>serving</i></span><span>MariaDB <i>connected</i></span><span>Git + Gogs <i>deployed</i></span><span>Let's Encrypt <i>secure</i></span><span>PHP 8.4 <i>running</i></span>
  135. </div>
  136. </div>
  137. </section>
  138. <section id="contact" class="contact-section section-shell">
  139. <div class="contact-copy reveal">
  140. <p class="eyebrow">Start a conversation</p>
  141. <h2>Got an opportunity?<br><span>Open a ticket.</span></h2>
  142. <p>Hiring for a junior support role, building an IT team, or just want to compare troubleshooting notes? Send a message—no hold music required.</p>
  143. <a class="email-link" href="mailto:praesidium909@gmail.com"><span>@</span><div><small>Prefer regular email?</small><b>praesidium909@gmail.com</b></div></a>
  144. </div>
  145. <form id="contact-form" class="contact-form reveal" action="/contact.php" method="post" novalidate>
  146. <div class="form-top"><div><span class="status-dot"></span> NEW SUPPORT REQUEST</div><span id="ticket-number">TKT-0000</span></div>
  147. <input class="honey" type="text" name="website" tabindex="-1" autocomplete="off" aria-hidden="true">
  148. <input type="hidden" name="started_at" id="started-at" value="">
  149. <div class="form-row">
  150. <label><span>Your name</span><input type="text" name="name" autocomplete="name" required maxlength="80" placeholder="How should I address you?"></label>
  151. <label><span>Your email</span><input type="email" name="email" autocomplete="email" required maxlength="160" placeholder="you@company.com"></label>
  152. </div>
  153. <label><span>What brings you here?</span>
  154. <select name="topic" required>
  155. <option value="" selected disabled>Choose a ticket type...</option>
  156. <option value="Junior support opportunity">Junior support opportunity</option>
  157. <option value="Interview conversation">Interview conversation</option>
  158. <option value="Networking">Networking / say hello</option>
  159. <option value="Website feedback">Website feedback</option>
  160. </select>
  161. </label>
  162. <label><span>Ticket details</span><textarea name="message" required minlength="20" maxlength="3000" rows="5" placeholder="Tell me about the role, team, or idea..."></textarea></label>
  163. <div class="form-footer">
  164. <p id="form-status" role="status" aria-live="polite">Typical response: within one business day</p>
  165. <button class="button button-primary" type="submit"><span class="button-label">Submit ticket</span><span class="send-icon">↗</span></button>
  166. </div>
  167. </form>
  168. </section>
  169. </main>
  170. <footer>
  171. <div class="section-shell"><div><span class="brand-mark">JP</span><p>Junior support. Serious follow-through.</p></div><p>Designed, built & deployed with curiosity. <span id="year"></span></p></div>
  172. </footer>
  173. </body>
  174. </html>