1<!-- 2 Portfolio Home Page 3 Author: Josh Lollis 4 Submission Date: December 3, 2024 5 CPSC 349 Portfolio Final Project 6 7 Landing page with personal introduction and profile information 8 9 Updated: Dec 22, 2025 10--> 11 12<!DOCTYPE html> 13<html lang="en"> 14 15 <head> 16 <!-- Standard meta --> 17 <meta charset="UTF-8"> 18 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 19 <title>Home | Portfolio</title> 20 21 <!-- This style prevents flash of unstyled content (FOUC) --> 22 <style id="anti-fouc">html{visibility:hidden}</style> 23 24 <!-- Inject shared head links (fonts, Font Awesome, tokens, base, desktop/mobile) --> 25
25<script src="/js/head.js"></script>
25 26 27 <!-- Page-specific CSS --> 28 <link rel="stylesheet" href="/css/components/blog-tabs.css" 29 media="screen and (min-width: 769px)"> 30 </head> 31 32 <body> 33 <!-- Header injection point --> 34 <div id="header-placeholder"></div> 35 36 <main> 37 <div class="content-container"> 38 <!-- Introduction section --> 39 40 <section id="intro"> 41 <h1 class="snug-header funnel-display-header">Welcome to My 42 Portfolio</h1> 43 44 <!-- Status update section - restructured --> 45 <div id="status-container"> 46 <div class="status-indicator-section"> 47 <div class="status-indicator"> 48 <i class="fas fa-circle"></i> 49 </div> 50 </div> 51 <div class="status-text-container"> 52 <p id="status">Deep into a major CSS refactor. ðPlease feel free to contact me if anything seems broken.ð</p> 53 </div> 54 </div> 55 56 <!-- Profile picture with gradient border --> 57 <div id="pfp-placeholder"> 58 <div class="pfp-border hover-scale"> 59 <img src="./assets/images/pfp.png" 60 alt="Profile Picture" class="pfp"> 61 </div> 62 </div> 63 <h2 class="intro-greeting">Hi, I'm Josh!</h2> 64 <div id="bio-placeholder"></div> 65 </section> 66 67 <!-- Project sliding tabs --> 68 <div class="sliding-projects"> 69 <!-- Active Projects --> 70 <div class="project-tab" data-project="antillery"> 71 <div class="tab-preview"> 72 <img src="/assets/images/antillery/title-screen.png" 73 alt="Antillery"> 74 </div> 75 <div class="tab-content"> 76 <h3>Antillery</h3> 77 <p>A 2D turn-based artillery capstone project</p> 78 <span class="view-more">View Project â</span> 79 </div> 80 <a href="/projects/antillery.html" 81 class="project-link"></a> 82 </div> 83 84 <div class="project-tab" data-project="card_collection"> 85 <div class="tab-preview"> 86 <img src="/assets/gifs/card.gif" 87 alt="Card Collection"> 88 </div> 89 <div class="tab-content"> 90 <h3>Card Collection</h3> 91 <p>A TCG card viewer and collection application</p> 92 <span class="view-more">View Project â</span> 93 </div> 94 <a href="/projects/card_collection.html" 95 class="project-link"></a> 96 </div> 97 98 <div class="project-tab" data-project="snake"> 99 <div class="tab-preview"> 100 <img src="/assets/gifs/snake.gif" alt="Snake Game"> 101 </div> 102 <div class="tab-content"> 103 <h3>Snake</h3> 104 <p>A snake game with challenging new mechanics</p> 105 <span class="view-more">View Project â</span> 106 </div> 107 <a href="/projects/snake.html" class="project-link"></a> 108 </div> 109 110 <div class="project-tab" data-project="portfolio"> 111 <div class="tab-preview"> 112 <img src="/assets/gifs/portfolio.gif" 113 alt="Portfolio Website"> 114 </div> 115 <div class="tab-content"> 116 <h3>Portfolio Website</h3> 117 <p>This responsive developer portfolio site</p>
118 <span class="view-more">View Project â</span> 119 </div> 120 <a href="/projects/portfolio.html" 121 class="project-link"></a> 122 </div> 123 124 <div class="project-tab" data-project="xb2midi"> 125 <div class="tab-preview"> 126 <img src="/assets/images/xb2midi/basic.png" 127 alt="XB2MIDI"> 128 </div> 129 <div class="tab-content"> 130 <h3>XB2MIDI</h3> 131 <p>Map Xbox controller inputs to MIDI messages</p> 132 <span class="view-more">View Project â</span> 133 </div> 134 <a href="/projects/xb2midi.html" 135 class="project-link"></a> 136 </div> 137 </div> 138 </div> 139 140 <!-- Blog tabs that slide out from under the content container --> 141 <!-- Commented out because there is no noteable blog content --> 142 <!--and because the tab wasn't fully responsive to different screen sizes --> 143 <!-- <div class="sliding-blog-tabs"> 144 <div class="blog-tab" data-blog="blog1"> 145 <div class="blog-tab-preview"> 146 <img src="/assets/gifs/ant.gif" alt="Latest Antillery Blog Post"> 147 </div> 148 <div class="blog-tab-content"> 149 <h5>Latest Blog Post</h5> 150 </div> 151 <a href="/blog/antillery/ant-dev-2025-06-02.html" class="blog-link"></a> 152 </div> 153 </div> --> 154 </main> 155 156 <!-- Footer injection point --> 157 <div id="footer-placeholder"></div> 158
158<script src="./scripts.js"></script>
158 159
159<script src="./js/ticker.js"></script>
159 160 </body> 161 162</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.