29 | {% for post in tag.last %}
30 | {% include archive-single.html type=entries_layout %}
31 | {% endfor %}
32 |
33 | {{ site.data.ui-text[site.locale].back_to_top | default: 'Back to Top' }}
34 | ↑
35 |
36 | {% endif %}
37 | {% endfor %}
--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | # Welcome to Jekyll!
2 | #
3 | # This config file is meant for settings that affect your whole blog, values
4 | # which you are expected to set up once and rarely edit after that. If you find
5 | # yourself editing this file very often, consider using Jekyll's data files
6 | # feature for the data you need to update frequently.
7 | #
8 | # For technical reasons, this file is *NOT* reloaded automatically when you use
9 | # 'bundle exec jekyll serve'. If you change this file, please restart the server process.
10 | #
11 | # If you need help with YAML syntax, here are some quick references for you:
12 | # https://learn-the-web.algonquindesign.ca/topics/markdown-yaml-cheat-sheet/#yaml
13 | # https://learnxinyminutes.com/docs/yaml/
14 | #
15 | # Site settings
16 | # These are used to personalize your new site. If you look in the HTML files,
17 | # you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
18 | # You can create any custom variable you would like, and they will be accessible
19 | # in the templates via {{ site.myvariable }}.
20 |
21 | title: Leigh Stewardson
22 | email: your-email@example.com
23 | description: >- # this means to ignore newlines until "baseurl:"
24 | Write an awesome description for your new site here. You can edit this
25 | line in _config.yml. It will appear in your document head meta (for
26 | Google search results) and in your feed.xml site description.
27 | baseurl: "" # the subpath of your site, e.g. /blog
28 | url: "http://leighlawhon.github.io" # the base hostname & protocol for your site, e.g. http://example.com
29 | github_username: leighlawhon
30 |
31 | # Build settings
32 | remote_theme: "mmistakes/minimal-mistakes@4.24.0"
33 | plugins:
34 | - jekyll-remote-theme
35 | - jekyll-paginate
36 | - jekyll-sitemap
37 | - jekyll-gist
38 | - jekyll-feed
39 | - jemoji
40 | - jekyll-include-cache
41 | search: true
42 | # Exclude from processing.
43 | # The following items will not be processed, by default.
44 | # Any item listed under the `exclude:` key here will be automatically added to
45 | # the internal "default list".
46 | #
47 | # Excluded items can be processed by explicitly listing the directories or
48 | # their entries' file path in the `include:` list.
49 | #
50 | # exclude:
51 | # - .sass-cache/
52 | # - .jekyll-cache/
53 | # - gemfiles/
54 | # - Gemfile
55 | # - Gemfile.lock
56 | # - node_modules/
57 | # - vendor/bundle/
58 | # - vendor/cache/
59 | # - vendor/gems/
60 | # - vendor/ruby/
61 |
--------------------------------------------------------------------------------
/_posts/2023-07-01-collaborate.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: posts
3 | title: "Collaborate the Game"
4 | date: 2023-07-01 16:13:27 -0500
5 | tags: [collaboration]
6 | author_profile: true
7 | author: Leigh Stewardson
8 | author_profile: true
9 | author: Leigh Stewardson
10 | categories: work
11 | highlight_home: true
12 | tagline: "Work together, win the game"
13 | header:
14 | overlay_image: https://images.unsplash.com/photo-1544027993-37dbfe43562a
15 | teaser: https://images.unsplash.com/photo-1544027993-37dbfe43562a
16 | caption: "Photo credit: [**Unsplash: Toa Heftiba**](https://unsplash.com/@heftiba)"
17 | description: This article showcases the game Collaborate and how I build it.
18 | ---
19 |
20 | ## Background
21 | In 2019 I was awarded a Department of Education SBIR grant to build an educational board game about collaboration. Though the game would eventually be a series, focusing on different STEM vocations, the first prototype focused on collaboration in tech.
22 |
23 | Research shows that the top skill missing from new employees (especially those just out of school) is collaboration. Often students spend their academic career focusing on their own success and grades. When they enter their career, they struggle with shifting to an environment where team success is valued. The aim of the game is to teach students to collaborate and why it’s important.
24 |
25 | ## Approach
26 | My team and I performed research on and tested multiple prototypes with a local school over an 2 month period. Each session we observed game play and collected qualitative and quantitative data and then iterated on the prototype. One observation was that the tokens were very difficult to put away and therefore not suitable for a classroom setting where time can be limited.
27 |
28 | Additionally, curriculum was developed to accompany the game.
29 |
30 | ## Results
31 | At the conclusion on the grant, it was decided not to pursue publishing of the game. I felt there was something missing. The mechanics worked well, and students collaborated, but it lacked and element of excitement and was too didactic.
32 |
33 | 
34 | [Original game promo video](https://youtu.be/vfk5_bkJQFg)
35 |
36 | ## Next Steps
37 | In 2023, I reworked the theme of the game. I simplified the game by combining some of the cards and reduced the number of piece by getting rid of the tokens. Additionally, I decided the base game should be general business.
38 |
39 | We are invited to the Ed Games Expo, September 19-22, 2023.
40 |
--------------------------------------------------------------------------------
/_posts/2023-07-01-cardgame.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: posts
3 | title: "Shuffling Cards"
4 | date: 2023-07-01 16:13:27 -0500
5 | tags: [tutorial, javascript]
6 | author_profile: true
7 | author: Leigh Stewardson
8 | categories: work
9 | highlight_home: true
10 | tagline: "How to build a card game"
11 | header:
12 | overlay_image: https://images.unsplash.com/photo-1541278107931-e006523892df
13 | teaser: https://images.unsplash.com/photo-1541278107931-e006523892df
14 |
15 | caption: "Photo credit: [**Unsplash: Amanda Jones**](https://unsplash.com/@amandagraphc)"
16 | description: This article showcases a tutorial that teaches learners how to code.
17 | ---
18 |
19 | > To see a preview of this project go to [Shuffling Cards on Codespaces](https://leighlawhon-studious-space-guacamole-6v5gj6qwgp43rp4q.github.dev/) and select the `index.html` file and then `go live` on the status bar.
20 |
21 | 
22 |
23 | ## Background
24 | A few years ago, I had the opportunity to build an app for LinkedIn Learning. The project aimed to teach the concepts of binding and propagation in plain JavaScript. Over a span of two months, I meticulously developed the course, and the recording took place at the LinkedIn campus in Carpenteria, CA. This venture marked my first tutorial collaboration with LinkedIn, and it proved to be an incredible experience. I came across this opportunity through a job board dedicated to female developers, and the entire process, from working with the content manager to the producer, was highly professional.
25 |
26 | ## Approach
27 | In all my courses, I strive to create a narrative that complements the learning objectives. In the case of this particular project, I found that using cards as an analogy was a natural fit. By leveraging this analogy, I was able to elucidate complex JavaScript concepts in a simplified and easily understandable format for learners.
28 |
29 | ## Results
30 | Upon publication, the course garnered significant attention, accumulating over 6,500 viewers to date. It remains one of my personal favorite tutorials, as it encapsulates my passion for teaching and the JavaScript language.
31 |
32 | ## Next Steps
33 | After witnessing the success of the cooking-inspired coding lesson, I am thrilled to share that I am incorporating the "Piece of Cake" app in my current tutorial, "Creating GitHub Portfolios." This exciting project seamlessly integrates with Codespaces, offering learners a hands-on demonstration of leveraging GitHub portfolios effectively. By including the "Piece of Cake" code, my objective is to enrich the overall learning experience, enabling individuals to showcase their skills with confidence and flair.
34 |
--------------------------------------------------------------------------------
/NOTICE:
--------------------------------------------------------------------------------
1 | Copyright 2023 LinkedIn Corporation
2 | All Rights Reserved.
3 |
4 | Licensed under the LinkedIn Learning Exercise File License (the "License").
5 | See LICENSE in the project root for license information.
6 |
7 | ATTRIBUTIONS:
8 |
9 | RubyGems
10 | https://github.com/rubygems/rubygems
11 | Copyright (c) Chad Fowler, Rich Kilmer, Jim
12 | Weirich and others.
13 | License: MIT
14 | https://opensource.org/licenses/MIT
15 |
16 | Please note, this project may automatically load third party code from external
17 | repositories (for example, NPM modules, Composer packages, or other dependencies).
18 | If so, such third party code may be subject to other license terms than as set
19 | forth above. In addition, such third party code may also depend on and load
20 | multiple tiers of dependencies. Please review the applicable licenses of the
21 | additional dependencies.
22 |
23 | =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
24 |
25 | "RubyGems is copyrighted free software by Chad Fowler, Rich Kilmer, Jim
26 | Weirich and others. You can redistribute it and/or modify it under
27 | either the terms of the MIT license (see the file MIT.txt), or the
28 | conditions below:
29 |
30 | 1. You may make and give away verbatim copies of the source form of the
31 | software without restriction, provided that you duplicate all of the
32 | original copyright notices and associated disclaimers.
33 |
34 | 2. You may modify your copy of the software in any way, provided that
35 | you do at least ONE of the following:
36 |
37 | a. place your modifications in the Public Domain or otherwise
38 | make them Freely Available, such as by posting said
39 | modifications to Usenet or an equivalent medium, or by allowing
40 | the author to include your modifications in the software.
41 |
42 | b. use the modified software only within your corporation or
43 | organization.
44 |
45 | c. give non-standard executables non-standard names, with
46 | instructions on where to get the original software distribution.
47 |
48 | d. make other distribution arrangements with the author.
49 |
50 | 3. You may distribute the software in object code or executable
51 | form, provided that you do at least ONE of the following:
52 |
53 | a. distribute the executables and library files of the software,
54 | together with instructions (in the manual page or equivalent)
55 | on where to get the original distribution.
56 |
57 | b. accompany the distribution with the machine-readable source of
58 | the software.
59 |
60 | c. give non-standard executables non-standard names, with
61 | instructions on where to get the original software distribution.
62 |
63 | d. make other distribution arrangements with the author.
64 |
65 | 4. You may modify and include the part of the software into any other
66 | software (possibly commercial).
67 |
68 | 5. The scripts and library files supplied as input to or produced as
69 | output from the software do not automatically fall under the
70 | copyright of the software, but belong to whomever generated them,
71 | and may be sold commercially, and may be aggregated with this
72 | software.
73 |
74 | 6. THIS SOFTWARE IS PROVIDED ""AS IS"" AND WITHOUT ANY EXPRESS OR
75 | IMPLIED WARRANTIES, INCLUDING, WITHOUT LIMITATION, THE IMPLIED
76 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
77 | PURPOSE."
78 |
--------------------------------------------------------------------------------
/_posts/2023-07-01-cake.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: posts
3 | title: "Piece of Cake"
4 | date: 2023-07-01 16:13:27 -0500
5 | tags: [tutorial, javascript]
6 | author_profile: true
7 | author: Leigh Stewardson
8 | categories: work
9 | highlight_home: true
10 | tagline: "How to write a function"
11 | header:
12 | overlay_image: https://images.unsplash.com/photo-1464349095431-e9a21285b5f3
13 | teaser: https://images.unsplash.com/photo-1464349095431-e9a21285b5f3
14 |
15 | caption: "Photo credit: [**Unsplash: Annie Spratt**](https://unsplash.com/@anniespratt)"
16 | description: This article showcases a tutorial that teaches kids how to code.
17 | ---
18 |
19 | # Piece of Cake
20 |
21 | > To see a preview of this project go to [Piece of Cake on Codespaces](https://leighlawhon-super-happiness-5vrqw6j5q7v27j7v.github.dev/) and select the `index.html` file and then `go live` on the status bar.
22 |
23 | ## Background
24 | Introducing coding concepts to young minds requires creativity and engaging approaches that resonate with their interests. In my experience teaching kids to code at Generation Code, I discovered that incorporating the analogy of cooking proved to be a highly effective and relatable teaching method. By comparing variables and objects to ingredients and instructions to functions, the young students not only quickly grasped the core concepts but also developed their coding skills, unleashing their creativity in the process.
25 |
26 | During my tenure at Generation Code, an organization focused on teaching coding to children, I had the opportunity to create a unique lesson that merged two seemingly unrelated worlds: coding and cooking. The goal was to introduce fundamental coding concepts in a manner that would captivate the young learners and make the subject matter more accessible and enjoyable.
27 |
28 | ## Approach
29 | Drawing inspiration from the culinary domain, I crafted an analogy that compared coding elements to cooking components. By associating variables and objects with ingredients, and instructions to functions, I aimed to establish a relatable connection between coding concepts and something familiar to the young students – the world of food and cooking. This approach allowed them to visualize and understand how different coding elements work together, just as ingredients and instructions harmonize in a recipe.
30 |
31 | ## Results
32 | The results of implementing the cooking analogy in the coding lessons were truly remarkable. The young students not only engaged enthusiastically with the material but also quickly grasped the core concepts. The analogy provided them with a tangible framework to comprehend abstract coding concepts, enabling them to progress rapidly. With this newfound understanding, the students were able to build upon the initial lesson, writing code of their own and exploring their creative potential.
33 |
34 | The use of the cooking analogy fostered an environment of curiosity, experimentation, and innovation. By relating coding to something as familiar as cooking, the young learners felt empowered to explore and manipulate code, much like aspiring chefs experimenting with recipes in the kitchen. This approach not only enhanced their comprehension of coding principles but also nurtured their problem-solving skills, critical thinking abilities, and self-expression.
35 |
36 | ## Next Steps
37 | I regularly use this code to illustrate functions and varialble for my students. I plan to take it further by creating another story-based tutroial similar to [Alik's Treehouse](https://leighlawhon.github.io/work/2023/07/01/alikas-treehouse.html).
--------------------------------------------------------------------------------
/_posts/2023-07-01-alikas-treehouse.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: posts
3 | title: "Alika's Treehouse"
4 | date: 2023-07-01 16:13:27 -0500
5 | tags: [tutorial]
6 | author_profile: true
7 | author: Leigh Stewardson
8 | categories: work
9 | highlight_home: true
10 | tagline: "An interactive comicbook"
11 | header:
12 | overlay_image: https://images.unsplash.com/photo-1542831371-29b0f74f9713
13 | teaser: https://images.unsplash.com/photo-1542831371-29b0f74f9713
14 | caption: "Photo credit: [**Unsplash: Florian Olivio**](https://unsplash.com/@florianolv)"
15 | description: This article showcases a tutorial that teaches kids how to code.
16 | ---
17 | # Alika's Treehouse
18 | ## Background
19 | This project won the Capital One Women In Tech Demo Day. The challenge, “Help young women of color see themselves as a Computer Scientist," was sponsored by Black Girls Code. I deeply related to this challenge, as my father is in the tech industry but it took me until my 30s to see myself as someone who could be a developer.
20 |
21 | ## Approach
22 | My solution to the problem was "Alika's Treehouse," a digital comic book about a young girl from New York who spends the summer in Savannah with her widower grandfather Nevin building a treehouse. The story is roughly based on Alice In Wonderland. Throughout the story, Alika's is challenged and encouraged by pop Nevin (the name of the White Rabbit in the Disney Adaptation) to question her assumptions.
23 | Dialog Example
24 |
25 | **Alika:** "Pop, no one taught you how to build a treehouse"
26 |
27 | **Nevin:** "Alika, if you sit around waiting for someone to teach you something, you will never get the things you want."
28 |
29 |
30 | ### Interface and Coding Lessons
31 | The interface has three parts: 1.) an interactive comic with animations and inputs that a user can play with and get curious about; 2.) an interactive code editor that teaches coding and displays visuals of what the user is building; and 3.) a cat named Charles (reference to Alice In Wonderland author’s original name) navigates the user between the story and the lessons.
32 | As the user saves snippets from the lessons, the system builds a SPA (single page application) that becomes and interactive Treehouse, designed by the user.
33 |
34 | ### Comic and Lesson Interaction Example
35 | Pop Nevin suggests she create a sign for the treehouse while he clears brush. Charles introduces the user to the interface that has a code editor on the left and a live preview on the right (see third screenshot). The preview shows a poster. The user then learns about html tags like H1 and ULs while makings a Clubhouse rules poster for their treehouse. When the user is done with the lesson, they are shown the interactive treehouse they are building. The poster they just created is on the tree (screenshot 4). Eventually, the user will learn things like HTML structure to build the treehouse, CSS to add decorations and furniture. The end product is something they can share and swap "recipes" for.
36 |
37 | ## Results
38 | For the demo day I built a very rudimentary prototype. I have a working editor with the poster example, the interactive treehouse page and a single page of the interactive comic book with amazing art form my friend [Mark Mandolia](https://www.linkedin.com/in/mark-mandolia-43866119/).
39 |
40 | The work won the hackathon!
41 |
42 | ## Next Steps
43 | In 2018 I had additional stories built out. This included *Radio Dia*, *A World Elsewhere*, and *Ray's Treasure Adventure*. In the future I plan to build a platform that allows these lesson-stories to be built out easily.
44 |
45 | 
46 |
47 | 
48 |
49 | 
50 |
51 | 
52 |
--------------------------------------------------------------------------------
/_posts/2023-06-21-how-to-win-at-a-hackathon 3.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: posts
3 | title: "Part 3: How to win at a hackathon"
4 | tagline: "Casting the 'Dots'wide and far"
5 | date: 2023-06-21 19:13:27 -0500
6 | tags: [hackathon]
7 | author_profile: true
8 | author: Leigh Stewardson
9 | author_profile: true
10 | author: Leigh Stewardson
11 | categories: [article]
12 | header:
13 | overlay_image: https://images.unsplash.com/photo-1574664620916-fb955a65cab3
14 | teaser: https://images.unsplash.com/photo-1574664620916-fb955a65cab3
15 | caption: "Photo credit: [**Unsplash: Firosnv. Photography**](https://unsplash.com/@firosnv)"
16 | description: This series of articles explores how to win at a hackathon even if you don't win the hackathon itself. The third post explores how to build on your momentum and push your hackathon ideas out into the world.
17 | ---
18 |
19 | >"No struggle, no success! The strongest thunder strikes often bring the heaviest rainfall! The weight of your fulfillment depends on how wide you cast your nets! If you are trying to look clean, neat and avoid casting your nets in troubled waters, you will catch no fish."
20 | ― Israelmore Ayivor, Daily Drive 365
21 |
22 | In [Part 2]() of How to win at a hackathon, we looked at why it’s important to connect the dots through networking. In this article, we’ll look at what steps you can take after the weeknd is over.
23 |
24 | # Part 3: Casting the "Dots" wide and far
25 | So what am I doing now that the hackathon is over?
26 |
27 | Well first I slept, but then it was time to get to work. Preparing an article, creating videos I could use socially and with investors and users, getting on the phone to get additional feedback, applying to incubators for startups and pitch competitions. Why? It’s easier than winning the lottery.
28 |
29 | Armanga says he wants to “Take it to the next level. After we published our work on social media, a lot of my friends wanted access to a beta to try it out with their kids. I conferred with a couple of investor friends, they were very interested in the idea. So I think there’s a lot of potential here, for me, for the team, for the children of the world. We are now conferring within our team about how we would continue.”
30 |
31 | Henry agrees saying, “I’ve met many talented individuals through the hackathon and I plan to continue working with these individuals in the future.”
32 |
33 | One thing I‘ve done was write an article about the hackathon. I wrote the article because:
34 | * I had a great time and want more people to try hackathons,
35 | * It had been awhile since I’d written or posted socially,
36 | * And, remember that course I was writing, it just so happened that I needed an article for it and this was perfect
37 |
38 | An article is a great way to connect and cast dots.
39 |
40 | ## Conclusion
41 | Sharing my work from a hackathon on social media allows me to extend the impact of my project beyond the event itself. By defining my story, capturing engaging visuals, crafting compelling captions, utilizing hashtags, engaging with the community, and seeking collaborative opportunities, I can effectively promote my hackathon work to a wider audience. So can you.
42 |
43 | Embrace the power of social media as a tool to inspire, connect, and showcase your achievements, and watch as your hackathon endeavors become dots.
44 |
45 | ## Your Next Steps
46 | * Create a shareable article about your experience and publish it in as many places as you can.
47 | * Reach out to businesses and influencers about your work
48 | * Apply to incubators and additional pitch competitions
49 | * Spend some time polishing it up and write an article, using the BARN framework. Learn more about that here [insert link]()
50 |
51 | Ask your connections to share your article
52 |
--------------------------------------------------------------------------------
/_posts/2023-07-01-color-theory-3.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: posts
3 | title: "Part 3: Color Theory"
4 | date: 2023-07-01 16:13:27 -0500
5 | tags: [design]
6 | author_profile: true
7 | author: Leigh Stewardson
8 | categories: article
9 | tagline: "Tips on Designing a Color Palette"
10 | header:
11 | overlay_image: https://images.unsplash.com/photo-1502691876148-a84978e59af8
12 | teaser: https://images.unsplash.com/photo-1502691876148-a84978e59af8
13 | caption: "Photo credit: [**Unsplash: Robert Katzki**](https://unsplash.com/@ro_ka)"
14 | description: This series of articles explains basic color theory. The third post explores tips for designing a color palette.
15 |
16 | ---
17 | # Tips for Designing a Color Palette
18 | In the first two sections of this book, Color Limitations and Color and Emotions, we looked at some interesting facts about color and some of the context around their meaning. This provides tips for choosing a harmonious color palette, that will bring your designs and graphics together. In the next section, we will look at when and why choosing color to separate your design and graphics is important.
19 |
20 | ## Create Harmonies
21 | When creating a color palette one option is to create a color harmony. Pick a color, any color. As most of us learned in school, that color has an opposite or complementary color. Red and green, blue and orange, yellow and purple are all complements of each other. These colors are opposite each other on a color wheel. But did you know there are other patterns or color harmonies? Color Tiger’s “Color Harmonies — basic techniques for creating color schemes” article does a nice job of explaining the different harmonies, and tools like their Color Impact 4, Adobe’s Kuler, and Colourlovers’ Copaso all help you create color harmonies.
22 |
23 | ## Color Harmonies from Adobe Illustrator
24 | Use Tints, Shades, Saturation, Warm and Cool Instead of Additional Colors
25 | Often, when choosing colors for a design or graphic, we are sometimes too quick to jump to a new hue, giving our work a rainbow effect. Instead, consider adjusting a limited color palette of two to three colors by adding white, known as creating tints; adding black, known as creating shades; and adding greys, known as desaturation.
26 | Additionally, you can adjust your colors by moving your colors left or right on the color wheel, which is know as making your colors warmer or cooler. This can be seen in the analogous color harmony above where the main color is in the middle; the warmer colors, or colors that move more toward the reds and oranges, are to its right; and the cooler colors, or colors that move toward blues and greens are to its left.
27 |
28 | 
29 |
30 | ## Remember to Balance Your Color with Different Weights
31 | When designing a color palette, it is good to remember that you should not treat your colors equally.
32 |
33 | Remember the typography rule:
34 |
35 | >“WHEN EVERYTHING IS EMPHASIZED, NOTHING IS EMPHASIZED.”
36 |
37 | The same applies in color. Make one color your primary color and use the rest to accentuate that color. When in doubt, you can always use the 60-30-10 rule, mentioned in this article by HGTV on interior decorating. Companies such as Ubuntu even use different amounts of the same color palette to communicate differences of emphasis in content, as well as different sub-brands as shown in there branding [here](http://design.ubuntu.com/brand/colour-palette). When you are dealing with many brands such as the case with Adobe you may need to expand your palette beyond a few colors into the rainbow effect, but the color balance principles still apply.
38 |
39 | Notice how Adobe’s graphic design-based products, Illustrator and InDesign, are analogous and are pink and orange; the web products, Dreamweaver and Muse, are cool and warm versions of green; the video products, After Effects and PremierPro are a saturated and desaturated version of two violets that are very close; and Photoshop, Adobe’s flagship photography product, is blue. Even though the current branding material has a lot going on you can still identify the key color in the image.
40 |
41 | 
42 |
43 | > “Good Artists Borrow, Great Artists Steal.”
44 | —Pablo Picasso
45 |
46 | Why reinvent the color wheel? Good color palettes come from many sources such as interior design, fashion, or nature. Or, if you are using a photographic image with your graphic or page, why not pull your colors from there? Use an eyedropper tool like ColorPick and click around to pick up your favorite colors.
47 | In addition to the great tools already mentioned for creating palettes, try browsing those same sites for palettes created by other colorphiles.
48 |
49 | ## Resources
50 | * [Adobe Color](https://color.adobe.com/trends)
51 | * [Colour Lovers](https://www.colourlovers.com/web/trends/websites)
52 |
--------------------------------------------------------------------------------
/Gemfile.lock:
--------------------------------------------------------------------------------
1 | GEM
2 | remote: https://rubygems.org/
3 | specs:
4 | activesupport (7.0.5)
5 | concurrent-ruby (~> 1.0, >= 1.0.2)
6 | i18n (>= 1.6, < 2)
7 | minitest (>= 5.1)
8 | tzinfo (~> 2.0)
9 | addressable (2.8.4)
10 | public_suffix (>= 2.0.2, < 6.0)
11 | algolia_html_extractor (2.6.4)
12 | json (~> 2.0)
13 | nokogiri (~> 1.10)
14 | algoliasearch (1.27.5)
15 | httpclient (~> 2.8, >= 2.8.3)
16 | json (>= 1.5.1)
17 | colorator (1.1.0)
18 | concurrent-ruby (1.2.2)
19 | em-websocket (0.5.3)
20 | eventmachine (>= 0.12.9)
21 | http_parser.rb (~> 0)
22 | eventmachine (1.2.7)
23 | faraday (2.7.7)
24 | faraday-net_http (>= 2.0, < 3.1)
25 | ruby2_keywords (>= 0.0.4)
26 | faraday-net_http (3.0.2)
27 | ffi (1.15.5)
28 | filesize (0.2.0)
29 | forwardable-extended (2.6.0)
30 | gemoji (4.1.0)
31 | google-protobuf (3.23.4-arm64-darwin)
32 | google-protobuf (3.23.4-x86_64-linux)
33 | html-pipeline (2.14.3)
34 | activesupport (>= 2)
35 | nokogiri (>= 1.4)
36 | http_parser.rb (0.8.0)
37 | httpclient (2.8.3)
38 | i18n (1.14.1)
39 | concurrent-ruby (~> 1.0)
40 | jekyll (4.3.2)
41 | addressable (~> 2.4)
42 | colorator (~> 1.0)
43 | em-websocket (~> 0.5)
44 | i18n (~> 1.0)
45 | jekyll-sass-converter (>= 2.0, < 4.0)
46 | jekyll-watch (~> 2.0)
47 | kramdown (~> 2.3, >= 2.3.1)
48 | kramdown-parser-gfm (~> 1.0)
49 | liquid (~> 4.0)
50 | mercenary (>= 0.3.6, < 0.5)
51 | pathutil (~> 0.9)
52 | rouge (>= 3.0, < 5.0)
53 | safe_yaml (~> 1.0)
54 | terminal-table (>= 1.8, < 4.0)
55 | webrick (~> 1.7)
56 | jekyll-algolia (1.7.1)
57 | algolia_html_extractor (~> 2.6)
58 | algoliasearch (~> 1.26)
59 | filesize (~> 0.1)
60 | jekyll (>= 3.6, < 5.0)
61 | json (~> 2.0)
62 | nokogiri (~> 1.6)
63 | progressbar (~> 1.9)
64 | verbal_expressions (~> 0.1.5)
65 | jekyll-feed (0.17.0)
66 | jekyll (>= 3.7, < 5.0)
67 | jekyll-gist (1.5.0)
68 | octokit (~> 4.2)
69 | jekyll-include-cache (0.2.1)
70 | jekyll (>= 3.7, < 5.0)
71 | jekyll-paginate (1.1.0)
72 | jekyll-remote-theme (0.4.3)
73 | addressable (~> 2.0)
74 | jekyll (>= 3.5, < 5.0)
75 | jekyll-sass-converter (>= 1.0, <= 3.0.0, != 2.0.0)
76 | rubyzip (>= 1.3.0, < 3.0)
77 | jekyll-sass-converter (3.0.0)
78 | sass-embedded (~> 1.54)
79 | jekyll-sitemap (1.4.0)
80 | jekyll (>= 3.7, < 5.0)
81 | jekyll-watch (2.2.1)
82 | listen (~> 3.0)
83 | jemoji (0.13.0)
84 | gemoji (>= 3, < 5)
85 | html-pipeline (~> 2.2)
86 | jekyll (>= 3.0, < 5.0)
87 | json (2.6.3)
88 | kramdown (2.4.0)
89 | rexml
90 | kramdown-parser-gfm (1.1.0)
91 | kramdown (~> 2.0)
92 | liquid (4.0.4)
93 | listen (3.8.0)
94 | rb-fsevent (~> 0.10, >= 0.10.3)
95 | rb-inotify (~> 0.9, >= 0.9.10)
96 | mercenary (0.4.0)
97 | minimal-mistakes-jekyll (4.24.0)
98 | jekyll (>= 3.7, < 5.0)
99 | jekyll-feed (~> 0.1)
100 | jekyll-gist (~> 1.5)
101 | jekyll-include-cache (~> 0.1)
102 | jekyll-paginate (~> 1.1)
103 | jekyll-sitemap (~> 1.3)
104 | minitest (5.18.1)
105 | nokogiri (1.15.2-arm64-darwin)
106 | racc (~> 1.4)
107 | nokogiri (1.15.2-x86_64-linux)
108 | racc (~> 1.4)
109 | octokit (4.25.1)
110 | faraday (>= 1, < 3)
111 | sawyer (~> 0.9)
112 | pathutil (0.16.2)
113 | forwardable-extended (~> 2.6)
114 | progressbar (1.13.0)
115 | public_suffix (5.0.3)
116 | racc (1.7.1)
117 | rb-fsevent (0.11.2)
118 | rb-inotify (0.10.1)
119 | ffi (~> 1.0)
120 | rexml (3.2.5)
121 | rouge (4.1.2)
122 | ruby2_keywords (0.0.5)
123 | rubyzip (2.3.2)
124 | safe_yaml (1.0.5)
125 | sass-embedded (1.63.6-arm64-darwin)
126 | google-protobuf (~> 3.23)
127 | sass-embedded (1.63.6-x86_64-linux-gnu)
128 | google-protobuf (~> 3.23)
129 | sawyer (0.9.2)
130 | addressable (>= 2.3.5)
131 | faraday (>= 0.17.3, < 3)
132 | terminal-table (3.0.2)
133 | unicode-display_width (>= 1.1.1, < 3)
134 | tzinfo (2.0.6)
135 | concurrent-ruby (~> 1.0)
136 | unicode-display_width (2.4.2)
137 | verbal_expressions (0.1.5)
138 | webrick (1.8.1)
139 |
140 | PLATFORMS
141 | arm64-darwin-22
142 | x86_64-linux
143 |
144 | DEPENDENCIES
145 | http_parser.rb (~> 0.6.0)
146 | jekyll (~> 4.3.2)
147 | jekyll-algolia
148 | jekyll-feed
149 | jekyll-gist
150 | jekyll-include-cache
151 | jekyll-paginate
152 | jekyll-remote-theme
153 | jekyll-sitemap
154 | jemoji
155 | minimal-mistakes-jekyll
156 | tzinfo (>= 1, < 3)
157 | tzinfo-data
158 | wdm (~> 0.1.1)
159 |
160 | BUNDLED WITH
161 | 2.4.15
162 |
--------------------------------------------------------------------------------
/_posts/2023-07-14-BARN.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: posts
3 | title: "The B.A.R.N. Framework"
4 | date: 2023-07-14 16:13:27 -0500
5 | tags: [writing]
6 | author_profile: true
7 | author: Leigh Stewardson
8 | categories: article
9 | highlight_home: true
10 | tagline: "How to write about your projects"
11 | header:
12 | overlay_image: https://images.unsplash.com/photo-1444858291040-58f756a3bdd6
13 | teaser: https://images.unsplash.com/photo-1444858291040-58f756a3bdd6
14 |
15 | caption: "Photo credit: [**Unsplash: Frances Gunn**](https://unsplash.com/@francesgunn)"
16 | description: This article explains the BARN method, a framework for showcasing your projects.
17 | ---
18 |
19 | # Introduction
20 | Writing about your projects is crucial to giving context for the work. Writing an impactful article requires a structured approach that captures readers' attention and delivers valuable insights. I use my BARN framework to achieve this goal: Background, Approach, Results, and Next Steps. In this article, we will delve into each element of the BARN framework and explore how it can enhance your writing skills.
21 |
22 | ## Background:
23 | The Background section of an article serves as the foundation, providing context and establishing the relevance of the topic. It sets the stage for readers to understand the problem or subject matter being addressed. To effectively craft this section, consider the following:
24 |
25 | **1. Hook the readers:** Begin with an engaging hook or anecdote that grabs readers' attention and piques their curiosity.
26 |
27 | **2. Problem statement:** Clearly define the problem or questions that your project aims to address. Explain why it is significant and how it relates to the readers' interests or concerns.
28 |
29 | ## Approach:
30 | The Approach section outlines the methodology or approach used to investigate the problem or answer the problem statement. It is essential to provide readers with a clear understanding of how the research or analysis was conducted. Consider the following when constructing this section:
31 |
32 | **1. Methodology:** Describe the research design, data collection methods, and any tools or techniques employed. Ensure your explanation is concise yet comprehensive enough to allow readers to undestand your process.
33 |
34 | **2. Data analysis:** If applicable, detail the analysis techniques used to interpret the gathered data. This could include statistical methods, qualitative analysis, or any other relevant procedures.
35 |
36 | **3. Assumptions and limitations:** Acknowledge any assumptions made during the process and highlight the potential limitations. Call out any challenges you faced. This demonstrates transparency and helps readers evaluate the validity of the results.
37 |
38 | ## Results:
39 | The Results section presents the key findings and outcomes of your research or analysis. It is crucial to present this information in a clear and organized manner to facilitate readers' understanding. Consider the following tips:
40 |
41 | **1. Summarize findings:** Provide a concise summary of the main findings, focusing on the most important and impactful results.
42 |
43 | **2. Visual aids:** Utilize charts, graphs, tables, or screenshots to present complex data in a visually appealing and accessible format. This enhances reader comprehension and engagement.
44 |
45 | **3. Interpretation:** Offer a thoughtful interpretation of the results, highlighting their significance in relation to the problem statement and the existing body of knowledge. Consider addressing unexpected or conflicting findings and proposing potential explanations.
46 |
47 | ## Next Steps:
48 | The Next Steps section outlines potential future directions, implications, or recommendations based on the findings of your article. This section demonstrates your forward-thinking approach and encourages further exploration of the topic. Consider the following aspects:
49 |
50 | **1. Implications:** Discuss the broader implications of your findings and how they contribute to the field of study or the problem at hand. Consider societal, economic, or practical implications.
51 |
52 | **2. Recommendations:** Offer recommendations for further research or actions that can be taken based on your results. This could include areas that require additional investigation, potential applications, or suggested policy changes.
53 |
54 | **3. Conclusion:** Summarize the key points discussed in your article, emphasizing the value and impact of your project.
55 |
56 | ## Conclusion
57 | Mastering the art of writing about your project requires a systematic and well-structured approach. The BARN framework, encompassing Background, Approach, Results, and Next Steps, provides a roadmap for creating engaging and informative articles. By leveraging this framework, you can effectively convey the context, methodology, findings, and future implications of your work, capturing readers' attention and leaving a lasting impact in your field of expertise. So, pick up your pen or open your word processor, and let the BARN framework guide you on your journey to becoming a skilled and influential article writer.
58 |
--------------------------------------------------------------------------------
/_posts/2023-07-01-color-theory-2.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: posts
3 | title: "Part 2: Color Theory"
4 | date: 2023-07-01 16:13:27 -0500
5 | tags: [design]
6 | author_profile: true
7 | author: Leigh Stewardson
8 | categories: article
9 | tagline: "Color and Emotions"
10 | header:
11 | overlay_image: https://images.unsplash.com/photo-1502691876148-a84978e59af8
12 | teaser: https://images.unsplash.com/photo-1502691876148-a84978e59af8
13 | caption: "Photo credit: [**Unsplash: Robert Katzki**](https://unsplash.com/@ro_ka)"
14 | description: This series of articles explains basic color theory. The second post explores color and emotions.
15 | ---
16 | # Color and Emotions
17 | Mention Thanksgiving to any American and they will paint a picture in their head with gold, orange, red, and brown hues. It will also likely invoke a sense of family, gathering, and thankfulness. Colors, and the emotions we associate with them, are not exclusive. If I were to show you a picture of red roses, a champagne bottle with an orange label and a gold foil box of chocolates, you would see the same colors but perhaps think of a different holiday and a different emotion.
18 |
19 | These colors and the emotional meaning behind them are a conglomerate of time, story, memories, culture, and environment. There is no “Official Holiday Color Committee” and though we sometimes treat it as such, there is no “Official Company or Industry Color Committee.” As with holidays, company and industry palettes evolve from culture, story, and environment and those colors have meaning.
20 |
21 | ## Color Is a Language
22 | Color is a language just as English is. I can communicate “health” with words like “strong,” “vibrant,” and “energetic.” I can also communicate “health‘ with the lush, healthy greens of vegetables and
23 | Children learn color signifiers from an early age.
24 | plants, the bright yellows of sunshine, and the trusting blues of authority and cleanliness. You often see the same palettes used in industries and branding, not because they are a standard, but because they communicate a message and an emotion that is common to that industry.
25 |
26 | Even within an industry, color meanings can change. Would you be relaxed going into surgery if the protective gowns and masks that doctors wore were bright hazardous yellow or the flaming reds of infection rather than the cold blue of sterilization? If you were visiting your new baby in a nursery at a hospital, would you be more nervous if the nurses wearing the cold blue of sterilization, or the pastel yellow of the sun and the rosy pinks of warm cheeks?
27 |
28 | ## Culture Plays A Role
29 | The idea that color has meaning and emotion is not a modern concept. An early exploration of emotion in color comes from the German poet and artist Johann Wolfgang von Goethe, in his 1810 treatise, Theory of Colours. But color and its meaning goes back even further and it varies widely by region and environment.
30 |
31 | When I moved to Asia as a child, one of the first things I noticed was how positive and prominent the color red was while the color white was reserved for more somber occasions. Often these more historical meanings come from the availability and value of such colors. Red vermilion, also know as Chinese red, was first synthesized from mercury and sulfur in China in the 8th century.
32 |
33 | A similar history envelopes the color purple in western culture. Tyrian purple was dye made from crushed mollusks that was so expensive only royalty could afford it. This economic association lead the color purple to signify royalty and wealth in Western culture to this day. There are many more of these cultural color differences. Therefore, if
34 | you are creating data that will be represented to your colleagues in another country, you may need to consider what message you are really sending. The blog “Information Is Beautiful” has created a brilliant information graphic to help guide you.
35 |
36 | ## Questions To Ask Yourself When Choosing Color
37 | 1. What are others doing and do you want to set yourself apart?
38 | 2. What additional accent colors can you introduce to change the meaning/message of your design?
39 | 3. Can you use other attributes of color to modify such as value? A pastel yellow can mean something different than a bright vibrant yellow.
40 | 4. What are other sources for the meaning of color? a. Commercial (branding, products)
41 | * Religion
42 | * Fashion and textiles
43 | * Cultural events (sports, holidays)
44 | * Geography, industry, and environment f. History
45 | * Signage/transportation/chemical
46 | * Nature
47 | * What colors have personal meaning to my message, brand, or information?
48 |
49 | ## Continued Reading on emotion and color:
50 | * http://www.brainpickings.org/index.php/2012/08/17/goethe-theory-of-colours/
51 | * http://www.winsornewton.com/resource-centre/product-articles/vermilion-cadmium-red
52 | * http://www.livescience.com/33324-purple-roy-al-color.html
53 | * http://thelogocompany.net/blog/infographics/psychology-color-logo-design/
54 | * http://tympanus.net/codrops/2012/04/03/color-and-emotion-what-does-each-hue-mean/
55 | * http://www.color-wheel-pro.com/color-meaning.html
56 | * http://www.colorcom.com/research/why-color-matters
57 | * http://www.colormatters.com/ http://www.colorsystem.com/
58 |
--------------------------------------------------------------------------------
/_posts/2023-06-21-professional-services.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: posts
3 | title: "Accelerating your Career"
4 | tagline: "Professional Services That Transformed My Professional Viability"
5 | date: 2023-06-21 19:13:27 -0500
6 | highlight_home: true
7 | category: article
8 | tags: [leadership]
9 | author_profile: true
10 | author: Leigh Stewardson
11 | header:
12 | teaser: https://images.unsplash.com/photo-1516321318423-f06f85e504b3
13 | overlay_image: https://images.unsplash.com/photo-1516321318423-f06f85e504b3
14 | caption: "Photo credit: [**Unsplash: John Schnobrich*](https://unsplash.com/@johnschno)"
15 | description: This article explains how to accelerate your career by leveraging professional services.
16 | ---
17 |
18 | Looking back on my career, there are a few things I wish I had done earlier to boost my career progression and enhance my marketability. In this article, I will share my experience and highlight four professional services that have significantly accelerated my career and improved my standing in the job market.
19 |
20 | ## 1. Get a Mentor and/or Start Mentoring
21 | I've been mentoring and have been a mentee for years and I have learned so much from the experience. Securing a mentor and becoming a mentor yourself are invaluable steps towards professional growth. These two practices are not mutually exclusive but complement each other. A mentor offers guidance, wisdom, and support, helping you navigate challenges and make informed decisions. Simultaneously, mentoring others allows you to share your knowledge, expand your leadership skills, and develop a sense of fulfillment. The mentor-mentee relationship fosters personal and professional development, building a strong foundation for success.
22 |
23 | # 2. Get Your Resume Professionally Written
24 | For a long time, I believed I could adequately write my own resume. However, I soon realized the significance of professional resume writing services, especially when dealing with complex career trajectories or employment gaps. Companies like [TopResume.com](http://topresume.com) offer expert assistance in transforming your experiences into a cohesive, compelling narrative. Their resume writers possess the expertise to structure your diverse background effectively. They can highlight relevant skills, consolidate related experiences, and maximize the impact of your achievements. A professionally written resume enhances your chances of making a positive impression and securing desired opportunities and is well worth the investment.
25 |
26 | # 3. Create a Portfolio
27 | Portfolios are not exclusive to designers; they are relevant for professionals across various industries, including developers. As I transitioned into a developer role, I recognized the importance of showcasing my work through a portfolio. Whether you're a designer, developer, writer, or any other professional, having a portfolio provides tangible evidence of your skills and accomplishments. It offers potential employers a comprehensive view of your capabilities and serves as a testament to your expertise. Check out my video one LinkedIn Learning: [GitHub Portfolios for Developers](), to learn how to build an impressive portfolio that highlights your best work effectively.
28 |
29 | # 4. Get a Career Coach
30 | I waited on this one for a while, but engaging the services of a career coach can be a game-changer in propelling your career forward. I recently enlisted the expertise of [Virtual Freedom Coaching](http://www.vfcoaching.com), led by [Dr. Priya Bains](https://www.linkedin.com/in/vfcoaching/), and it has been a transformative experience. A career coach helps you gain clarity, identify patterns, and unlock your potential. They offer personalized guidance, support, and strategies tailored to your unique circumstances. Whether you're an innovator entrepreneur or a creative professional, a career coach can help you navigate challenges, optimize your strengths, and make meaningful progress towards your goals.
31 |
32 | ## Three Reasons Why You Should Look for a Career Coach:
33 | I recommend thoroughly vetting a career coach to make sure they are the right fit for your style. It took me some time to find Priya, who specifically works with creatives and innovative entrepreneurs. Priya is helping me:
34 |
35 | * Find focus and remove my entrepreneurial ADHD.
36 | * Get out of overwhelm and overwork and transform productive work and long hours into efficient work.
37 | * Organize my ideas and communicate with clarity to impact stakeholders.
38 | * Transform problems into innovative solutions.
39 |
40 | In general, career coaches can help you:
41 |
42 | **1. Gain Insight and Perspective:** A career coach provides an objective viewpoint, helping you identify blind spots, uncover untapped potential, and explore new possibilities. They bring a fresh perspective and offer insights that can propel your career to new heights.
43 |
44 | **2. Enhance Efficiency and Effectiveness:** A career coach helps you streamline your approach, refine your strategies, and optimize your workflows. They assist in identifying areas of improvement, developing new skills, and implementing systems that make you more efficient and effective in your professional endeavors.
45 |
46 | **3. Overcome Challenges and Setbacks:** Career coaches provide invaluable support during challenging times. They offer guidance, motivation, and resilience-building techniques to help you navigate setbacks, overcome obstacles, and stay focused on your long-term goals.
47 |
48 | # Conclusion
49 | Looking back on our careers, it's natural to reflect on the things we wish we had done earlier. The professional services I have mentioned - getting a mentor, having a professionally written resume, creating a portfolio, and engaging a career coach - have undoubtedly accelerated my career trajectory and increased my marketability. Consider incorporating these services into your professional journey and unlock new opportunities and possibilities in your chosen field. Remember, investing in your career development is an investment in your own success.
--------------------------------------------------------------------------------
/_posts/2023-06-21-how-to-win-at-a-hackathon 2.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: posts
3 | title: "Part 2: How to win at a hackathon"
4 | date: 2023-06-21 19:14:27 -0500
5 | tagline: "Connecting the 'Dots'"
6 | tags: [hackathon]
7 | author_profile: true
8 | author: Leigh Stewardson
9 | categories: [article]
10 | header:
11 | overlay_image: https://images.unsplash.com/photo-1512928210967-3dced5ba507b
12 | teaser: https://images.unsplash.com/photo-1512928210967-3dced5ba507b
13 | caption: "Photo credit: [**Unsplash: Katya Ross**](https://unsplash.com/@katya)"
14 | description: This series of articles explores how to win at a hackathon even if you don't win the hackathon itself. The second post explores how to make connections at a hackathon.
15 | ---
16 | >“You can't connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future. You have to trust in something—your gut, destiny, life, karma, whatever. This approach has never let me down, and it has made all the difference in my life.”
17 | —Steve Jobs,
18 | Aug 10, 2018
19 |
20 | In [Part 1]({{base_url}}/article/2023/06/21/how-to-win-at-a-hackathon.html) of How to win at a hackathon, we looked at what to do in a hackathon. In this article, we’ll look at setting your dots up for the future.
21 |
22 | # Part 2: Connecting the “Dots”
23 | Dots need people. They are seeds waiting to grow (I know I said they were pearls, but imagine what would grow if a pearl were a seed!). People are the fertilizer and water that help a dot strengthen, bloom and connect to other dots.
24 |
25 | ## Network
26 | There are a ton of amazing people at hackathons. At the beginning of the hackathon that I recently attended, we, the participants, did a few breakout sessions to meet people on other teams. As I worked on my individual projects there is next to no time to talk to other teams. Additionally, as these teams are the competition, there is some natural (hopefully, light-hearted) animosity between teams.
27 |
28 | Don’t fall into this. I realized by competing in a hackathon, I was in a unique environment with kindred spirits. Why miss out on the opportunity to connect. Making connections is crucial for the next step in [Part 3]({{base_url}}/article/2023/06/21/how-to-win-at-a-hackathon-3.html). The more people that I connect with, the farther my dots go, meaning more opportunities for me in the future. (Trust Steve Jobs on this.)
29 |
30 | ## Connect matching dots
31 | I met Henry Duong, a medical professional turned serial founder and CTO, during the round robin ice breaker. It occurred to me that I knew another medical professional turned tech, Bryan Gersham, MD. I had been mentoring Bryan on how to get his idea funded using the SBIR.gov program. When this happens, take a note or jump on [LinkedIn](https://www.linkedin.com/) and connect the dots. Do I get anything out of it? Good karma maybe, but my goal is to connect like-minded people. Who knows what will come of it?
32 |
33 | ## Don’t be afraid to reach out
34 | How do I know Bryan?
35 |
36 | He reached out to me after watching one of my LinkedIn Learning videos. Not enough people do this. I never know who will respond. Some people won't. Some people will.
37 |
38 | During the hackathon I reached out to motor.com, based on a recommendation from my mentor, Rusty Patel. Motor.com had the type of data we needed to integrate into our product. As the Product Manager and team lead, I jumped right in and sent an inquiry to motor.com and as it turns out, they had an API Sandbox ready to go! Their brilliant sales rep, Jennie Davis helped my team quickly get access to this information. A hackathon is a great way to make business connections.
39 |
40 | The second connection I made was with Armagan Amcalar, founder of coyotiv.com and fractional CTO. Armagan and his team built a story telling app for kids in hospital. Armagan said about the hackathon “I felt like it would allow me to get deeper into the [A.Team ](ttps://www.a.team/) (a freelance site) community. And any interesting conversations or connections I could get would be an icing on the cake.”
41 |
42 | I knew immediately that I had to connect with him. I had another project (a dot) Alika's Treehouse for which I won a hackathon in 2016 that was similar, as well as a Generative AI project for people with reading difficulty, that I wanted his feedback on.
43 |
44 | Now, I could have thought “that guy has the same ideas, I need to beat him to the punch!” but rather than looking at him as a competitor, I got on a call with him and found we had similar ambitions and ideas. In the foreseeable future, Armagan and I will be working on an SBIR grant, potentially teaming up to continue my hackathon project, and possibly working to expand his business to the US (he is in Berlin). Additionally, I am connecting Armagan up with my content producer at LinkedIn Learning, as he happened to have a workshop ready to go that would make a great tutorial. See? Many dots connected by people.
45 |
46 | At a hackathon, remember that ultimately, people who are there are like-minded people. Take time to step away from the competition and look around. Try and observe the dots waiting to be connected with.
47 |
48 | ## Conclusion
49 | While the intensity and excitement of a hackathon may subside once the event concludes, the connections formed during this time hold immense potential. By nurturing these relationships, you can amplify collaboration, unlock professional opportunities, foster personal growth, and actively engage in the tech community. The connections made during and after a hackathon have the power to shape careers, fuel innovation, and forge lifelong friendships. So, embrace the discomfort as an opportunity to connect, learn, and create a network that will support future endeavors.
50 |
51 | ## Your Next Steps
52 | * Connect with your competition. You are like-minded.
53 | * Connect with the leadership of the competition. What can you thank them for? What feedback can you add for the next hackathon?
54 | * Connect those you meet with your broader network.
55 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | LinkedIn Learning Exercise Files License Agreement
2 | ==================================================
3 |
4 | This License Agreement (the "Agreement") is a binding legal agreement
5 | between you (as an individual or entity, as applicable) and LinkedIn
6 | Corporation (“LinkedIn”). By downloading or using the LinkedIn Learning
7 | exercise files in this repository (“Licensed Materials”), you agree to
8 | be bound by the terms of this Agreement. If you do not agree to these
9 | terms, do not download or use the Licensed Materials.
10 |
11 | 1. License.
12 | - a. Subject to the terms of this Agreement, LinkedIn hereby grants LinkedIn
13 | members during their LinkedIn Learning subscription a non-exclusive,
14 | non-transferable copyright license, for internal use only, to 1) make a
15 | reasonable number of copies of the Licensed Materials, and 2) make
16 | derivative works of the Licensed Materials for the sole purpose of
17 | practicing skills taught in LinkedIn Learning courses.
18 | - b. Distribution. Unless otherwise noted in the Licensed Materials, subject
19 | to the terms of this Agreement, LinkedIn hereby grants LinkedIn members
20 | with a LinkedIn Learning subscription a non-exclusive, non-transferable
21 | copyright license to distribute the Licensed Materials, except the
22 | Licensed Materials may not be included in any product or service (or
23 | otherwise used) to instruct or educate others.
24 |
25 | 2. Restrictions and Intellectual Property.
26 | - a. You may not to use, modify, copy, make derivative works of, publish,
27 | distribute, rent, lease, sell, sublicense, assign or otherwise transfer the
28 | Licensed Materials, except as expressly set forth above in Section 1.
29 | - b. Linkedin (and its licensors) retains its intellectual property rights
30 | in the Licensed Materials. Except as expressly set forth in Section 1,
31 | LinkedIn grants no licenses.
32 | - c. You indemnify LinkedIn and its licensors and affiliates for i) any
33 | alleged infringement or misappropriation of any intellectual property rights
34 | of any third party based on modifications you make to the Licensed Materials,
35 | ii) any claims arising from your use or distribution of all or part of the
36 | Licensed Materials and iii) a breach of this Agreement. You will defend, hold
37 | harmless, and indemnify LinkedIn and its affiliates (and our and their
38 | respective employees, shareholders, and directors) from any claim or action
39 | brought by a third party, including all damages, liabilities, costs and
40 | expenses, including reasonable attorneys’ fees, to the extent resulting from,
41 | alleged to have resulted from, or in connection with: (a) your breach of your
42 | obligations herein; or (b) your use or distribution of any Licensed Materials.
43 |
44 | 3. Open source. This code may include open source software, which may be
45 | subject to other license terms as provided in the files.
46 |
47 | 4. Warranty Disclaimer. LINKEDIN PROVIDES THE LICENSED MATERIALS ON AN “AS IS”
48 | AND “AS AVAILABLE” BASIS. LINKEDIN MAKES NO REPRESENTATION OR WARRANTY,
49 | WHETHER EXPRESS OR IMPLIED, ABOUT THE LICENSED MATERIALS, INCLUDING ANY
50 | REPRESENTATION THAT THE LICENSED MATERIALS WILL BE FREE OF ERRORS, BUGS OR
51 | INTERRUPTIONS, OR THAT THE LICENSED MATERIALS ARE ACCURATE, COMPLETE OR
52 | OTHERWISE VALID. TO THE FULLEST EXTENT PERMITTED BY LAW, LINKEDIN AND ITS
53 | AFFILIATES DISCLAIM ANY IMPLIED OR STATUTORY WARRANTY OR CONDITION, INCLUDING
54 | ANY IMPLIED WARRANTY OR CONDITION OF MERCHANTABILITY OR FITNESS FOR A
55 | PARTICULAR PURPOSE, AVAILABILITY, SECURITY, TITLE AND/OR NON-INFRINGEMENT.
56 | YOUR USE OF THE LICENSED MATERIALS IS AT YOUR OWN DISCRETION AND RISK, AND
57 | YOU WILL BE SOLELY RESPONSIBLE FOR ANY DAMAGE THAT RESULTS FROM USE OF THE
58 | LICENSED MATERIALS TO YOUR COMPUTER SYSTEM OR LOSS OF DATA. NO ADVICE OR
59 | INFORMATION, WHETHER ORAL OR WRITTEN, OBTAINED BY YOU FROM US OR THROUGH OR
60 | FROM THE LICENSED MATERIALS WILL CREATE ANY WARRANTY OR CONDITION NOT
61 | EXPRESSLY STATED IN THESE TERMS.
62 |
63 | 5. Limitation of Liability. LINKEDIN SHALL NOT BE LIABLE FOR ANY INDIRECT,
64 | INCIDENTAL, SPECIAL, PUNITIVE, CONSEQUENTIAL OR EXEMPLARY DAMAGES, INCLUDING
65 | BUT NOT LIMITED TO, DAMAGES FOR LOSS OF PROFITS, GOODWILL, USE, DATA OR OTHER
66 | INTANGIBLE LOSSES . IN NO EVENT WILL LINKEDIN'S AGGREGATE LIABILITY TO YOU
67 | EXCEED $100. THIS LIMITATION OF LIABILITY SHALL:
68 | - i. APPLY REGARDLESS OF WHETHER (A) YOU BASE YOUR CLAIM ON CONTRACT, TORT,
69 | STATUTE, OR ANY OTHER LEGAL THEORY, (B) WE KNEW OR SHOULD HAVE KNOWN ABOUT
70 | THE POSSIBILITY OF SUCH DAMAGES, OR (C) THE LIMITED REMEDIES PROVIDED IN THIS
71 | SECTION FAIL OF THEIR ESSENTIAL PURPOSE; AND
72 | - ii. NOT APPLY TO ANY DAMAGE THAT LINKEDIN MAY CAUSE YOU INTENTIONALLY OR
73 | KNOWINGLY IN VIOLATION OF THESE TERMS OR APPLICABLE LAW, OR AS OTHERWISE
74 | MANDATED BY APPLICABLE LAW THAT CANNOT BE DISCLAIMED IN THESE TERMS.
75 |
76 | 6. Termination. This Agreement automatically terminates upon your breach of
77 | this Agreement or termination of your LinkedIn Learning subscription. On
78 | termination, all licenses granted under this Agreement will terminate
79 | immediately and you will delete the Licensed Materials. Sections 2-7 of this
80 | Agreement survive any termination of this Agreement. LinkedIn may discontinue
81 | the availability of some or all of the Licensed Materials at any time for any
82 | reason.
83 |
84 | 7. Miscellaneous. This Agreement will be governed by and construed in
85 | accordance with the laws of the State of California without regard to conflict
86 | of laws principles. The exclusive forum for any disputes arising out of or
87 | relating to this Agreement shall be an appropriate federal or state court
88 | sitting in the County of Santa Clara, State of California. If LinkedIn does
89 | not act to enforce a breach of this Agreement, that does not mean that
90 | LinkedIn has waived its right to enforce this Agreement. The Agreement does
91 | not create a partnership, agency relationship, or joint venture between the
92 | parties. Neither party has the power or authority to bind the other or to
93 | create any obligation or responsibility on behalf of the other. You may not,
94 | without LinkedIn’s prior written consent, assign or delegate any rights or
95 | obligations under these terms, including in connection with a change of
96 | control. Any purported assignment and delegation shall be ineffective. The
97 | Agreement shall bind and inure to the benefit of the parties, their respective
98 | successors and permitted assigns. If any provision of the Agreement is
99 | unenforceable, that provision will be modified to render it enforceable to the
100 | extent possible to give effect to the parties’ intentions and the remaining
101 | provisions will not be affected. This Agreement is the only agreement between
102 | you and LinkedIn regarding the Licensed Materials, and supersedes all prior
103 | agreements relating to the Licensed Materials.
104 |
105 | Last Updated: March 2019
106 |
--------------------------------------------------------------------------------
/_posts/2023-07-01-color-theory.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: posts
3 | title: "Part 1: Color Theory"
4 | date: 2023-07-01 16:13:27 -0500
5 | tags: [design]
6 | author_profile: true
7 | author: Leigh Stewardson
8 | categories: article
9 | highlight_home: true
10 | tagline: "Color Limitations"
11 | header:
12 | overlay_image: https://images.unsplash.com/photo-1502691876148-a84978e59af8
13 | teaser: https://images.unsplash.com/photo-1502691876148-a84978e59af8
14 | caption: "Photo credit: [**Unsplash: Robert Katzki**](https://unsplash.com/@ro_ka)"
15 | description: This series of articles explains basic color theory. The first post explores color limitations.
16 | ---
17 |
18 | >“Color does not add a pleasant quality to design—it reinforces it.”
19 | — Pierre Bonnard
20 |
21 | This article is written in three parts. You can find the entire series here:
22 | * [Part 1: Color Limitations]()
23 | * [Part 2: Color and Emotions]()
24 | * [Part 3: Color Paletts]()
25 |
26 | # Overview
27 | The application of color will make or break a brand, website, brochure, logo, or even what we wear on a date or to a business meeting. The same goes for how we present data. The more complex the data, the more important color becomes in guiding the participant through its visualization.
28 | Presenting vast amounts of information in a meaningful and usable manner is increasingly an everyday challenge in many domains. This is especially true when working with health care and life science data. The advancement in sequencing technologies along with their continuously decreasing costs will no doubt result in an even larger surge of incoming data along with an increased need and urgency to easily make sense—and use of this data...earlier.
29 |
30 | This article will show how you can improve a user’s experience by apply-
31 | ing certain key color theory principles. Other topics to be reviewed here include the application of color theory to data visualizations, the limitations of color use and the different emotions they may convey to your audience.
32 | You will also find beneficial tips on selecting the right color palettes to provide a professional look and feel for your next project, while maintaining or even improving your audience’s engagement.
33 |
34 | Finally, as a combined example of improved user experience in genomic data visualization, this document will revisit the National Human Genome Research Institute (NHGRI) Genome Wide Association catalog and propose a hybrid semiology approach as an example to increasing usability through the application of color theory and user experience.
35 |
36 | # Color Limitations
37 | This section on Color Limitations will address some common drawbacks to using color in your projects. We will also examine common emotional interpretations of color in the Emotion and Color section. Finally, the Designing A Color Palette section will present some useful approaches and tools for building a color palette.
38 |
39 | ## The Visible Spectrum
40 | The visible color spectrum is measured in wavelengths and begins with violet at 380 nm and ends with red around 750 nm. This band makes up the full spectrum of what can be seen by the human eye. However, the human eye and the devices we use to capture and reproduce color have limitations when it comes to rendering this spectrum.
41 |
42 | 
43 |
44 | ## Color Blindness and 508 Compliance
45 | The retina has two types of cells that respond to light, rods and cones. Rods pick up on the intensity of light and give
46 | us low light vision. Cones are more specialized and occur in three types, each containing photosensitive proteins that respond to different frequencies of light. When these rods or cones are missing or damaged, an individual is said to suffer from color blindness. Though color blindness is typically classified as a mild disability, it affects many people and can become a severe disadvantage when data is represented with color.
47 |
48 | In the DC metro map below, you will see it can be quite difficult for someone with color blindness to follow the subway lines, especially where the Green and Red lines intersect for people with Deuteranopia. To compensate for this, you will notice that the map designers have added labels at the ends of each line, making it possible to identify them without color.
49 |
50 | 
51 |
52 | If you are concerned about how your data is perceived by people with color blindness or need to be 508 compliant, you can check it with one of the many free tools listed at the W3C.
53 |
54 | ## Device Color
55 | Device color is another limitation to be aware of. Have you ever taken a photo of a beautiful sunset, only to print it out and see that your masterpiece photo is dull and murky?
56 | Inherent hardware limitations restrict the range
57 | of reproducible colors. Your computer monitor is not able to produce the full color spectrum and printing technology can produceg even less. The equipment we use to capture images, such as scanners and cameras, have their own range of colors they are limited to. In addition to that, all these things, including our eyes, are susceptible to environment, age and the amount of time they have been active that day.
58 |
59 |
60 |
61 | Here are two representations of the ranges, or gamut, of color devices. In the first shape shown below, the rounded outer shape represents the visible spectrum mentioned above; what we can see with our eye. The inner triangle shows device color. As you can see it is quite a bit smaller than the visible spectrum. The second image to the right is more device specific and shows the top and bottom of a 3D color model. The outer shape (white mesh shape) represents the color that a typical LCD monitor can produce.
62 |
63 | {:.avatar}
64 |
65 | The inner core (color shape) is what can be produced by a high-end printer. Once again, it is a much smaller, and you will notice that there are some
66 | colors that can be produced in print that cannot be captured on a monitor.
67 |
68 | 
69 |
70 |
71 | ## You Can’t Always Trust What You See
72 | One of the most shocking things I learned as an artist is that color has the illusion of energy and motion, and not just in the poetic sense. If you know how to harness this illusion, you can use it to great effect. If not, you can literally repel your viewers and can make text very difficult to read.
73 |
74 | ## Vibrations
75 | Some colors vibrate when put next to other colors. In the chart below, you can see that, not only does it almost “hurt” to look at these colors, the text becomes very difficult to read without looking away. This is not something that you want your audience to experience.
76 | 
77 |
78 | {:.avatar}
79 | However, this same effect is often used by artists to add energy to their paintings.
80 | Notice how in Van Gogh’s Café Terrace, the artist uses the vibration of orange on the distant blue buildings to make the lights pop. Additionally, the yellow/orange colors
81 | of the cafe push it forward and in front of the taller blue building behind it.
82 |
83 | ## Contrast
84 | Each color has their own value, or level of “greyness.” If the values of two colors are too close, like the example below, then the contrast is too low, with
85 | “weak energy,” and can be difficult for someone with vision problems to see it. Again, there are many free contrast checking tools listed at the W3C.
86 | 
87 |
--------------------------------------------------------------------------------
/_posts/2023-07-01-design-basics.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: posts
3 | title: "Design Basics"
4 | date: 2023-07-01 16:13:27 -0500
5 | tags: [design]
6 | author_profile: true
7 | author: Leigh Stewardson
8 | categories: article
9 | tagline: "What everyone should know"
10 | header:
11 | overlay_image: https://images.unsplash.com/photo-1576153192396-180ecef2a715
12 | teaser: https://images.unsplash.com/photo-1576153192396-180ecef2a715
13 | caption: "Photo credit: [**Unsplash: Amélie Mourichon**](https://unsplash.com/@amayli)"
14 | description: This article explains basic design concepts that everyone should know.
15 | ---
16 |
17 | Your brain has two systems, a slow analytical side and a quick, instinctive "gut" side. For the most part, the instinctual side is lazy, conserving its energy for the "pounce". It doesn't want to think or stop and read, it wants shortcuts, assumptions, and skimming. It is this part of the brain that design speaks directly to.
18 |
19 | 
20 |
21 | To communicate with this part of your brain, design uses constructs such as motion, structure and even emotion, all without using a single word. Design is not just "what you like", it is a language that is speaking to your instincts.
22 |
23 | Look at the chart below. Can you guess what these symbols mean?
24 |
25 | 
26 |
27 | Some of these concepts maybe cultural, but most are pretty easy to guess.
28 |
29 | 
30 |
31 | Let's try another example, this one is in Japanese. Assuming you don't know how to read Japanese, what can you tell me about this layout? Where is the title? What is it about (try and be specific). What does a callout look like? Where does the text begin?
32 |
33 | More importantly, how do you know these things?
34 |
35 | 
36 |
37 | ## What gets the brains attention?
38 | In the next slides we will look at the language of design and how we can use it to direct our users to the more import parts of our interfaces. Let's start with Distance.
39 |
40 | 
41 |
42 | The slide you are looking at is flat. It's two dimensional. But, can you tell me which object is in front? If you were to analyze it, probably not, but if you were to make a snap decision, you would probably guess the larger items were closer and therefore in front. Which of those items would your lazy brain care about? Well, if they were baseballs coming for your head, probably the closer one would get your attention. In general, things that are larger on the page and in front get more attention.
43 |
44 | 
45 |
46 | What about balance? of these two sets, which is more interesting? Most people would say the one on the right is, but why? The two even blocks on the left are stable. They're not going anywhere; the brain can relax. The three blocks on the left however not quite right. If they were cement, they wouldn't stay in that formation for very long. The blocks on the right gain attention from the brain because a piece is missing and something may happen. As far as our lazy brain is concerned, odd things are more interesting than even.
47 |
48 | 
49 |
50 | A similar thing happens with curved shapes instead over flat. The brain expects motion and gives those objects more attention.
51 |
52 | 
53 |
54 | Value and contrast can also be used to focus the lazy brain. For the most part, easy to ready contrast is the goal for text, especially when it comes to text and 508 compliance. However, used sparingly, high and low contrasts can help structure your message.
55 |
56 | Ansel Adams was a master manipulator of contrast. When I was young, I thought he was so "lucky" to find such beautiful spots and snap a photo at the right moment. In fact, he spent hours in the darkroom manipulating the balance in contrast to guide your eye. What path do you think your eye is taking across this photo? What do you think makes that happen (be specific)?
57 |
58 | ## Composition
59 | We've seen a few examples of how to distinguish and separate ideas use the design language, now let's look at how to bring ideas together using color and composition.
60 |
61 | Color is one of the hardest design constructs to master. Most people, including "pre-art school" me, think about color in terms of what they "like" or based on the order of the rainbow. However, color has a complex structure, and all colors were not created equal. On the right you see color systems called color harmonies. One you might recognize from elementary school is complementary colors, or colors that are opposite each other on the color wheel. But do you know what a split complementary color is? Did you know that artists and designers use these color harmonies to create cohesive work? It's what gives their work a polished look. However, without a single color theory course, you too can have a polished look. There are sites such as Colourlouvers.com and Adobe's Kuler.com that are collections of color palettes to make working with color a breeze.
62 |
63 | 
64 |
65 | The second thing developers need to know about color is that not every color can be represented by every device...but that is changing every day! In the bottom of the middle of the slide you see an illustration of several color gamut, or the range of colors different devices can display color. You may notice that the color you can display on your screen is much larger than what you can get off your printer, and the color your eye can capture is even larger.
66 |
67 | 
68 |
69 | The Golden Ratio is a pretty interesting phenomenon. It can be found everywhere in nature and artist use it to create natural looking compositions. For the most part, developers don't use this construct...with one really important exception. You will notice that the Fibonacci Sequence is part of the Golden Ratio, and though this may not affect the design decisions you make in your development, it is a good reminder that art and computer science are not that different.
70 |
71 | 
72 |
73 | And speaking of compositions, did you know that most designers use a grid system to create those engaging layouts you see in magazines like the Japanese layout we saw earlier? Grid systems are not just for responsiveness. As we saw earlier, a well-structured layout can help you understand the flow of the document without ever reading a single word.
74 |
75 | 
76 |
77 | Finally, let's take a look at good typography. It's an artform in itself. Think about all the ways we talked about to use design to separate items and bring them back together. What can you tell me about this image? Name all the different ways design is being used in these text-only images?
78 |
79 | 
80 |
81 | Two things you may not be aware of in typography are Kerning and Leading. Whereas kerning is the space between letters, leading is the space between lines. Do you remember what it was like to learn to read? Do you remember what your books looked like? Did they have more or less leading? Why do you think that was? What happens when you decrease or increase spacing between lines? What do you think your lazy brain would want?
82 |
83 | All the tools I have just given you are all you need to practice good design. When you are sitting down to make an interface or even a presentation, think about what parts need to be emphasized and what parts should come first. Should a `learn more` button be as attention getting as a `donate now` button? Pick and choose what you want to give attention to. And remember...
84 |
85 | 
86 |
87 | ...because if everything has attention, nothing has attention.
88 |
89 | 
90 |
91 | My last tip is to think of you interfaces and presentations as welcoming a guest into your home. It should be focused and organized and have clear steps from beginning to end.
92 |
93 | 
94 |
95 | Below are some recommended links to learn more about the concepts we discussed here:
96 |
97 | 
98 |
99 |
--------------------------------------------------------------------------------
/_posts/2023-06-21-how-to-win-at-a-hackathon.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: posts
3 | title: "Part 1: How to win at a hackathon"
4 | date: 2023-06-21 19:15:27 -0500
5 | tags: [hackathon]
6 | author_profile: true
7 | author: Leigh Stewardson
8 | categories: [article]
9 | highlight_home: true
10 | tagline: "Investing in the 'Dots'"
11 | header:
12 | overlay_image: https://images.unsplash.com/photo-1611444111920-89dfc4a01f43
13 | teaser: https://images.unsplash.com/photo-1611444111920-89dfc4a01f43
14 | caption: "Photo credit: [**Unsplash: Marin Tulard**](https://unsplash.com/@mtulard)"
15 | description: This series of articles explores how to win at a hackathon even if you don't win the hackathon itself. The first post explores why you should invest in hackathons.
16 | ---
17 | >Time and pressure can change almost anything from what it was into what it has become. Time will change, “Caterpillar into butterflies, sand into pearls,” and pressure will change “coal into diamonds,” both elements work on us too.
18 | — (paraphrased from Rick Warren)
19 |
20 | I recently participated in the [A.team](https://www.a.team/)'s [Generative AI Hackathon](https://www.a.team/mission/ai-prototype-hackathon) over the weekend. If you're unfamiliar with hackathons, they bring together a passionate group of individuals, predominantly developers, who collaborate for a weekend to tackle challenges, present code demos and pitch decks of slides, and compete for prizes. Although hackathons require a lot of hard work, the sense of accomplishment on each team members’ face by the end of the competition, makes the sleepless nights worthwhile. More importantly, they are powerful, dense little dots waiting to be connected.
21 |
22 | If you have ever connected numbered dots to complete a picture, it is plain to see that following the next dot builds upon the one before, thus revealing a recognizable object.
23 |
24 | Dots to me, represent meaningful moments and/or experiences in life that help to reveal the next step and/or define my purpose. Hackathons, in particular, have been a reliable source of these “dots” in my life. They often involve a combination of hard work, learning, camaraderie, and a sense of profound pride in my abilities and pride in my accomplishments.
25 |
26 | I approach hackathons as “dot” moments. I see these “dots” as powerful, dense moments in time that have meaning and significance and upon further inspection, are just waiting to be connected.
27 |
28 | There are three parts to this process of examination and they are:
29 | * [Part 1: Investing in the “Dots”]({{base_url}}/article/2023/06/21/how-to-win-at-a-hackathon.html)
30 | * [Part 2: Connecting the “Dots”]({{base_url}}/article/2023/06/21/how-to-win-at-a-hackathon-2.html)
31 | * [Part 3: Casting the “Dots,” wide and far]({{base_url}}/article/2023/06/21/how-to-win-at-a-hackathon-3.html)
32 |
33 | # Part 1: Investing in the “Dots”
34 | Participating in hackathons is akin to the process of forming a pearl, or what I like to call a "dot." While hackathons can be challenging and uncomfortable, they have the potential to yield something truly remarkable. By approaching a hackathon with a mindset geared towards learning, establishing connections with fellow competitors, and creating something truly noteworthy, you are guaranteed to emerge victorious every single time.
35 | Amidst the process of developing my new course for LinkedIn Learning [insert link](), I made a spontaneous decision to participate in a hackathon. Despite the time constraints, I recognized the importance of this opportunity. Having just completed a course on Product Management for Machine Learning at UC Berkeley, I yearned to put my newly acquired skills into practice, even though my current role didn't involve AI. Determined, I embraced the challenge with full dedication.
36 |
37 | During the hackathon, I had the pleasure of meeting exceptional individuals, including Henry Duong and Armagan Amcalar, who were also finalists in the [A.Team](ttps://www.a.team/)) Generative AI Hackathon. It became evident that we shared a common objective: to exercise our respective skill sets, be it new in my case or well-seasoned in Armagan and Henry's.
38 | Reflecting on the experience, Henry stated, "The work we accomplished provided valuable insights into enhancing existing enterprise data pipelines in both the pre-processing and post-processing stages. The knowledge gained from this endeavor can be applied across various industries, enabling me to deliver improved solutions to the companies I collaborate with."
39 |
40 | Armagan shared his sentiment about using a hackathon as a proving ground, saying, "Although I possess a master's degree in machine learning from 15 years ago, I haven't had many opportunities to apply it effectively. The resurgence of interest in AI, along with technological advancements, has made me feel right at home. DreamKiddo has been an idea I've long desired to develop. I toyed with it a decade ago, but the technology landscape was vastly different back then. I have a genuine passion for creating AI-powered experiences, and the genAI hackathon provided the perfect opportunity to revisit this concept."
41 |
42 | If you're considering learning a new skill or technology, I highly recommend participating in hackathons as a means of practice. When I aimed to transition into a management role, hackathons served as a valuable platform to hone my team leadership abilities. Similarly, after completing a course in Product Management for Machine Learning, I put my skills to the test in a generative AI hackathon. Whether you're seeking entry into a new industry or aiming to switch roles, hackathons offer a condensed microcosm in which you can explore and learn. Furthermore, they provide an excellent avenue for establishing connections and networking. To delve deeper into winning strategies at hackathons, be sure to read Part 2: How to win at a hackathon [insert link]().
43 |
44 | ## Meet New People
45 | By meeting and staying in touch with other participants, opportunities to exchange knowledge, share resources, and learn from each other's experiences, continues well after the hackathon is over. Engaging in discussions, attending future workshops and/or conferences together, and participating in future hackathons together, as a team, will only increase the significance of the moment or “Dot”.
46 |
47 | These ongoing interactions provide a supportive environment for continuous learning, momentum to improve technical skills, opportunities to expand knowledge, and the ability to explore new domains.
48 |
49 | ## Build Your Portfolio
50 | Regardless, if I win or lose, I work very hard during a hackathon and I show that off.
51 | Why not use hackathon work as a means to build my portfolio! Should I have a portfolio as a dev? Yes! Should I include it if it's only a prototype? Yes! (Making sure to give appropriate credit to the appropriate source.)
52 | Is there a course on how to build a portfolio? Yes! Check out my new course here: [link to course] (See how I connected some dots there.)
53 |
54 | Going back to what Henry said when I asked him why he liked hackathons, Henry said that he likes hackathons because, “Tight deadlines and a competitive atmosphere can foster creativity.” Hackathons also allow you to focus purely on the technology aspects that can drive innovative functionality, with the added benefit of open experimentation. If I can deliver a polished product, even better.”
55 |
56 | When I asked Armagan why he liked hackathons, he said, “The thrill of building something in a short, fixed timeframe. It’s all about pushing yourself to the limit, testing your limits, seeing what you can and can’t do. Seeing what other people come up with. I’m still suffering from imposter syndrome, so the validation feels great.”
57 | I personally like hackathons because the time crunch forces me to boil a product down to its essence in order to beat the clock. There is little time to decide. I have to go with my gut and whatever tools I have in my toolbelt to get the job done.
58 |
59 | ## Conclusion
60 | If building a portfolio is what you are interested in doing and it’s light on content, attend a hackathon. If you are trying something new, attend a hackathon. If you are looking for a job or need to network…you know the answer. In [Part 2]({{base_url}}/article/2023/06/21/how-to-win-at-a-hackathon-2.html) we’ll look at how to connect the dots.
61 |
62 | ## Your Next Steps
63 | * Find a hackathon that either works with your strengths or involves an area you want to improve.
64 | * Talk to participants outside of your group and get their contact information.
65 | * Use your hackathon pieces to build your portfolio.
66 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Creating GitHub Portfolios
2 | This is the repository for the LinkedIn Learning course Creating GitHub Portfolios. The full course is available from [LinkedIn Learning][lil-course-url].
3 |
4 | ![Creating GitHub Portfolios][lil-thumbnail-url]
5 |
6 | Are you a developer looking to promote your work? In this course, Leigh Lawhon
7 | shows you how to build and showcase your work by building a portfolio site with GitHub Pages. Join Leigh to learn some design basics and how to utilize Codespaces to set up projects in minutes. She shows you how to use the site generator Jekyll, provides helpful coding samples, and an overview of what employers are looking for. Plus, learn how to support your work with visual and writing skills that complement your coding skills. If you want to show off the work you’ve done in a professional and easy to navigate site, join Leigh in this course.
8 |
9 | _See the readme file in the main branch for updated instructions and information._
10 | ## Instructions
11 | This repository has branches for each of the videos in the course. You can use the branch pop up menu in github to switch to a specific branch and take a look at the course at that stage, or you can add `/tree/BRANCH_NAME` to the URL to go to the branch you want to access.
12 |
13 | ## Branches
14 | The branches are structured to correspond to the videos in the course. The naming convention is `CHAPTER#_MOVIE#`. As an example, the branch named `02_03` corresponds to the second chapter and the third video in that chapter.
15 | Some branches will have a beginning and an end state. These are marked with the letters `b` for "beginning" and `e` for "end". The `b` branch contains the code as it is at the beginning of the movie. The `e` branch contains the code as it is at the end of the movie. The `main` branch holds the final state of the code when in the course.
16 |
17 | When switching from one exercise files branch to the next after making changes to the files, you may get a message like this:
18 |
19 | error: Your local changes to the following files would be overwritten by checkout: [files]
20 | Please commit your changes or stash them before you switch branches.
21 | Aborting
22 |
23 | To resolve this issue:
24 |
25 | Add changes to git using this command: git add .
26 | Commit changes using this command: git commit -m "some message"
27 |
28 | ## Installing
29 | 1. To use these exercise files, you must have the following installed:
30 | - All packages will be installed during the course.
31 | 2. Clone this repository into your local machine using the terminal (Mac), CMD (Windows), or a GUI tool like SourceTree.
32 |
33 | # Chapter Notes
34 |
35 | ## Jekyll Theme
36 |
37 | ### Links
38 | * [Jekyll theme documentation](https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide/)
39 | * [Jekyll theme repo](https://github.com/mmistakes/minimal-mistakes)
40 | * [Jekyll Documents](https://jekyllrb.com/docs/)
41 |
42 | ## What you Should Know
43 | * [Learning Linux Command Line](https://www.linkedin.com/learning/learning-linux-command-line-14447912)
44 | * [HTML Essential Training](https://www.linkedin.com/learning/html-essential-training-4)
45 | * [CSS Fundementals](https://www.linkedin.com/learning/css-fundamentals-unlock-the-power-of-web-styling?u=2125562)
46 | * [JavaScript Essential Training](https://www.linkedin.com/learning/javascript-essential-training?u=2125562)
47 | * [Learning Node.JS](https://www.linkedin.com/learning/learning-node-js-2017?u=2125562)
48 |
49 | ### Links to Michael Rose's work
50 | * [Minimal Mistakes Quick Start Guide](https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide/
51 | )
52 | * [Minimal Mistakes Repository](https://github.com/mmistakes/minimal-mistakes
53 | )
54 | * [Michael Rose's website](https://mademistakes.com/)
55 |
56 | ## Chapter 1.1 Purpose of a Portfolio
57 |
58 | ### Links
59 | * [Interview questions for developers](https://business.linkedin.com/talent-solutions/resources/how-to-hire-guides/web-developer/interview-questions)
60 | * [Behavioral interview questions](https://business.linkedin.com/talent-solutions/resources/interviewing-talent/behavioral-interview-questions-important-soft-skills)
61 |
62 | ## Chapter 1.2 Installing Jekyll
63 |
64 | ### Links
65 | * [Jekyll tutorial](https://www.linkedin.com/learning/learning-static-site-building-with-Jekyll)
66 | * [Jekyll documentation for Ubuntu install](https://jekyllrb.com/docs/installation/ubuntu/)
67 |
68 | ```
69 | jekyll new . --force
70 | ```
71 |
72 | ### Gemfile:
73 | ```yaml
74 | gem "minimal-mistakes-jekyll"
75 | gem "jekyll-remote-theme"
76 | group :jekyll_plugins do
77 | gem "jekyll-paginate"
78 | gem "jekyll-sitemap"
79 | gem "jekyll-gist"
80 | gem "jekyll-feed"
81 | gem "jemoji"
82 | gem "jekyll-include-cache"
83 | gem "jekyll-algolia"
84 | end
85 | ```
86 |
87 | ### _config.yml
88 | ```yaml
89 | # Build settings
90 | remote_theme: "mmistakes/minimal-mistakes@4.24.0"
91 | plugins:
92 | - jekyll-remote-theme
93 | - jekyll-paginate
94 | - jekyll-sitemap
95 | - jekyll-gist
96 | - jekyll-feed
97 | - jemoji
98 | - jekyll-include-cache
99 | ```
100 |
101 | ## Chapter 1.3 Going Live On GitHub
102 | No notes.
103 |
104 | ## Chapter 1.4 Components of Jekyll
105 |
106 | ### Links
107 | * [Learn more about YAML](https://www.linkedin.com/learning/cisco-devnet-associate-200-901-cert-prep-1-software-development-and-design/learn-about-yaml-and-its-usage)
108 | * [Markdown cheat sheet](https://www.markdownguide.org/cheat-sheet/)
109 | * [Liquid cheat sheet](https://www.shopify.com/partners/shopify-cheat-sheet)
110 |
111 | ## Chapter 2.1 Writing a Bio
112 | No notes.
113 |
114 | ## Chapter 2.2 Adding Skills
115 | Examples of skills you can list:
116 |
117 | ### Programming languages, Frameworks & libraries
118 | * **Frameworks, libraries, and Programming languages:** JavaScript, TypeScript, HTML5, CSS, PHP, etc.
119 | * **Technologies:** SQL Server, JAMStack, Gatsby, Netlify, GitHub, etc.
120 | * **Website builders:** WordPress, Wix, Webflow, Jekyll, etc.
121 | * **Specialty Skills:** Accessibility, Optimization, Dev ops
122 | * **Software and tools:** Jira, Figma, Sketch, VSCode, GitHub, Terminal
123 |
124 | ### Soft Skills
125 | * Communication,
126 | * Mentorship/leadership skills
127 | * Collaboration
128 | * Time Management
129 | * Problem-Solving / Critical Thinking
130 |
131 | ### Basic table
132 | ```markdown
133 | | Skill | Level |
134 | | ---- | ---- |
135 | | skill | level |
136 | ```
137 |
138 | ### YAML
139 | ```yaml
140 | technical:
141 | - title: CSS and SCSS
142 | level: Intermediate
143 | - title: HTML5
144 | level: Intermediate
145 | - title: JavaScrpt
146 | level: Advanced
147 | - title: ReactJS
148 | level: Advanced
149 |
150 | soft:
151 | - title: Writing
152 | level: Intermediate
153 | - title: Leadership
154 | level: Intermediate
155 | ```
156 |
157 | ## Chapter 2.3 Site Design
158 | ### Links
159 | * [Adobe Color](https://color.adobe.com/trends)
160 | * [Colour Lovers](https://www.colourlovers.com/web/trends/websites)
161 |
162 | ## Chapter 2.4 Customizing your site
163 | ### Custom.html
164 | ```html
165 |
166 |
167 |
168 |
171 |
172 | ```
173 |
174 | ### Custom.scss
175 | ```scss
176 | ---
177 | #to make sure Jekyll reads this
178 | ---
179 |
180 | @import "default";
181 | @import "author";
182 | @import "footer";
183 | @import "grid_layout";
184 | @import "home";
185 | @import "nav";
186 | @import "post";
187 | @import "taxonomy";
188 | ```
189 |
190 | ### anime.js
191 | ```javascript
192 | anime({
193 | targets: [".grid__item", ".list__item"],
194 | scale: [
195 | { value: 1, duration: 800 },
196 | { value: 1.1, duration: 200 },
197 | { value: 1, duration: 800 },
198 | ],
199 | easing: "easeInOutSine",
200 | delay: function (el, i, l) {
201 | return i * 200;
202 | },
203 | loop: false,
204 | });
205 | ```
206 |
207 | ## Chapter 3.1 Building Layouts
208 | No notes.
209 |
210 | ## Chapter 3.2 Adding Categories and Tags
211 |
212 | ### Layout changes
213 | ```html
214 |