portfolio/websites.html at main · RobVaughn/portfolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
  <!-- Sites -->
  <section id="websites" class="websites text-center" id="service">
    <div class="container">
      <div class="row">
        <div class="col mx-auto">
          <h1 class="arrow-dark"><span>Web</span>sites</h1>
        </div>
      </div>

      <div class="row">
        <div class="col-8 offset-2 d-flex justify-content-center">
          <p class="last">All websites are mobile-forward &amp; dynamically generated, based on Linux, PHP, jQuery &amp; MySQL, with Bootstrap and custom CSS. Includes full Google &amp; Cloudflare analytics and Cloudflare h-Captcha integration.</p>
        </div>
      </div>

      <div class="row website-icons text-center">
        <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4">
          <div class="card">
            <div class="icon animate fadeInRight delay-05s">
              <a href="https://liamgrant.sound-o-mat.com" target="_blank">
                <img src="/assets/img/grant-logo-2025-400x400-72dpi.png" />
              </a>
            </div>
            <div class="card-body">
              <h2>Liam Grant</h2>
              <p>Redesigned, rebuilt and optimized a website for guitarist <a href="https://liamgrant.sound-o-mat.com" target="_blank">Liam Grant</a> on Linux with Bootstrap 5.0 / HTML5 / CSS3, using PHP, MySQL and jQuery/JavaScript while following 2025 best practices for security, performance, accessibility, and UX. Integrated Google Analytics, hCaptcha and a custom font created by the artist.</p>
              <p class="last">Main focus is now <a href="https://liamgrant.sound-o-mat.com/live.php" target="_blank">upcoming shows</a> with gigs happening in the next two weeks dynamically listed on the <a href="https://liamgrant.sound-o-mat.com" target="_blank">main page</a> along with basic <a href="https://liamgrant.sound-o-mat.com/contact.php" target="_blank">contact</a> and <a href="https://liamgrant.sound-o-mat.com/about.php" target="_blank">biographical information</a>.</p>
            </div>
          </div>
        </div>

        <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4">
          <div class="card">
            <div class="icon animate fadeInRight delay-1s">
              <a href="https://sound-o-mat.com" target="_blank">
                <img src="/assets/img/som-logo-2025-400x400-72dpi.png">
              </a>
            </div>
            <div class="card-body">
              <h2>The Sound-O-Mat</h2>
              <p class="last">Home page for <a href="https://sound-o-mat.com" target="_blank">The Sound-O-Mat</a> audio studio and record label. Responsible for all front- and backend work: custom design and layout, HTML5 / CSS3 / PHP / Javascript/jQuery, graphics, icons &amp; logos, photographs, domain name registration and hosting, etc. Includes standard faire such as a <a href="https://sound-o-mat.com/faq.php" target="_blank">FAQ</a> with drop-down answers, regularly updated <a href="https://sound-o-mat.com/news.php" target="_blank">news</a> and an integrated Mailchimp-based <a href="https://sound-o-mat.com" target="_blank">mailing list subscription</a> form.</p>
            </div>
          </div>
        </div>

        <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4">
          <div class="card">
            <div class="icon animate fadeInRight delay-2s">
              <a href="https://austere.xyz" target="_blank"><img src="/assets/img/austere-logo-2025-400x400-72dpi.png">
              </a>
            </div>
            <div class="card-body">
              <h2>Austere</h2>
              <p class="last">A custom <a href="https://austere.xyz" target="_blank">band website</a> designed from the artist's concepts and built as a fully responsive, mobile-friendly platform. Departing from typical music website designs, the site's navigation encourages exploration and discovery, reflecting the band's anonymous persona. Visitors are invited to uncover their <a href="https://austere.xyz/about.php" target="_blank">bio</a>, news, and <a href="https://austere.xyz/listen.php" target="_blank">artistic influences</a> in an organic way. Hidden Easter eggs, interactive elements, and unexpected surprises further immerse users, showcasing the band's <a href="https://www.mixcloud.com/rhythmatist/the-wisdom-of-austerity/" target="_blank">music</a> and creative projects in a uniquely engaging experience.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="clearfix"></div>
  </section>