-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
122 lines (122 loc) · 7.7 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--Bootstrap css link-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- styles.css link -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="project.css">
<link rel="stylesheet" href="aboutMe.css">
<link rel="stylesheet" href="contact.css">
</head>
<body>
<!--begin navbar code-->
<nav class="navbar sticky-top navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#aboutMe">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" style="display: none;">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<!--end of navbar code-->
<!-- start portfolio pages -->
<div class="sections" id="aboutMe">
<h2></h2>
<main class="aboutMeContent">
<div id="hello">
<h3 style="color: dimgrey;"> Hello World!</h3>
<p class="bio">
<a style="color: burlywood;">Hello!</a>
Welcome to my portfolio! My name is Stephan Drawe and I am a driven full stack developer in the making. With a background in the food and beverage industry, I am excited to transition into the world of tech and bring my problem-solving skills to the table. My focus is on front-end development using JavaScript, CSS, and HTML. In this portfolio, you will find a collection of projects that showcase my abilities and passion for development. To see more of my work, please check out my GitHub and LinkedIn profiles linked below. If you would like to contact me, please feel free to email me at [email protected] or use the form provided on this page. Thank you for taking the time to visit my portfolio!
</p>
</div>
<!-- <div id="picture">My face</div> -->
<img src="profilePic.jpg" style="height: 425px; width: 425px;" class="img-thumbnail" class="rounded float-end" alt="my picture">
</main>
</div>
<div class="sections" id="projects">
<h2></h2>
<main class="projectContent">
<!-- <div id="s1">PacMen-Exercise</div> -->
<div class="card" style="width: 1fr; height: 1fr;">
<img src="Pacmen.jpeg" class="card-img-top" alt="PacMen Project Picture">
<div class="card-body">
<h5 class="card-title">PacMen-Exercise</h5>
<p class="card-text">This is a modified version of the 'PacMen-Factory' project assignment through MIT coding bootcamp. This project creates images of PacMan at different locations in the browser upon clicking the 'Add PacMan' button. After clicking the 'Start Game' button, the program moves all of the PacMen created all at once at different intervals and bounces the PacMen off the borders of the browser based on the window size.</p>
<a href="https://github.com/StephanDrawe/PacMen-Exercise" class="btn btn-outline-secondary">Go To Project</a>
</div>
</div>
<!-- <div id="s2">Eye-Exercise</div> -->
<div class="card" style="width: 1fr; height: 1fr;">
<img src="eyes.jpeg" class="card-img-top" alt="Eye-Exercise">
<div class="card-body">
<h5 class="card-title">Eye-Exercise</h5>
<p class="card-text">This is the 'Eyes Exercise' project assignment through MIT coding bootcamp. This project tracks the movement of the mouse with images of two eyes created using CSS. The purpose of this project is to learn to code DOM manipulation through JavaScript, CSS, and HTML with external inputs, such as the mouse movement.</p>
<a href="https://github.com/StephanDrawe/Eye-Exercise" class="btn btn-outline-secondary">Go To Project</a>
</div>
</div>
<!-- <div id="s3">Real-Time-Bus-Tracker</div> -->
<div class="card" style="width: 1fr; height: 1fr;">
<img src="Real Time Tracker.jpeg" class="card-img-top" alt="Real-Time-Bus-Tracker">
<div class="card-body">
<h5 class="card-title">Real-Time-Bus-Tracker</h5>
<p class="card-text">This is a modified version of the 'Real Time Bus Tracker' project assignment through MIT coding bootcamp. The original project tracked the bus route of a public line from the MIT campus through each twelve stops on its way to the Harvard campus. The tracker made use of geocoding and navigation APIs and SKDs through mapbox.</p>
<a href="https://github.com/StephanDrawe/Real-Time-Bus-Tracker" class="btn btn-outline-secondary">Go To Project</a>
</div>
</div>
</main>
</div>
<div class="sections" id="contact">
<h2>Contact</h2>
<!-- start bootstrap contact form -->
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address:</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="[email protected]">
</div>
<!-- don't need this anymore <div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Your email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">aaa</div>
</div> -->
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Message:</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="10"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<!-- start code for contact buttons -->
<a class="btn btn-outline-secondary" href="https://www.linkedin.com/in/stephan-drawe/" role="button">Linkedin</a>
<a class="btn btn-outline-secondary" href="https://github.com/StephanDrawe?tab=repositories" role="button">Github</a>
<button type="button" class="btn btn-outline-success">Just A Button</button>
</form>
<!-- end code for contact buttons -->
<!-- end bootstrap contact form -->
</div>
<!--bootstrap js link-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>