index.html

<!DOCTYPE html>
<html lang="en-us"><head>
  <meta charset="utf-8">
  <title>uD4ra | About Udara Madubhashana</title>

  <!-- mobile responsive meta -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Udara Madubhashana | Personal Website and Portfolio">
  <meta name="author" content="Udara Madubhashana">
  <meta name="generator" content="Hugo 0.58.3" />
  <meta name="keywords" content="udara madubhashana madhubashana design creative designer graphic it tech italy sri lanka">

  <!-- Open Graph meta -->
  <meta property="og:type" content="article"/>
  <meta property="og:title" content="uD4ra | About Udara Madubhashana"/>
  <meta property="og:image" content="/ud4ra_meta_image_fb.jpg"/>
  <meta property="og:description" content="Udara Madubhashana | Personal Website"/>
  <meta property="og:url" content="https://udara.me"/>
  <meta property="og:site_name" content="uD4ra | Udara Madubhashana"/>
  <meta property="fb:app_id" content="590840035006614">

  <!-- Twitter card meta -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@uD4ra">
  <meta name="twitter:creator" content="@uD4ra">
  <meta name="twitter:title" content="uD4ra | About Udara Madubhashana">
  <meta name="twitter:description" content="Udara Madubhashana | Personal Website">
  <meta name="twitter:image" content="/ud4ra_meta_image.jpg">

  <!-- plugins -->

  <link rel="stylesheet" href="/plugins/bootstrap/bootstrap.min.css ">

  <link rel="stylesheet" href="/plugins/slick/slick.css ">

  <link rel="stylesheet" href="/plugins/themify-icons/themify-icons.css ">

  <link rel="stylesheet" href="/plugins/animate/animate.min.css ">


  <!-- Main Stylesheet -->

  <link rel="stylesheet" href="/css/style.min.css" integrity="" media="screen">

  <!--Favicon-->
  <link rel="icon" href="/images/favicon.ico" type="image/x-icon">
  <link rel="icon" href="/images/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
  <link rel="manifest" href="/images/site.webmanifest">
  <link rel="mask-icon" href="/images/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="msapplication-TileColor" content="#0d59ad">
  <meta name="theme-color" content="#1b3675"> 

</head>
<body>
<!-- preloader start -->
<div class="preloader">
</div>
<!-- preloader end -->
<header class="navigation fixed-top">
  <nav class="navbar navbar-expand-lg navbar-dark">
    <a class="navbar-brand wow fadeInDown fixed-width" href="/"><img src="/images/ud4ra_2x.png" alt="uD4ra | About Udara Madubhashana" style='width: 76px; height: 20px;'></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation"
      aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse text-center" id="navigation">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="/"> Home </a>
        </li>


        <li class="nav-item">
          <a class="nav-link" href="/about">About</a>
        </li>


        <li class="nav-item">
          <a class="nav-link" href="/portfolio">Portfolio</a>
        </li>


        <li class="nav-item">
          <a class="nav-link" href="/contact">Contact</a>
        </li>


      </ul>
    </div>
  </nav>
</header>


  <section class="hero-area bg-primary overflow-hidden" id="parallax">
    <div class="container">
      <div class="row">
        <div class="col-lg-11 mx-auto">
          <h1 class="text-white font-tertiary">Hi! I’m <br> Udara <br> Designer & Geek</h1>
        </div>
      </div>
    </div>
    <div class="layer-bg w-100">
      <img class="img-fluid w-100 m-hide wow bounceInUp" src="/images/illustrations/leaf-bg.svg" alt="bg-shape">
    </div>
    <div class="layer" id="l2">
      <img src="/images/illustrations/dots-cyan.svg" alt="bg-shape">
    </div>
    <div class="layer" id="l3">
      <img src="/images/illustrations/leaf-orange.svg" alt="bg-shape">
    </div>
    <div class="layer" id="l4">
      <img src="/images/illustrations/dots-orange.svg" alt="bg-shape">
    </div>
    <div class="layer" id="l5">
      <img src="/images/illustrations/leaf-yellow.svg" alt="bg-shape">
    </div>
    <div class="layer" id="l6">
      <img src="/images/illustrations/leaf-cyan.svg" alt="bg-shape">
    </div>
    <div class="layer" id="l7">
      <img src="/images/illustrations/dots-group-orange.svg" alt="bg-shape">
    </div>
    <div class="layer" id="l8">
      <img src="/images/illustrations/leaf-pink-round.svg" alt="bg-shape">
    </div>
    <div class="layer" id="l9">
      <img src="/images/illustrations/leaf-cyan-2.svg" alt="bg-shape">
    </div>

    <ul class="list-unstyled ml-5 mt-3 position-relative zindex-1 wow fadeInLeft" data-wow-delay="0.5s">

      <li class="mb-3"><a class="text-white" href="https://twitter.com/uD4ra" aria-label="Twitter" target="_blank"><i class="ti-twitter"></i></a></li>

      <li class="mb-3"><a class="text-white" href="https://lk.linkedin.com/in/udaray" aria-label="Linkedin" target="_blank"><i class="ti-linkedin"></i></a></li>

      <li class="mb-3"><a class="text-white" href="https://www.behance.net/uD4ra" aria-label="Behance" target="_blank"><i class="ti-palette"></i></a></li>

      <li class="mb-3"><a class="text-white" href="https://github.com/uD4ra" aria-label="Github" target="_blank"><i class="ti-github"></i></a></li>

      <li class="mb-3"><a class="text-white" href="https://keybase.io/udara" aria-label="Keybase" target="_blank"><i class="ti-lock"></i></a></li>

      <li class="mb-3"><a class="text-white" href="https://dribbble.com/udara" aria-label="Dribble" target="_blank"><i class="ti-dribbble"></i></a></li>

    </ul>

  </section>


  <section class="section">
    <div class="container">
      <div class="row">
        <div class="col-lg-10 mx-auto text-center wow fadeInRight">

          <p class="font-secondary lead text-dark">I&rsquo;m a professional Designer, Developer &amp; IT Professional seeking for opportunities to build up my carrier and skills by involving in more projects. I&rsquo;m familiar with the latest technology and I always keep myself updated so I can deliver the best for my clients. My focus is on developing effective solutions that are visually appealing and in consonance with the vision and values of my clients.</p>

          <a href="/about" class="btn btn-transparent">know more</a>


        </div>
      </div>
    </div>
  </section>


  <section class="section">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center">
          <h2 class="section-title">Skills</h2>
        </div>

        <div class="col-lg-3 col-sm-6 mb-4 wow fadeInUp">
          <div class="card shadow text-center">
            <div class="position-relative rounded-top progress-wrapper" data-color="#f54ea2">
              <div class="wave" data-progress="95%"></div>
            </div>
            <div class="card-footer bg-white">
              <h4 class="card-title">Graphic Design (95%)</h4>
            </div>
          </div>
        </div>

        <div class="col-lg-3 col-sm-6 mb-4 wow fadeInUp" data-wow-delay="0.2s">
          <div class="card shadow text-center">
            <div class="position-relative rounded-top progress-wrapper" data-color="#9473e6">
              <div class="wave" data-progress="80%"></div>
            </div>
            <div class="card-footer bg-white">
              <h4 class="card-title">Web Design (80%)</h4>
            </div>
          </div>
        </div>

        <div class="col-lg-3 col-sm-6 mb-4 wow fadeInUp" data-wow-delay="0.5s">
          <div class="card shadow text-center">
            <div class="position-relative rounded-top progress-wrapper" data-color="#ffbcaa">
              <div class="wave" data-progress="80%"></div>
            </div>
            <div class="card-footer bg-white">
              <h4 class="card-title">IT (80%)</h4>
            </div>
          </div>
        </div>

        <div class="col-lg-3 col-sm-6 mb-4 wow fadeInUp" data-wow-delay="0.7s">
          <div class="card shadow text-center">
            <div class="position-relative rounded-top progress-wrapper" data-color="#bdecf6">
              <div class="wave" data-progress="70%"></div>
            </div>
            <div class="card-footer bg-white">
              <h4 class="card-title">Networking (70%)</h4>
            </div>
          </div>
        </div>

      </div>
    </div>
    </section>


  <section class="section">
    <div class="container">
      <div class="row">
        <div class="col-12 text-center">
          <h2 class="section-title">Services</h2>
        </div>

        <div class="col-md-4 mb-4 wow fadeInLeft">
          <div class="card  hover-shadow shadow">
            <div class="card-body text-center px-4 py-5">
              <i class="ti-palette icon mb-5 d-inline-block"></i>
              <h4 class="mb-4">Design</h4>
              <p>Unique, Creative, Minimal, Modern and Professional Graphics designs, Logo Design, Brochure Design, Promotional Banners, UX/UI and multifarious designs.</p>
            </div>
          </div>
        </div>

        <div class="col-md-4 mb-4 wow fadeInLeft" data-wow-delay="0.2s">
          <div class="card  active-bg-primary  hover-shadow shadow">
            <div class="card-body text-center px-4 py-5">
              <i class="ti-server icon mb-5 d-inline-block"></i>
              <h4 class="mb-4">Web Design</h4>
              <p>Responsive Website design for desktops, all sizes of mobiles and tablets, smart tv screens with Bootstrap &amp; Polymer</p>
            </div>
          </div>
        </div>

        <div class="col-md-4 mb-4 wow fadeInLeft" data-wow-delay="0.5s">
          <div class="card  hover-shadow shadow">
            <div class="card-body text-center px-4 py-5">
              <i class="ti-desktop icon mb-5 d-inline-block"></i>
              <h4 class="mb-4">IT</h4>
              <p>Networking, Troubleshooting, System Administration, Security and Help Assistance with up to date latest Technologies.</p>
            </div>
          </div>
        </div>

      </div>
      </div>
  </section>


  <section class="section">
    <div class="container">
      <div class="row">
        <div class="col-12 text-center">
          <h2 class="section-title">Portfolio</h2>
        </div>
      </div>
      <div class="row shuffle-wrapper">

        <div class="col-lg-4 col-6 mb-4 shuffle-item">
          <div class="position-relative rounded hover-wrapper wow flipInX">
            <img src="/images/portfolio/faham_doors.avif" alt="portfolio-image" class="img-fluid rounded w-100 d-block lazy">
            <div class="hover-overlay">
              <div class="hover-content">
                <a class="btn btn-light btn-sm" href="https://fahamdoors.com" target="_blank">view project</a>
              </div>
            </div>
          </div>
        </div>

        <div class="col-lg-4 col-6 mb-4 shuffle-item">
          <div class="position-relative rounded hover-wrapper wow flipInX" data-wow-delay="0.2s">
            <img src="/images/portfolio/gdg_sri_lanka.avif" alt="portfolio-image" class="img-fluid rounded w-100 d-block lazy">
            <div class="hover-overlay">
              <div class="hover-content">
                <a class="btn btn-light btn-sm" href="https://gdgsrilanka.org" target="_blank">view project</a>
              </div>
            </div>
          </div>
        </div>

        <div class="col-lg-4 col-6 mb-4 shuffle-item">
          <div class="position-relative rounded hover-wrapper wow flipInX" data-wow-delay="0.4s">
            <img src="/images/portfolio/were_hiring-min.avif" alt="portfolio-image" class="img-fluid rounded w-100 d-block lazy">
            <div class="hover-overlay">
              <div class="hover-content">
                <a class="btn btn-light btn-sm" href="https://www.behance.net/gallery/157318767/Were-Hiring-Sales-Manager-Social-media-Concept" target="_blank">view project</a>
              </div>
            </div>
          </div>
        </div>

        <div class="col-lg-4 col-6 mb-4 shuffle-item">
          <div class="position-relative rounded hover-wrapper wow flipInX" data-wow-delay="0.6s">
            <img src="/images/portfolio/happy_visakhi-min.avif" alt="portfolio-image" class="img-fluid rounded w-100 d-block lazy">
            <div class="hover-overlay">
              <div class="hover-content">
                <a class="btn btn-light btn-sm" href="https://www.behance.net/gallery/157142899/Happy-Vishakhi-social-media-offer-concept-banner" target="_blank">view project</a>
              </div>
            </div>
          </div>
        </div>

        <div class="col-lg-4 col-6 mb-4 shuffle-item">
          <div class="position-relative rounded hover-wrapper wow flipInX" data-wow-delay="0.8s">
            <img src="/images/portfolio/test_drive-min.avif" alt="portfolio-image" class="img-fluid rounded w-100 d-block lazy">
            <div class="hover-overlay">
              <div class="hover-content">
                <a class="btn btn-light btn-sm" href="https://www.behance.net/gallery/157142423/Automotive-company-social-media-banner-concept" target="_blank">view project</a>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </section>


  <section class="section bg-primary position-relative testimonial-bg-shapes">
    <div class="container">
      <div class="row">
        <div class="col-12 text-center">
          <h2 class="section-title text-white mb-5">Testimonials</h2>
        </div>
        <div class="col-lg-10 mx-auto testimonial-slider wow fadeInRight">


          <div class="text-center testimonial-content">
            <i class="ti-comment-alt text-white icon mb-4 d-inline-block"></i>
            <p class="text-white mb-4">I have known and worked with Udara for several years. He produces artwork that is eye-catching &amp; captures the essence of the messaging that needs to be conveyed. <strong>Always creates well received imagery that garners positive thoughtful feedback from the public.</strong> Well versed in targeting key groups with skilful creations on our social media channels that boosts our reach to new subscribers. <strong>I have no hesitation in recommending Udara; a true professional designer.</strong></p>
            <img class="img-fluid rounded-circle mb-4 d-inline-block" src="/images/testimonial/david_mohammed.avif" alt="client-image">
            <h4 class="text-white">David Mohammed</h4>
            <h6 class="text-light mb-4">Project Lead @ Ubuntu Budgie</h6>
          </div>


          <div class="text-center testimonial-content">
            <i class="ti-comment-alt text-white icon mb-4 d-inline-block"></i>
            <p class="text-white mb-4">Udara Madubhashana is a very personable professional who wants as many details as possible in order to deliver the right output. <strong>I was so impressed with his creativity and professionalism! He is a brilliant designer,</strong>  and his creativity goes well beyond any bounds I have ever seen. I wholeheartedly recommend him for your design needs!</p>
            <img class="img-fluid rounded-circle mb-4 d-inline-block" src="/images/testimonial/anjula_malshan.avif" alt="client-image">
            <h4 class="text-white">Anjula Malshan</h4>
            <h6 class="text-light mb-4">CEO @ Fixel Digital</h6>
          </div>


          <div class="text-center testimonial-content">
            <i class="ti-comment-alt text-white icon mb-4 d-inline-block"></i>
            <p class="text-white mb-4"><strong>Udara has really clean style and his works are very good and of big impact.</strong> Most of his graphics are elegant and they &lsquo;catch&rsquo; your attention. I like his design very much and, I think he has a brilliant future.</p>
            <img class="img-fluid rounded-circle mb-4 d-inline-block" src="/images/testimonial/guiseppe_blotti.avif" alt="client-image">
            <h4 class="text-white">Guiseppe Blotti</h4>
            <h6 class="text-light mb-4">CEO @ Guiseppe Farm</h6>
          </div>

        </div>
      </div>
    </div>

    <img src="/images/backgrounds/map.png" alt="map" class="img-fluid bg-map lazy">
    <img src="/images/illustrations/dots-group-v.svg" alt="bg-shape" class="img-fluid bg-shape-1">
    <img src="/images/illustrations/leaf-orange.svg" alt="bg-shape" class="img-fluid bg-shape-2">
    <img src="/images/illustrations/dots-group-sm.svg" alt="bg-shape" class="img-fluid bg-shape-3">
    <img src="/images/illustrations/leaf-pink-round.svg" alt="bg-shape" class="img-fluid bg-shape-4">
    <img src="/images/illustrations/leaf-cyan.svg" alt="bg-shape" class="img-fluid bg-shape-5">
  </section>


  <section class="section pb-0">
    <div class="container">
      <div class="client-logo-slider d-flex align-items-center">

  <a href="https://ubuntubudgie.org" class="text-center d-block outline-0 p-4"><img class="d-unset img-fluid fixed-width lazy" src="/images/clients-logo/ubuntu_budgie.png" alt="client-logo"></a>

  <a href="https://gdgsrilanka.org" class="text-center d-block outline-0 p-4"><img class="d-unset img-fluid fixed-width lazy" src="/images/clients-logo/gdg_srilanka.png" alt="client-logo"></a>

  <a href="https://mahaweli.gov.lk" class="text-center d-block outline-0 p-4"><img class="d-unset img-fluid fixed-width lazy" src="/images/clients-logo/mahaweli_authority.png" alt="client-logo"></a>

  <a href="https://fahamdoors.com" class="text-center d-block outline-0 p-4"><img class="d-unset img-fluid fixed-width lazy" src="/images/clients-logo/faham_doors.png" alt="client-logo"></a>

  <a href="https://draindollies.co.uk" class="text-center d-block outline-0 p-4"><img class="d-unset img-fluid fixed-width lazy" src="/images/clients-logo/drain_dollies.png" alt="client-logo"></a>

  <a href="https://globalsrilankanforum.org" class="text-center d-block outline-0 p-4"><img class="d-unset img-fluid fixed-width lazy" src="/images/clients-logo/gslf.png" alt="client-logo"></a>

  <a href="https://gdgdubai.com" class="text-center d-block outline-0 p-4"><img class="d-unset img-fluid fixed-width lazy" src="/images/clients-logo/gdg_dubai.png" alt="client-logo"></a>

  <a href="#" class="text-center d-block outline-0 p-4"><img class="d-unset img-fluid fixed-width lazy" src="/images/clients-logo/guiseppe_farm.png" alt="client-logo"></a>

  <a href="http://luxurycateringqa.com" class="text-center d-block outline-0 p-4"><img class="d-unset img-fluid fixed-width lazy" src="/images/clients-logo/luxury_catering.png" alt="client-logo"></a>

</div>
    </div>
  </section>


<section class="section section-on-footer" data-background="/images/backgrounds/bg-dots.png">
  <div class="container">
    <div class="row">
      <div class="col-12 text-center">
        <h2 class="section-title">Contact Info</h2>
      </div>
      <div class="col-lg-8 mx-auto">
        <div class="bg-white rounded text-center p-5 shadow-down wow fadeInUp" data-wow-delay="0.2s">
          <h4 class="mb-80">Contact Form</h4>
          <form action="https://formspree.io/mrnozkbm" method="POST" class="row">
            <div class="col-md-6">
              <input type="text" id="name" name="name" placeholder="Full Name" class="form-control px-0 mb-4">
            </div>
            <div class="col-md-6">
              <input type="email" id="email" name="email" placeholder="Email Address" class="form-control px-0 mb-4">
            </div>
            <div class="col-12">
              <textarea name="message" id="message" class="form-control px-0 mb-4"
                placeholder="Type Message Here"></textarea>
            </div>
            <div class="col-lg-6 col-10 mx-auto">
              <button class="btn btn-primary w-100">send</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>


<footer class="bg-dark footer-section">
  <div class="section">
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <h5 class="text-light">Email</h5>
          <p class="text-white paragraph-lg font-secondary">udara@pm.me</p>
        </div>
        <div class="col-md-4">
          <h5 class="text-light">Telegram</h5>
          <p class="text-white paragraph-lg font-secondary">@uD4ra</p>
        </div>
        <div class="col-md-4">
          <h5 class="text-light">Location</h5>
          <p class="text-white paragraph-lg font-secondary">Sri Lanka</p>
        </div>
      </div>
    </div>
  </div>
  <div class="border-top text-center border-dark py-5">
    <p class="mb-0 text-light">Copyright (c) 2024 <a href="https://twitter.com/uD4ra">Udara Madubhashana</a></p>
  </div>
</footer>


<!-- JS Plugins -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script src="/plugins/bootstrap/bootstrap.min.js"></script>

<script src="/plugins/slick/slick.min.js"></script>

<script src="/plugins/shuffle/shuffle.min.js"></script>

<script src="/plugins/animate/wow.min.js"></script>

<!-- Main Script -->

<script src="/js/script.min.js"></script>

</body>
</html>