2
\$\begingroup\$

I have been wrapping up the markup for my personal electronics project website, https://www.salvagedcircuitry.com. I write about designing, repairing and producing electronics, along with some mechanical projects. I wrote the site from scratch with a goal of being as lightweight and fast as possible. It is written in html and css. There are no frameworks. There were no WYSIWYG's used. I just have (2) lines of javascript for analytics.

Feedback Requested: General Usability, SEO

My website is not perfect by any means, but its been working decently well presenting my content. I am looking for feedback in terms of usability problems that I might have missed. Anything ranging from an incredibly obvious oversight to a nuanced detail.

Currently, I have an issue with being indexed by Google. Google is indexing my site name but not the website itself. It is being re-crawled at the moment through search console, but I have a feeling it will fail again. Is it possible my apache http / https forwarding settings are impacting the way google is indexing the site? I have declared a canonical website.

Thank you tremendously for any input! If this is not the place to post this, let me know. Thanks!

The CSS and HTML markup:

html {
    font-family:arial;
    font-size: 100%;
    color: #CCC;                /*font color*/
    display: grid; 
    grid-gap: 0;
    grid-template-columns: 1fr 1680px 1fr;      /*1fr from 1/2, body from 2/3, 1fr from 3/4*/
}
*{box-sizing: border-box;}      /*defines how width and height of an element are calculated: should they include padding and borders, or not.*/
body {
    background: #111;           /*website background color*/
    padding: 0;
    margin: 0;                  
    grid-column: 2 / 3;         /*body from grid line 2/3*/
}

a {
    text-decoration: none;          /*how links are treated by default*/
}       
img {border: none;}
h1 {
    font: normal 2vw "verdana", sans-serif;     
    color: #ddd;                                /*font color*/  
}
h2 {
    font: normal 1.7em Arial, sans-serif;       /*PROJECT FONT SIZE. font-style font-variant font-weight font-size/line-height font-family*/
    color: #ddd;
}               
h3 {
    margin: 0;  
    padding: 0.5em;
    font: normal 1.7em Arial, sans-serif;       /*PROJECT FONT SIZE. font-style font-variant font-weight font-size/line-height font-family*/
    color: #ddd;
}               
h5 {
    font: bold 0.5vw "verdana", sans-serif;     
    color: #ddd;    
}



/*-------------------------------------MAIN-INDEX-----------------------------------*/
.main {
    background: #303030; 
    padding: 1rem 1rem;         /*padding on top & sides of anything inside main*/  
}   


.index {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1fr;     /*doesnt seem to do anything*/
    grid-template-rows: auto;
}

.box {
    background-color: #383838;
    display: grid;
    border: 1px solid black;
    margin: 0;
    grid-template-columns: auto 1fr;    /*auto forces grid cell to fit to size of photo. may want to change to "min-content" */
    grid-template-rows: auto;
    grid-template-areas:
        'foto title'
        'foto text'
        'foto ....';
}

.progressbar{
    color: #b57d1e;
    font-weight: bold;
    font-size: 1.3em;
    text-align: center;
    letter-spacing: 0.1em;
    word-spacing: 0.1em;
    text-transform:uppercase;
    border: 4px dashed #b57d1e;
    padding: 1em;
}

.progress {
    border: 1px dashed #b57d1e;
}
.progress .title  {
    border-bottom: 1px dashed #b57d1e;
}

.box:hover {                        /*defines hover action*/
    opacity: 0.65;                  /*amount of opacity. higher # = moar*/
    border: 1px solid #0066FF;      /*b57d1e changes border color on hover*/
}
.box:active {                       /*#b57d1e defines link moment clicked*/
    border: 1px solid #0088FF;      
}
.box:visited {                      /*defines link previously visited*/
    border: 1px solid #551A8B;      
}



.foto {
    grid-area: foto;            /*grid-column: 1 / 2;*/
    /*max-width: 100%;          makes image scale smaller on small viewport*/
    width: 360px;
    height: auto;
}

.title {
    grid-area: title;                           /*grid-column: 2 / 3;*/
    padding: 16px 16px 8px 16px;                /*top, right, bott, left*/ /*top&bott= 0. right&left= 16*/
    border-bottom: 1px solid #0066FF;           /* #505050 width,style,color*/
    margin: 0;
    text-align: left;
}

.text {
    /*grid-column: 2 / 3;*/
    grid-area: text;
    padding: 0px 16px;              /*top&bott, right&left*/
    font: normal 1.12em "Lucida Sans Unicode", verdana, sans-serif;
    color: #ddd;
    text-align: left;
}


/*-------------------------------------PROJECT-PAGES-----------------------------------*/
.content{
    display: grid;
    grid-template-columns: 1fr; 
    grid-template-rows: auto;   
    font: normal 1.12em "Lucida Sans Unicode", verdana, sans-serif;
    color: #ddd;
    text-align: left;
}

.content a:link {                   /*defines hover action*/
    color: #376abd;                 /*amount of opacity. higher # = moar*/
}
.content a:hover {                  /*defines hover action*/
    color: #1e57b5;                 /*amount of opacity. higher # = moar*/
}
.content a:active {                 /*defines link moment clicked*/
    color: #0000EE;     
}
.content a:visited {                /*defines link previously visited*/
    color: #551A8B;     
}

.imgbanner{
    display: block;
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    height: 340px;
    border-style: none;
    object-fit: cover;
}

.imgcenter{
    display: block;
    margin: 0;
    max-width: 100%;
    /*width: 100%;*/
    /*height: 340px;*/
    /*object-fit: cover;*/
    /*grid-column: 1fr span 1 1fr;*/
    justify-self: center;
}

.download{
    background-color: #383838;
    border: 7px dashed #b57d1e;
    padding: 14px;
}
.download:hover {
    border: 7px dashed #000000;
    opacity: .55;
}


.filmstrip{
    background-color: #383838;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    grid-gap: 1em;
    border: 7px dashed #b57d1e;
    padding: 14px;
}

.filmstrip:hover {
    border: 7px dashed #000000;
    opacity: .55;
}

.filmstrip img {
    aspect-ratio: 3 / 2;
    position: relative;         /*position: relative; */
    width: 100%;                /*width: 100%; */
    height: 100%;               /*height: 100%; */
    border: 1px solid black;    /*border: 1px solid black; */   
    display: grid;              /*display: grid; */
    object-fit: cover;          /*object-fit: cover; */
}
    

/*
.imgright{
    max-width: 100%;
    display: block;
    float: left;
    margin-bottom: 2em;
    margin-left: 2em;
    width: calc( 2 * ((100% - 8em) / 5) + 2em ); 
}

.imgleft{
    max-width: 100%;
    display: block;
    float: left;
    margin-bottom: 2em;
    margin-right: 2em;
    width: calc( 2 * ((100% - 8em) / 5) + 2em ); Based off: https://v6.robweychert.com/blog/2018/11/css-grid-editorial-layouts/
}

.projecttext{
    grid-column: 1 / span 11;
}*/

/*-------------------------------------NAVIGATION-----------------------------------*/
nav ul {
    display: grid;
    grid-template-columns: auto auto auto auto 1fr auto;
    padding: 0; 
    margin: 0;
    font: normal normal bold 1em Arial, sans-serif; /*was 0.95em. font-style, font-variant, font-weight, font-size, line-height (optional), font, font-family*/
    background: #222222; 
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
    align-items: center;
    list-style: none;
}
nav li {
    text-decoration: none;
    text-align: center;
    border-right: 1px solid #161616;
}
nav li a {
    color: #CCC;
    text-decoration: none;
    display: inline-block;
    padding: 10px 16px;
}
nav li:last-child {
    justify-self: end;
    border-right: none;
}
nav div{
    background-color: red;
}

nav li a:hover {background: #2a2a2a;}
nav li a.active {background: #2a2a2a;}

    
    
/*----------------------------------------HEADER-------------------------------------*/
header {
    display: grid;
    grid-gap: 0;
    grid-template-columns: 1fr; 
    grid-template-rows: 1fr;
}
header img {
    grid-column: 1 / -1;    /*may be overkill. browser knows this implicitly*/   
    grid-row: 1 / 2;
    width: 100%;
    height: 100%;
    object-fit: cover;      /*may be overridden by width and height being 100%*/
    overflow: hidden;
}
header a {
    text-decoration: none;
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    width: 100%;
    height: 100%;
}
header h1 {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    align-self: center;
    justify-self: end;
    z-index: 1;
    text-shadow: 0 0 0.5em black, 0 0 0.3em black, 0 0 0.3em black, 0 0 0.2em black, 0 0 0.2em black;   /* offset-x | offset-y | blur-radius | color */
    font-size: 3rem;            /*change unit*/
    font-weight: 300;           /*adjusts how bold*/
    padding: 0rem 1rem;         /*padding on top & sides*/ 
}



/*-------------------------------CINE-----------------------------------------*/
.vid {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

.vid iframe {
   border: 0;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
   position: absolute;
}

/*-------------------------------PHOTOSETS----------------------------------*/
.fotogrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    grid-gap: 1em;
}

.fotogrid a{
    aspect-ratio: 4 / 3;
    /*text-decoration: none;*/
}

.tile {
    font-family: arial;
    font-size: 100%;
    color: #CCC;
    position: relative;         /*position: relative; */
    width: 100%;                /*width: 100%; */
    height: 100%;               /*height: 100%; */
    border: 1px solid black;    /*border: 1px solid black; */   
    display: grid;              /*display: grid; */
    object-fit: cover;          /*object-fit: cover; */
}
    
.tile img {
    grid-row: 1;                /*remove this if dont want text overlay */
    grid-column: 1;             /*remove this if dont want text overlay */  
    display: block;
    width: 100%;
    height: 100%;  
    object-fit: cover;
}

.tile h4 {
    margin: 0;
    background-color: #000;
    padding: 10px 14px;             /*top&bott, right&left*/
    opacity: .78;                   /*0.8*/
    grid-row: 1; 
    grid-column: 1;  
    align-self: flex-start;          /*take auto-width */
    justify-self: stretch;           /*start | end | center | stretch */
    text-align: left;                /*left | right | center | justify */
    z-index: 1;
}

.tile:hover {
    border: 1px solid #0066FF;
    opacity: .55;
}

/*-------------------------------ABOUTME------------------------------------*/
.about {
    display: grid;
    font: normal 1.12em "Lucida Sans Unicode", verdana, sans-serif;
    color: #CCC;
}
.bio{                                       /*bio in about me*/
    grid-column: 1 / -1;
}

.bio img {
    float: left;
    width: 300px;
    margin: 0 1rem 1rem 0;                  /*top,right,bottom,left*/
    border: 1px solid black;
    padding: 0;
    display: block;
    /*shape-outside: circle(116px at 114px 113px);*/
    /*shape-margin: 30px;*/
}


.interests {
    grid-column: 1 / -1;
    padding: 0;
    margin: 0;
    display: flex;                      /* wrapping flexbox */
    flex-wrap: wrap;
}

.interests li {                         /*interests in about me*/
    list-style-type: none;              /*removes bullet points of lists*/
    display: inline-block;      
    text-align: center;
    padding: 0 10px;                    /*top&bott, right&left*/
    border: 1px solid black;
    margin: 0 4px 8px 0;                /*top,right,bottom,left*/
    cursor: default;
    flex: 1 0 auto;                     /* added */
    -webkit-transition: all 0.05s ease-in;  /*delay stated before hover*/
    -moz-transition: all 0.05s ease-in;
    -o-transition: all 0.05s ease-in;
}

.interests:after {
  content: '';                              /* fills extra space with empty blocks*/
  display: block;
  flex: 999;                                /* grow by a large number */
}

.interests li:hover {
    background: #0066FF;                    /*changes background color on hover*/
    border: 1px solid #0066FF;              /*changes border color on hover*/
    border-radius: 5px;                     /*changes square border to rounded border on hover*/
}

.extlink{
    grid-column: 1 / -1;
    padding: 0;
    margin: 0;
}
.extlink img {                          /*external links in about me*/
    width:180px;
}
.extlink li{
    margin: 10px 20px 0 0;                  /*top,right,bottom,left*/
    list-style-type: none;                  /*removes bullet points of lists*/
    display: inline-block;      
    -webkit-transition: all 0.05s ease-in;  /*delay stated before hover*/
    -moz-transition: all 0.05s ease-in;
    -o-transition: all 0.05s ease-in;
}
.extlink li:hover {
    opacity: 0.55;                          /*changes background color on hover*/
}

/*-------------------------------FOOTER---------------------------------------*/
footer {
    font: normal .95em "Lucida Sans Unicode", verdana, sans-serif;
    color: #888;                        /*footer text color*/
    background: #191919;
    border-top: 1px solid #444;
    padding: 35px 1.5% 25px;            /*top right&left bottom*/ 
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1fr 1fr;     /* doesnt seem to do anything*/
}
footer a {color: #888;}                 /*font color*/
footer a:hover {color: #ddd;}

.footer-left {
    justify-self: start;
}
.footer-right {
    justify-self: end;
}



/*-------------------------------MEDIA-QUERIES---------------------------------------*/

@media (max-width: 1680px) {
    html {
        grid-template-columns: 1fr;
    }
    body {
        grid-column: 1 / -1;
    }
}

@media (max-width: 970px) {
    header h1 {
        font-size: calc(1rem + 2.5vw); 
    } 
}

@media (max-width: 770px) {
    .box {
        justify-items: center;      /*Trys to center all grid items. doesnt perfectly center*/
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
          'foto'
          'title'
          'text';
    }
    .title {
        text-align: center;
    }
    .text {
        text-align: justify;
        text-rendering: optimizeLegibility;  /*use for fancy text rendering. may not need*/
    }

    nav li:nth-child(5) {
        display: none;
    }
    nav li:nth-child(6) {
        display: none;
    }
}

@media (max-width: 640px) {
    footer {
        grid-template-columns: 1fr; 
    }
    .footer-left {
        justify-self: center;
    }
    .footer-right {
        display: none;
    }
    nav li:nth-child(2) {
        display: none;
    }
}

@media (max-width: 460px) {
    .foto {     
        width: 100%;                /*makes image expand & scale to box boarder*/
    }
    header h1 {
        justify-self: center;
    }
    nav ul{
        grid-template-columns: auto auto auto;
        font-family: bold Arial, sans-serif;
        font-size: .84em; 
    }
    nav li a{
        padding: 14px 16px;     /*top&bott, right&left*/
        width: 100%;
    }
    nav li:nth-child(4) {
        border-right: none;
    }
    .me{
    grid-column: 1 / -1;
    }
}
<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>Salvaged Circuitry | Anthony Kouttron</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
        <link rel="canonical" href="https://salvagedcircuitry.com" /> <!--added 7/6/23-->
        <meta name="description" content="Salvagedcircuitry.com is an electronics project website dedicated to the design of purpose-built hardware and electronic repair. Expect greatness.">
        <meta name="author" content="Anthony Kouttron">
        <meta property="og:type" content="website">
        <meta property="og:image" content="https://salvagedcircuitry.com/img/site6.JPG">
        <meta property="og:title" content="Salvaged Circuitry | Anthony Kouttron">
        <meta property='og:url' content="https://salvagedcircuitry.com">
        <meta property="og:description" content="Salvagedcircuitry.com is an electronics project website dedicated to the design of purpose-built hardware and electronic repair. Expect greatness.">
        <link rel="icon" href="favicon.ico" type="image/x-icon">
        <link rel="stylesheet" href="style.css">
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-38176262-1"></script>
        <script>
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', 'UA-38176262-1');
        </script>
    </head>
    <body>
        <header>
            <a href="index.html"><img src="img/P1100209c7.JPG" srcset="img/P1100209c6.JPG 500w, img/P1100209c5.JPG 800w, img/P1100209c4.JPG 1000w, img/P1100209c3.JPG 1600w, img/P1100209c2.JPG 2000w, img/P1100209c1.JPG 3000w, img/P1100209c.JPG 4000w" sizes="100vw" alt="Banner Image"/></a>    
            <h1>Salvaged Circuitry</h1>
        </header>
        <nav>
            <ul>
                <li><a class="active" href="index.html">PROJECTS</a></li>
                <li><a href="cine.html">CINE WORK</a></li>
                <li><a href="photosets.html">PHOTOSETS</a></li>
                <li><a href="aboutme.html">ABOUT ME</a></li>
                <li><a href="aboutme.html">ANTHONY KOUTTRON</a></li>
            </ul>
        </nav>
        <div class="main">
            <section class="index"> <!--grid container-->
                <a href="olympus-12mm.html"><article class="box"><!--grid item & container-->
                    <img class="foto" src="img/olympus-12mm/thumbs/P2660617.JPG" alt="Olympus Lens Repair"/>
                    <h2 class= "title">Olympus 12mm f2.0 Lens Flex Repair</h2>
                    <p class= "text">
                    My trusty Olympus 12mm micro 4/3 lens met its demise after a brief internal cleaning: The lens mount ribbon cable tore. Flex cables are incredibly fragile, especially in tightly integrated electronic assemblies. Chuck it and move on? Not a chance! Time for a KiCad flex PCB design! This article details the complete lens repair process and includes the KiCad files to make your own flex PCB. 
                    </p>
                </article></a>
                <a href="mamiya-rb67-repair.html"><article class="box">
                    <img class="foto" src="img/mamiya-rb67-repair/thumbs/20230102_165925.JPG" alt="Meidum Format Film Camera Repair"/>
                    <h2 class= "title">Reviving a Legend: Mamiya RB67 Repair</h2>
                    <p class= "text">
                    There are only several times in life when you get a chance to meet your heroes. Sometimes they don't measure up to the shadow they produce. With the Mamiya RB67, this is far from the case. This 6x7 medium format film studio camera is a heavy, well-built device that is highly treasured among film enthusiasts of all kinds. Its simple operation is complimented by large solid levers and grippy dials that provide pleasant mechanical feedback for all those operating to enjoy. Legend has it that UNESCO considers a non-working RB67 a crime against humanity. This post details the process of bringing a true film workhorse back to the racetrack.
                    </p>                    
                </article></a>                                  
                <a href="fume-extractor.html"><article class="box progress">
                    <img class="foto" src="img/fume-extractor/thumbs/right-iso2c.JPG" alt="Portable Air Solder Fume Extractor"/>
                    <h2 class= "title">Portable Professional Fume Extractor</h2>
                    <p class= "text">
                    I was debating which fume extractor to get for my personal electronics lab when I came to a surprising conclusion: none! Every sub $300 fume extractor I came across consisted of a cheap PC fan shoved in some fancy enclosure with a simple spray carbon mesh filter. I happened to pick up a large 120W centrifugal fan from e-waste a few years back as It killed me to see something so useful get so easily disposed of. That fan turned out to be the perfect platform to make a portable fume extractor. The goal of this project is two fold: to make high filtration solder fume extractors financially accessible to anyone and to remind people that e-waste should be treated as a second-hand parts bin, not as ready-for-landfill.
                    </p>
                </article></a>
                <a href="open32.html"><article class="box progress">
                    <img class="foto" src="img/open32/thumbs/P2680020.JPG" alt="Computer Monitor Electrical Adapater"/>
                    <h2 class= "title">Open 3:2 Adapter</h2>
                    <p class= "text">
                    Tired of boring 16:9 monitors? Can't stand the growing presence of 21:9 aspect displays? Don't you just want a plain Jane 4:3 aspect desktop monitor like the CRT days of old? This one's for you! This project involves adapting a 28in 4500 x 3000 surface studio monitor to a standardized DisplayPort interface. Modern display interfaces are very demanding and adapting to a proprietary interface will require high-speed signaling and an integrated controller to handle the appropriate handshakes. A complete mechanical and electrical solution is detailed involving multi-layer PCBs and stamped aluminum brackets.
                    </p>
                </article></a>  
                <a href="camera-slider.html"><article class="box">
                    <img class="foto" src="img/camera-slider/thumbs/P1120144.JPG" alt="Camera Slider Timelapse Machine"/>
                    <h2 class= "title">Hyperlapse Camera Slider</h2>
                    <p class= "text">
                    Is there anything more satisfying than a good timelapse shot? As someone who appreciates the art of recording and documenting projects, displaying the change over time of any item under observation is incredibly useful and having a tool that makes this process easier and repeatable is a no-brainer. Around the time when the acclaimed cinematographer Philip Bloom was reviewing manual Kessler Crane CineSliders, I though, why not make a better one? This project details the coincidental chain of events that transformed my rough-sketch automated slider into a one-ton iron gorilla of a camera slider, and one very awesome college engineering project.
                    </p>
                </article></a>  
                <a href="cinema-drillpack.html"><article class="box progress">
                    <img class="foto" src="img/cinema-drillpack/thumbs/IMG_20180928_223727.JPG" alt="Cinema Camera Battery Adapter"/>
                    <h2 class= "title">Cinema Drillpack Project</h2>
                    <p class= "text">
                    The introduction of high capacity drill batteries such as the Dewalt Flexvolt, Hitachi Multi-volt and Makita XGT have made the proprietary yet well established cinema camera battery formats irrelevant overnight. Not only are cinema batteries esoteric, they are prohibitively expensive and not multipurpose. The shear manufacturing volume of the power tool market outshines the entirety of the cinema market by several orders of magnitude, making drill battery production costs substantially less than cinema batteries while still providing high quality cells. The wide availability of drill battery packs sidesteps the hurdles needed to transport high capacity cinema batteries on planes, which is a bear for filmmakers shooting on location for a paying client. This project is my approach to adapting drill batteries to cinema cameras.
                    </p>
                </article></a>
                <a href="duo-repack.html"><article class="box progress">
                    <img class="foto" src="img/duo-repack/thumbs/red-bumper-install.JPG" alt="Cell Phone Repackage Re-shell"/>
                    <h2 class= "title">Surface Duo Repackage</h2>
                    <p class= "text">
                    I'm a big Surface Duo fan, but like many others, I can't quite make the Duo my daily driver just yet. This is my attempt at how I would re-package the Surface Duo to make it more usable on a day-to-day basis. I delve into the CAD process, design hurdles, feature explanations and comment on manufacturability. There's a full non-destructive teardown and some insight into various probing and measurement techniques. With a little persuasion, maybe a 3.5mm jack, NFC and larger pouch cells are in the near future? Fingers crossed!
                    </p>
                </article></a>
                <!--a href="auto-parts.html"><article class="box">
                    <img class="foto" src="img/auto-parts/thumbs/p.JPG" alt="Auto Parts Quality Discussion"/>
                    <h2 class= "title">The State of American Auto Parts in 2022</h2>
                    <p class= "text">
                    I recently took on the task of restoring a unique and quirky vehicle from the 1980s - a Jeep Comanche. This lightweight truck can really pack a punch for its weight class, but unfortunately after 35 years and 280,000 miles of greeting the road, it needs some TLC. The great news is that Jeep parts are plentiful, inexpensive and relatively easy to acquire. That's where the compliments end. This post details the horrid state of quality control on recently manufactured parts designed for "vintage" vehicles.
                    </p>
                <a href="smiley-tof.html"><article class="box">
                    <img class="foto" src="img/smiley-tof/thumbs/p.JPG" alt="Time Of Flight Gadget"/>
                    <h2 class= "title">Smiley TOF Module</h2>
                    <p class= "text">
                    This is an easy to assemble, inexpensive TOF module designed for robotic applications using off the shelf components. This project was entered into a Hackaday.io Robotics Module Challenge. The module uses an Adafruit Metro mini, a VL53L0X TOF sensor and a HiTec HS-311 servo motor. The enclosure was designed in CAD and 3D printed.
                    </p>
                </article></a>
                <a href="ultrasonic-repair.html"><article class="box">
                    <img class="foto" src="img/ultrasonic-repair/thumbs/P.JPG" alt="Ultrasonic Sound Cleaning Machine Repair"/>
                    <h2 class= "title">Crest 1100t Ultrasonic Repair</h2>
                    <p class= "text">
                    Ultrasonic machines are incredibly useful tools and arguably some of the most beneficial and time-saving devices for your home lab. The 2.5 gallon / 10 Liter capacity ultrasonic represents a good sweet-spot for cleaning all types of circuit boards and various gadgets, including small engine carburetors. Oftentimes, ultrasonic machines from surplus show up on eBay and can be had for a song and a dance. However, ultrasonic machines are sensitive beasts and depending how the previous owner used them, could be in serious need of repair. This article serves as a guide for diagnosing and repairing ultrasonic machines.
                    </p>
                </article></a>
                <a href="eveready-led"><article class="box">
                    <img class="foto" src="img/eveready-led/thumbs/P1130100.JPG" alt="LED Cantern Flashlight Retrofit" />
                    <h2 class= "title">Overkill Flashlight: Eveready Lantern LED Retrofit</h2>
                    <p class= "text">
                    Remember those chunky yellow flashlights that inhabited every convenience store in the early 1990s? Yes, I'm referring to the telltale $5 Eveready lantern flashlights. Their claim to fame was buoyancy, ruggedness and affordability. Sure, they had robust plastic shells and <i>maybe</i> even floated - but they were dim excuses of a flashlight. Here is a guide on how to make these flamboyantly yellow flashlights usable again yet retain that stock 90s vibe.
                    </p>
                </article></a-->                                
                <a href="pcb-business-card.html"><article class="box"><!--grid item & container-->
                    <img class="foto" src="img/pcb-business-card/thumbs/P2670557c.JPG" alt="Fancy Business Card"/>
                    <h2 class= "title">PCB Business Card</h2>
                    <p class= "text">
                    I had a very simple business card for years, but I was just plain tired of it. It was too bland and looked like all of the other business cards that I had amassed over the years. I was catching up on the Amp Hour podcast and in one of the episodes Dave Jones mentioned something that really caught my attention: bring your projects to social events. Most of my projects are not pocket-able, so I decided to make the best of both worlds and create a PCB business card.
                    </p>
                </article></a>      
                <a href="gimbal.html"><article class="box"> 
                    <img class="foto" src="img/gimbal/thumbs/P1210776.JPG" alt="Camera Balance Gimbal Repair"/>
                    <h2 class= "title">Three Axis Gimbal Repair &amp; Optimization</h2>
                    <p class= "text">
                    I found a broken 3 axis gimbal in e-waste in desperate need of repair. Ironically, the carrying case was intact and without a scratch, but the yaw axis motor was missing, the roll axis motor had a bent shaft and the gimbal controller was buried in a birds' nest of wires. There was a whole slew of random carbon fiber bits, accelerometers, and controllers scattered about the case, so clearly someone was having fun with stabilization. This is my journey toward getting this gimbal back up and running.  
                    </p>
                </article></a>                  
                <a href="surface-keyboard-mod.html"><article class="box">
                    <img class="foto" src="img/surface-keyboard-mod/thumbs/P1150349.JPG" alt="Computer Keyboard Modification"/>
                    <h2 class= "title">Microsoft Surface Keyboard Modification</h2>
                    <p class= "text">
                    Growing tired of the skipping keys on my worn out Dell multimedia keyboard, I needed a suitable alternative. I checked out the Microsoft Surface Studio a few months back and really enjoyed using the included keyboard, so I figured I would start there. I enjoy typing on laptop-style keyboards, but I truly wanted a wired backlight keyboard, as I enjoy working late into the night. Not being able to find a keyboard that includes all these features, I decided to hack the Surface Studio keyboard into something more personal. 
                    </p>
                </article></a>
                <a href="scooter-two.html"><article class="box">
                    <img class="foto" src="img/electric-scooter/thumbs/P1030376.JPG" alt="Electric Scooter Project" />
                    <h2 class= "title">Scooter Two: Super Scooter</h2>
                    <p class= "text">
                    I built what would become my showcase scooter, featuring everything and the kitchen sink. I stuffed the battery cavity full of electronics, pushed the drive mechanics a bit too hard and broke far too many items to remember. I applied everything I learned from my first scooter build to this scooter with hopes of greater success and dependability. That was my original plan at least. The months following colored a totally different story. 
                    </p>
                </article></a>
                <a href="scooter-one.html"><article class="box">
                    <img class="foto" src="img/electric-scooter/thumbs/P1100316.JPG" alt="Electric Scooter Project"/>
                    <h2 class= "title">Scooter One: My Daily</h2>
                    <p class= "text">
                    Sometimes you just want to go fast. Well, at least <i>faster</i>. This project involves upgrading a once under powered recreational electric scooter into a full-fledged transportation machine. Using custom batteries, modified controllers and a bit of electromechanical know-how, I was able to create every college student's dream get-me-to-class-now daily driver.         
                    </p>
                </article></a>              
                <a href="u43-mount.html"><article class="box">
                    <img class="foto" src="img/u43-mount/thumbs/lens-mount-6.JPG" alt="Micro Four Thirds Stainless Steel Camera Mount CAD"/>
                    <h2 class= "title">Micro Four Thirds Mount Technical Drawing and CAD</h2>
                    <p class= "text">
                    Ever wanted to make your own weird and oddball lenses for your camera? Tired of using Duct tape and cardboard tubes to make DIY optical assemblies? This guide includes the CAD, technical drawings and renderings of the Micro Four Thirds mount so you can keep creating to your heart's desire.
                    </p>
                </article></a>          
                <a href="rodenstock-u43.html"><article class="box">
                    <img class="foto" src="img/rodenstock-u43/thumbs/P1140542.JPG" alt="Micro Four Thirds Rodenstock Lens Modification"/>
                    <h2 class= "title">Adapting Rodenstock TV-Heligon Lens to Micro Four Thirds</h2>
                    <p class= "text">
                    Have you ever lusted after a brighter lens for your camera, but couldn't quite afford it? Here is an all-inclusive guide to adapt an old scientific/TV lens to the Micro Four Thirds mount. Don't have a spare Micro Four Thirds mount? No problem! This guide includes the CAD, technical drawings and renderings of the Micro Four Thirds mount, along with machining tips and a whole other wealth of information. 
                    </p>
                </article></a>          
                <a href="led-unit-cad.html"><article class="box">
                    <img class="foto" src="img/led-unit-cad/thumbs/led_final_render_front.JPG" alt="LED Headlight Dimensional CAD"/>
                    <h2 class= "title">27w Round LED Work Light CAD</h2>
                    <p class= "text">
                    This is an accurate CAD model of the 27w Round LED Work Light 30 Degree Spot Light, available on amazon for ~$10 each. It is an inexpensive LED unit which is decently constructed and moderately weather sealed. I have seen these used on everything from Jeeps to ATVs to scooters and even as auxiliary reverse lights on larger medium duty trucks. I modeled the version with the 30 degree projection angle. I have designed this to be as realistic as possible with PhotoView 360.
                    </p>
                </article></a>   
                <a href="hp-54502a-repair.html"><article class="box">
                    <img class="foto" src="img/hp-54502a-repair/thumbs/P1170853.JPG" alt="HP Oscilloscope Repair"/>
                    <h2 class= "title">HP 54502A Oscilloscope Repair</h2>
                    <p class= "text">
                    Repair of an '89 HP oscilloscope to factory calibration. Originally recovered from an e-waste bin while I was attending my Alma mater. This repair entails replacing the CMOS clock chip by soldering in female pin headers and sourcing a replacement. Calibration was reset to factory standards using HP service manuals.
                    </p>
                </article></a>
                <a href="tandberg-tapedeck-teardown.html"><article class="box">
                    <img class="foto" src="img/tandberg-tapedeck-teardown/thumbs/P1100157.JPG" alt="Audio Casette Tapedeck Teardown"/>
                    <h2 class= "title">Tandberg Tapedeck Teardown</h2>
                    <p class= "text">
                    I could not resist saving a 1970s tape deck from its ultimate demise in the e-waste bins. I simply couldn't get over the build quality of this piece of machinery. This is a quick teardown revealing the assembly methods and construction of a Norwegian made tape deck intended for playback recording and editing of cassette tape. This would sure make a killer midi device rebuild. Oh the possibilities.
                    </p>
                </article></a>
            </section>   
        </div>
        <footer> 
            <div class="footer-left">&copy; <span id="year"></span><script>document.getElementById("year").innerHTML = (new Date().getFullYear());</script>&nbsp;<a href="index.html">SALVAGEDCIRCUITRY.COM</a></div>
            <div class="footer-right">PURPOSE BUILT <a href="https://jigsaw.w3.org/css-validator/validator?uri=www.salvagedcircuitry.com%2Fstyle.css&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en">CSS</a> &amp; <a href="https://validator.w3.org/nu/?doc=https%3A%2F%2Fsalvagedcircuitry.com">HTML</a>. <a href="https://pagespeed.web.dev/report?url=https%3A%2F%2Fsalvagedcircuitry.com">OPTIMIZED</a>.</div>
        </footer>
    </body>
</html>

\$\endgroup\$
3
  • 4
    \$\begingroup\$ lines of java - those are JavaScript. Very different. \$\endgroup\$
    – Reinderien
    Jul 21, 2023 at 2:46
  • 2
    \$\begingroup\$ You took a lot of care developing the site, and I appreciate the cleanliness. One of the first places I look when addressing SEO is the naming of images. Your header image is named: "P1100209c3.JPG", which isn't helpful. Give all of your images descriptive names, with select keywords related to the content, and potentially the image size. Don't ignore the image metadata either, where it is common to either ignore the metadata altogether, or include info you don't want, like GPS coordinates. For example, I might rename that header image: circuit-board-header-salvagedcircuitry-1600x228.png. \$\endgroup\$ Jul 21, 2023 at 4:42
  • \$\begingroup\$ @JimDiroffII Thanks for the feedback! \$\endgroup\$ Jul 27, 2023 at 6:17

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.