devfolio/index.html

421 lines
14 KiB
HTML
Raw Normal View History

2019-08-16 03:38:14 +00:00
<!DOCTYPE html>
<html lang="en">
2019-08-16 19:11:22 +00:00
<head>
<title>My custom Bulma website</title>
2019-08-17 00:47:38 +00:00
<link rel="icon" href="favicon.png" type="image/x-icon">
2019-08-16 19:11:22 +00:00
<link rel="stylesheet" href="css/main.bundle.css">
2019-08-17 01:32:24 +00:00
<script src="https://kit.fontawesome.com/4e5a72c756.js"></script>
2019-08-16 19:11:22 +00:00
</head>
<body>
2019-08-17 01:32:24 +00:00
<nav class="navbar is-primary" role="navigation" aria-label="main navigation">
2019-08-17 01:46:44 +00:00
<div class="navbar-brand">
<!-- navbar items, navbar burger... -->
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
2019-08-20 04:11:17 +00:00
<div class="navbar-menu">
2019-08-17 01:32:24 +00:00
<div class="navbar-end">
<div class="navbar-item">
2019-08-20 04:11:17 +00:00
<a href="https://github.com/mmacneil" class="icon is-large has-text-light">
2019-08-17 01:32:24 +00:00
<i class="fab fa-2x fa-github"></i>
</a>
</div>
<div class="navbar-item">
2019-08-20 04:11:17 +00:00
<a href="https://fullstackmark.com" class="icon is-large has-text-light">
2019-08-17 01:46:44 +00:00
<i class="fas fa-2x fa-globe"></i>
</a>
</div>
2019-08-17 01:32:24 +00:00
</div>
</div>
</nav>
2019-08-16 19:11:22 +00:00
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
2019-08-17 00:30:12 +00:00
<div class="level">
<div class="level-item has-text-centered">
2019-08-16 20:31:26 +00:00
<figure class="image is-128x128">
2019-08-17 00:30:12 +00:00
<img class="is-rounded" src="img/me-big.jpg">
2019-08-16 20:31:26 +00:00
</figure>
2019-08-17 00:30:12 +00:00
</div>
</div>
<div class="columns has-text-centered">
<div class="column">
2019-08-19 00:55:21 +00:00
<h1 class="title is-1">
2019-08-17 00:30:12 +00:00
Mark Macneil
</h1>
<h2 class="subtitle">
2019-08-21 01:14:36 +00:00
FullStack .NET Dev, Halifax, NS
2019-08-17 00:30:12 +00:00
</h2>
</div>
2019-08-16 20:31:26 +00:00
</div>
2019-08-16 19:11:22 +00:00
</div>
</div>
</section>
2019-08-17 00:47:38 +00:00
<section class="section">
<div class="container">
<h1 class="title">About Me</h1>
2019-08-19 01:15:19 +00:00
<hr />
2019-08-17 01:32:24 +00:00
<p>I'm a senior developer whose spent the last 14+ years obsessively
2019-08-17 01:46:44 +00:00
helping deliver .NET-based web, mobile and cloud solutions across a variety of industries and
2019-08-17 01:32:24 +00:00
clients from small startups to large enterprises like Macy's and McDonald's.</p>
2019-08-17 00:47:38 +00:00
</div>
</section>
2019-08-18 18:37:10 +00:00
<section class="section">
2019-08-19 00:55:21 +00:00
<div class="container">
<h1 class="title">Experience</h1>
2019-08-19 01:15:19 +00:00
<hr />
2019-08-19 00:55:21 +00:00
<div class="card">
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
2019-08-19 01:42:58 +00:00
<img src="img/dunder-mifflin-logo.png" alt="Placeholder image">
2019-08-19 00:55:21 +00:00
</figure>
</div>
<div class="media-content">
<p class="title is-4">Company Name</p>
<p class="subtitle is-6">Title - <time datetime="2018-1">January 2018</time> to <time
datetime="2019-9">Sepemter 2019</time> </p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus nec iaculis mauris.
</div>
</div>
</div>
<div class="card card-gap">
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
2019-08-19 01:42:58 +00:00
<img src="img/pied-piper-logo.png" alt="Placeholder image">
2019-08-19 00:55:21 +00:00
</figure>
</div>
<div class="media-content">
<p class="title is-4">Company Name</p>
<p class="subtitle is-6">Title - <time datetime="2018-1">August 2017</time> to <time
datetime="2017-9">January 2018</time></p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus nec iaculis mauris.
</div>
</div>
</div>
2019-08-19 01:15:19 +00:00
</div>
</section>
<section class="section">
<div class="container">
<h1 class="title">Projects</h1>
<hr />
<div class="tile is-ancestor">
<div class="tile is-vertical is-12">
<div class="tile">
<div class="tile is-parent is-vertical">
2019-08-20 03:17:18 +00:00
<article class="tile is-child notification">
<p class="title">Project</p>
<p class="subtitle">Client</p>
2019-08-19 01:15:19 +00:00
<figure class="image is-4by3">
2019-08-20 04:11:17 +00:00
<img class="modal-trigger" data-target="project-1-modal" src="img/project-1-cover.png">
2019-08-19 01:15:19 +00:00
</figure>
</article>
</div>
<div class="tile is-parent">
2019-08-20 03:17:18 +00:00
<article class="tile is-child notification">
<p class="title">Project</p>
<p class="subtitle">Client</p>
2019-08-19 01:15:19 +00:00
<figure class="image is-4by3">
2019-08-21 01:39:00 +00:00
<img class="modal-trigger" data-target="project-2-modal" src="img/project-2-cover.png">
2019-08-19 01:15:19 +00:00
</figure>
</article>
</div>
<div class="tile is-parent">
2019-08-20 03:17:18 +00:00
<article class="tile is-child notification">
<p class="title">Project</p>
<p class="subtitle">Client</p>
2019-08-19 01:15:19 +00:00
<figure class="image is-4by3">
2019-08-21 01:39:00 +00:00
<img class="modal-trigger" data-target="project-3-modal" src="img/project-3-cover.png">
2019-08-19 01:15:19 +00:00
</figure>
</article>
</div>
</div>
2019-08-20 03:17:18 +00:00
</div>
2019-08-19 01:15:19 +00:00
</div>
<div class="tile is-ancestor">
2019-08-20 03:17:18 +00:00
<div class="tile is-vertical is-12">
<div class="tile">
<div class="tile is-parent is-vertical">
<article class="tile is-child notification">
<p class="title">Project</p>
<p class="subtitle">Client</p>
<figure class="image is-4by3">
2019-08-21 01:39:00 +00:00
<img class="modal-trigger" data-target="project-4-modal" src="img/project-4-cover.png">
2019-08-20 03:17:18 +00:00
</figure>
</article>
2019-08-18 18:37:10 +00:00
</div>
2019-08-20 03:17:18 +00:00
<div class="tile is-parent">
<article class="tile is-child notification">
<p class="title">Project</p>
<p class="subtitle">Client</p>
<figure class="image is-4by3">
2019-08-21 01:39:00 +00:00
<img class="modal-trigger" data-target="project-5-modal" src="img/project-5-cover.png">
2019-08-20 03:17:18 +00:00
</figure>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child notification">
2019-08-20 04:11:17 +00:00
<p class="title">Project</p>
<p class="subtitle">Client</p>
2019-08-20 03:17:18 +00:00
<figure class="image is-4by3">
2019-08-21 01:39:00 +00:00
<img class="modal-trigger" data-target="project-6-modal" src="img/project-6-cover.png">
2019-08-20 03:17:18 +00:00
</figure>
</article>
</div>
</div>
2019-08-19 00:55:21 +00:00
</div>
2019-08-20 03:17:18 +00:00
</div>
2019-08-19 00:55:21 +00:00
</div>
</section>
2019-08-17 00:47:38 +00:00
2019-08-21 01:39:00 +00:00
<!-- Modals -->
2019-08-20 04:11:17 +00:00
<div id="project-1-modal" class="modal">
2019-08-21 01:14:36 +00:00
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Project title</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<p class="image is-3by2">
2019-08-21 01:39:00 +00:00
<img src="img/project-1-cover.png" alt="">
2019-08-21 01:14:36 +00:00
</p>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</div>
<div class="tags">
<span class="tag">angular</span>
<span class="tag">mongo</span>
<span class="tag">typscript</span>
<span class="tag">node</span>
</div>
</section>
<footer class="modal-card-foot">
<button class="button is-success">Close</button>
</footer>
2019-08-20 04:11:17 +00:00
</div>
2019-08-21 01:14:36 +00:00
</div>
2019-08-20 04:11:17 +00:00
2019-08-21 01:39:00 +00:00
<div id="project-2-modal" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Project title</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<p class="image is-3by2">
<img src="img/project-2-cover.png" alt="">
</p>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</div>
<div class="tags">
<span class="tag">angular</span>
<span class="tag">mongo</span>
<span class="tag">typscript</span>
<span class="tag">node</span>
</div>
</section>
<footer class="modal-card-foot">
<button class="button is-success">Close</button>
</footer>
</div>
</div>
<div id="project-3-modal" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Project title</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<p class="image is-3by2">
<img src="img/project-3-cover.png" alt="">
</p>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</div>
<div class="tags">
<span class="tag">angular</span>
<span class="tag">mongo</span>
<span class="tag">typscript</span>
<span class="tag">node</span>
</div>
</section>
<footer class="modal-card-foot">
<button class="button is-success">Close</button>
</footer>
</div>
</div>
<div id="project-4-modal" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Project title</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<p class="image is-3by2">
<img src="img/project-4-cover.png" alt="">
</p>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</div>
<div class="tags">
<span class="tag">angular</span>
<span class="tag">mongo</span>
<span class="tag">typscript</span>
<span class="tag">node</span>
</div>
</section>
<footer class="modal-card-foot">
<button class="button is-success">Close</button>
</footer>
</div>
</div>
<div id="project-5-modal" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Project title</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<p class="image is-3by2">
<img src="img/project-5-cover.png" alt="">
</p>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</div>
<div class="tags">
<span class="tag">angular</span>
<span class="tag">mongo</span>
<span class="tag">typscript</span>
<span class="tag">node</span>
</div>
</section>
<footer class="modal-card-foot">
<button class="button is-success">Close</button>
</footer>
</div>
</div>
<div id="project-6-modal" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Project title</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<p class="image is-3by2">
<img src="img/project-6-cover.png" alt="">
</p>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</div>
<div class="tags">
<span class="tag">angular</span>
<span class="tag">mongo</span>
<span class="tag">typscript</span>
<span class="tag">node</span>
</div>
</section>
<footer class="modal-card-foot">
<button class="button is-success">Close</button>
</footer>
</div>
</div>
2019-08-16 19:11:22 +00:00
<!-- <h1 class="title">
2019-08-16 03:38:14 +00:00
Bulma
</h1>
<p class="subtitle">
Modern CSS framework based on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a>
</p>
<div class="field">
<div class="control">
<input class="input" type="text" placeholder="Input">
</div>
</div>
<div class="field">
<p class="control">
<span class="select">
<select>
<option>Select dropdown</option>
</select>
</span>
</p>
</div>
<div class="buttons">
<a class="button is-primary">Primary</a>
<a class="button is-link">Link</a>
2019-08-16 19:11:22 +00:00
</div> -->
2019-08-20 04:11:17 +00:00
2019-08-21 01:14:36 +00:00
<script src="js/bundle.js"></script>
2019-08-16 19:11:22 +00:00
</body>
2019-08-17 01:32:24 +00:00
2019-08-16 03:38:14 +00:00
</html>