-
Notifications
You must be signed in to change notification settings - Fork 0
/
index_old.html
155 lines (134 loc) · 8.54 KB
/
index_old.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
147
148
149
150
151
152
153
154
155
<!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">
<!-- css normalizer -->
<link rel="stylesheet" href="./Normalize.css">
<!-- import bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="./styles.css">
<title>Matt Woodside's Portfolio Page</title>
<script src="https://kit.fontawesome.com/62dce8555e.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="nav">
<a href=#landing-view>Home</a>
<a href="#projects-cards">Projects</a>
<a href="#about-me">About Me!</a>
</div>
<!-- <div class="menu-btn">
<div class="menu-btn-burger"></div>
</div> -->
<div class="landing-view" id="landing-view">
<!-- TODO: add images pop-ins for pictures of MERN, Spring, and Flask logos -->
<h1>Hi, I'm Matt!</h1>
<div class="landing-h2-row-container">
<img src="./images/MERN-logo.png" class="languages-images" alt="MERN Logo image">
<h2>Web Developer, Gamer, Pilot...</h2>
<img src="./images/python_frameworks.jpg" class="languages-images" alt="python frameworks image">
</div>
<p>I love to learn new things and constantly improve! Between Coding and being a pilot, not a day goes by without learning something new. After a hard day's work, I like to hang out with my amazing community of friends and relax with good vibes and games!</p>
<div class="landing-links">
<a href="https://github.com/bmwoodside"><i class="fa-brands fa-github"></i></a>
<img src="./images/java_spring_logo.jpg" class="languages-images" alt="JAVA logo image">
<a href="https://www.linkedin.com/in/bryan-woodside/"><i class="fa-brands fa-linkedin"></i></a>
</div>
<p>Scroll below to see projects and more!</p>
</div>
<div class="projects-cards" id="projects-cards">
<h1>Here are some of my projects!</h1>
<div class="row row-cols-1 row-cols-md-3 g-4" style="margin-left: 5px; margin-right: 5px">
<div class="col">
<div class="card h-100">
<img src="./images/VeganRecipes.png" class="card-img-top" alt="Recipes image placeholder">
<div class="card-body">
<h5 class="card-title">Vegan Recipes</h5>
<p class="card-text"><strong>MERN</strong> Collaborative project intended to host Vegan Recipes for activity-minded vegans who are tracking their "macro" nutrient intakes.</p>
<div class="button-links">
<a href="https://github.com/bmwoodside/Vegan-Recipes-Project" class="btn btn-dark">GitHub</a>
<a href="http://3.92.197.69/" class="btn btn-success">View Site!</a>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="./images/checkmark.png" class="card-img-top" alt="Project #2 Placeholder Image">
<div class="card-body">
<h5 class="card-title">Facebook Clone</h5>
<p class="card-text"><em>Work In Progress!</em> Currently building a Facebook clone from scratch! This has been a HUGE undertaking so far, and is constantly challenging me to learn new things and to rethink the way that I planned to build this. The GitHub repo has plenty of issues and you can watch the code change in realtime - I don't plan to host it publicly until it's finished, though. </p>
<div class="button-links">
<a href="https://github.com/bmwoodside/FB-Clone" class="btn btn-dark">GitHub</a>
<!-- <a href="#" class="btn btn-success">View Site!</a> -->
<button class="btn btn-success" disabled>View Site!</button>
</div>
</div>
</div>
</div>
<!-- <div class="col">
<div class="card h-100">
<img src="./images/checkmark.png" class="card-img-top" alt="Project #3 Placeholder Image">
<div class="card-body">
<h5 class="card-title">Project #3 Placeholder</h5>
<p class="card-text">This is some placeholder text for the project that will belong here while I'm getting the page styled nice and pretty before deploying projects.</p>
<div class="button-links">
<a href="#" class="btn btn-dark">GitHub</a>
<a href="#" class="btn btn-success">View Site!</a>
</div>
</div>
</div>
</div> -->
</div>
<h3 class="placeholder-text">More projects coming soon!</h3>
</div>
<div class="about-me" id="about-me">
<h1>About Me!</h1>
<p>
First, here's the links to my GitHub and LinkedIn, plus my email address:
</p>
<div class="links-container">
<a href="https://github.com/bmwoodside"><i class="fa-brands fa-github"></i></a>
<a href="https://www.linkedin.com/in/bryan-woodside/"><i class="fa-brands fa-linkedin"></i></a>
<span id="about-me-email-container">Email: [email protected]</span>
</div>
<div class="section-container">
<div class="about-me-section" id="about-me-bootcamp">
<i class="fa-solid fa-user-ninja"></i>
<div id="bootcamp-description">
<h5 class="description-header">Completed a Coding Boot Camp!</h5>
<p>I completed Coding Dojo's rigorous 14-week boot camp consisting of instruction in MERN (MongoDB, Express, React, Node), Python with Flask, and Java with Spring/Spring Boot! Classes were full time, Monday through Friday, 9a-5p, after which I'd spend time collaborating with peers; all-in-all I found myself dedicating more than 70 hours a week to absorb all of these languages!</p>
</div>
</div>
<div class="about-me-section" id="about-me-code">
<i class="fa-solid fa-code"></i>
<div id="code-description">
<h5 class="description-header">Technologies I'm Experienced With!</h5>
<p>Thanks to Coding Dojo, I've had quite a range of exposure to various technologies! Here's an abbreviated list of some of the most popular things: JavaScript (ES6) with React, Express, and Node; Python with Flask; Java with Spring Boot and Spring Security; Front-end development with HTML5, CSS3, Bootstrap, and Material-UI; Databases like MongoDB, MySQL, and PostgreSQL; Concepts such as Object-Oriented Programming, MVC architecture, and RESTful API's; plus additional tools like deployments using AWS and git (GitHub)!</p>
</div>
</div>
<div class="about-me-section" id="about-me-personal">
<i class="fa-solid fa-plane-departure"></i>
<div id="personal-description">
<h5 class="description-header">Besides Coding!</h5>
<p>Outside of coding I have plenty of other hobbies that really help me unwind and grow in other ways! I always find myself hanging out and playing a few games with my friends, and when they're not around I'm usually spending some time staying up-to-date on maintaining my ability to play the piano, or (lately) trying to teach myself how to play the violin! Somehow, even through all of this, I somehow find time for my favorite hobby: flying airplanes (in a Cessna 172, usually!) to really get away and enjoy some stress-free time in the sky!</p>
</div>
</div>
</div>
</div>
<!-- <script>
const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
if (!menuOpen) {
menuBtn.classList.add('open');
menuOpen = true;
} else {
menuBtn.classList.remove('open');
menuOpen = false;
}
})
</script> -->
</body>
</html>