-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
205 lines (177 loc) · 13.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Patrick Doran is a Developer & Interaction Designer in North Carolina.</title>
<link rel="preload" href="new.css" as="style">
<meta name="description" content="Learn about Patrick Doran, a developer and designer working near Raleigh, North Carolina.">
<meta property="og:title" content="Patrick Doran, Developer & Designer">
<meta property="og:url" content="https://patrickdoran.com">
<meta property="og:description" content="Learn about Patrick Doran, a developer and designer near Raleigh, North Carolina.">
<meta property="og:type" content="website">
<link rel="manifest" href="manifest.json">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="Patrick Doran">
<meta name="apple-mobile-web-app-title" content="Patrick Doran">
<meta name="theme-color" content="#444">
<meta name="msapplication-navbutton-color" content="#444">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="msapplication-starturl" content="https://patrickdoran.com">
<link rel="icon" type="image/png" sizes="180x180" href="apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="apple-touch-icon-180x180.png">
<link rel="stylesheet" href="new.css">
</head>
<body>
<header>
<h1>Patrick Doran is a Senior Web Developer & Interaction Designer</h1>
<span>Working near Raleigh, North Carolina</span>
</header>
<blockquote>
Patrick has been building and designing for the web since <time datetime="1998-01">1998</time>. 💾
<small><cite><a title="Follow this link for citation reference." target="_blank" href="patrick_doran_work_history.jpg">[1]</a></cite></small>
</blockquote>
<p>Patrick designs mobile interfaces, codes modern JavaScript applications, sketches wireframes, and obsesses about usability and performance. Lately, Patrick has spent a lot of time with Vue.js and SharePoint development, design and branding.</p>
<h2>Specializing in:</h2>
<dl>
<dt>Front-End Web Development 🛠️</dt>
<dd><abbr title="HyperText Markup Language">HTML</abbr> / <abbr title="Cascading Style Sheets">CSS</abbr> / JavaScript / Vue.js / PHP / Python / <abbr title="Syntactically Awesome Style Sheets">SASS</abbr> / Git / WordPress</dd>
</dl>
<dl>
<dt>Interaction Design & User Experience 🖥️</dt>
<dd>User experience design / Responsive mobile-first web design, Adobe Photoshop, Illustrator, XD / mockups & prototyping </dd>
</dl>
<dl>
<dt>Microsoft 365 & SharePoint 🎛️</dt>
<dd>Azure / SharePoint Online / SharePoint Framework (<em>#spfx</em>) / Teams / Workflow & Power Automate</dd>
</dl>
<hr/>
<h3>Speaking & Writing</h3>
<ul>
<li>📋 Microsoft.com <a href="https://docs.microsoft.com/en-us/microsoft-365/community/creating-useful-views-in-lists-libraries" target="_blank" rel="noreferrer">Microsoft 365 Community Docs: Creating Useful Views</a>, 2020</li>
<li>📋 Microsoft.com <a href="https://docs.microsoft.com/en-us/microsoft-365/community/large-lists-large-libraries-in-sharepoint" target="_blank" rel="noreferrer">Microsoft 365 Community Docs: Architecting Large Lists in SharePoint</a>, 2020</li>
<li>📋 Microsoft.com <a href="https://docs.microsoft.com/en-us/microsoft-365/community/versioning-basics-best-practices" target="_blank" rel="noreferrer">Microsoft 365 Community Docs: Versioning in SharePoint</a>, 2020</li>
<li>📋 Microsoft.com <a href="https://docs.microsoft.com/en-us/microsoft-365/community/permission-model-differences" target="_blank" rel="noreferrer">Microsoft 365 Community Docs: Permission Models in SharePoint</a>, 2020</li>
<li>📣 SharePoint Engage Conference <a href="https://docs.google.com/presentation/d/1NW3BZtvG2jSI3thMt8de24i29yw8xOlkj71nJHxsNDo/" target="_blank" rel="noreferrer">Shouting at SharePoint</a>, 2017</li>
<li>📣 SharePoint Engage Conference <a href="https://www.slideshare.net/patrickdoran/the-humble-mighty-sharepoint-url-query-string" target="_blank" rel="noreferrer">The Humble, Mighty Query String</a>, 2016</li>
<li>📣 SharePoint Saturday Durham <a href="https://docs.google.com/presentation/d/1lqf3hXqYHD9MlnkShjLPKa3YAgLziz105kABz2clwdE/" target="_blank" rel="noreferrer">Using SPServices for SharePoint JavaScript</a>, 2014</li>
</ul>
<hr />
<h3>Recent Coding Examples</h3>
<details>
<summary>Azure Cognitive Services handwriting recognition with JavaScript</summary>
<blockquote>
<p>A proof-of-concept - the web interface POSTs a document to Azure Cognative Services and returns the value of any handwritten text in it.</p>
<p><em>Built with JavaScript, Axios JS, and Azure Cognative Services ML Handwriting Recognition.</em></p>
<p>View complete code <a href="https://gist.github.com/PatD/abf44488a09f3447e04660a0a510047b" target="_blank" rel="noreferrer">on GitHub</a>.</p>
</blockquote>
</details>
<details>
<summary>Load SharePoint REST data with Axios, display with Tabulator.js </summary>
<blockquote>
<p>Solving a real-world business problem - user needs to select muliple SharePoint List Items, and pass those selections to another interface, to generate PDFs.</p>
<p><em>Built with JavaScript, SharePoint REST web services, Axios.js, Tabulator.js and the browser's LocalStorage API.</em></p>
<p>View complete code <a href="https://gist.github.com/PatD/dab385de8fcde42e612287569df11cd2" target="_blank" rel="noreferrer">on GitHub</a>.</p>
</blockquote>
</details>
<details>
<summary>Prevent survey re-takes with a cookie that expires after a day</summary>
<blockquote>
<p>JavaScript that checks for a cookie before a survey is taken, and writes one if there isn't one already.</p>
<p>View complete code <a href="https://gist.github.com/PatD/75a58a0906b87ec6324ca473ce09ba2e" target="_blank" rel="noreferrer">on GitHub</a>.</p>
</blockquote>
</details>
<details>
<summary>JavaScript and SharePoint: Convert List Item to PDF</summary>
<blockquote>
<p>Reads a query string from a SharePoint URL, and then generates a PDF based off that data.</p>
<p><em>Uses SharePoint On-Premise, Axios JS, and the pdfMake library.</em></p>
<p>View complete code <a href="https://gist.github.com/PatD/634200e8f8153281ac7b3dfc426d17fb" target="_blank" rel="noreferrer">on GitHub</a>.</p>
</blockquote>
</details>
<details>
<summary>CSS for SharePoint UI upgrade</summary>
<blockquote>
<p>CSS styles to restyle the default SharePoint interface.</p>
<p>View complete code <a href="https://gist.github.com/PatD/21e9e098ac02ee1af24b05448619576b" target="_blank" rel="noreferrer">on GitHub</a>.</p>
</blockquote>
</details>
<details>
<summary>SharePoint REST API and JavaScript: dynamic dropdowns</summary>
<blockquote>
<p>JavaScript to generate dropdown menus based on the values in a SharePoint list.</p>
<p>View complete code <a href="https://gist.github.com/PatD/844b4dff0f2812b84227b3b371a577b7" target="_blank" rel="noreferrer">on GitHub</a>.</p>
</blockquote>
</details>
<details>
<summary>REST Web Services driven user interface with JavaScript and HTML</summary>
<blockquote>
<p>Based on the current date, creates dropdown menus that query a REST endpoint for dynamically generated PDF reports.</p>
<p>View complete code on <a href="https://gist.github.com/PatD/75a58a0906b87ec6324ca473ce09ba2e" target="_blank" rel="noreferrer">On Github</a>.</p>
</blockquote>
</details>
<hr />
<h3>Recent Design & Development Projects</h3>
<blockquote>
<a href="https://www.ncdot.gov/dmv/offices-services/locate-dmv-office/" target="_blank" rel="noreferrer">
<img src="patrick_doran_web_dmvlocations.PNG" loading="lazy" alt="Screenshot from NCDMV Office Locations Map" />
</a>
<h4>NCDMV Office Locations Map</h4>
<p>Millions of licensed drivers across the state of North Carolina, and most will need to travel to a physical office for an ID. Hundreds of offices, but no easy way to know what was near you. This effort loads offices on a map from REST services, with relevant data, driving directions, and hours of operation. Utilizes Vue.js, Vuex, Leaflet.js, Bing Maps, REST services, geolocation, all on a public-facing SharePoint site.</p>
<em>Role:</em> Developer, Designer | <strong><a href="https://www.ncdot.gov/dmv/offices-services/locate-dmv-office/" target="_blank" rel="noreferrer">Visit Site</a></strong> | <a href="https://github.com/PatD/" target="_blank" rel="noreferrer">GitHub Repo</a>
</blockquote>
<blockquote>
<a href="https://www.ncdot.gov/projects/complete-540/Pages/planned-construction-activities.aspx" target="_blank" rel="noreferrer">
<img src="patrick_doran_web_complete540.PNG" loading="lazy" alt="Screenshot from Complete 540 project" />
</a>
<h4>Complete I-540 Project Map</h4>
<p>Built to inform and engage Raleigh area citizens about a large, multi-decade construction project. Utilizes Leaflet.js, Bing Maps, SharePoint Lists and GeoJSON data on a public-facing SharePoint site.</p>
<em>Role:</em> Developer, Designer | <strong><a href="https://www.ncdot.gov/projects/complete-540/Pages/planned-construction-activities.aspx" target="_blank" rel="noreferrer">Visit Site</a></strong> | <a href="https://github.com/PatD/United-GIFs-of-America" target="_blank" rel="noreferrer">GitHub Repo</a>
</blockquote>
<blockquote>
<a href="https://gifsamerica.us" target="_blank" rel="noreferrer">
<img src="patrick_doran_web_gifsunited.PNG" loading="lazy" alt="Screenshot from United Gifs of America" />
</a>
<h4>United GIFs of America</h4>
<p>Combined the Giphy API, vanilla JavaScript, offline storage, and SVG maps to allow the citizen to easily identify and save their state's offical GIF.</p>
Role: Developer, Designer | <strong><a href="https://gifsamerica.us" target="_blank" rel="noreferrer">Visit Site</a></strong> | <a href="https://github.com/PatD/United-GIFs-of-America" target="_blank" rel="noreferrer">GitHub Repo</a>
</blockquote>
<blockquote>
<a href="https://www.ncdot.gov/dmv/real-id-wizard" target="_blank" rel="noreferrer">
<img src="patrick_doran_web_realidwizard.PNG" loading="lazy" alt="Screenshot from NCDMV Real ID Wizard" />
</a>
<h4>North Carolina DMV REAL ID Wizard</h4>
<p>Built to help citizens navigate the requirements of getting a REAL ID driver license. Utilizes Vue.js and Vue-CLI on a public-facing SharePoint site.</p>
Role: Front-End Developer | <strong><a href="https://www.ncdot.gov/dmv/real-id-wizard/" target="_blank" rel="noreferrer">Visit Site</a></strong> | <a href="https://github.com/PatD/United-GIFs-of-America" target="_blank" rel="noreferrer">GitHub Repo</a>
</blockquote>
<blockquote>
<a href="https://connect.ncdot.gov/letting/Pages/letting-roll-up.aspx" target="_blank" rel="noreferrer">
<img src="patrick_doran_web_lettingrollup.PNG" loading="lazy" alt="Screenshot from Letting Rollup project" />
</a>
<h4>NCDOT Letting Rollup Dashboard</h4>
<p>Developed to help construction companies stay up to date on the latest project lettings. Utilizes JavaScript, local storage, and open source libraries like Tabulator, Moment.js, and Office Fabric UI on a public-facing SharePoint site.</p>
Role: Front-End Developer | <strong><a href="https://connect.ncdot.gov/letting/Pages/letting-roll-up.aspx" target="_blank" rel="noreferrer">Visit Site</a></strong> | <a href="https://github.com/PatD/United-GIFs-of-America" target="_blank" rel="noreferrer">GitHub Repo</a>
</blockquote>
<hr/>
<h3>Get in touch</h3>
<ul>
<li>Email is [email protected]</li>
<li>Code samples on <a href="https://github.com/patd" target="_blank" rel="noreferrer">GitHub</a></li>
<li>Developer insights on <a href="https://twitter.com/swearpointjs" target="_blank" rel="noreferrer">Twitter</a></li>
<li>Professional work on <a href="https://linkedin.com/in/patrickdoran" target="_blank" rel="noreferrer">LinkedIn</a></li>
</ul>
<hr/>
<img src="patrick_doran_web_developer.jpg" loading="lazy" alt="Photograph of Patrick Doran" />
<footer><br />
<em>This is at least the 7th iteration of PatrickDoran.com. <br/>
<sub><small>The first one used the <code><frameset></code> tag.
<sub><small><q>I regret nothing.</q></small></sub>
</small></sub></em></em></footer>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js');
}
</script>
</body>
</html>