API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Oct 21st, 2019
103
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 29.55 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <script type="text/javascript">
  5. var TxtType = function(el, toRotate, period) {
  6. this.toRotate = toRotate;
  7. this.el = el;
  8. this.loopNum = 0;
  9. this.period = parseInt(period, 10) || 2000;
  10. this.txt = '';
  11. this.tick();
  12. this.isDeleting = false;
  13. };
  14.  
  15. TxtType.prototype.tick = function() {
  16. var i = this.loopNum % this.toRotate.length;
  17. var fullTxt = this.toRotate[i];
  18.  
  19. if (this.isDeleting) {
  20. this.txt = fullTxt.substring(0, this.txt.length - 1);
  21. } else {
  22. this.txt = fullTxt.substring(0, this.txt.length + 1);
  23. }
  24.  
  25. this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';
  26.  
  27. var that = this;
  28. var delta = 200 - Math.random() * 100;
  29.  
  30. if (this.isDeleting) { delta /= 2; }
  31.  
  32. if (!this.isDeleting && this.txt === fullTxt) {
  33. delta = this.period;
  34. this.isDeleting = true;
  35. } else if (this.isDeleting && this.txt === '') {
  36. this.isDeleting = false;
  37. this.loopNum++;
  38. delta = 500;
  39. }
  40.  
  41. setTimeout(function() {
  42. that.tick();
  43. }, delta);
  44. };
  45.  
  46. window.onload = function() {
  47. var elements = document.getElementsByClassName('typewrite');
  48. for (var i=0; i<elements.length; i++) {
  49. var toRotate = elements[i].getAttribute('data-type');
  50. var period = elements[i].getAttribute('data-period');
  51. if (toRotate) {
  52. new TxtType(elements[i], JSON.parse(toRotate), period);
  53. }
  54. }
  55. // INJECT CSS
  56. var css = document.createElement("style");
  57. css.type = "text/css";
  58. css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
  59. document.body.appendChild(css);
  60. };
  61. </script>
  62. <style type="text/css">html {
  63. scroll-behavior: smooth;
  64. }</style>
  65. <link href="lightbox.css" rel="stylesheet">
  66. "@Url.Content("~/css/style.css">
  67. <meta charset="utf-8"/>
  68. <meta http-equiv="x-ua-compatible" content="ie=edge">
  69. <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  70. <meta itemprop="name" content="Josh Mcguinness | Full Stack Developer"/>
  71. <meta itemprop="url" content="https://joshmcguinness.co.uk/"/>
  72.  
  73. <title>@Model.Content.Name - @home.Sitename</title>
  74.  
  75. <link href="http://gmpg.org/xfn/11" rel="profile"/>
  76.  
  77. <!-- Favicons -->
  78. <meta name="application-name" content="&nbsp;"/>
  79.  
  80. <!-- Meta -->
  81. <meta name="author" content="Josh Mcguinness">
  82. <meta name="description" content="Josh Mcguinness is a front end web developer from Glasgow, Scotland">
  83. <link rel="canonical" href="http://joshmcguinness.co.uk">
  84.  
  85. <!-- Facebook -->
  86. <meta property="og:url" content="https://joshmcguinness.co.uk">
  87. <meta property="og:type" content="website">
  88. <meta property="og:title" content="Josh Mcguinness">
  89. <meta property="og:image" content="">
  90. <meta property="og:image:type" content="image/jpg">
  91. <meta property="og:image:width" content="1200">
  92. <meta property="og:image:height" content="630">
  93. <meta property="og:description" content="osh Mcguinness is a front end web developer from Glasgow, Scotland">
  94.  
  95. <!-- Twitter -->
  96.  
  97.  
  98. <link rel='dns-prefetch' href='//s.w.org' />
  99.  
  100.  
  101. <!-- SEO meta tags powered by SmartCrawl -->
  102.  
  103.  
  104. <!-- Global site tag (gtag.js) - Google Analytics -->
  105. <script async src="https://www.googletagmanager.com/gtag/js?id=UA-131802537-1"></script>
  106. <script>
  107. window.dataLayer = window.dataLayer || [];
  108. function gtag(){dataLayer.push(arguments);}
  109. gtag('js', new Date());
  110.  
  111. gtag('config', 'UA-131802537-1');
  112. </script>
  113.  
  114.  
  115. <script>
  116. (function(h,o,t,j,a,r){
  117. h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
  118. h._hjSettings={hjid:1165353,hjsv:6};
  119. a=o.getElementsByTagName('head')[0];
  120. r=o.createElement('script');r.async=1;
  121. r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
  122. a.appendChild(r);
  123. })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
  124. </script>
  125.  
  126. <script type="application/ld+json">
  127. {"@context":"http://schema.org","@type":"WebSite","name":"Josh Mcguinness","headline":"Josh Mcguinness","author":{"@type":"Person","name":"Josh Mcguinness"},"description":"Front end Web Developer","url":"https://joshmcguinness.co.uk/"}
  128. </script>
  129. </head>
  130.  
  131. <body id="top" class="home page-template-default page page-id-8" itemscope itemtype="http://schema.org/Blog">
  132.  
  133. <main role="main"><section class="intro" style=" background-image: url("bg.jpg")!important;">
  134. <div class="intro-overlay"></div>
  135. <div class="intro-content">
  136. <h3 class="intro-subtitle">Hello, World.</h3>
  137. <h1 class="intro-title title">I'm Josh McGuinness.</h1>
  138.  
  139. <p class="intro-position">
  140. <a href="" class="typewrite" data-period="2000" data-type='[ "front-end Web Developer", "entrepreneur", "computer science grad", "Beer enthusiast","Digital-nomad" ]'>
  141. <span class="wrap"></span>
  142. </a>
  143. </p>
  144. </p>
  145.  
  146. <a href="#section1"><button>Learn More</button></a></a>
  147. <div class="is-flex social-connect">
  148. <a href="" target="_blank">
  149. <i class="fab fa-linkedin-in"></i>
  150. </a>
  151. <a href="" target="_blank">
  152. <i class="fab fa-twitter"></i>
  153. </a>
  154. <a href="" target="_blank">
  155. <i class="fab fa-github"></i>
  156. </a>
  157. <a href="mailto:hello@joshmcguinness.co.uk" target="_blank">
  158. <i class="far fa-envelope"></i>
  159. </a>
  160. </div>
  161. </div>
  162. </section><section class="section about" id="section1">
  163. <div class="container">
  164. <div class="content has-text-centered">
  165. <div class="header-intro">
  166. <h5>About</h5>
  167. <h6>Get to know me.</h6>
  168. </div>
  169. </div>
  170. <div class="columns">
  171. <div class="column is-6 my-profile">
  172. <h5 class="title">My Profile</h5>
  173. <p>I am a creative and skilled designer/developer.with a real passion for creating beautiful and functional websites. I also enjoy turning complex problems into simple, attractive and innovative interface designs.</p>
  174. <br>
  175. <ul class="about-list">
  176.  
  177.  
  178.  
  179. <li>
  180. <strong>Name:</strong><br>
  181. <span>Joshua Michael McGuinness</span>
  182. </li>
  183.  
  184.  
  185.  
  186.  
  187.  
  188. <li>
  189. <strong>Place of Birth:</strong><br>
  190. <span>Ayrshire Scotland</span>
  191. </li>
  192.  
  193.  
  194.  
  195.  
  196.  
  197. <li>
  198. <strong>Date of Birth:</strong><br>
  199. <span>Jan 1992</span>
  200. </li>
  201.  
  202.  
  203.  
  204.  
  205.  
  206. <li>
  207. <strong>Current Location:</strong><br>
  208. <span>United Kingdom</span>
  209. </li>
  210.  
  211.  
  212.  
  213.  
  214.  
  215. <li>
  216. <strong>Current Job:</strong><br>
  217. <span>Front end Web Developer</span>
  218. </li>
  219.  
  220.  
  221.  
  222.  
  223.  
  224.  
  225. <li>
  226. <strong>Email Address</strong><br>
  227. <a href="mailto:hello@joshmcguinness.co.uk"><span>hello@joshmcguinness.co.uk</span></a>
  228. </li>
  229.  
  230.  
  231.  
  232. </ul>
  233.  
  234. </div>
  235.  
  236. <div class="column is-6 my-skills">
  237. <h5 class="title">My Skills</h5>
  238. <p>I have been within the web development sphere for many years now, below you will find a list of some of my favorite languages and code bases. First and foremost i am a PHP/wordpress developer but have begun to broaden my horizons into the realms of MS tech stack & React Native.</p>
  239. <br>
  240. <ul class="skills-list">
  241.  
  242.  
  243.  
  244. <li>
  245. <strong class="is-uppercase">PHP</strong>
  246. <progress class="progress is-small" value="90" max="100">90</progress>
  247. <strong>90%</strong>
  248. </li>
  249.  
  250.  
  251.  
  252.  
  253. <li>
  254. <strong class="is-uppercase">Wordpress</strong>
  255. <progress class="progress is-small" value="90" max="100">90</progress>
  256. <strong>90%</strong>
  257. </li>
  258.  
  259.  
  260.  
  261.  
  262. <li>
  263. <strong class="is-uppercase">.net</strong>
  264. <progress class="progress is-small" value="70" max="100">79</progress>
  265. <strong>70%</strong>
  266. </li>
  267.  
  268.  
  269.  
  270.  
  271. <li>
  272. <strong class="is-uppercase">HTML5</strong>
  273. <progress class="progress is-small" value="90" max="100">90</progress>
  274. <strong>85%</strong>
  275. </li>
  276.  
  277.  
  278.  
  279.  
  280. <li>
  281. <strong class="is-uppercase">CSS3</strong>
  282. <progress class="progress is-small" value="90" max="100">90</progress>
  283. <strong>85%</strong>
  284. </li>
  285.  
  286.  
  287.  
  288.  
  289. <li>
  290. <strong class="is-uppercase">JS</strong>
  291. <progress class="progress is-small" value="75" max="100">75</progress>
  292. <strong>75%</strong>
  293. </li>
  294.  
  295.  
  296.  
  297.  
  298. <li>
  299. <strong class="is-uppercase">Java (Android)</strong>
  300. <progress class="progress is-small" value="30" max="100">30</progress>
  301. <strong>70%</strong>
  302. </li>
  303.  
  304.  
  305.  
  306.  
  307. <li>
  308. <strong class="is-uppercase">React</strong>
  309. <progress class="progress is-small" value="50" max="100">49</progress>
  310. <strong>50%</strong>
  311. </li>
  312.  
  313.  
  314.  
  315. </ul>
  316.  
  317. </div>
  318.  
  319. </div>
  320.  
  321. <div class="columns has-text-centered">
  322. <div class="column">
  323. <div class="content tools-list">
  324. <h5 class="title">My Development Tools:</h5>
  325. <p>PhpStorm, Personal CSS Framework, Bulma, Bitbucket, Gitlab, Github, Laragon, Git Bash.</p>
  326. </div>
  327. </div>
  328. </div>
  329.  
  330. </div>
  331. </section>
  332. <section class="section hero is-light" id="resume">
  333. <div class="content has-text-centered">
  334. <div class="header-intro">
  335. <h5>My Resume</h5>
  336. <h6>My work experience.</h6>
  337. </div>
  338. </div>
  339. <div class="timeline is-centered">
  340.  
  341.  
  342.  
  343. <div class="timeline-item item-1">
  344. <div class="timeline-marker green"></div>
  345. <div class="timeline-content">
  346. <p class="heading">January 2019 - Present</p>
  347. <p>Web Developer at Coder Pro.net</p>
  348. </div>
  349. </div>
  350.  
  351.  
  352.  
  353.  
  354. <div class="timeline-item item-2">
  355. <div class="timeline-marker red"></div>
  356. <div class="timeline-content">
  357. <p class="heading">November 2017 - December 2018</p>
  358. <p>front end developer & spires art<sup>8</sup></p>
  359. </div>
  360. </div>
  361.  
  362.  
  363.  
  364.  
  365. <div class="timeline-item item-3">
  366. <div class="timeline-marker red"></div>
  367. <div class="timeline-content">
  368. <p class="heading">April 2016 - November 2017</p>
  369. <p>front end & UI developer at SOLUS UK</p>
  370. </div>
  371. </div>
  372.  
  373.  
  374.  
  375.  
  376. <div class="timeline-item item-4">
  377. <div class="timeline-marker red"></div>
  378. <div class="timeline-content">
  379. <p class="heading">August 2014 - March 2016</p>
  380. <p>junior webdeveloper @ buzz agency</p>
  381. </div>
  382. </div>
  383.  
  384.  
  385.  
  386.  
  387. <div class="timeline-item item-5">
  388. <div class="timeline-marker red"></div>
  389. <div class="timeline-content">
  390. <p class="heading">February 2014 - present</p>
  391. <p>Freelance web developer</p>
  392. </div>
  393. </div>
  394.  
  395.  
  396.  
  397.  
  398. <div class="timeline-item item-6">
  399. <div class="timeline-marker red"></div>
  400. <div class="timeline-content">
  401. <p class="heading">January 2012 - January 2013</p>
  402. <p>Graduated from UWS Paisley with a BSC in <br> comuter science - Web and Mobile development </p>
  403. </div>
  404. </div>
  405.  
  406.  
  407.  
  408. </div>
  409. </section>
  410. <section class="section hero portfolio">
  411. <div class="content has-text-centered">
  412. <div class="header-intro">
  413. <h5>My Recent Work</h5>
  414. <h6>Here are some of thing i've built & worked on over the years</h6>
  415. </div>
  416. <div class="container">
  417. <div class="portfolio-grid">
  418. <div class="columns is-multiline is-mobile">
  419. <div class="column is-12-mobile is-half-tablet is-one-third-desktop">
  420. <div class="portfolio-item-1">
  421. <figure class="image is-3by2">"
  422. <img class="portfolio-thumb" src="img/ogilvie.png" alt="">
  423. <div class="overlay">
  424. <div class="content">
  425. <p class="text">Property developer website I worked on while Working for Digital agency in Glasgow</p>
  426. <a href="ogilvie.png" data-lightbox="image-1" data-title="My caption" class="button is-rounded view-website">View</a>
  427. <a href="https://ogilviehomes.co.uk" class="button is-rounded view-website"> live site</a>
  428. </div>
  429. </div>
  430. </figure>
  431. </div>
  432. </div>
  433. <div class="column is-12-mobile is-half-tablet is-one-third-desktop">
  434. <div class="portfolio-item-2">
  435. <figure class="image is-3by2">
  436. <img class="portfolio-thumb" src="mack.png" alt="">
  437. <div class="overlay">
  438. <div class="content">
  439. <p class="text">Hi-synergy Wprdpress website</p>
  440. <a href="mack.png" data-lightbox="image-1" data-title="My caption" class="button is-rounded view-website">View</a>
  441. </div>
  442. </div>
  443. </figure>
  444. </div>
  445. </div>
  446. <div class="column is-12-mobile is-half-tablet is-one-third-desktop">
  447. <div class="portfolio-item-3">
  448. <figure class="image is-3by2">
  449. <img class="portfolio-thumb" src="spires1.png" alt="">
  450. <div class="overlay">
  451. <div class="content">
  452. <p class="text">Spires Art- Fine Art retailer</p>
  453. <a href="spires1.png" data-lightbox="image-1" data-title="My caption" class="button is-rounded view-website">view</a>
  454. <a href="http://www.spiresart.com" class="button is-rounded view-website"> live site</a> <
  455.  
  456. </div>
  457. </div>
  458. </figure>
  459. </div>
  460. </div>
  461. </div>
  462. </div>
  463. </div>
  464. <div class="container">
  465. <div class="portfolio-grid">
  466. <div class="columns is-multiline is-mobile">
  467. <div class="column is-12-mobile is-half-tablet is-one-third-desktop">
  468. <div class="portfolio-item-1">
  469. <figure class="image is-3by2">"
  470. <img class="portfolio-thumb" src="search1.png" alt="">
  471. <div class="overlay">
  472. <div class="content">
  473. <p class="text">spires artwork database</p>
  474. <a href="http://www.spiresart2.com/bridgeman_new/" class="button is-rounded view-website">live site</a> <
  475.  
  476. </div>
  477. </figure>
  478. </div>
  479. </div>
  480. <div class="column is-12-mobile is-half-tablet is-one-third-desktop">
  481. <div class="portfolio-item-2">
  482. <figure class="image is-3by2">
  483. <img class="portfolio-thumb" src="ems1.png" alt="">
  484. <div class="overlay">
  485. <div class="content">
  486. <p class="text">Emergency Medical Supplies-Wordpress website</p>
  487. <a href="ems1.png" data-lightbox="image-1" data-title="My caption" class="button is-rounded view-website">View</a>
  488. <a href="http://emergencymedicalsupplies.co.uk" class="button is-rounded view-website">live site</a>
  489.  
  490. http://emergencymedicalsupplies.co.uk
  491. </div>
  492. </div>
  493. </figure>
  494. </div>
  495. </div>
  496. <div class="column is-12-mobile is-half-tablet is-one-third-desktop">
  497. <div class="portfolio-item-3">
  498. <figure class="image is-3by2">
  499. <img class="portfolio-thumb" src="crawford.png" alt="">
  500. <div class="overlay">
  501. <div class="content">
  502. <p class="text">Crawford Residences- website</p>
  503. <a data-lightbox="image-1" data-title="My caption" class="button is-rounded view-website">under construction</a>
  504.  
  505. </div>
  506. </div>
  507. </figure>
  508. </div>
  509. </div>
  510. </div>
  511. </div>
  512. </div>
  513. <div class="container">
  514. <div class="portfolio-grid">
  515. <div class="columns is-multiline is-mobile">
  516. <div class="column is-12-mobile is-half-tablet is-one-third-desktop">
  517. <div class="portfolio-item-1">
  518. <figure class="image is-3by2">"
  519. <img class="portfolio-thumb" src="kingdom1.png" alt="">
  520. <div class="overlay">
  521. <div class="content">
  522. <p class="text">Kingdom crafts</p>
  523. <a href="kingdom1.png" data-lightbox="image-1" data-title="My caption" class="button is-rounded view-website">View</a>
  524. </div>
  525. </div>
  526. </figure>
  527. </div>
  528. </div>
  529. <div class="column is-12-mobile is-half-tablet is-one-third-desktop">
  530. <div class="portfolio-item-2">
  531. <figure class="image is-3by2">
  532. <img class="portfolio-thumb" src="vip.png" alt="">
  533. <div class="overlay">
  534. <div class="content">
  535. <p class="text">VIP Group- Glasgow</p>
  536. <a href="vip.png" data-lightbox="image-1" data-title="My caption" class="button is-rounded view-website">View</a>
  537. </div>
  538. </div>
  539. </figure>
  540. </div>
  541. </div>
  542. <div class="column is-12-mobile is-half-tablet is-one-third-desktop">
  543. <div class="portfolio-item-3">
  544. <figure class="image is-3by2">
  545. <img class="portfolio-thumb" src="logo.png" alt="">
  546. <div class="overlay">
  547. <div class="content">
  548. <p class="text">Josh Mcguinness- Logo</p>
  549. <a href="logo.png" data-lightbox="image-1" data-title="My caption" class="button is-rounded view-website">View</a>
  550. </div>
  551. </div>
  552. </figure>
  553. </div>
  554. </div>
  555. </div>
  556. </div>
  557. </div>
  558. <div class="support">
  559. <h5>Want to show appreciation or support future projects?</h5>
  560. <a class="bmc-button" target="_blank" href="https://www.buymeacoffee.com/mRf6CF2Ys">
  561. <img src="https://www.buymeacoffee.com/assets/img/BMC-btn-logo.svg" alt="Buy me a coffee">
  562. <span style="margin-left:5px">Buy me a coffee</span>
  563. </a>
  564. </div>
  565. </section>
  566. <section class="section hero is-light testimonials">
  567. <div class="content has-text-centered">
  568. <div class="header-intro">
  569. <h5>Testimonials</h5>
  570. <h6>What people have to say..</h6>
  571. </div>
  572. <div class="columns is-centered">
  573. <div class="column is-two-thirds">
  574. <div class="testimonials-carousel">
  575.  
  576.  
  577.  
  578. <div class="testimonial-block">
  579.  
  580. <img class="avatar" src="mary.jpg" alt="Graeme Mcintosh" />
  581.  
  582. <p class="reference">
  583. “His work approach, maturity and willingness to learn were definitively accomplishments, i would work with him again. ” </p>
  584. <h5>Mary McPhillips</h5>
  585. <p>owner, kingdom krafts</p>
  586. </div>
  587.  
  588.  
  589.  
  590. </div>
  591. </div>
  592. </div>
  593. </div>
  594. </section>
  595. <section class="section hero is-dark contact">
  596. <div class="container">
  597. <div class="header-intro">
  598. <h5 class="has-text-centered is-uppercase">Contact</h5>
  599. <h6 class="has-text-centered has-text-white">Do you have an idea or simply want to chat?</h6>
  600. <h6 class="has-text-centered has-text-white">I'd love to hear from you.</h6>
  601. </div>
  602. <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  603. <script>
  604. function onSubmit(token) {
  605. document.getElementById("form").submit();
  606. }
  607. </script>
  608. <form id="form" accept-charset="UTF-8" action="https://usebasin.com/f/dc73642ac527" method="POST">
  609. <div class="columns is-centered">
  610. <div class="column is-half">
  611. <div class="field">
  612. <label class="label">Name</label>
  613. <div class="control is-expanded">
  614. <input class="input is-medium" name="name" id="name" type="text" required>
  615. </div>
  616. </div>
  617. </div>
  618. <div class="column is-half">
  619. <div class="field">
  620. <label class="label">Email</label>
  621. <div class="control is-expanded">
  622. <input class="input is-medium" type="email" id="email" name="email" required>
  623. </div>
  624. </div>
  625. </div>
  626. </div>
  627. <div class="columns is-centered">
  628. <div class="column">
  629. <div class="field">
  630. <label class="label">Message</label>
  631. <div class="control is-expanded">
  632. <textarea class="textarea is-medium" name="comment" rows="5" required></textarea>
  633. </div>
  634. </div>
  635. </div>
  636. </div>
  637. <div class="columns is-centered">
  638. <div class="column is-one-third">
  639. <div class="field">
  640. <div class="control">
  641. <button class="button is-medium is-rounded g-recaptcha"
  642. data-sitekey="6Lew3SMUAAAAAJ82QoS7gqOTkRI_dhYrFy1f7Sqy"
  643. data-callback='onSubmit'
  644. data-badge="inline">Submit</button>
  645. </div>
  646. </div>
  647. </div>
  648. </div>
  649. </form>
  650. </div>
  651. </section><footer class="section hero is-dark has-text-centered" role="contentInfo" itemscope="itemscope" itemtype="http://schema.org/WPFooter">
  652. <div class="container is-narrow">
  653.  
  654.  
  655. <div class="copyright">
  656. <p>Copyright © Josh Mcguinness 2019</p>
  657.  
  658. </div>
  659.  
  660. <a href="https://bulma.io"><img src="https://bulma.io/images/made-with-bulma--white.png" alt="Made with Bulma" width="163" height="31"></a>
  661.  
  662. <div id="scroll-top">
  663. <a class="scroll" title="Scroll Back To Top" href="#top">
  664. <i class="fas fa-arrow-up"></i>
  665. </a>
  666. </div>
  667. </div>
  668. </footer>
  669. <script type='text/javascript' src='main.js'></script>
  670. <script type='text/javascript' src='jquery.js'></script>
  671.  
  672. <script type='text/javascript' src='jquery-migrate.js'></script>
  673. <script src="lightbox.js"></script>
  674.  
  675.  
  676. });</script>
  677. </main>
  678.  
  679. </body>
  680.  
  681. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!