| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184 |
- <?php declare(strict_types=1); ?>
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <meta name="description" content="Junior desktop support specialist portfolio focused on approachable troubleshooting, user support, Windows, Microsoft 365, hardware, networking, and hands-on learning.">
- <meta name="theme-color" content="#07111f">
- <title>Junior Desktop Support | Jaden Portfolio</title>
- <link rel="preconnect" href="https://fonts.googleapis.com">
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <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">
- <link rel="stylesheet" href="/assets/site.css">
- <script src="/assets/site.js" defer></script>
- </head>
- <body>
- <canvas id="particle-field" aria-hidden="true"></canvas>
- <div class="noise" aria-hidden="true"></div>
- <header class="site-header">
- <a class="brand" href="#top" aria-label="Back to top">
- <span class="brand-mark">JP</span>
- <span>Support Desk</span>
- </a>
- <nav aria-label="Primary navigation">
- <a href="#skills">Skills</a>
- <a href="#approach">Approach</a>
- <a class="nav-cta" href="#contact">Open a ticket</a>
- </nav>
- </header>
- <main id="top">
- <section class="hero section-shell">
- <div class="hero-copy reveal">
- <div class="availability"><span></span> Ready for a junior support role</div>
- <p class="eyebrow">Junior Desktop Support Specialist</p>
- <h1>Technical support with a <em>human signal.</em></h1>
- <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>
- <div class="hero-actions">
- <a class="button button-primary" href="#contact">Let’s troubleshoot together <span>↗</span></a>
- <a class="button button-ghost" href="#skills">Explore my toolkit</a>
- </div>
- <div class="quick-stats" aria-label="Portfolio highlights">
- <div><strong>01</strong><span>User-first mindset</span></div>
- <div><strong>02</strong><span>Hands-on home lab</span></div>
- <div><strong>03</strong><span>Always documenting</span></div>
- </div>
- </div>
- <div class="hero-console reveal" aria-label="Example support workflow">
- <div class="console-top">
- <div class="console-dots"><i></i><i></i><i></i></div>
- <span>support_session.log</span>
- <span class="live-pill">LIVE</span>
- </div>
- <div class="console-body">
- <div class="ticket-meta"><span>INC-0027</span><span class="priority">NORMAL</span></div>
- <p class="console-prompt"><span>user@desk:~$</span> My laptop can’t connect to Wi-Fi.</p>
- <ol class="diagnostic-list">
- <li class="complete"><i>✓</i><span><b>Listen first</b><small>Confirm impact and recent changes</small></span></li>
- <li class="complete"><i>✓</i><span><b>Isolate the cause</b><small>Adapter, network, credentials, or DNS</small></span></li>
- <li class="active"><i></i><span><b>Apply & verify</b><small>Restore service and test with the user</small></span></li>
- <li><i>4</i><span><b>Document clearly</b><small>Leave the next technician a useful trail</small></span></li>
- </ol>
- <div class="resolution"><span>Resolution confidence</span><strong>92%</strong><div><i></i></div></div>
- </div>
- </div>
- </section>
- <section class="ticker" aria-label="Core skills">
- <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>
- </section>
- <section id="skills" class="section-shell skills-section">
- <div class="section-heading reveal">
- <p class="eyebrow">My growing toolkit</p>
- <h2>Strong foundations.<br><span>Curious by default.</span></h2>
- <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>
- </div>
- <div class="skill-grid">
- <article class="skill-card featured reveal">
- <div class="skill-icon">⌘</div><span class="skill-level">CORE FOCUS</span>
- <h3>Desktop troubleshooting</h3>
- <p>Methodical diagnosis for Windows issues, application errors, peripherals, updates, profiles, and everyday workstation problems.</p>
- <ul><li>Windows 10 & 11</li><li>Drivers & updates</li><li>Printers & peripherals</li></ul>
- </article>
- <article class="skill-card reveal">
- <div class="skill-icon">◎</div><span class="skill-level">BUILDING</span>
- <h3>Identity & access</h3>
- <p>Practicing the account lifecycle basics that help users get secure access without unnecessary friction.</p>
- <ul><li>Active Directory basics</li><li>Password resets</li><li>Groups & permissions</li></ul>
- </article>
- <article class="skill-card reveal">
- <div class="skill-icon">↯</div><span class="skill-level">PRACTICED</span>
- <h3>Hardware support</h3>
- <p>Comfortable identifying components, checking connections, replacing common parts, and narrowing down hardware faults.</p>
- <ul><li>PC components</li><li>Workstation setup</li><li>Preventive care</li></ul>
- </article>
- <article class="skill-card reveal">
- <div class="skill-icon">⌁</div><span class="skill-level">FOUNDATIONAL</span>
- <h3>Networking</h3>
- <p>Working knowledge of the path between a device and its destination—and the tools to find where that path breaks.</p>
- <ul><li>TCP/IP & DNS</li><li>Wi-Fi troubleshooting</li><li>ipconfig, ping & tracert</li></ul>
- </article>
- <article class="skill-card reveal">
- <div class="skill-icon">☁</div><span class="skill-level">LEARNING</span>
- <h3>Microsoft 365</h3>
- <p>Supporting the productivity tools people rely on, from sign-in and Outlook basics to Teams and OneDrive sync issues.</p>
- <ul><li>Outlook & Teams</li><li>OneDrive basics</li><li>Account support</li></ul>
- </article>
- </div>
- </section>
- <section id="approach" class="approach-section">
- <div class="section-shell approach-inner">
- <div class="approach-copy reveal">
- <p class="eyebrow">How I work the problem</p>
- <h2>No mystery fixes.<br><span>Just a clear process.</span></h2>
- <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>
- <div class="principles">
- <span>Patient with people</span><span>Careful with systems</span><span>Hungry to learn</span>
- </div>
- </div>
- <div class="process" role="list">
- <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>
- <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>
- <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>
- <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>
- </div>
- </div>
- </section>
- <section class="lab-section section-shell">
- <div class="lab-card reveal">
- <div class="lab-copy">
- <p class="eyebrow">Currently in the lab</p>
- <h2>I learn by building the thing.</h2>
- <p>This portfolio runs on infrastructure I configured myself: Debian 13, Apache, MariaDB, PHP, Git-based deployments, webhooks, and automated TLS.</p>
- </div>
- <div class="lab-stack" aria-label="Technologies used for this portfolio">
- <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>
- </div>
- </div>
- </section>
- <section id="contact" class="contact-section section-shell">
- <div class="contact-copy reveal">
- <p class="eyebrow">Start a conversation</p>
- <h2>Got an opportunity?<br><span>Open a ticket.</span></h2>
- <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>
- <a class="email-link" href="mailto:praesidium909@gmail.com"><span>@</span><div><small>Prefer regular email?</small><b>praesidium909@gmail.com</b></div></a>
- </div>
- <form id="contact-form" class="contact-form reveal" action="/contact.php" method="post" novalidate>
- <div class="form-top"><div><span class="status-dot"></span> NEW SUPPORT REQUEST</div><span id="ticket-number">TKT-0000</span></div>
- <input class="honey" type="text" name="website" tabindex="-1" autocomplete="off" aria-hidden="true">
- <input type="hidden" name="started_at" id="started-at" value="">
- <div class="form-row">
- <label><span>Your name</span><input type="text" name="name" autocomplete="name" required maxlength="80" placeholder="How should I address you?"></label>
- <label><span>Your email</span><input type="email" name="email" autocomplete="email" required maxlength="160" placeholder="you@company.com"></label>
- </div>
- <label><span>What brings you here?</span>
- <select name="topic" required>
- <option value="" selected disabled>Choose a ticket type...</option>
- <option value="Junior support opportunity">Junior support opportunity</option>
- <option value="Interview conversation">Interview conversation</option>
- <option value="Networking">Networking / say hello</option>
- <option value="Website feedback">Website feedback</option>
- </select>
- </label>
- <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>
- <div class="form-footer">
- <p id="form-status" role="status" aria-live="polite">Typical response: within one business day</p>
- <button class="button button-primary" type="submit"><span class="button-label">Submit ticket</span><span class="send-icon">↗</span></button>
- </div>
- </form>
- </section>
- </main>
- <footer>
- <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>
- </footer>
- </body>
- </html>
|