-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
146 lines (145 loc) · 7.85 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!doctype html>
<html lang="en">
<head>
<title>Michael Kelly Media</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- CSS -->
<link rel="stylesheet" href="./assets/css/style.css" type="text/css" >
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/73f6284828.js" crossorigin="anonymous"></script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Work+Sans:ital,wght@0,200;0,700;0,900;1,400&display=swap" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html">Michael Kelly Media</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="fa fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="collapsibleNavId">
<ul class="nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">About<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-outline-secondary" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Home -->
<section class="home container mb-5">
<div class="row mt-5">
<div class="col-lg-6 mt-5 py-5 pl-5">
<img class="img-fluid head-shot" alt="Michael Kelly Head shot" src="./assets/img/mkm-profile-bw.jpg">
</div>
<div class="col-lg-6 my-auto">
<div class="about-content offset-lg-1 col-lg-10">
<h1 class="pb-3">My background is like an encyclopedia</h1>
<p class="pb-3">I enjoy designing and coding interactive web content, creating data-visualizations and maps, creative media. I have over ten years of experience working with Adobe Creative Cloud, HTML, CSS, and a variety of frameworks. My professional experience in marketing and design have been in higher education, retail, small business, membership services, and health and well-being industries. I support data-informed decision making, diversity-based collaboration and inclusion-focused strategic planning.</p>
<a href="portfolio.html" class="btn btn-lg btn-outline-secondary" role="button">Learn more</a>
<a href="contact.html" class="btn btn-lg btn-primary" role="button">Contact</a>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<section class="call-to-action py-5">
<div class="text-center py-5">
<h2>Experience</h2>
<div class="mx-auto heading-line"></div>
<p class="py-3">Every project is an opportunity to learn something new.</p>
<a href="portfolio.html" class="btn btn-lg btn-primary" role="button">View Work</a>
<a href="./assets/img/Michael_Kelly_Resume.pdf" class="btn btn-lg btn-primary" role="button" target="_blank">View Resume</a>
</div>
</section>
<!-- Services -->
<section class="services">
<div class="text-center py-5">
<h2 class="py-3">Services</h2>
<div class="mx-auto heading-line"></div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4 text-center py-5">
<i class="fa fa-laptop"></i>
<h4 class="py-3">Front End Dev</h4>
</div>
<div class="col-md-4 text-center py-5">
<i class="fa fa-code"></i>
<h4 class="py-3">HTML5/CSS/JavaScript</h4>
</div>
<div class="col-md-4 text-center py-5">
<i class="fas fa-box-open"></i>
<h4 class="py-3">Frameworks</h4>
</div>
<div class="col-md-4 text-center py-5">
<i class="fab fa-node"></i>
<h4 class="py-3">Libraries/APIs</h4>
</div>
<div class="col-md-4 text-center py-5">
<i class="fas fa-database"></i>
<h4 class="py-3">DB Storage</h4>
</div>
<div class="col-md-4 text-center py-5">
<i class="fab fa-adobe"></i>
<h4 class="py-3">Graphic Design</h4>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="text-center py-5">
<h2 class="py-3">Collaboration</h2>
<div class="mx-auto heading-line"></div>
</div>
<div class="row mb-2">
<div class="col-lg-8 offset-lg-2 text-center">
<p>Do you know of any fun projects or ideas for us to collaborate?
<br>
I welcome you to contact me if you would like to work with me.</p>
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
<div class=" text-center py-3 border-top text-muted">
<p>Made by Michael Kelly © 2020</p>
<div class="row">
<div class="copyright col-lg">
<a class="m-2 text-muted" href="https://www.linkedin.com/in/michael-kelly-media/"><i class="fa fa-linkedin"></i></a>
<a class="m-2 text-muted" href="https://github.com/kellymedia"><i class="fa fa-git"></i></a>
<a class="m-2 text-muted" href="https://twitter.com/kellydotmedia"><i class="fa fa-twitter"></i></a>
<a class="m-2 text-muted" href="https://stackoverflow.com/users/13296428/kellydotmedia"><i class="fa fa-stack-overflow"></i></a>
<a class="m-2 text-muted" href="https://www.instagram.com/kellyvisions/"><i class="fa fa-instagram"></i></a>
</div>
</div>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>