devfolio/index.html
2019-08-20 00:17:18 -03:00

224 lines
7.2 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>My custom Bulma website</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 id="navbarBasicExample" class="navbar-menu">
<div class="navbar-end">
<div class="navbar-item">
<a href="https://github.com/mmacneil" class="icon is-large">
<i class="fab fa-2x fa-github"></i>
</a>
</div>
<div class="navbar-item">
<a href="https://fullstackmark.com" class="icon is-large">
<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 Developer, Halifax, NS
</h2>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<h1 class="title">About Me</h1>
<hr />
<p>I'm a senior developer whose spent the last 14+ years obsessively
helping deliver .NET-based web, mobile and cloud solutions across a variety of industries and
clients from small startups to large enterprises like Macy's and McDonald's.</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> 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">
<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> 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>
</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</p>
<p class="subtitle">Client</p>
<figure class="image is-4by3">
<img src="img/project-1-cover.png">
</figure>
</article>
</div>
<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">
<img src="img/project-2-cover.png">
</figure>
</article>
</div>
<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">
<img 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</p>
<p class="subtitle">Client</p>
<figure class="image is-4by3">
<img src="img/project-4-cover.png">
</figure>
</article>
</div>
<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">
<img src="img/project-5-cover.png">
</figure>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child notification">
<p class="title">Middle tile</p>
<p class="subtitle">With an image</p>
<figure class="image is-4by3">
<img src="https://bulma.io/images/placeholders/640x480.png">
</figure>
</article>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- <h1 class="title">
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>
</div> -->
</body>
</html>