<!DOCTYPE html>
<html lang="en">
  <head>
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=G-8CJ8Y04X4K"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());

      gtag("config", "G-8CJ8Y04X4K");
    </script>
    <meta charset="utf-8" />
    <title>Warren Laidler: Design | Development | Motion</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="keywords"
      content="Warren Laidler, web designer Bloomfield NJ, web designer Montclair NJ, web designer Glenridge NJ, NYC, front-end developer Bloomfield NJ, responsive web design, web designer portfolio, motion graphics artist, video editor, UI UX designer, coder, HTML CSS JavaScript, creative web design, modern websites, web development, custom websites, digital design"
    />
    <meta
      name="description"
      content="Warren Laidler delivers custom web design and front-end development with integrated motion graphics and video editing. Fast, responsive, and modern."
    />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.5/css/lightbox.min.css"
      integrity="sha512-xtV3HfYNbQXS/1R1jP53KbFcU9WXiSA1RFKzl5hRlJgdOJm4OxHCWYpskm6lN0xp0XtKGpAfVShpbvlFH3MDAA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="styles.css" />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
      integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.5/js/lightbox.min.js"
      integrity="sha512-KbRFbjA5bwNan6DvPl1ODUolvTTZ/vckssnFhka5cG80JVa5zSlRPCr055xSgU/q6oMIGhZWLhcbgIC0fyw3RQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <!-- Prevent right cvlick functions -->
    <script>
      document.addEventListener("contextmenu", function (e) {
        e.preventDefault();
      });
    </script>
    <script src="scripts.js"></script>
  </head>
  <body>
    <!-- header -->
    <header>
      <h1
        class="birthstone-regular-header animate__animated animate__bounce animate__delay-0.5s"
      >
        Warren Laidler
      </h1>
      <h2 class="">DESIGN | DEVELOPMENT | MOTION</h2>
      <h6>
        "Design is not just what it looks like and feels like. Design is how it
        works." - Steve Jobs
      </h6>
    </header>
    <!-- carousel -->
    <div
      id="carouselExampleDark"
      class="carousel carousel-dark slide"
      data-bs-ride="carousel"
    >
      <div class="carousel-inner">
        <div class="carousel-item active" data-bs-interval="7000">
          <video
            class="d-block w-100"
            autoplay
            loop
            muted
            playsinline
            preload="auto"
            poster="assets/designSamples.webp"
          >
            <source src="assets/3DScene.mp4" type="video/mp4" />
            Your browser does not support the video tag.
          </video>
        </div>
      </div>
    </div>
    <!-- welcome -->
    <div class="hero vignette">
      <h1>Welcome</h1>
      <p>
        Welcome to my portfolio! I’m Warren Laidler, a UX Designer and Front-end
        Developer with a passion for creating intuitive, user-centered digital
        solutions. My work bridges the gap between design and development,
        ensuring that every project not only looks exceptional but also
        functions flawlessly.
      </p>
      <a
        href="assets/gallery/WhisperingPines.webp"
        data-lightbox="gallery"
        data-title="Whispering Pines - A serene retreat in the heart of nature."
      >
        <button>Design Samples</button>
      </a>
    </div>
    <!-- accordian/mobile-->
    <div
      class="accordion accordion-flush d-block d-md-none"
      id="accordionPanelsStayOpenExample"
    >
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button
            class="accordion-button collapsed"
            data-bs-parent="#accordionFlushExample"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#flush-collapseOne"
            aria-expanded="false"
            aria-controls="flush-collapseOne"
          >
            About Me
          </button>
        </h2>
        <div
          id="flush-collapseOne"
          class="accordion-collapse collapse"
          data-bs-parent="#accordionFlushExample"
        >
          <div class="accordion-body">
            <img
              class="portrait"
              src="assets/Warren.webp"
              alt="Photo of Warren Laidler"
            />
            <p>
              With over a decade in the industry, I specialize in crafting
              digital products that are both visually compelling and seamlessly
              functional. My approach blends user empathy with technical
              expertise, ensuring every interface is intuitive, engaging, and
              effective. Whether refining user journeys, developing responsive
              designs, or optimizing performance, I’m dedicated to delivering
              exceptional results.
            </p>
            <h2>What I Do</h2>
            <ul>
              <li>
                <b>UI/UX Design</b>: Conducting research, wireframing,
                prototyping, and testing to build user-friendly experiences.
              </li>
              <li>
                <b>Front-End Development</b>: Turning designs into clean,
                responsive code with technologies like HTML, CSS, JavaScript,
                React, Bootstrap, Tailwind and WordPress.
              </li>
              <li>
                <b>Visual FX and Motion Graphics</b>: Creating dynamic
                animations, 3D visuals, and effects to enhance digital
                experiences.Tools include: Premiere Pro, After Effects, Davinci
                Resolve, Blender & Cinema 4D.
              </li>
            </ul>

            <h2>My Process</h2>
            <ul>
              <li>
                <b>Discovery</b>: Understanding the problem, the audience, and
                the goals through research and collaboration.
              </li>
              <li>
                <b>Design</b>: Translating insights into wireframes, prototypes,
                and high-fidelity designs.
              </li>
              <li>
                <b>Development</b>: Writing clean, efficient, and maintainable
                code to bring designs to life.
              </li>
              <li>
                <b>Iteration</b>: CRefining and improving through user feedback
                and testing to ensure the best outcome.
              </li>
            </ul>

            <h2>Why Work With Me?</h2>
            <ul>
              <li>
                <b>Holistic Expertise</b>: As both a designer and developer, I
                provide seamless integration between design and functionality.
              </li>
              <li>
                <b>User-Centered Approach</b>: I prioritize the needs and goals
                of users in every project.
              </li>
              <li>
                <b>Attention to Detail</b>: From typography to transitions, I’m
                meticulous about every aspect of the experience.
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- tabs/desktop -->
    <div class="main d-none d-md-block">
      <!-- Tabs Navigation -->
      <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
          <button
            class="nav-link active"
            id="home-tab"
            data-bs-toggle="tab"
            data-bs-target="#home"
            type="button"
            role="tab"
            aria-controls="home"
            aria-selected="true"
          >
            About Me
          </button>
        </li>
      </ul>
      <!-- Tab Content -->
      <div class="tab-content d-none d-sm-block" id="myTabContent">
        <div
          class="tab-pane fade show active"
          id="home"
          role="tabpanel"
          aria-labelledby="home-tab"
        >
          <div class="about">
            <div>
              <img
                class="portrait"
                src="assets/Warren.webp"
                alt="Photo of Warren Laidler"
              />
            </div>
            <div>
              <p>
                With over a decade in the industry, I specialize in crafting
                digital products that are both visually compelling and
                seamlessly functional. My approach blends user empathy with
                technical expertise, ensuring every interface is intuitive,
                engaging, and effective. Whether refining user journeys,
                developing responsive designs, or optimizing performance, I’m
                dedicated to delivering exceptional results.
              </p>
              <h2>What I Do</h2>
              <ul>
                <li>
                  <b>UX Design</b>: Conducting research, wireframing,
                  prototyping, and testing to craft experiences that users love.
                </li>
                <li>
                  <b>Front-End Development</b>: Transforming designs into
                  pixel-perfect, responsive code using modern technologies like
                  HTML, CSS, JavaScript, and frameworks like Angular, Bootstrap
                  and WordPress.
                </li>
                <li>
                  <b>Collaboration</b>: Working closely with clients,
                  developers, and stakeholders to bring visions to life.
                </li>
              </ul>
              <h2>My Process</h2>
              <ul>
                <li>
                  <b>Discovery</b>: Understanding the problem, the audience, and
                  the goals through research and collaboration.
                </li>
                <li>
                  <b>Design</b>: Translating insights into wireframes,
                  prototypes, and high-fidelity designs.
                </li>
                <li>
                  <b>Development</b>: Writing clean, efficient, and maintainable
                  code to bring designs to life.
                </li>
                <li>
                  <b>Iteration</b>: Continuously refining based on feedback and
                  user testing to ensure the best possible outcome.
                </li>
              </ul>
              <h2>Why Work With Me?</h2>
              <ul>
                <li>
                  <b>Holistic Expertise</b>: As both a designer and developer, I
                  provide seamless integration between design and functionality.
                </li>
                <li>
                  <b>User-Centered Approach</b>: I prioritize the needs and
                  goals of users in every project.
                </li>
                <li>
                  <b>Attention to Detail</b>: From typography to transitions,
                  I’m meticulous about every aspect of the experience.
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- testimonial -->
    <div id="commentDisplay" class="testimonials"></div>
    <!-- gallery -->
    <div class="main">
      <h2 class="mt-0">Design Gallery</h2>
      <p>
        Explore some of my recent work here. Each project reflects my dedication
        to crafting meaningful and effective digital solutions. Whether you’re
        launching a new product, redesigning an existing experience, or just
        need help bringing your vision to life, I’d love to collaborate with
        you. Get in touch to start a conversation!
      </p>
      <div class="designGallery row g-3">
        <!-- Image 1 -->
        <div class="col-6 col-md-4 col-lg-3">
          <a
            href="assets/gallery/WhisperingPines-watermarked.webp"
            data-lightbox="gallery"
            data-title="Whispering Pines - A serene retreat in the heart of nature."
          >
            <img
              src="assets/gallery/WhisperingPines.webp"
              class="img-fluid rounded"
              alt="WhisperingPines - A serene retreat in the heart of nature."
            />
          </a>
        </div>
        <!-- Image 2 -->
        <div class="col-6 col-md-4 col-lg-3">
          <a
            href="assets/gallery/FanSite-Prince-watermarked.webp"
            data-lightbox="gallery"
            data-title="Prince Fansite - A website dedicated to the legendary artist."
          >
            <img
              src="assets/gallery/FanSite-Prince.webp"
              class="img-fluid rounded"
              alt="Prince Fansite - A website dedicated to the legendary artist."
            />
          </a>
        </div>
        <!-- Image 3 -->
        <div class="col-6 col-md-4 col-lg-3">
          <a
            href="assets/gallery/DiamondBeauty-watermarked.webp"
            data-lightbox="gallery"
            data-title="Diamond Beauty - A luxurious beauty brand with a modern touch."
          >
            <img
              src="assets/gallery/DiamondBeauty.webp"
              class="img-fluid rounded"
              alt="Diamond Beauty - A luxurious beauty brand with a modern touch."
            />
          </a>
        </div>
        <!-- Image 4 -->
        <div class="col-6 col-md-4 col-lg-3">
          <a
            href="assets/gallery/ByteFort-watermarked.webp"
            data-lightbox="gallery"
            data-title="ByteFort - Your data. Our fortress."
          >
            <img
              src="assets/gallery/ByteFort.webp"
              class="img-fluid rounded"
              alt="ByteFort - Your data. Our fortress."
            />
          </a>
        </div>
      </div>
    </div>
    <!-- client list -->
    <div id="clientList">
      <h2>Client List</h2>
      <p>
        Here’s a brief list of some of the companies I’ve had the honor and
        privilege of working with over the years. Each opportunity has allowed
        me to expand my skills, collaborate with talented professionals, and
        contribute to meaningful projects. Through these experiences, I’ve
        gained invaluable insights, refined my craft, and built lasting
        relationships that have shaped my career.
      </p>
      <div id="clientLogos" class="logo-grid">
        <img src="assets/logos/_citibank.png" alt="Citibank logo" />
        <img src="assets/logos/aristaLogo.png" alt="Arista logo" />
        <img src="assets/logos/essenceLogo.png" alt="Essence logo" />
        <img src="assets/logos/nbc-logo.png" alt="NBC logo" />
        <img src="assets/logos/rethinkBH-logo.png" alt="Rethink BH logo" />
        <img src="assets/logos/afs-logo.png" alt="AFS logo" />
      </div>
    </div>
    <!-- message form -->
    <div class="main message-form-container">
      <h2>Let's create something great together!</h2>
      <h3 class="text-center">(347) 395-3622</h3>
      <div class="contactMe">
        <p>
          Contact me today to discuss your project and bring your vision to
          life!
        </p>
      </div>
      <form action="https://formspree.io/f/mrbeklde" method="POST">
        <div class="form-group">
          <label for="name">Name <span class="red">*</span></label>
          <input
            type="text"
            id="name"
            name="name"
            placeholder="Your Name"
            autocomplete="on"
            required
          />
        </div>
        <div class="form-group">
          <label for="email">Email <span class="red">*</span></label>
          <input
            type="email"
            id="email"
            name="email"
            placeholder="Your Email"
            autocomplete="on"
            required
          />
        </div>
        <div class="form-group">
          <label for="message">Message</label>
          <textarea
            id="message"
            name="message"
            placeholder="Tell me about your project..."
          ></textarea>
        </div>
        <div class="form-group">
          <button type="submit">Send Message</button>
        </div>
      </form>
    </div>
    <!-- footer -->
    <footer id="footer">
      <img
        src="assets/WL-Logo.png"
        alt="Warren Laidler Logo"
        class="footer-logo"
      />
      <h2 class="custom">Stay connected.</h2>
      <a href="https://www.linkedin.com/in/warrenlaidler/" target="_blank">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="32"
          height="32"
          fill="currentColor"
          class="bi bi-linkedin me-3"
          viewBox="0 0 16 16"
        >
          <path
            d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"
          />
        </svg>
      </a>
    </footer>
    <div id="footer_copyright"></div>
  </body>
</html>
