devfolio/index.html
2019-08-22 22:26:16 -03:00

439 lines
15 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>devfolio</title>
<link rel="icon" href="favicon.png" type="image/x-icon">
<link rel="stylesheet" href="css/main.bundle.css">
<script src="https://kit.fontawesome.com/4e5a72c756.js"></script>
</head>
<body>
<nav class="navbar is-primary" role="navigation" aria-label="main navigation">
<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>
<div class="navbar-menu">
<div class="navbar-end">
<div class="navbar-item">
<a href="https://github.com/mmacneil" class="icon is-large has-text-light">
<i class="fab fa-2x fa-github"></i>
</a>
</div>
<div class="navbar-item">
<a href="https://fullstackmark.com" class="icon is-large has-text-light">
<i class="fas fa-2x fa-globe"></i>
</a>
</div>
</div>
</div>
</nav>
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<div class="level">
<div class="level-item has-text-centered">
<figure class="image is-128x128">
<img class="is-rounded" src="img/me-big.jpg">
</figure>
</div>
</div>
<div class="columns has-text-centered">
<div class="column">
<h1 class="title is-1">
Mark Macneil
</h1>
<h2 class="subtitle">
FullStack .NET Dev, Halifax, NS
</h2>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<h1 class="title">About Me</h1>
<hr />
<p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</p>
</div>
</section>
<section class="section">
<div class="container">
<h1 class="title">Experience</h1>
<hr />
<div class="card">
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img src="img/dunder-mifflin-logo.png" alt="Placeholder image">
</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> - <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">
<img src="img/pied-piper-logo.png" alt="Placeholder image">
</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> - <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>
</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">
<article class="tile is-child notification">
<p class="title">Project title</p>
<figure class="image is-4by3">
<img class="modal-trigger" data-target="project-1-modal" src="img/project-1-cover.png">
</figure>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child notification">
<p class="title">Project title</p>
<figure class="image is-4by3">
<img class="modal-trigger" data-target="project-2-modal" src="img/project-2-cover.png">
</figure>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child notification">
<p class="title">Project title</p>
<figure class="image is-4by3">
<img class="modal-trigger" data-target="project-3-modal" src="img/project-3-cover.png">
</figure>
</article>
</div>
</div>
</div>
</div>
<div class="tile is-ancestor">
<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 title</p>
<figure class="image is-4by3">
<img class="modal-trigger" data-target="project-4-modal" src="img/project-4-cover.png">
</figure>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child notification">
<p class="title">Project title</p>
<figure class="image is-4by3">
<img class="modal-trigger" data-target="project-5-modal" src="img/project-5-cover.png">
</figure>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child notification">
<p class="title">Project title</p>
<figure class="image is-4by3">
<img class="modal-trigger" data-target="project-6-modal" src="img/project-6-cover.png">
</figure>
</article>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<h1 class="title">Education / Training</h1>
<hr />
<div class="card">
<div class="card-content">
<div class="content">
<p class="title is-4">School Name</p>
<p class="subtitle is-6">Program/Course - <time datetime="2016-9">September 2016</time> - <time
datetime="2019-9">Sepemter 2019</time></p>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus nec iaculis mauris.
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
</div>
</div>
<div class="card card-gap">
<div class="card-content">
<div class="content">
<p class="title is-4">School Name</p>
<p class="subtitle is-6">Program/Course - <time datetime="2015-9">September 2014</time> - <time
datetime="2015-9">Sepemter 2015</time></p>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus nec iaculis mauris.
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<h1 class="title">Contact</h1>
<hr />
</div>
</section>
<!-- Modals -->
<div id="project-1-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-1-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-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>
<footer class="footer">
<div class="content has-text-centered">
<p>
<a href="https://github.com/mmacneil/devfolio" target="_blank" class="icon has-text-primary">
<i class="fab fa-github"></i> devfolio</a>
</p>
</div>
</footer>
<script src="js/bundle.js"></script>
</body>
</html>