-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (130 loc) · 5.87 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Matthew Macombers Portfolio</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" type="text/css"/>
<!-- Standard Normalize css file from max uptime source. -->
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
<!-- Specific web fonts used in site, pulled from google fonts. -->
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body id="body">
<!-- Header, specifically for top banner space, used for Logo, Name, and/or navigation links. -->
<header>
<h1>Matthew Macomber</h1>
<ul>
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#portfolio">Portfolio</a>
</li>
<li>
<a href="#services">Services</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</header>
<main>
<!-- Button to toggle a font specifically for people with dyslexia type reading problems. -->
<div id="dm">
<button id="dmButton" onclick="dyslexiaMode()" style="font-family: opendyslexic;">Dyslexia View - Off</button>
</div>
<div id="home">
<img src="images/me.jpg" height="300" width="225" id="home-image" alt="Picture of Matthew Macomber.">
<div id="home-text">
<p>Welcome to my Portfolio.</p>
<p>I'm Matthew and I am just a guy developing things.</p>
<p>This is all taking place online from my home in Washington State.</p>
<p>I take interesting and obscure ideas and see what they can become.</p>
</div>
</div>
<hr>
<div id="about">
<h2>About Me</h2>
<p>Hello, my name is Matthew Macomber.</p>
<p>I am looking forward to working on small and large projects with others and create some amazing websites, software, and games.</p>
<p>Here are several of my interests and hobbies:</p>
<ol>
<li>Custom Built Computers</li>
<li>Football and Soccer</li>
<li>Game Design - Boards, Cards, and Digital</li>
<li>Hiking and Long Walks</li>
<li>Enjoying <button id ="data" onclick="showHide('secret')">secret</button> codes</li>
</ol>
<p>I offer programming skills as a service to any and all projects.</p>
</div>
<div id="secret"></div>
<hr>
<div id="portfolio">
<h2>Portfolio</h2>
<p>(Click image to hide text)</p>
<ul id="projects">
<!-- Projects in portfolio are dynamically added via js. -->
</ul>
</div>
<hr>
<!-- Services section -->
<div id="services">
<h2>Services</h2>
<div>
<p>I offer the following services:</p>
<ol>
<li>Code Debugging</li>
<li>Remote Computer Support</li>
<li>Backend Programming</li>
<li>App Development</li>
</ol>
</div>
</div>
<hr>
<div id="contact">
<!-- Basic Contact Form -->
<h2>Contact</h2>
<div>
<div id="contact-form">
<form action="https://formspree.io/xvowbyer" method="POST">
<fieldset>
<legend>Contact Form</legend>
<div>
<label for="user-name">Your name:</label>
<input id="user-name" type="text" name="name" placeholder="Bob Adams">
</div>
<div>
<label for="email">Your email:</label>
<input id="email" type="email" name="_replyto" placeholder="bobadams@email.com">
</div>
<div>
<label for="message">Message:</label>
<textarea id="message" name="message" placeholder="Hello, I looking for..."></textarea>
</div>
<div>
<input type="submit" value="Send">
</div>
</fieldset>
</form>
</div>
<div id="contact-info">
<div>
<p>Email: <a href="mailto:code1man@gmail.com">code1man@gmail.com</a></p>
<p>Github: <a href="https://github.com/MatthewMacomber">github.com/MatthewMacomber</a></p>
<p>Linkedin: <a href="https://www.linkedin.com/in/matthew-j-macomber/">linkedin.com/in/matthew-j-macomber/</a></p>
</div>
</div>
</div>
</div>
<hr>
</main>
<footer>
<p>Copyright: Matthew J Macomber</p>
</footer>
<script src="script.js"></script>
</body>
</html>