mirror of
https://github.com/its-michaelroy/Simple_Portfolio.git
synced 2026-06-03 23:00:43 +00:00
First push after making changes to template. Planning to add dark mode switch and decide what to do with onclick of project images.
This commit is contained in:
its-michaelroy
608
index.html
Normal file
608
index.html
Normal file
@@ -0,0 +1,608 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Strata by HTML5 UP
|
||||
html5up.net | @ajlkn
|
||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>Michael Roy's Portfolio</title>
|
||||
<!--Favicon added below-->
|
||||
<link rel="icon" href="./images/photo.png" type="image/png" />
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, user-scalable=no"
|
||||
/>
|
||||
<link rel="stylesheet" href="assets/css/main.css" />
|
||||
</head>
|
||||
<body class="is-preload">
|
||||
<!-- Header -->
|
||||
<header id="header">
|
||||
<div class="inner">
|
||||
<a
|
||||
href="https://github.com/its-michaelroy"
|
||||
class="image avatar"
|
||||
target="_blank"
|
||||
><img src="images/avatar.png" alt="Michael Roy"
|
||||
/></a>
|
||||
<h1>
|
||||
<strong>I am Michael Roy</strong>, a dedicated digital craftsman
|
||||
<br />
|
||||
and aspiring AI engineer.<br />
|
||||
</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main -->
|
||||
<div id="main">
|
||||
<!-- One -->
|
||||
<section id="one">
|
||||
<header class="major">
|
||||
<h2>About Me<br /></h2>
|
||||
</header>
|
||||
<p>
|
||||
From a young age, I've always been fascinated by how things work,
|
||||
constantly taking apart and reassembling gadgets to understand their
|
||||
inner workings. This curiosity naturally led me to a career in
|
||||
technology, where I could indulge my natural curiousity for
|
||||
problem-solving and innovation. My journey took a significant turn
|
||||
when I was deployed to Afghanistan, where I served as a military
|
||||
police officer, working closely with the Afghan Army. This experience
|
||||
instilled in me a strong work ethic and discipline, and it was during
|
||||
this time I was encouraged by special ops personnel to pursue IT. This
|
||||
advice set me on a path that led to critical roles in data center
|
||||
management and network optimization for organizations like Oracle.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
My career took another pivotal step during my time at UPMC
|
||||
CancerCenters, where I realized that technology could have a profound
|
||||
impact on people's lives. Although I wasn't directly helping patients,
|
||||
ensuring that the doctors and nurses had reliable technology
|
||||
reaffirmed my belief that the tech field is where I could do the most
|
||||
good for humanity. Recently, I graduated from Code Platoon's
|
||||
Full-Stack Software Engineering program and am currently participating
|
||||
in their part-time DevOps & Cloud Engineering course. My passion for
|
||||
technology extends to AI, machine learning, and innovative solutions
|
||||
in healthcare. I'm excited to continue expanding my expertise and
|
||||
collaborating with like-minded professionals. Whether you're looking
|
||||
to discuss projects, career opportunities, or simply exchange
|
||||
knowledge in the tech space, I'd love to connect!
|
||||
</p>
|
||||
<ul class="actions">
|
||||
<li>
|
||||
<a href="https://mrcodewizard.com" class="button" target="_blank"
|
||||
>Learn More</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- Two -->
|
||||
<section id="two">
|
||||
<h2>Recent Work</h2>
|
||||
<div class="row">
|
||||
<article class="col-6 col-12-xsmall work-item">
|
||||
<a href="images/fulls/01.jpg" class="image fit thumb"
|
||||
><img src="images/DeepImpact.jpeg" alt="Michael Roy"
|
||||
/></a>
|
||||
<h3>Deep Impact (2024 Hackathon Winner!)</h3>
|
||||
<p>
|
||||
Web application designed to provide users with educational
|
||||
insights into the potential dangers of asteroid impacts Built
|
||||
using Python, JavaScript ES6, Django, React and hosted on Render
|
||||
with NASA Sentry API
|
||||
</p>
|
||||
</article>
|
||||
<article class="col-6 col-12-xsmall work-item">
|
||||
<a href="images/fulls/02.jpg" class="image fit thumb"
|
||||
><img src="images/platoon-console-v3.svg" alt="Michael Roy"
|
||||
/></a>
|
||||
<h3>Platoon Console</h3>
|
||||
<p>
|
||||
Web application dashboard for managing Code Platoon cohorts,
|
||||
offering centralized access to course materials Built using
|
||||
Python, JavaScript ES6, Django, React, and a PostgreSQL database
|
||||
with Google API
|
||||
</p>
|
||||
</article>
|
||||
<article class="col-6 col-12-xsmall work-item">
|
||||
<a href="images/fulls/03.jpg" class="image fit thumb"
|
||||
><img src="images/paybridge_logo.jpg" alt="Michael Roy"
|
||||
/></a>
|
||||
<h3>PayBridge</h3>
|
||||
<p>
|
||||
A decentralized payroll platform utilizing Rootstock, that enables
|
||||
businesses to seamlessly make monthly payments to their employees.
|
||||
With PayBridge, companies can manage their payroll more
|
||||
efficiently, while employees enjoy the convenience of accessing
|
||||
their salaries through a user-friendly interface.Built using
|
||||
Javascript, Python, React, Solidity, Next, Tailwind, and CSS.
|
||||
Using Wagmi, and Open AI API.
|
||||
</p>
|
||||
</article>
|
||||
<article class="col-6 col-12-xsmall work-item">
|
||||
<a href="images/fulls/04.jpg" class="image fit thumb"
|
||||
><img src="images/validation.png" alt="Michael Roy"
|
||||
/></a>
|
||||
<h3>Validation Station</h3>
|
||||
<p>
|
||||
Application created for businesses as a way to create a databse of
|
||||
valid contact information and for individual use as a way to avoid
|
||||
spam via email and phone calls. Future use will include a way to
|
||||
import and export csvs of data for blacklist and whitelist. Built
|
||||
using Python, JavaScript ES6, Django, React, and a PostgreSQL
|
||||
database for storing user Login, Email, and Phone information.
|
||||
Utilizes API for email and phone number validation from
|
||||
<a href="https://www.bigdatacloud.com" target="_blank"
|
||||
>Big Data Cloud</a
|
||||
>
|
||||
</p>
|
||||
</article>
|
||||
<article class="col-6 col-12-xsmall work-item">
|
||||
<a href="images/fulls/05.jpg" class="image fit thumb"
|
||||
><img src="images/website.png" alt="Michael Roy"
|
||||
/></a>
|
||||
<h3>Minimal Portfolio</h3>
|
||||
<p>
|
||||
Created to showcase my projects and experience in a minimalistic
|
||||
format.Built with Javascript, React, Tailwind, Vite, CSS
|
||||
</p>
|
||||
</article>
|
||||
<article class="col-6 col-12-xsmall work-item">
|
||||
<a href="images/fulls/06.jpg" class="image fit thumb"
|
||||
><img src="images/Shufflepuck.png" alt="Michael Roy"
|
||||
/></a>
|
||||
<h3>Shuffle Puck</h3>
|
||||
<p>
|
||||
Web application game created as capstone project for users to play
|
||||
a game of shufflepuck against an AI apponet. Built using
|
||||
JavaScript ES6, PHP, CSS, and SVG
|
||||
</p>
|
||||
</article>
|
||||
<article class="col-6 col-12-xsmall work-item">
|
||||
<a href="images/fulls/06.jpg" class="image fit thumb"
|
||||
><img src="images/npx_Business_card_square.png" alt="Michael Roy"
|
||||
/></a>
|
||||
<h3>NPM Digital Business Card</h3>
|
||||
<p>
|
||||
NPM Package created as an interesting way for other tech
|
||||
enthusiasts and developers to reach out to each other and network.
|
||||
Built with JavaScript, Node.js, and various libraries including
|
||||
Megajs for file operations, Chalk fir styling, and more.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
<!-- <ul class="actions">
|
||||
<li><a href="#" class="button">Full Portfolio</a></li>
|
||||
</ul> -->
|
||||
</section>
|
||||
|
||||
<!-- Three -->
|
||||
<section id="three">
|
||||
<h2>Get In Touch</h2>
|
||||
<p>
|
||||
If you're passionate about software engineering, DevOps, or innovative
|
||||
AI projects, let's connect! With over a decade of experience in IT and
|
||||
recent ventures into full-stack development and cloud engineering, I'm
|
||||
eager to collaborate, share insights, and explore new opportunities.
|
||||
Reach out to discuss projects, career opportunities, or simply to
|
||||
exchange knowledge in the tech space.
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col-8 col-12-small">
|
||||
<form method="post" action="#">
|
||||
<div class="row gtr-uniform gtr-50">
|
||||
<div class="col-6 col-12-xsmall">
|
||||
<input type="text" name="name" id="name" placeholder="Name" />
|
||||
</div>
|
||||
<div class="col-6 col-12-xsmall">
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
id="email"
|
||||
placeholder="Email"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<textarea
|
||||
name="message"
|
||||
id="message"
|
||||
placeholder="Message"
|
||||
rows="4"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<ul class="actions">
|
||||
<li><input type="submit" value="Send Message" /></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Four -->
|
||||
<!--
|
||||
<section id="four">
|
||||
<h2>Elements</h2>
|
||||
|
||||
<section>
|
||||
<h4>Text</h4>
|
||||
<p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.
|
||||
This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
|
||||
This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>. Finally, <a href="#">this is a link</a>.</p>
|
||||
<hr />
|
||||
<header>
|
||||
<h4>Heading with a Subtitle</h4>
|
||||
<p>Lorem ipsum dolor sit amet nullam id egestas urna aliquam</p>
|
||||
</header>
|
||||
<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
|
||||
<header>
|
||||
<h5>Heading with a Subtitle</h5>
|
||||
<p>Lorem ipsum dolor sit amet nullam id egestas urna aliquam</p>
|
||||
</header>
|
||||
<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
|
||||
<hr />
|
||||
<h2>Heading Level 2</h2>
|
||||
<h3>Heading Level 3</h3>
|
||||
<h4>Heading Level 4</h4>
|
||||
<h5>Heading Level 5</h5>
|
||||
<h6>Heading Level 6</h6>
|
||||
<hr />
|
||||
<h5>Blockquote</h5>
|
||||
<blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.</blockquote>
|
||||
<h5>Preformatted</h5>
|
||||
<pre><code>i = 0;
|
||||
|
||||
while (!deck.isInOrder()) {
|
||||
print 'Iteration ' + i;
|
||||
deck.shuffle();
|
||||
i++;
|
||||
}
|
||||
|
||||
print 'It took ' + i + ' iterations to sort the deck.';</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Lists</h4>
|
||||
<div class="row">
|
||||
<div class="col-6 col-12-xsmall">
|
||||
<h5>Unordered</h5>
|
||||
<ul>
|
||||
<li>Dolor pulvinar etiam magna etiam.</li>
|
||||
<li>Sagittis adipiscing lorem eleifend.</li>
|
||||
<li>Felis enim feugiat dolore viverra.</li>
|
||||
</ul>
|
||||
<h5>Alternate</h5>
|
||||
<ul class="alt">
|
||||
<li>Dolor pulvinar etiam magna etiam.</li>
|
||||
<li>Sagittis adipiscing lorem eleifend.</li>
|
||||
<li>Felis enim feugiat dolore viverra.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-12-xsmall">
|
||||
<h5>Ordered</h5>
|
||||
<ol>
|
||||
<li>Dolor pulvinar etiam magna etiam.</li>
|
||||
<li>Etiam vel felis at lorem sed viverra.</li>
|
||||
<li>Felis enim feugiat dolore viverra.</li>
|
||||
<li>Dolor pulvinar etiam magna etiam.</li>
|
||||
<li>Etiam vel felis at lorem sed viverra.</li>
|
||||
<li>Felis enim feugiat dolore viverra.</li>
|
||||
</ol>
|
||||
<h5>Icons</h5>
|
||||
<ul class="icons">
|
||||
<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-github"><span class="label">Github</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-dribbble"><span class="label">Dribbble</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-tumblr"><span class="label">Tumblr</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<h5>Actions</h5>
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button primary">Default</a></li>
|
||||
<li><a href="#" class="button">Default</a></li>
|
||||
</ul>
|
||||
<ul class="actions small">
|
||||
<li><a href="#" class="button primary small">Small</a></li>
|
||||
<li><a href="#" class="button small">Small</a></li>
|
||||
</ul>
|
||||
<div class="row">
|
||||
<div class="col-6 col-12-small">
|
||||
<ul class="actions stacked">
|
||||
<li><a href="#" class="button primary">Default</a></li>
|
||||
<li><a href="#" class="button">Default</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-12-small">
|
||||
<ul class="actions stacked">
|
||||
<li><a href="#" class="button primary small">Small</a></li>
|
||||
<li><a href="#" class="button small">Small</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-12-small">
|
||||
<ul class="actions stacked">
|
||||
<li><a href="#" class="button primary fit">Default</a></li>
|
||||
<li><a href="#" class="button fit">Default</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-12-small">
|
||||
<ul class="actions stacked">
|
||||
<li><a href="#" class="button primary small fit">Small</a></li>
|
||||
<li><a href="#" class="button small fit">Small</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Table</h4>
|
||||
<h5>Default</h5>
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
<th>Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Item One</td>
|
||||
<td>Ante turpis integer aliquet porttitor.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Two</td>
|
||||
<td>Vis ac commodo adipiscing arcu aliquet.</td>
|
||||
<td>19.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Three</td>
|
||||
<td> Morbi faucibus arcu accumsan lorem.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Four</td>
|
||||
<td>Vitae integer tempus condimentum.</td>
|
||||
<td>19.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Five</td>
|
||||
<td>Ante turpis integer aliquet porttitor.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="2"></td>
|
||||
<td>100.00</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h5>Alternate</h5>
|
||||
<div class="table-wrapper">
|
||||
<table class="alt">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
<th>Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Item One</td>
|
||||
<td>Ante turpis integer aliquet porttitor.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Two</td>
|
||||
<td>Vis ac commodo adipiscing arcu aliquet.</td>
|
||||
<td>19.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Three</td>
|
||||
<td> Morbi faucibus arcu accumsan lorem.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Four</td>
|
||||
<td>Vitae integer tempus condimentum.</td>
|
||||
<td>19.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Five</td>
|
||||
<td>Ante turpis integer aliquet porttitor.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="2"></td>
|
||||
<td>100.00</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Buttons</h4>
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button primary">Primary</a></li>
|
||||
<li><a href="#" class="button">Default</a></li>
|
||||
</ul>
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button large">Large</a></li>
|
||||
<li><a href="#" class="button">Default</a></li>
|
||||
<li><a href="#" class="button small">Small</a></li>
|
||||
</ul>
|
||||
<ul class="actions fit">
|
||||
<li><a href="#" class="button primary fit">Fit</a></li>
|
||||
<li><a href="#" class="button fit">Fit</a></li>
|
||||
</ul>
|
||||
<ul class="actions fit small">
|
||||
<li><a href="#" class="button primary fit small">Fit + Small</a></li>
|
||||
<li><a href="#" class="button fit small">Fit + Small</a></li>
|
||||
</ul>
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button primary icon solid fa-download">Icon</a></li>
|
||||
<li><a href="#" class="button icon solid fa-download">Icon</a></li>
|
||||
</ul>
|
||||
<ul class="actions">
|
||||
<li><span class="button primary disabled">Primary</span></li>
|
||||
<li><span class="button disabled">Default</span></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Form</h4>
|
||||
<form method="post" action="#">
|
||||
<div class="row gtr-uniform gtr-50">
|
||||
<div class="col-6 col-12-xsmall">
|
||||
<input type="text" name="demo-name" id="demo-name" value="" placeholder="Name" />
|
||||
</div>
|
||||
<div class="col-6 col-12-xsmall">
|
||||
<input type="email" name="demo-email" id="demo-email" value="" placeholder="Email" />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<select name="demo-category" id="demo-category">
|
||||
<option value="">- Category -</option>
|
||||
<option value="1">Manufacturing</option>
|
||||
<option value="1">Shipping</option>
|
||||
<option value="1">Administration</option>
|
||||
<option value="1">Human Resources</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-4 col-12-small">
|
||||
<input type="radio" id="demo-priority-low" name="demo-priority" checked>
|
||||
<label for="demo-priority-low">Low Priority</label>
|
||||
</div>
|
||||
<div class="col-4 col-12-small">
|
||||
<input type="radio" id="demo-priority-normal" name="demo-priority">
|
||||
<label for="demo-priority-normal">Normal Priority</label>
|
||||
</div>
|
||||
<div class="col-4 col-12-small">
|
||||
<input type="radio" id="demo-priority-high" name="demo-priority">
|
||||
<label for="demo-priority-high">High Priority</label>
|
||||
</div>
|
||||
<div class="col-6 col-12-small">
|
||||
<input type="checkbox" id="demo-copy" name="demo-copy">
|
||||
<label for="demo-copy">Email me a copy of this message</label>
|
||||
</div>
|
||||
<div class="col-6 col-12-small">
|
||||
<input type="checkbox" id="demo-human" name="demo-human" checked>
|
||||
<label for="demo-human">I am a human and not a robot</label>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<textarea name="demo-message" id="demo-message" placeholder="Enter your message" rows="6"></textarea>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<ul class="actions">
|
||||
<li><input type="submit" value="Send Message" class="primary" /></li>
|
||||
<li><input type="reset" value="Reset" /></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Image</h4>
|
||||
<h5>Fit</h5>
|
||||
<div class="box alt">
|
||||
<div class="row gtr-50 gtr-uniform">
|
||||
<div class="col-12"><span class="image fit"><img src="images/fulls/05.jpg" alt="" /></span></div>
|
||||
<div class="col-4"><span class="image fit"><img src="images/thumbs/01.jpg" alt="" /></span></div>
|
||||
<div class="col-4"><span class="image fit"><img src="images/thumbs/02.jpg" alt="" /></span></div>
|
||||
<div class="col-4"><span class="image fit"><img src="images/thumbs/03.jpg" alt="" /></span></div>
|
||||
<div class="col-4"><span class="image fit"><img src="images/thumbs/04.jpg" alt="" /></span></div>
|
||||
<div class="col-4"><span class="image fit"><img src="images/thumbs/05.jpg" alt="" /></span></div>
|
||||
<div class="col-4"><span class="image fit"><img src="images/thumbs/06.jpg" alt="" /></span></div>
|
||||
<div class="col-4"><span class="image fit"><img src="images/thumbs/03.jpg" alt="" /></span></div>
|
||||
<div class="col-4"><span class="image fit"><img src="images/thumbs/02.jpg" alt="" /></span></div>
|
||||
<div class="col-4"><span class="image fit"><img src="images/thumbs/01.jpg" alt="" /></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<h5>Left & Right</h5>
|
||||
<p><span class="image left"><img src="images/avatar.jpg" alt="" /></span>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.</p>
|
||||
<p><span class="image right"><img src="images/avatar.jpg" alt="" /></span>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.</p>
|
||||
</section>
|
||||
|
||||
</section>
|
||||
--></div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer id="footer">
|
||||
<div class="inner">
|
||||
<ul class="icons">
|
||||
<li>
|
||||
<a
|
||||
href="https://www.linkedin.com/in/michaelroy91"
|
||||
class="icon brands fa-linkedin"
|
||||
target="_blank"
|
||||
title="Visit my LinkedIn"
|
||||
><span class="label">Linkedin</span></a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/its-michaelroy"
|
||||
class="icon brands fa-github"
|
||||
target="_blank"
|
||||
title="Visit my Github"
|
||||
><span class="label">Github</span></a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://mrcodewizard.com/"
|
||||
class="icon brands fa-fort-awesome"
|
||||
target="_blank"
|
||||
title="Visit my Portfolio"
|
||||
><span class="label">Portfolio</span></a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="mailto:michael.roy@mrcodewizard.com"
|
||||
class="icon solid fa-envelope"
|
||||
title="Send an Email"
|
||||
><span class="label">Email</span></a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://buymeacoffee.com/michaelroy"
|
||||
class="icon solid fa-coffee"
|
||||
target="_blank"
|
||||
title="Buy this guy some Jo'"
|
||||
><span class="label">Coffee</span></a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="copyright">
|
||||
<li id="year">© Michael Roy.</li>
|
||||
<li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="assets/js/jquery.min.js"></script>
|
||||
<script src="assets/js/jquery.poptrox.min.js"></script>
|
||||
<script src="assets/js/browser.min.js"></script>
|
||||
<script src="assets/js/breakpoints.min.js"></script>
|
||||
<script src="assets/js/util.js"></script>
|
||||
<script src="assets/js/main.js"></script>
|
||||
<script src="assets/js/year.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user