-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
119 lines (109 loc) · 6.67 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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Damion&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Caveat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Jason McGrath Portfolio</title>
</head>
<body>
<section id="drop" id="drop-close">
<video autoplay loop muted plays-inline class="back-video">
<source src="Videos/drop-98064.mp4">
</video>
<h1 id="jm-header" class="animate__animated animate__rubberBand">Jason McGrath</h1>
<div id = p-drop>
<H1 id="welcome">I'm Glad You're Here</H1>
<Button onclick="toggleEntryDrop" id="drop-button">Come On In</Button>
</div>
</section>
<nav class="side-nav">
<p id="initials" class="animate__animated animate__pulse animate__infinite">JM</p>
<ul class="nav-links">
<li><a href="#"><p>About Me</p></a></li>
<li><a onclick="toggleEntryShow" id= "rezButton" href="#"><p>Resume</p></a></li>
<li><a href="#" id="proj-button"><p>Projects<span class="material-symbols-outlined">
chevron_right
</span></p></a>
<ul class = "proj">
<li><a href="https://re-furred.com/" target="_blank"><p>Refurred</p></a></li>
<li><a href="https://brewvine.onrender.com/" target="_blank"><p>BrewVine</p></a></li>
<li><a href="https://funko-collector.herokuapp.com/" target="_blank"><p>Funko Collector</p></a></li>
<li><a href="https://dontforget.herokuapp.com/" target="_blank"><p>Don'tForget</p></a></li>
</ul>
</li>
<li><a href="#tech-skills"><p>Technical Skills</p></a></li>
<li><a id="links-contacts" href="#links"><p>Links & Contacts</p></a></li>
<div class="active"></div>
</ul>
</nav>
</div>
<main>
<video autoplay loop muted plays-inline class="raindrops">
<source src="Videos/Concrete Raindrops.mp4">
</video>
<div class="main-sections">
<h2 class="main-headings animate__animated animate__bounce animate__delay-2s" >Who am I</h2>
<p class="section-text">An emerging software engineer with extensive adjacent professional experience in technical development environments.<br><br>My eternal aim is to seek a perfect synchronicity between optimal efficency and an unparralled user experience<br><br>My core skill set is my ability to interface with decision makers, decipher needs and requirements, and be able to lead that project from ideation to creation with results that transcend expectations.
<h2 class="main-headings animate__animated animate__bounce animate__delay-2s">How did I get here</h2>
<div class="section-text">I have spent the last decade hiring software engineers for Fortune 500 tech companies.
While I greatly enjoyed building out high performing tech teams with top of class individuals that embodied both the technical and cultural requirements of what the organization was seeking, I felt that I had more to give...<br><br>
Truthfully, I want to BUILD!<br>
I want to DESIGN and ENGINEER the next ground-breaking applications. <br>
So I decided to change-course and do something that I didn't just like, but LOVED.<br><br>
In June, I completed an immersive full-stack software engineering boot camp. <br>
Currently, I am continuing to take classes to ruther develop my skills. I code every day.<br>
Additionally, I am also doing work for <a target="_blank" id="hfla" href="https://www.hackforla.org/">Hack4LA</a>, a volunteer coding organization. <br>
I eagerly anticipate my first significant opportunity to come knocking.
<br><br> My journey is only just beginning. I am ENAMORED with seeing the concepts in my brain come alive at my fingertips and on a screen. <br><br>I'm very much looking forward to all the new challenges that lay ahead.<br><br>LET'S BUILD SOMETHING RAD!
</div>
</div>
<div class="portrait">
<img src="Images/JM-Portrait 2021.JPG" alt="JM pic" id="jm-pic">
</div>
<div id= "resume" id="resume-show" class="main-sections">
<!-- <h2 class="main-headings">Resume</h2> -->
<button id="close-rez">Close Resume</button>
<button type="submit" id="close-rez" onclick="window.open('Jason McGrath 9-23 Resume SE.pdf')">Download Resume</button>
<div class="resume">
<img class="rez-pages"src="Images/Resume-Page-1.PNG" alt="">
<img class="rez-pages"src="Images/Resume-Page-2.PNG" alt="">
</div>
</div>
<div class="main-sections">
<h2 id="tech-skills" class="main-headings">Technical Skills</h2>
<img id ="tech-logos" src="Images/mern_logo.png" alt="">
<img id ="tech-logos" src="Images/python-django.png" alt="">
<img id="tech-logos" src="Images/FE Logos.png" alt="">
<img id ="tech-logos" src="Images/mongo_pg.jpg" alt="">
</div>
<div class="main-sections">
<h2 class="main-headings">Contacts</h2>
<ul id="links">
<li><a href="https://www.linkedin.com/in/jason-mcgrath-9528a884/" target="_blank"><h4>LinkedIn</h4></a></li>
<li><a href="https://github.com/jnomad21" target="_blank"><h4>GitHub</h4></a></li>
<li><a onclick="toggleOpenContacts" id= "open-contacts" href="#contacts"><h4>Email/Phone</h4></a></li>
</ul>
</div>
<div class="main-sections">
<div id="contacts">
<h4>Email:<br><a href="mailto: [email protected]" target="_blank">[email protected]</a><br><br>Phone:<br>949-264-2682</h4>
</div>
</div>
</main>
<script src="app.js"></script>
</body>
</html>