-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
207 lines (203 loc) · 10.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
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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!DOCTYPE html>
<html lang="en">
<!-- Created by Ted Gravlin -->
<head>
<!-- Import CSS -->
<link rel="stylesheet" href="css/main.css">
<!-- Scale page to display width -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Page title and favicons -->
<title> Ted Gravlin </title>
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png">
<!-- Meta -->
<meta name="title" property="og:title" content="Ted Gravlin" />
<meta name="description" property="og:description"
content="Hi, I'm Ted Gravlin. I'm a software developer with an interest in developing things that make people's lives easier and more fun." />
<meta name="keywords"
content="ted gravlin, gravlin, ted gravlin website, theodore gravlin, theodore gravlin website" />
<meta name="image" property="og:image" content="https://tedgravlin.tech/assets/images/ogimage.png" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://tedgravlin.tech/" />
</head>
<body>
<!-- Main -->
<main>
<!-- Header -->
<header>
<div class="header-card">
<img alt="Ted Gravlin" src="/assets/images/picture-of-me.jpg">
<h1>Hi, I'm <span class="header-name">Ted Gravlin</span></h1>
</div>
</header>
<!-- About/Projects Container -->
<div class="main-content">
<div class="card left">
<h3>About Me</h3>
<p class="about-text">Web Developer with an interest in developing products that make people's
lives easier and more
fun.
Bachelor's of Science in Computer Science from Eastern Michigan University.</p>
<div class="about-button-container">
<a target="_blank" href="https://github.com/tedgravlin/" class="button-background">
<div class="button-contents">
<img alt="GitHub Logo" src="/assets/images/github-icon.svg">
<p>GitHub</p>
</div>
</a>
<a target="_blank" href="https://linkedin.com/in/theodore-gravlin/" class="button-background">
<div class="button-contents">
<img alt="LinkedIn Logo" src="/assets/images/linkedin-icon.svg">
<p>LinkedIn</p>
</div>
</a>
<a target="_blank" href="mailto:[email protected]" class="button-background">
<div class="button-contents">
<img alt="Email Icon" src="/assets/images/mail-icon.svg">
<p>Email</p>
</div>
</a>
<a target="_blank" rel="me" href="https://mastodon.world/@tedgravlin" class="button-background">
<div class="button-contents">
<img alt="Mastodon Logo" src="/assets/images/mastodon-icon.svg">
<p>Mastodon</p>
</div>
</a>
</div>
</div>
<div class="card right">
<div class="project-card-header">
<h3>Recent Projects</h3>
<!-- <a class="projects-button" href="#portfolio">All Projects</a> -->
</div>
<div class="project-card-container">
<a target="_blank" href="https://signalupdateinfo.com/" class="project-card">
<img alt="Preview for Signal Update Info" src="/assets/images/signal-update-info.png">
<div class="project-overlay">
<div class="project-info">
<h4>Signal Update Info</h4>
<p>News and updates site for the Signal Messenger community.</p>
</div>
</div>
</a>
<a target="_blank" href="https://tedgravlin.tech/qr-crypt/" class="project-card">
<img alt="Preview for QR-Crypt" src="/assets/images/QR-Crypt.png">
<div class="project-overlay">
<div class="project-info">
<h4>QR-Crypt</h4>
<p>Password-protected QR code generator.</p>
</div>
</div>
</a>
<a target="_blank" href="https://github.com/COSC481W-2023Fall/planned-out" class="project-card">
<img alt="Preview for Planned Out" src="/assets/images/planned-out.png">
<div class="project-overlay">
<div class="project-info">
<h4>Planned-Out</h4>
<p>A simple, easy-to-use planner web app with social features.</p>
</div>
</div>
</a>
<a target="_blank" href="https://www.slackathon.tech/" class="project-card">
<img alt="Preview for Progress Tracker" src="/assets/images/progress-tracker.png">
<div class="project-overlay">
<div class="project-info">
<h4>Progress Tracker</h4>
<p>A progress tracker web app built in less than 24 hours at Hack Dearborn 2023.</p>
</div>
</div>
</a>
</div>
</div>
</div>
<div id="portfolio" class="portfolio">
<div class="portfolio-section card">
<h3>Portfolio</h3>
<div class="portfolio-card-container">
<a target="_blank" href="https://signalupdateinfo.com/" class="portfolio-card">
<img alt="Preview for Signal Update Info" src="/assets/images/signal-update-info.png">
<div class="portfolio-card-info">
<h4>Signal Update Info</h4>
<p>News and updates site for the Signal Messenger community.</p>
<div class="technology-pill-container">
<p>Social Media</p>
<p>JavaScript</p>
<p>HTML</p>
<p>CSS</p>
</div>
</div>
</a>
<a target="_blank" href="https://tedgravlin.tech/qr-crypt/" class="portfolio-card">
<img alt="Preview for QR-Crypt" src="/assets/images/QR-Crypt.png">
<div class="portfolio-card-info">
<h4>QR-Crypt</h4>
<p>Password-protected QR code generator.</p>
<div class="technology-pill-container">
<p>Encryption</p>
<p>JavaScript</p>
<p>HTML</p>
<p>CSS</p>
</div>
</div>
</a>
<a target="_blank" href="https://github.com/COSC481W-2023Fall/planned-out" class="portfolio-card">
<img alt="Preview for Planned Out" src="/assets/images/planned-out.png">
<div class="portfolio-card-info">
<h4>Planned Out</h4>
<p>A simple, easy-to-use planner web app with social features.</p>
<div class="technology-pill-container">
<p>React</p>
<p>MongoDB</p>
<p>Express.js</p>
<p>Node.js</p>
</div>
</div>
</a>
<a target="_blank" href="https://www.slackathon.tech/" class="portfolio-card">
<img alt="Preview for Progress Tracker" src="/assets/images/progress-tracker.png">
<div class="portfolio-card-info">
<h4>Progress Tracker</h4>
<p>Daily progress tracker site built in 24 hours during Hack Dearborn.</p>
<div class="technology-pill-container">
<p>Wellbeing</p>
<p>JavaScript</p>
<p>HTML</p>
<p>CSS</p>
</div>
</div>
</a>
<a target="_blank" href="https://tedgravlin.tech/neural-network-domain-validator/" class="portfolio-card">
<img alt="Preview for Neural Domain Validator" src="/assets/images/neural-domain-validator.png">
<div class="portfolio-card-info">
<h4>Neural Domain Validator</h4>
<p>Neural Network that attempts to determine the legitimacy of URLs.</p>
<div class="technology-pill-container">
<p>Neural</p>
<p>AI</p>
<p>Python</p>
<p>PyScript</p>
</div>
</div>
</a>
<a target="_blank" href="https://whatshouldieat.app/" class="portfolio-card">
<img alt="Preview for What Should I Eat" src="/assets/images/What-Should-I-Eat.png">
<div class="portfolio-card-info">
<h4>What Should I Eat</h4>
<p>Web app that helps you pick what kind of cuisine you should eat.</p>
<div class="technology-pill-container">
<p>Animation</p>
<p>JavaScript</p>
<p>HTML</p>
<p>CSS</p>
</div>
</div>
</a>
</div>
</div>
</div>
<footer>
<p></p>
</footer>
</main>
</body>
</html>