Tyler Wiegand

Tyler Wiegand

Full Stack Developer

Internet Crossroads

When our startup gained a bit of traction, we found ourselves in need of basic necessities such as cards, stationary, a ...website. While my business partner was busy getting us another gig, I spent my time researching hosting options and experimenting with them. Our class set us up with a very basic web host (A Small Orange), but didn't teach us anything related to Nginx, Apache, Linux etc. The most in depth they went was creating and using an SSH key and connecting to a database.

We had been exposed to and used Bootstrap for most of our in-class projects; for this site I wanted to keep all the CSS "clean" and get some experience writing a site from scratch to see how well I could do without what I perceived to be the "training wheels" of Bootstrap.

One great thing about the course we both underwent was a high emphasis on the idea of a "mobile-first" design philosophy. While I still do most of my browsing on a desktop machine, or at least a laptop, the majority of web traffic has crossed over to be primarily mobile devices. With every site I've made, I have held myself to the standard of making the user experience first on mobile, and second on desktop.

Back to Portfolio

HTML Sample

        
          
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" data-ng-app>
<head>

  <meta charset="utf-8">
  <meta name="description"
        content="Internet Crossroads is a family owned boutique web development and design firm based in New Mexico."/>

  <meta name="keywords"
        content="new mexico web agency, new mexico web design and development, Albuquerque web agency, Albuquerque web
				design and development, creative web development, custom web design, digital marketing, boutique web design,
				business web development, mobile web design, web developers, responsive web design, branding and marketing,
				wordpress web design, Jason griffin new mexico, spring griffin new mexico, tyler weigand, internet crossroads,
				local web, wordpress web design, wordpress web development, wordpress web developers, implementation management"/>

  <!--		This is the favicon -->
  <link rel="icon" href="img/ixrfavicon.png">

  <!-- Bootstrap Latest compiled and minified CSS -->
  <link type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

  <!-- Fontawesome and Evilicon CDN-->
  <link type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
  <!--		<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/evil-icons/1.7.2/evil-icons.min.css" />-->

  <!--	Custom CSS -->
  <link type="text/css" href="css/xroads.min.css" rel="stylesheet"/>

  <!-- jQuery CDN -->
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <!--		<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js"></script>-->

  <!--		Google's reCaptcha v2 api -- not in use yet on site -->
  <!--		<script src='//www.google.com/recaptcha/api.js'></script>-->

  <!--		 Latest compiled and minified Bootstrap JavaScript, all compiled plugins included -->
  <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

  <!--		evil icon js (not using any yet)-->
  <!--		<script src="//cdnjs.cloudflare.com/ajax/libs/evil-icons/1.7.2/evil-icons.min.js"></script>-->

  <!--			Our own javascript/ajax calls-->
  <script type="text/javascript" src="js/jquery.scrollTo.min.js"></script>
  <!--		<script type="text/javascript" src="js/lazysizes.min.js"></script>-->
  <script type="text/javascript" src="js/xroads.min.js"></script>


  <!--Here go that title-->
  <title>Internet Crossroads</title>
</head>
<body>
<header id="top">
  <div class="jumbotron">
  </div>
  <div class="container">
    <div class="row">
      <!--	hide me if desktop sized-->
      <div class="animated fadeInLeft banner-text col-md-6 col-lg-6 text-left hidden-sm hidden-xs">
        internet crossroads
      </div>
      <!--	hide me if mobile sized-->
      <div class="banner-text col-xs-12 col-sm-12 text-center hidden-lg hidden-md">
        internet crossroads
      </div>
    </div>
    <div class="row">
      <!--	hide me if desktop sized-->
      <div class="banner-text lower col-xs-12 col-sm-12 text-center hidden-lg hidden-md">
        A web services firm.
      </div>
    </div>
    <div class="row">
      <!--	hide me if mobile sized-->
      <div class="banner-text animated lower fadeInLeft col-md-5 text-left text-nowrap hidden-sm hidden-xs">
        A web services firm.
      </div>
    </div>
    <div class="hidden-xs hidden-sm"></div>
    <div class="stayfaded hidden-lg hidden-md"></div>
  </div>
</header>
<main>
  <!--			This is the navigation bar -->
  <div id="affixme">
    <div class="col-md-2 col-xs-2 text-left hidden-xs hidden-sm">
      <a href="#topdesk">
        <span class="xroadssize">i
          <span class="x">X</span>
          roads
        </span>
      </a>
    </div>
    <div class="col-md-2 col-xs-2 text-left hidden-lg hidden-md">
      <a href="#top">
        <span class="sizeup">
          <span class="xroadssize">i
            <span class="x">X</span>
            r
          </span>
        </span>
      </a>
    </div>
    <!--			DESKTOP BUTTONS FOR NAVBAR-->
    <div class="col-md-10 col-xs-10 text-right links hidden-xs hidden-sm">
      <a href="#aboutdesk">Services</a> |
      <a href="#teamdesk">Our Story</a> |
      <a href="#biodesk">Team</a> |
      <a href="#contactdesk" class="teammargin">Contact</a>
    </div>
    <!--			MOBILE BUTTONS FOR NAVBAR-->
    <div class="col-md-10 col-xs-10 text-right links hidden-md hidden-lg">
      <a href="#about">
        <span class="sizedown"><i class="fa fa-clipboard fa-2x"></i></span>
      </a>
      <span style="font-size: 150%">|</span>
      <a href="#team">
        <span class="sizedown"><i class="fa fa-compass fa-2x"></i></span>
      </a>
      <span style="font-size: 150%">|</span>
      <a href="#bio">
        <span class="sizedown"><i class="fa fa-users fa-2x"></i></span>
      </a>
      <span style="font-size: 150%">|</span>
      <a href="#contact" class="teammargin">
        <span class="sizedown"><i class="fa fa-comments fa-2x"></i>
      </a>
    </div>
  </div>
  <!--		This div creates a layer that overlaps the Jumbotron-style banner picture -->
  <div class="placecontentbelow">
    <section id="about" class="white">
      <div class="container">
        <div class="row bottommargin">
          <div class="text-center">
            <p class="sectiontitle topmargin">
              What can we do for you?
            </p>
          </div>
          <div class="col-md-4 col-lg-4 col-md-offset-0 col-lg-offset-0 col-xs-12 col-sm-offset-0 col-xs-offset-0 smalltbmargin">
            <div class="text-left subsectionheader">
              Web Design <i class="fa fa-globe"></i>
            </div>
            <div class="text-left subsectioncontent">
              <p>E-commerce</p>
              <p>Commercial</p>
              <p>Club & special interest</p>
              <p>Personal & professional</p>
            </div>
          </div>
          <br class="hidden-lg hidden-md"/>
          <div class="col-md-4 col-lg-4 col-xs-12 col-xs-offset-0 smalltbmargin">
            <div class="text-left subsectionheader">
              Maintenance <i class="fa fa-wrench"></i>
            </div>
            <div class="text-left subsectioncontent">
              <p>Event Calendars</p>
              <p>Blog or Article Posting</p>
              <p>Photo/Gallery/Portfolio updates</p>
              <p>Content Management</p>
            </div>
          </div>
          <div class="col-md-4 col-lg-4 col-xs-12 col-xs-offset-0 smalltbmargin">
            <div class="text-left subsectionheader">
              IT Consulting <i class="fa fa-briefcase"></i>
            </div>
            <div class="text-left subsectioncontent">
              <p>Project, Implementation, and Change Management</p>
              <p>Process Modeling & Definition</p>
              <p>ERP Strategy</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="black" id="team">
      <div class="container">
        <div class="row bottommargin">
          <div class="text-center">
            <div class="sectiontitle topmargin bottommargin">
              What We
              <span class="do">Do
                <span
            </div>
          </div>
          <div class="col-lg-10 col-lg-offset-1 col-md-12 col-md-offset-0 subsectioncontent text-justify col-xs-12 col-xs-offset-0">
            <p>
              We don’t just make websites, we craft the way people interact with you and your business online.
            </p>
            <br>
            <p>
              Websites are no longer merely tools to provide information to consumers. They are the face of your
              business. A good website makes a positive lasting impression whereas a poor one can permanently taint
              consumers opinion. Whether on a PC or Mac, smartphone or tablet it is critical that visitors to your site
              have a positive experience.
            </p>
            <br>
            <p>
              The internet crossroads -- where people and the web meet -- is what we are all about. With a passion for
              creating intuitive, attractive, genuinely useful sites our goal is to ensure our clients success on the
              web.
            </p>
            <br>
            <p>
              It takes close client partnership, strategy, teamwork plus a little blood, sweat and tears; in the end we
              believe it’s worth it.
            </p>
          </div>
        </div>
      </div>
    </section>
    <section id="bio" class="white">
      <div class="container">
        <div class="row">
          <div class="text-center">
            <p class="sectiontitle topmargin bottommargin">
              Who We Are
            </p>
          </div>
          <div class="container bottommargin">
            <div class="col-md-4 col-md-offset-0 col-lg-4 col-lg-offset-0 col-xs-12 col-xs-offset-0">
              <img src="img/jasonsquare.jpeg" alt="Jason" class="img-responsive center-block img-rounded peoplepics"/>
              <div class="text-center subsectionheader">
                <span class="namered">Head</span>
                <span class="namepipe">|</span>
                JASON
              </div>
              <div class="biosectioncontent text-justify">
                <p>
                  Jason heads up our operations and customer service. He will be your first point of contact and manage
                  your project end to end. Bringing a passion for bridging the gap between people and technology
                  combined with twenty years of IT experience in people, project, and web enabled ERP management Jason
                  is the anchor for the business side of Internet Crossroads.
                </p>
              </div>
            </div>
            <div class="col-md-4 col-md-offset-0 col-lg-4 col-lg-offset-0 col-xs-12 col-xs-offset-0">
              <div class="topmargin hidden-lg hidden-md"></div>
              <img src="img/spring.jpg" alt="Spring" class="img-responsive center-block img-rounded peoplepics"/>
              <div class="text-center subsectionheader">
                <span class="namered">Heart</span>
                <span class="namepipe">|</span>
                SPRING
              </div>
              <div class="biosectioncontent text-justify">
                <p>
                  Spring is the heart of Internet Crossroads. Bringing seven years of graphic design and web development
                  experience (specializing in Wordpress) to the table; She is our resident “look and feel” guru. An
                  artist at heart, she makes everything under the sun with her spare time; jewelry, paintings, clothing,
                  costumes...the list goes on.
                </p>
              </div>
            </div>
            <div class="col-md-4 col-md-offset-0 col-lg-4 col-lg-offset-0 col-xs-12 col-xs-offset-0">
              <div class="rightmargin visible-lg"></div>
              <div class="topmargin hidden-lg hidden-md"></div>
              <img src="img/tyler.jpg" alt="Tyler" class="img-responsive center-block img-rounded peoplepics"/>
              <div class="text-center subsectionheader">
                <span class="namered">Hands</span>
                <span class="namepipe">|</span>
                TYLER
              </div>
              <div class="biosectioncontent text-justify">
                <p>
                  A lifelong musician, Tyler brings his years as a military communications technician and a fiendish
                  enthusiasm for learning to the team. Representing our hands, he is responsible for the majority of our
                  code and is the proverbial “man behind the scenes.” With a sharp sense of humor, a flair for the
                  absurd and an abiding love for video games; Tyler represents the geekier side of Internet Crossroads.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="black" id="contact">
      <div class="container">
        <div class="col-md-12 col-xs-12 sectiontitle topmargin text-center hidden-sm hidden-xs">
          Contact Us
        </div>
        <div class="topmargin col-md-6 col-xs-12 col-sm-12">
          <div class="text-center contactheader">
            Call <i class="fa fa-mobile"></i>
          </div>
          <div class="contactcontent text-center">
            505.916.1889
          </div>
        </div>
        <div class="topmargin col-md-6 col-xs-12 col-sm-12">
          <div class="text-center contactheader">
            E-mail <i class="fa fa-envelope-o"></i>
          </div>
          <div class="contactcontent text-center">
            <a href="mailto:info@internet-crossroads.com">info@internet-crossroads.com</a>
          </div>
        </div>
        <div class="topmargin col-md-6 col-xs-12 col-sm-12">
          <div class="text-center contactheader">
            Visit <i class="fa fa-building-o"></i>
          </div>
          <div class="contactcontent text-center">
            200 Broadway Blvd NE<br>
            Albuquerque, NM 87102
          </div>
        </div>
        <div class="topmargin bottommargin col-md-6 col-xs-12 col-sm-12">
          <div class="text-center contactheader">
            <!--								<a href="https://instagram.com/internet_crossroads/" target="_blank"><i class="fa fa-instagram"></i></a>-->
            Twitter <a href="https://twitter.com/griffincoffee" target="_blank"><i class="fa fa-twitter"></i></a>
          </div>
          <div class="contactcontent text-center">
            <a href="https://twitter.com/griffincoffee" target="_blank">@griffincoffee</a><br>
            <!--								<a href="https://instagram.com/internet_crossroads/" target="_blank">internet_crossroads</a>-->
          </div>
        </div>
      </div>
    </section>
    <div class="footer" id="contact">
      <div class="container-fluid">
        <!--						This is the footer -->
        <div class="row">
          <div class="col-md-6 col-xs-6 footertext text-nowrap hidden-xs hidden-sm">
            <p>© 2015 internet-crossroads | All rights reserved.</p>
          </div>
          <div class="col-md-6 col-xs-6 footertext text-nowrap hidden-lg hidden-md">
            <p>© 2015 internet-crossroads</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>
</body>
</html>