about-me.html

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="icon" href="favicon.ico" sizes="32x32">
    <link rel="icon" href="icon.png" type="image/png">
    <link rel="apple-touch-icon" href="apple-touch-icon.png">

  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Dan Morgan Designs</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
  <link href="css/classic.css" rel="stylesheet">
  <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
</head>

<body class="bg-mac-os min-h-screen flex items-center justify-center p-4">

  <div id="desktop-container"></div>

  <!-- Window container -->
  <div class="hypercard-window">

    <div class="modal-titlebar modal-titlebar--static relative flex items-center">
      <div class="absolute inset-0 flex justify-center items-center pointer-events-none">
        <span class="bg-white px-2 py-[1px] leading-none z-10 modal-title">About Me</span>
      </div>
    </div>

    <!-- Inner Layout -->
    <div class="flex flex-col flex-1 overflow-hidden min-h-0">

      <!-- Top Row (Fixed 32px) -->
      <div class="h-8 px-4 pt-5 flex items-center justify-between">
        <button id="home-button" class="icon-button w-8 h-8">
          <img src="images/home.svg" alt="Home" />
        </button>
        <button id="mail-button" class="icon-button w-8 h-8">
          <img src="images/mail.svg" alt="Contact" />
        </button>
      </div>

      <!-- Scrollable Content -->
      <span class="classic-serif-heading pt-6 pb-2 pl-4">Education, Passions, and Certifications</span>

      <div class="flex-1 overflow-y-auto space-y-1">

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mx-6">
          <div class="flex flex-col gap-3 h-full">
            <div class="flex items-center justify-center">
              <div
                class="border border-black shadow-[2px_2px_0_black] bg-[#ffffff] rounded-[0px] h-[84px] w-full px-6 py-6">
                <div class="flex items-center mt-1 mb-2">
                  <img src="images/powercat-black.png" alt="Kansas State University" class="h-[30px] mr-3" />
                  <div class="flex flex-col">
                    <span class="classic-medallion-title">B.S., Agronomy</span>
                    <p class="classic-medallion-subtitle mt-[2px]"><span>Kansas State University</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="flex items-center justify-center">
              <div class="border border-black shadow-[2px_2px_0_black] bg-[#ffffff] h-[84px] w-full overflow-hidden">
                <div class="flex items-center justify-center h-full w-full">
                  <!-- Center the whole 2x2 grid inside the box -->
                  <div class="grid grid-cols-2 grid-rows-2 gap-x-10 gap-y-2">
                    <!-- Flush-left items inside each cell -->
                    <div class="flex items-center">
                      <img src="images/billiards.svg" alt="Billiards" class="h-[24px] mr-3" />
                      <span class="classic-passion-subtitle">Billiards</span>
                    </div>
                    <div class="flex items-center">
                      <img src="images/hiking.svg" alt="Hiking" class="h-[24px] mr-3" />
                      <span class="classic-passion-subtitle"><span>Hiking</span>
                    </div>
                    <div class="flex items-center">
                      <img src="images/music.svg" alt="Music" class="h-[24px] mr-3" />
                      <span class="classic-passion-subtitle">Music</span>
                    </div>
                    <div class="flex items-center">
                      <img src="images/retro-tech.svg" alt="Retro Tech" class="h-[24px] mr-3" />
                      <span class="classic-passion-subtitle">Retro Tech</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex flex-col items-center justify-end">
            <div
              class="border border-black shadow-[2px_2px_0_black] bg-[#ffffff] rounded-[0px] h-[180px] w-full px-6 py-6">
              <!-- Grid of rows, each with an icon and text -->
              <div class="flex items-center mt-2 mb-4">
                <img src="images/adobe-a-black.png" alt="Adobe Graphic Designer" class="w-[30px] mr-3" />
                <div class="flex flex-col">
                  <span class="classic-medallion-title">Adobe Graphic Designer</span>
                  <p class="classic-medallion-subtitle mt-[2px]">Coursera</p>
                </div>
              </div>
              <div class="flex items-center mb-3">
                <img src="images/google-g-black.png" alt="Google UX Designer" class="w-[30px] mr-3" />
                <div class="flex flex-col">
                  <span class="classic-medallion-title">Google UX Designer</span>
                  <p class="classic-medallion-subtitle mt-[2px]">Coursera</p>
                </div>
              </div>
              <div class="flex items-center mb-4">
                <img src="images/cca-black.png" alt="Certified Crop Advisor" class="w-[30px] mr-3" />
                <div class="flex flex-col">
                  <span class="classic-medallion-title">Certified Crop Advisor</span>
                  <p class="classic-medallion-subtitle mt-[2px]"><span>American Society of Agronomy</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <p class="classic-serif-heading pt-3 pb-0 pl-4">Colophon</p>
        <div class="px-3 pb-0 pt-0 mx-6">
          <div class="classic-normal-text">
            <p> This site was designed to evoke the look and feel of Classic Mac OS System 1.0 through 7.0 and HyperCard
              when the
              graphics were 1-bit black and white pixels. Most of the navigation icons—the pointing hands, home button,
              mail button,
              category icons—are vector recreations that will always appear as 1-bit icons at any size.
              <span style="cursor: pointer; text-decoration: underline;"
                onclick="document.getElementById('colophonDialog').classList.remove('hidden')">
                More...
              </span>
              <button id="continue-button" class="classic-standard-button mt-5 absolute right-[60px]"
                style="cursor: pointer;" onclick="document.getElementById('colophonDialog').classList.remove('hidden')">
                Continue...
              </button>
            </p>

          </div>
        </div>


      </div>

      <div id="colophonDialog" class="classic-dialog-overlay hidden">
        <div class="colophon-dialog ">
          <div class="colophon-inner-box relative">
            <div class="dialog-content ">
              <div class="flex ">

                <div>
                  <p class="classic-serif-heading pt-0 pb-2 pl-0" style="line-height: 1.0;">Colophon</p>
                  <div class="classic-normal-text mb-6">
                    <p class="mb-2">
                      This site was designed to evoke the look and feel of
                      <a style="text-decoration: underline" href="https://en.wikipedia.org/wiki/Classic_Mac_OS"
                        target="_blank" rel="noopener noreferrer">Classic Mac OS</a>
                      <span style="text-decoration: none"> System 1.0 through 7.0 and </span>

                      <a style="text-decoration: underline" href="https://en.wikipedia.org/wiki/HyperCard"
                        target="_blank" rel="noopener noreferrer">HyperCard</a>
                      <span style="text-decoration: none"> when the graphics were 1-bit black and white pixels.
                        Most of the navigation icons—the pointing hands, home button, mail button, category icons—are
                        vector recreations that will always appear as 1-bit icons at any size.
                        The fonts are converted from the original bitmap system fonts into modern TrueType (.ttf) fonts
                        and web-optimized .woff and .woff2 file types.</span>
                    </p>
                    <p class="mb-2">
                      One of the biggest challenges was getting access to the classic 1-bit fonts and converting them to
                      web-optimized fonts. In the spirit of a classic colophon here are the fonts used:
                    </p>
                    <p class="mb-2 pl-5">
                      <a style="text-decoration: underline" href="https://en.wikipedia.org/wiki/Chicago_(typeface)"
                        target="_blank" rel="noopener noreferrer">Chicago</a>
                      <span style="text-decoration: none">for the menus and rounded buttons, </span>
                      <a style="text-decoration: underline" href="https://en.wikipedia.org/wiki/Espy_Sans"
                        target="_blank" rel="noopener noreferrer">Espy Sans</a>
                      <span style="text-decoration: none">for icon labels and text, Espy Bold for subheadings, and
                      </span>
                      <a style="text-decoration: underline" href="https://en.wikipedia.org/wiki/Palatino"
                        target="_blank" rel="noopener noreferrer">Palatino</a>
                      <span style="text-decoration: none">for major page headings. I've posted these fonts and recreated
                        1-bit icons at my repo:</span>
                      <a style="text-decoration: underline"
                        href="https://github.com/danmorgandesigns/classic-mac-elements" target="_blank"
                        rel="noopener noreferrer">Classic Mac Elements</a><span style="text-decoration: none">.</span>
                    </p>

                    <p class="mb-2">
                      This project wouldn't have been possible without a large community of retro Macintosh enthusiasts
                      freely sharing their discoveries, workflows, and files. Here's a non-comprehensive list:
                    </p>

                    <span>
                      <p class="pl-5"><a style="text-decoration: underline" href="https://hcsimulator.com"
                          target="_blank" rel="noopener noreferrer">HyperCard Simulator</a><span
                          style="text-decoration: none">, </span>
                        <a style="text-decoration: underline" href="https://infinitemac.org" target="_blank"
                          rel="noopener noreferrer">Infinite Mac</a><span style="text-decoration: none">, </span>
                        <a style="text-decoration: underline" href="https://macintoshgarden.org" target="_blank"
                          rel="noopener noreferrer">Macintosh Garden</a><span style="text-decoration: none">, </span>
                        <a style="text-decoration: underline" href="https://www.macintoshrepository.org" target="_blank"
                          rel="noopener noreferrer">Macintosh Repository</a><span style="text-decoration: none">,
                        </span>
                        <a style="text-decoration: underline" href="https://github.com/jcs/classic-mac-fonts"
                          target="_blank" rel="noopener noreferrer">Classic Mac Font Repo</a><span
                          style="text-decoration: none">, </span>
                        <a style="text-decoration: underline" href="https://mk.gg" target="_blank"
                          rel="noopener noreferrer">Matt Kane's site for inspiration</a><span
                          style="text-decoration: none">, </span>
                        <a style="text-decoration: underline" href="https://peter.upfold.org.uk/projects/dfontsplitter"
                          target="_blank" rel="noopener noreferrer">dfontSplitter by Peter Upfold</a><span
                          style="text-decoration: none">, and </span>
                        <a style="text-decoration: underline" href="https://www.fontlab.com/font-editor/fontlab/"
                          target="_blank" rel="noopener noreferrer">FontLab 8</a><span
                          style="text-decoration: none">.</span>
                      </p>
                    </span>

                    <p class="mt-2 mb-2">
                      And finally special thanks to the godparents of the Macintosh and HyperCard look and feel,<br>
                      <a style="text-decoration: underline" href="https://en.wikipedia.org/wiki/Bill_Atkinson"
                        target="_blank" rel="noopener noreferrer">Bill Atkinson</a><span style="text-decoration: none">
                        and </span>
                      <a style="text-decoration: underline" href="https://en.wikipedia.org/wiki/Susan_Kare"
                        target="_blank" rel="noopener noreferrer">Susan Kare</a><span
                        style="text-decoration: none">.</span>
                    </p>

                  </div>

                </div>
                <div class="mt-5 ">
                  <button id="ok-colophon" class="classic-default-button absolute right-[10px] bottom-[10px]">
                    OK
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="h-8 mt-3 px-4 pb-4 flex items-center justify-between">
        <button id="previous-button" class="icon-button w-8 h-8">
          <img src="images/hand-pointing-left.svg" alt="Previous" />
        </button>
        <button id="next-button" class="icon-button w-8 h-8">
          <img src="images/hand-pointing-right.svg" alt="Next" />
        </button>
      </div>

    </div>
    <div id="invader-container"></div>
    

  </div>
  <!-- End hypercard-window -->
  <div id="palette-container"></div>
  <div id="viewer-container"></div>
  <div id="aboutmac-container"></div>


  <script>
    document.getElementById('mail-button')?.addEventListener('click', () => {
      window.location.href = 'contact-me.html';
    });

    document.getElementById('home-button')?.addEventListener('click', () => {
      window.location.href = 'index.html';
    });

    document.getElementById('previous-button')?.addEventListener('click', () => {
      window.location.href = 'blog.html';
    });

    document.getElementById('next-button')?.addEventListener('click', () => {
      window.location.href = 'contact-me.html';
    });

    document.addEventListener("touchstart", function () { }, true);



    document.getElementById("ok-colophon").addEventListener("click", function () {

      document.getElementById("colophonDialog").classList.add("hidden");
    });


  </script>
  <script src="js/invaders.js"></script>
  <script src="js/desktop-ui.js"></script>
  <script src="js/palette.js"></script>
  <script src="js/viewer.js"></script>
  <script src="js/aboutmac.js"></script>

</body>

</html>