├── README.md
├── single-column
    ├── script.js
    ├── style.css
    └── index.html
└── LICENSE


/README.md:
--------------------------------------------------------------------------------
1 | # Portfolio Starter
2 | 
3 | These starting point for a portfolio site! If you want to learn more about creating an awesome portfolio, [here's](https://welearncode.com/building-a-kickass-portfolio/) a blog post I wrote! Add in your projects and make this your own! Add some fun animations or colors to customize it.
4 | 
5 | 


--------------------------------------------------------------------------------
/single-column/script.js:
--------------------------------------------------------------------------------
 1 | const articlesSection = document.querySelector('.writing')
 2 | 
 3 | axios.get('https://dev.to/api/articles?username=aspittel').then((articles) => {
 4 |   articles.data
 5 |     .sort((a, b) => a.positive_reactions_count - b.positive_reactions_count)
 6 |     .slice(20, 30)
 7 |     .reverse()
 8 |     .forEach((article) => {
 9 |       const link = document.createElement('a')
10 |       link.setAttribute('href', article.url)
11 |       link.textContent = article.title
12 |       articlesSection.appendChild(link)
13 |     })
14 |   const link = document.createElement('a')
15 |   link.setAttribute('href', 'https://dev.to/aspittel')
16 |   link.textContent = 'View All'
17 |   link.classList.add('more-link')
18 |   articlesSection.appendChild(link)
19 | })
20 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Ali Spittel
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/single-column/style.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;800&family=Playfair+Display:wght@600&display=swap");
  2 | 
  3 | body {
  4 |   font-weight: 400;
  5 |   color: #222;
  6 |   font-family: Lato, sans-serif;
  7 | }
  8 | 
  9 | h1 {
 10 |   font-family: "Playfair Display", serif;
 11 |   font-size: 50px;
 12 | }
 13 | 
 14 | header h2 {
 15 |   font-size: 1.2em;
 16 |   font-weight: normal;
 17 |   line-height: 0.7;
 18 | }
 19 | 
 20 | p {
 21 |   line-height: 1.5;
 22 | }
 23 | 
 24 | header {
 25 |   text-align: center;
 26 | }
 27 | 
 28 | hr {
 29 |   margin-top: 30px;
 30 |   border-width: 0;
 31 |   border-top: 2px solid #222;
 32 |   width: 80px;
 33 | }
 34 | 
 35 | section {
 36 |   margin: 30px;
 37 | }
 38 | 
 39 | canvas {
 40 |   position: fixed;
 41 |   top: 0;
 42 |   z-index: -1;
 43 |   width: 100%;
 44 |   height: 100vh;
 45 |   margin-left: 0em;
 46 | }
 47 | 
 48 | main {
 49 |   max-width: 800px;
 50 |   margin: 60px auto;
 51 | }
 52 | 
 53 | a {
 54 |   color: #222;
 55 | }
 56 | 
 57 | .speaking-columns {
 58 |   display: grid;
 59 |   grid-template-columns: 1fr 1fr 1fr;
 60 | }
 61 | 
 62 | .speaking a {
 63 |   color: #444;
 64 |   display: block;
 65 |   line-height: 1.5;
 66 | }
 67 | 
 68 | .speaking p {
 69 |   line-height: 1;
 70 |   font-size: 0.9em;
 71 | }
 72 | 
 73 | .writing a {
 74 |   display: block;
 75 |   text-decoration: underline;
 76 |   margin-top: 6px;
 77 | }
 78 | 
 79 | .social-links a {
 80 |   font-size: 25px;
 81 |   padding: 0px 8px;
 82 |   text-decoration: none;
 83 |   color: #444;
 84 | }
 85 | 
 86 | .social-footer {
 87 |   text-align: center;
 88 |   margin-bottom: 60px;
 89 | }
 90 | 
 91 | ::selection {
 92 |   background: lavender;
 93 | }
 94 | 
 95 | .more-link {
 96 |   color: #ab47bc;
 97 | }
 98 | 
 99 | @media only screen and (max-width: 450px) {
100 |   section {
101 |     margin: 10px;
102 |   }
103 |   .speaking-columns {
104 |     display: block;
105 |   }
106 | }
107 | 
108 | @media only screen and (max-width: 600px) {
109 |   .speaking-columns {
110 |     display: block;
111 |   }
112 | }
113 | 


--------------------------------------------------------------------------------
/single-column/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7 |     <meta name="description" content="Ali Spittel's portfolio website" />
  8 |     <title>Ali Spittel</title>
  9 |     <link rel="stylesheet" href="./style.css" />
 10 |     <script
 11 |       defer
 12 |       src="https://use.fontawesome.com/releases/v5.8.1/js/brands.js"
 13 |       integrity="sha384-rUOIFHM3HXni/WG5pzDhA1e2Js5nn4bWudTYujHbbI9ztBIxK54CL4ZNZWwcBQeD"
 14 |       crossorigin="anonymous"
 15 |     ></script>
 16 |     <script
 17 |       defer
 18 |       src="https://use.fontawesome.com/releases/v5.8.1/js/fontawesome.js"
 19 |       integrity="sha384-EMmnH+Njn8umuoSMZ3Ae3bC9hDknHKOWL2e9WJD/cN6XLeAN7tr5ZQ0Hx5HDHtkS"
 20 |       crossorigin="anonymous"
 21 |     ></script>
 22 |     <script
 23 |       defer
 24 |       src="https://use.fontawesome.com/releases/v5.8.1/js/regular.js"
 25 |       integrity="sha384-Uc9toywOA44owltk1MWl0lQZ+L0mBzJkLQcdif6+JtG9izvok9DLJtCZX57Uq3k2"
 26 |       crossorigin="anonymous"
 27 |     ></script>
 28 |   </head>
 29 |   <body>
 30 |     <header>
 31 |       <h1>Ali Spittel</h1>
 32 |       <h2>I really like writing code.</h2>
 33 |       <h2>Especially in Python and JavaScript.</h2>
 34 |       <section class="social-links">
 35 |         <a href="https://twitter.com/aspittel">
 36 |           <i class="fab fa-twitter" title="Twitter"></i>
 37 |         </a>
 38 |         <a href="https://instagram.com/ali_writes_code">
 39 |           <i class="fab fa-instagram" title="Instagram"></i>
 40 |         </a>
 41 |         <a href="https://dev.to/aspittel">
 42 |           <i class="fab fa-dev" title="DEV"></i>
 43 |         </a>
 44 |         <a href="https://github.com/aspittel">
 45 |           <i class="fab fa-github" title="GitHub"></i>
 46 |         </a>
 47 |         <a href="https://pages.convertkit.com/232992d177/ac4d2406c5">
 48 |           <i class="far fa-envelope" title="Newsletter"></i>
 49 |         </a>
 50 |       </section>
 51 |     </header>
 52 |     <main>
 53 |       <section>
 54 |         <h2>About</h2>
 55 |         <p>
 56 |           I love teaching people to code. I have been employed in the tech
 57 |           industry since 2014, holding multiple software engineering positions
 58 |           at startups, and a distinguished faculty role at General Assembly's
 59 |           Software Engineering Immersive.
 60 |         </p>
 61 |         <p>
 62 |           I <a href="https://welearncode.com">blog</a> a lot about code and my
 63 |           life as a developer. My blog posts have had over well over a million
 64 |           reads and have been featured on DEV's top 7, the top spot on
 65 |           HackerNews, FreeCodeCamp, and in JSWeekly. You can hear about new
 66 |           posts on my <a href="https://ebook.welearncode.com/">newsletter</a>.
 67 |         </p>
 68 |         <p>
 69 |           I also have a podcast with two other incredible women:
 70 |           <a href="https://ladybug.dev/">Ladybug Podcast</a>. We talk about the
 71 |           tech industry, our backgrounds, and go in depth on code-topics.
 72 |         </p>
 73 |         <p>
 74 |           When I'm not coding you can find me watching my favorite New England
 75 |           sports teams, taking runs around Capitol Hill with my dog
 76 |           <a href="https://www.instagram.com/blairnugget/">Blair</a>, or rock
 77 |           climbing.
 78 |         </p>
 79 |       </section>
 80 |       <section class="projects">
 81 |         <h2>Portfolio Projects</h2>
 82 |         <div>
 83 |           <h3><a href="https://learncodefrom.us/">Learn Code from Us</a></h3>
 84 |           <p>
 85 |             A site that features people from underrepresented groups in tech who
 86 |             create awesome programming resources
 87 |           </p>
 88 |         </div>
 89 |         <div>
 90 |           <h3>
 91 |             <a href="http://politicaldiscussion.herokuapp.com/"
 92 |               >Political Discussion</a
 93 |             >
 94 |           </h3>
 95 |           <p>
 96 |             Part of my senior thesis in college: visualizes how people are
 97 |             discussing Senators on Twitter.
 98 |           </p>
 99 |         </div>
100 |         <a href="https://github.com/aspittel" class="more-link"
101 |           >More on GitHub</a
102 |         >
103 |       </section>
104 | 
105 |       <section class="writing">
106 |         <h2>Writing</h2>
107 |         <h3>A few recent posts...</h3>
108 |       </section>
109 | 
110 |       <section class="speaking">
111 |         <h2>Speaking</h2>
112 |         <div class="speaking-columns">
113 |           <div class="column">
114 |             <h3>Upcoming</h3>
115 |             <div>
116 |               <a href="https://2019.viewsourceconf.org/">Mozilla ViewSource</a>
117 |               <p>Augmented Reality in JavaScript</p>
118 |             </div>
119 |             <div>
120 |               <a href="https://allthingsopen.org/speakers/ali-spittel/">
121 |                 All Things Open
122 |               </a>
123 |               <p>Those Who Can Do Should Also Teach && Blogging Workshop</p>
124 |             </div>
125 |           </div>
126 |           <div class="column">
127 |             <h3>Selected Previous Talks</h3>
128 |             <div>
129 |               <a href="https://www.meetup.com/Reactadelphia/events/264461785/">
130 |                 Reactadelphia
131 |               </a>
132 |               <p>Yes, You Should Write that Blog Post</p>
133 |             </div>
134 |             <div>
135 |               <a href="https://abstractions.io/">Abstractions</a>
136 |               <p>
137 |                 Those Who Can Do Should Also Teach
138 |               </p>
139 |             </div>
140 |             <div>
141 |               <a href="https://www.meetup.com/nhjs-meetup/events/261201363/"
142 |                 >NH.js</a
143 |               >
144 |               <p>Augmented Reality in JavaScript</p>
145 |             </div>
146 |             <div>
147 |               <a href="https://www.meetup.com/awspug/events/drxqcnyzkbmb/"
148 |                 >Portsmouth AWS</a
149 |               >
150 |               <p>Yes, You Should Write that Blog Post!</p>
151 |             </div>
152 |             <div>
153 |               <a href="https://conferences.oreilly.com/oscon/oscon-or">OSCON</a>
154 |               <p>
155 |                 Writing to grow your open source project
156 |               </p>
157 |             </div>
158 |             <div>
159 |               <a href="http://codelandconf.com/speakers/ali-spittel/"
160 |                 >Codeland</a
161 |               >
162 |               <p>Yes, You Should Write That Blog Post</p>
163 |             </div>
164 |             <div>
165 |               <a
166 |                 href="https://www.meetup.com/Women-Who-Code-Boston/events/261875358/"
167 |               >
168 |                 Women Who Code Boston
169 |               </a>
170 |               <p>Yes, you should write that blog post</p>
171 |             </div>
172 |             <div>
173 |               <a href="https://revolutionconf.com/">Revolution Conference</a>
174 |               <p>Yes, You Should Write that Blog Post!</p>
175 |             </div>
176 |             <div>
177 |               <a href="https://womenintechsummit.net/">Women in Tech Summit</a>
178 |               <p>Yes, You Should Write that Blog Post</p>
179 |             </div>
180 |             <div>
181 |               <a href="https://forefront.io/">ForeFront</a>
182 |               <p>Navigating the Spooky World of JavaScript</p>
183 |             </div>
184 |             <div>
185 |               <a href="https://indycode.amegala.com/">IndyCode()</a>
186 |               <p>Learning CSS Through Creating Art</p>
187 |             </div>
188 |             <div>
189 |               <a href="https://indycode.amegala.com/">IndyCode()</a>
190 |               <p>Augmented Reality in JavaScript</p>
191 |             </div>
192 |             <div>
193 |               <a href="https://www.middevcon.com/"
194 |                 >Mid-Atlantic Developer Conference</a
195 |               >
196 |               <p>Augmented Reality in JavaScript</p>
197 |             </div>
198 |             <div>
199 |               <a
200 |                 href="https://dev.to/aspittel/learning-css-through-creating-art-54c0"
201 |                 >DEV Workshop</a
202 |               >
203 |               <p>Learning CSS Through Creating Art</p>
204 |             </div>
205 |             <div>
206 |               <a href="http://novacodecamp.org/">NOVA Code Camp</a>
207 |               <p>Augmented Reality in JavaScript</p>
208 |             </div>
209 |             <div>
210 |               <a href="http://novacodecamp.org/">Code(Her)</a>
211 |               <p>What are Web Frameworks?</p>
212 |             </div>
213 |           </div>
214 |           <div class="column">
215 |             <h3>Interviews</h3>
216 |             <div>
217 |               <a
218 |                 href="https://kentcdodds.com/chats-with-kent-podcast/seasons/01/episodes/growing-your-skills-and-career-through-teaching-with-ali-spittel"
219 |               >
220 |                 Chats with Kent
221 |               </a>
222 |               <p>
223 |                 Growing Your Skills And Career Through Teaching
224 |               </p>
225 |             </div>
226 |             <div>
227 |               <a href="https://spec.fm/podcasts/developer-tea/285498s"
228 |                 >Developer Tea</a
229 |               >
230 |               <p>Interview w/ Ali Spittel</p>
231 |             </div>
232 |             <div>
233 |               <a
234 |                 href="http://podcast.freecodecamp.org/ep-48-ali-spittel-creator-of-zen-of-programming"
235 |                 >Free Code Camp Podcast</a
236 |               >
237 |               <p>Ali Spittel, creator of Zen of Programming</p>
238 |             </div>
239 | 
240 |             <div>
241 |               <a
242 |                 href="https://hanselminutes.com/681/your-biggest-questions-when-learning-how-to-code-with-ali-spittel"
243 |                 >Hanselminutes
244 |               </a>
245 |               <p>Your biggest questions when learning how to code</p>
246 |             </div>
247 |             <div>
248 |               <a
249 |                 href="https://www.devpath.fm/episodes/teacher-and-developer-advocate-ali-spittel"
250 |                 >Devpath.fm
251 |               </a>
252 |               <p>Teacher and Developer Advocate Ali Spittel</p>
253 |             </div>
254 |             <div>
255 |               <a
256 |                 href="https://egghead.io/podcasts/developing-yourself-while-teaching-others-with-ali-spittel"
257 |                 >Egghead Podcast</a
258 |               >
259 |               <p>Developing Yourself While Teaching Others</p>
260 |             </div>
261 |             <div>
262 |               <a href="https://itcareerenergizer.com/e134/"
263 |                 >I.T. Career Energizer
264 |               </a>
265 |               <p>
266 |                 Tap Into the Power of Teaching Others to Become a Better
267 |                 Developer
268 |               </p>
269 |             </div>
270 |             <div>
271 |               <a
272 |                 href="https://cosmicjs.com/blog/developer-spotlight-ali-spittel-of-dev-community"
273 |                 >Cosmic JS</a
274 |               >
275 |               <p>Developer Spotlight</p>
276 |             </div>
277 |             <div>
278 |               <a href="https://realpython.com/interview-ali-spittel/"
279 |                 >Real Python</a
280 |               >
281 |               <p>Community Interview</p>
282 |             </div>
283 |             <div>
284 |               <a
285 |                 href="http://www.blog.pythonlibrary.org/2019/02/04/pydev-of-the-week-ali-spittel/"
286 |                 >Mouse vs. Python</a
287 |               >
288 |               <p>PyDev of the Week</p>
289 |             </div>
290 |             <div>
291 |               <a
292 |                 href="https://dev.to/dangolant/conversation-with-an-author---ali-spittel-4b59"
293 |                 >Dev.to Review
294 |                 <p>Conversation with an Author</p>
295 |               </a>
296 |             </div>
297 |             <div>
298 |               <a
299 |                 href="https://undefined.fm/radio/developer-avocado-toast-with-devtos-ali-spittel"
300 |                 >Undefined</a
301 |               >
302 |               <p>Developer Avocado Toast</p>
303 |             </div>
304 |             <div>
305 |               <a href="https://developur.rs/posts/ali-spittel/">
306 |                 Developurrs
307 |               </a>
308 |               <p>Blair + Ali</p>
309 |             </div>
310 |             <div>
311 |               <a href="https://www.developingup.com/episodes/44"
312 |                 >Developing Up</a
313 |               >
314 |               <p>Building Trust</p>
315 |             </div>
316 |             <div>
317 |               <a
318 |                 href="http://podcast.devjourney.info/190346/1030967-49-ali-spittel-works-at-the-crossroads-of-development-teaching-and-communities"
319 |                 >DevJourney</a
320 |               >
321 |               <p>The Crossroads of Development, Teaching and Communities</p>
322 |             </div>
323 |           </div>
324 |         </div>
325 |       </section>
326 |     </main>
327 |     <footer class="social-footer social-links">
328 |       <a href="https://twitter.com/aspittel">
329 |         <i class="fab fa-twitter" title="Twitter"></i>
330 |       </a>
331 |       <a href="https://instagram.com/ali_writes_code">
332 |         <i class="fab fa-instagram" title="Instagram"></i>
333 |       </a>
334 |       <a href="https://dev.to/aspittel">
335 |         <i class="fab fa-dev" title="DEV"></i>
336 |       </a>
337 |       <a href="https://github.com/aspittel">
338 |         <i class="fab fa-github" title="GitHub"></i>
339 |       </a>
340 |       <a href="https://pages.convertkit.com/232992d177/ac4d2406c5">
341 |         <i class="far fa-envelope" title="Newsletter"></i>
342 |       </a>
343 |     </footer>
344 |     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
345 |     <script src="./script.js"></script>
346 |   </body>
347 | </html>
348 | 


--------------------------------------------------------------------------------