-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathabout.html
More file actions
247 lines (236 loc) · 13.7 KB
/
about.html
File metadata and controls
247 lines (236 loc) · 13.7 KB
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
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
---
layout: default
title: About
description: Learn more about Scott Ratchford, a software developer and maker
---
<div class="bg-gradient-to-br from-primary to-accent text-white py-16">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-4">About Me</h1>
<p class="text-xl text-gray-100">
Software developer, maker, and builder
</p>
</div>
</div>
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="grid md:grid-cols-3 gap-8 mb-12">
<div class="md:col-span-1">
<div class="sticky top-24">
{% if site.profile_image %}
<img src="{{ site.profile_image }}" alt="Scott Ratchford" class="rounded-xl shadow-lg w-full mb-6">
{% else %}
<div class="bg-gradient-to-br from-primary to-accent rounded-xl shadow-lg w-full aspect-square mb-6 flex items-center justify-center text-white">
<i class="fas fa-user text-8xl opacity-50"></i>
</div>
{% endif %}
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="font-bold text-lg mb-3">Quick Facts</h3>
<ul class="space-y-2 text-gray-700">
<li><i class="fas fa-map-marker-alt text-accent w-5"></i> Dothan, AL</li>
<li><i class="fas fa-graduation-cap text-accent w-5"></i> MBA, B.S. Computer Science</li>
<li><i class="fas fa-code text-accent w-5"></i> Python Expert</li>
<li><i class="fas fa-cube text-accent w-5"></i> {{ 'now' | date: "%Y" | minus: 2016 }}+ Years 3D Printing</li>
<li><i class="fas fa-football-ball text-accent w-5"></i> CFB Analytics Enthusiast</li>
</ul>
</div>
</div>
</div>
<div class="md:col-span-2">
<div class="prose prose-lg max-w-none">
<h2 class="text-3xl font-bold text-primary mb-4">Hi, I'm Scott Ratchford.</h2>
<p class="text-xl text-gray-700 mb-6">
I build software that solves real problems. I'm currently working as a Software Developer at SmartLam North America. I earned my MBA and B.S. in Computer Science from the University of Alabama.
</p>
</div>
<div class="mt-8 space-y-8">
<!-- Background Section -->
<div class="bg-gray-50 rounded-xl p-6">
<h3 class="text-2xl font-bold text-primary mb-3">Background</h3>
<p class="text-gray-700 mb-3">
I graduated from the University of Alabama with a B.S. in Computer Science (2024) and an MBA (2025), along with minors in Mathematics and History. I use my math minor as data analytics experience as a foundation for my approach to software development.
</p>
<p class="text-gray-700">
The MBA prepared me for the realities of business. Software in a vacuum is just a tool. With my experience in business planning, financial analysis, and public speaking, I'm able to transform a program into a real asset.
</p>
</div>
<!-- What I Do Section -->
<div>
<h3 class="text-2xl font-bold text-primary mb-4">What I Build</h3>
<div class="grid md:grid-cols-2 gap-4">
<div class="bg-white border-l-4 border-accent p-4 rounded-r-lg shadow-sm">
<h4 class="font-bold text-lg mb-2">At Work</h4>
<p class="text-gray-700">
Desktop applications that automate manufacturing workflows. My scheduling tool saves the company $20K+ monthly by eliminating manual planning bottlenecks.
</p>
</div>
<div class="bg-white border-l-4 border-purple-500 p-4 rounded-r-lg shadow-sm">
<h4 class="font-bold text-lg mb-2">For Fun</h4>
<p class="text-gray-700">
ML-powered college football analytics. My app predicts play calls using historical data and Scikit-Learn models.
</p>
</div>
</div>
</div>
<!-- Interests Section -->
<div>
<h3 class="text-2xl font-bold text-primary mb-4">Beyond Code</h3>
<div class="space-y-3">
<div class="flex gap-4">
<div class="flex-shrink-0 w-12 h-12 bg-gradient-to-br from-accent to-primary rounded-lg flex items-center justify-center text-white text-xl">
<i class="fas fa-football-ball"></i>
</div>
<div>
<h4 class="font-bold text-lg">College Football Analytics</h4>
<p class="text-gray-700">
I love to harness the data generated by college football games. I build ranking systems, analyzing play-calling tendencies, and predict outcomes with statistical models.
</p>
</div>
</div>
<div class="flex gap-4">
<div class="flex-shrink-0 w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg flex items-center justify-center text-white text-xl">
<i class="fas fa-cube"></i>
</div>
<div>
<h4 class="font-bold text-lg">3D Printing & CAD</h4>
<p class="text-gray-700">
I've been 3D printing since 2015. I design creative and functional models in SolidWorks.
</p>
</div>
</div>
<div class="flex gap-4">
<div class="flex-shrink-0 w-12 h-12 bg-gradient-to-br from-green-500 to-teal-500 rounded-lg flex items-center justify-center text-white text-xl">
<i class="fas fa-code-branch"></i>
</div>
<div>
<h4 class="font-bold text-lg">Open Source</h4>
<p class="text-gray-700">
I contribute to open-source projects that I rely on. When there's a problem or annoyance one of my dependencies, I'm not afraid to tackle it. I use GitHub Actions daily, and I make sure to contribute and keep them working for everyone.
</p>
</div>
</div>
</div>
</div>
<!-- Philosophy Section -->
<div class="bg-gradient-to-r from-primary/5 to-accent/5 rounded-xl p-6 border-l-4 border-accent">
<h3 class="text-2xl font-bold text-primary mb-3">How I Work</h3>
<p class="text-gray-700 mb-3">
My favorite projects solve real problems. Automating away the boring parts of my job is what I live for. I build tools for my coworkers and myself to save us time, money, and energy.
</p>
<p class="text-gray-700">
That's why I value both technical skills and the business context. You can't build good software without understanding every aspect of implementation, from development to users to financial impact.
</p>
</div>
<!-- Connect Section -->
<div class="text-center bg-white rounded-xl p-6 shadow-sm">
<h3 class="text-2xl font-bold text-primary mb-3">Let's Talk</h3>
<p class="text-gray-700 mb-4">
Interested in working together? Want to discuss college football stats? Have a 3D printing question? I'm always up for a conversation.
</p>
<a href="/contact.html" class="inline-block bg-accent text-white px-6 py-3 rounded-lg font-semibold hover:bg-primary transition">
Get in Touch →
</a>
</div>
</div>
</div>
</div>
<!-- Skills Visualization -->
<div class="bg-white rounded-xl shadow-md p-8 mb-12">
<h2 class="text-3xl font-bold text-primary mb-6">Technical Expertise</h2>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h3 class="font-bold text-lg mb-3 text-accent">Languages & Frameworks</h3>
<div class="space-y-2">
<div>
<div class="flex justify-between text-sm mb-1">
<span>Python</span>
<span class="text-gray-600">Expert</span>
</div>
<div class="bg-gray-200 rounded-full h-2">
<div class="bg-accent rounded-full h-2" style="width: 95%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-sm mb-1">
<span>Django</span>
<span class="text-gray-600">Intermediate</span>
</div>
<div class="bg-gray-200 rounded-full h-2">
<div class="bg-accent rounded-full h-2" style="width: 50%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-sm mb-1">
<span>JavaScript</span>
<span class="text-gray-600">Beginner</span>
</div>
<div class="bg-gray-200 rounded-full h-2">
<div class="bg-accent rounded-full h-2" style="width: 40%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-sm mb-1">
<span>SQL</span>
<span class="text-gray-600">Intermediate</span>
</div>
<div class="bg-gray-200 rounded-full h-2">
<div class="bg-accent rounded-full h-2" style="width: 50%"></div>
</div>
</div>
</div>
</div>
<div>
<h3 class="font-bold text-lg mb-3 text-accent">Specializations</h3>
<div class="space-y-2">
<div>
<div class="flex justify-between text-sm mb-1">
<span>AI/ML Integration</span>
<span class="text-gray-600">Intermediate</span>
</div>
<div class="bg-gray-200 rounded-full h-2">
<div class="bg-primary rounded-full h-2" style="width: 50%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-sm mb-1">
<span>Desktop Apps (PyQt)</span>
<span class="text-gray-600">Intermediate</span>
</div>
<div class="bg-gray-200 rounded-full h-2">
<div class="bg-primary rounded-full h-2" style="width: 50%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-sm mb-1">
<span>CI/CD</span>
<span class="text-gray-600">Intermediate</span>
</div>
<div class="bg-gray-200 rounded-full h-2">
<div class="bg-primary rounded-full h-2" style="width: 50%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-sm mb-1">
<span>3D Printing / CAD</span>
<span class="text-gray-600">Advanced</span>
</div>
<div class="bg-gray-200 rounded-full h-2">
<div class="bg-primary rounded-full h-2" style="width: 70%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CTA -->
<div class="bg-gradient-to-br from-primary to-accent text-white rounded-xl p-8 text-center">
<h3 class="text-2xl font-bold mb-3">Want to work together?</h3>
<p class="mb-6 text-gray-100">I'm always open to discussing new projects, opportunities, or just connecting with fellow developers.</p>
<div class="flex flex-wrap justify-center gap-4">
<a href="/contact.html" class="bg-white text-primary px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
Get in Touch
</a>
<a href="/resume" class="bg-transparent border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-primary transition">
View Resume
</a>
</div>
</div>
</div>