├── .gitignore
├── README.md
├── contents
    ├── info.json
    └── press.json
├── css
    ├── main.css
    └── popup.css
├── favicons
    ├── android-chrome-144x144.png
    ├── android-chrome-192x192.png
    ├── android-chrome-36x36.png
    ├── android-chrome-48x48.png
    ├── android-chrome-72x72.png
    ├── android-chrome-96x96.png
    ├── apple-touch-icon-114x114.png
    ├── apple-touch-icon-120x120.png
    ├── apple-touch-icon-144x144.png
    ├── apple-touch-icon-152x152.png
    ├── apple-touch-icon-180x180.png
    ├── apple-touch-icon-57x57.png
    ├── apple-touch-icon-60x60.png
    ├── apple-touch-icon-72x72.png
    ├── apple-touch-icon-76x76.png
    ├── apple-touch-icon-precomposed.png
    ├── apple-touch-icon.png
    ├── browserconfig.xml
    ├── favicon-16x16.png
    ├── favicon-32x32.png
    ├── favicon-96x96.png
    ├── favicon.ico
    ├── manifest.json
    ├── mstile-144x144.png
    ├── mstile-150x150.png
    ├── mstile-310x150.png
    ├── mstile-310x310.png
    ├── mstile-70x70.png
    └── safari-pinned-tab.svg
├── icons.svg
├── img
    └── casssquare.jpg
├── index.html
└── js
    ├── content.js
    └── popup.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | content.compiled.js
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | [cassidoo.co](http://cassidoo.co)
 2 | ==============
 3 | 
 4 | My personal website, version 4! Build from scratch using the awesome power of
 5 | SVGs, ES6, the Fetch API, and of course HTML and CSS.
 6 | 
 7 | ## How it's built
 8 | 
 9 | ### SVGs
10 | Thanks to some great SVG logos found online, I combined the `path`s of all of them
11 | into one larger SVG file.  Pulling from that file in the HTML was pretty
12 | straightforward, you only have to use the `id` of the `path` to stick it in!
13 | 
14 | ```html
15 | <svg viewBox="0 0 32 32"><use xlink:href="icons.svg#github"></svg>
16 | ```
17 | 
18 | And styling them was pretty easy, using the `fill` and `filter` properties.
19 | 
20 | ### ES6 + the Fetch API
21 | I really wanted to check out template literals and the Fetch API to populate the
22 | content of the site.  So, all of the "about me" style text was built with both!
23 | 
24 | I made a couple easily editable JSON files to make maintaining information about
25 | me and what I'm doing super simple.  You can check those out for yourself in the
26 | `contents` folder.  To get them into the HTML, I pulled the information from
27 | them with `fetch`, and then shoved the variables into a template literal string!
28 | 
29 | It was pretty straightforward, because template literals can have expressions in
30 | the string.  So, for example, there's a line on my website that mentions my
31 | hobbies.  I randomly pick one and put it in the string like this:
32 | 
33 | ```js
34 | In addition to ${info.hobbies[Math.floor(Math.random()*info.hobbies.length)]},
35 | one of my favorite things to do is...
36 | ```
37 | 
38 | ### The Design
39 | One thing that I had wanted to really mess with was CSS filters and gradients.
40 | So, I did just that!  You'll notice that the background of the website is
41 | constantly changing color.  That's done exclusively with CSS.  The background of
42 | the site is just a gradient blown up:
43 | 
44 | ```
45 | background: linear-gradient(316deg, #ffdf79, #ed747f, #e371d4, #8d5993, #9771e3);
46 | background-size: 600% 600%;
47 | ```
48 | 
49 | And to get the color to change around, I just shift the gradient over time.
50 | 
51 | ```
52 | animation: gradientShift 18s ease infinite;
53 | 
54 | ...
55 | 
56 | @keyframes gradientShift {
57 |   0%{background-position:24% 0;}
58 |   50%{background-position:77% 100%;}
59 |   100%{background-position:24% 0;}
60 | }
61 | ```
62 | 
63 | In terms of the transitions between states when someone wants to read my "about"
64 | section, that needed a touch of JavaScript to make it happen.  The effect is
65 | done with all CSS, when a `blur` class is added on the click event.
66 | 
67 | The really interesting thing that I ran into is that even though adding a blur
68 | to SVGs is super simple (literally just `filter: blur(20px);`), making text
69 | blurry is a whole other animal.  You actually have to make the text transparent,
70 | and then make a `text-shadow` for the blur.  It's only a couple lines, but it's
71 | weird:
72 | 
73 | ```
74 | color: transparent;
75 | text-shadow: 0 0 40px rgba(255,255,255,.4);
76 | ```
77 | 
78 | There's a few little `:hover` events I threw in there to make the site more fun,
79 | like the spinning of the close button and the shift upward of the icons.  Those
80 | were just for fun and again, all in CSS.
81 | 
82 | ## Future stuff?
83 | Now that the core part of the site is done and public, I plan on adding some
84 | Easter eggs!  The plan is to hide a bunch of things in key commands and maybe
85 | some mouse movements, if I can figure it out.
86 | 
87 | If you find a bug or issue on the site, please make an Issue or email me!
88 | 
89 | Thanks for reading!
90 | 


--------------------------------------------------------------------------------
/contents/info.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "data": {
 3 |     "title": "Software Engineer & Developer Evangelist",
 4 |     "companies": {
 5 |       "fulltime": [
 6 |         "Clarifai",
 7 |         "Venmo"
 8 |       ],
 9 |       "intern": [
10 |         "Intuit",
11 |         "Microsoft",
12 |         "The National Center for Women & IT",
13 |         "General Mills",
14 |         "Priority 5"
15 |       ]
16 |     },
17 |     "city": "New York City",
18 |     "school": "Iowa State University",
19 |     "grad": "May 2014",
20 |     "major": "Computer Science",
21 |     "hobbies": [
22 |       "playing guitar",
23 |       "singing karaoke",
24 |       "lip sync battles",
25 |       "playing Mario Kart",
26 |       "playing Minecraft",
27 |       "coding",
28 |       "blogging",
29 |       "drawing & doodling"
30 |     ]
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/contents/press.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "data": [
  3 |     {
  4 |       "url": "http://gadgetgoals.com/interviews/cassidy-williams",
  5 |       "title": "Cassidy Williams Promotes Solidarity for Women in Tech"
  6 |     },
  7 |     {
  8 |       "url": "http://thesurge.com/stories/day-life-developer-evangelist-cassidy-williams",
  9 |       "title": "The Surge: Because She's A Girl, Some People Just Assume She Can't Code"
 10 |     },
 11 |     {
 12 |       "url": "http://www.mitracreative.com/iamcp-tristate-wit-bring-daughter-wit-event-microsoft-new-york-photos",
 13 |       "title": "Cassidy Williams at the 'Bring your Daugher' Women in Tech event at Microsoft New York"
 14 |     },
 15 |     {
 16 |       "url": "http://www.geekwire.com/2015/dubhacks-remote-cat-feeders-disease-detectors-and-other-inventions-at-this-caffeine-fueled-24-hour-university-hackathon/",
 17 |       "title": "DubHacks: Remote cat feeders, disease detectors and other inventions at this 24-hour caffeine-fueled university hackathon"
 18 |     },
 19 | 
 20 |     {
 21 |       "url": "http://www.outsideoftheclassroom.com/how-cassidy-williams-landed-tech-jobs-at-clarifai-venmo-intuit-microsoft-general-mills/",
 22 |       "title": "How Cassidy Williams Landed Tech Jobs At Clarifai, Venmo, Intuit, Microsoft, & General Mills"
 23 |     },
 24 | 
 25 |     {
 26 |       "url": "http://www.femtechleaders.com/north-america/cassidy-williams-2/",
 27 |       "title": "FemTech Leaders #FinTechWoman Feature"
 28 |     },
 29 | 
 30 |     {
 31 |       "url": "http://www.businessinsider.com/10-stars-under-35-in-enterprise-tech-2015-9",
 32 |       "title": "10 enterprise rock stars under age 35"
 33 |     },
 34 | 
 35 |     {
 36 |       "url": "https://lists.linkedin.com/2015/next-wave/enterprise-tech/cassidy-williams",
 37 |       "title": "LinkedIn Next Wave 2015: Top 10 Professionals in Enterprise Tech"
 38 |     },
 39 | 
 40 |     {
 41 |       "url": "http://www.mydomaine.com/leaders-career-books",
 42 |       "title": "8 Leaders Share the Books That Changed Their Careers"
 43 |     },
 44 | 
 45 |     {
 46 |       "url": "https://www.betterment.com/resources/inside-betterment/women-who-code-an-engineering-qa-with-venmo/",
 47 |       "title": "Women Who Code: An Engineering Q&A with Venmo"
 48 |     },
 49 | 
 50 |     {
 51 |       "url": "http://www.bloomberg.com/news/videos/2015-07-20/paypal-s-multi-front-attack-on-the-mobile-market",
 52 |       "title": "PayPal's Multi-Front Attack on the Mobile Market"
 53 |     },
 54 | 
 55 |     {
 56 |       "url": "http://blog.fogcreek.com/dev-life-interview-with-cassidy-williams/",
 57 |       "title": "dev.life – Interview with Cassidy Williams"
 58 |     },
 59 | 
 60 |     {
 61 |       "url": "http://news.mlh.io/we-asked-hackers-what-makes-an-ideal-hackathon-06-12-2015",
 62 |       "title": "We asked hackers what makes an ideal hackathon"
 63 |     },
 64 | 
 65 |     {
 66 |       "url": "http://www.swift.com/about_swift/shownews?param_dcr=news.data/en/swift_com/2015/Innotribe_Power_Women_Fintech.xml",
 67 |       "title": "Power Women in FinTech Index"
 68 |     },
 69 | 
 70 |     {
 71 |       "url": "http://www.blinkblink.cc/blogpost/2015/5/27/interview-with-technology-maven-cassidy-williams",
 72 |       "title": "Interview with Technology Maven Cassidy Williams"
 73 |     },
 74 | 
 75 |     {
 76 |       "url": "http://techcrunch.com/2015/05/03/split-lets-you-split-the-bill-fairly-not-equally/",
 77 |       "title": "Split Lets You Split The Bill Fairly, Not Equally"
 78 |     },
 79 | 
 80 |     {
 81 |       "url": "https://www.linkedin.com/pulse/women-who-work-qa-cassidy-williams-from-venmo-christina-smedley",
 82 |       "title": "Women Who Work: Q&A with Cassidy Williams from Venmo"
 83 |     },
 84 | 
 85 |     {
 86 |       "url": "http://technical.ly/brooklyn/2015/02/13/meet-cassidy-williams-venmos-23-year-old-developer-evangelist/",
 87 |       "title": "Meet Cassidy Williams, Venmo’s 23-year-old developer evangelist"
 88 |     },
 89 | 
 90 |     {
 91 |       "url": "http://hackathon.posthaven.com/cassidy-williams-is-a-venmo-dev-evangelist-and-hackathon-enthusiast",
 92 |       "title": "Hackathon Maven: Cassidy Williams is a Venmo dev evangelist and hackathon enthusiast"
 93 |     },
 94 | 
 95 |     {
 96 |       "url": "http://www.inc.com/zoe-henry/4-succesful-women-in-tech-combatting-sexism.html",
 97 |       "title": "4 Successful Women in Tech on Combating Industry Sexism"
 98 |     },
 99 | 
100 |     {
101 |       "url": "http://news.microsoft.com/features/big-dream-brings-big-inspiration-to-computer-science-education-week/",
102 |       "title": "‘Big Dream’ brings big inspiration to Computer Science Education Week"
103 |     },
104 | 
105 |     {
106 |       "url": "http://paigelsheffield.wordpress.com/2014/10/26/cassidy-williams-success-in-stem/",
107 |       "title": "Cassidy Williams: Success in STEM"
108 |     },
109 | 
110 |     {
111 |       "url": "http://www.glamour.com/inspired/2014/09/top-new-women-leaders-in-technology/33",
112 |       "title": "35 Women Under 35 Who Are Changing the Tech Industry"
113 |     },
114 | 
115 |     {
116 |       "url": "http://scienceblogs.com/usasciencefestival/2014/09/24/cassidy-williams-an-emerging-computer-scientist-with-a-desire-to-inspire-more-women-in-stem/",
117 |       "title": "Meet Nifty Fifty Speaker Cassidy Williams"
118 |     },
119 | 
120 |     {
121 |       "url": "http://www.usasciencefestival.org/component/k2/item/1169-ms_cassidy.html",
122 |       "title": "Cassidy Williams: An Emerging Computer Scientist with a Desire to Inspire More Women in STEM"
123 |     },
124 | 
125 |     {
126 |       "url": "http://www.usatoday.com/story/tech/2014/09/16/women-in-tech-documentary-diversity-microsoft/15677915/",
127 |       "title": "New documentary follows Big Dream of girls in tech"
128 |     },
129 | 
130 |     {
131 |       "url": "http://www.futureinsights.com/home/cassidy-williams-is-a-rising-star-at-fowa-js-boston.html",
132 |       "title": "Cassidy Williams is a Rising Star at FOWA (.js) Boston"
133 |     },
134 | 
135 |     {
136 |       "url": "http://blogs.technet.com/b/next/archive/2014/04/25/hackathons-generate-solutions-opportunities-and-support-for-women-in-computer-science.aspx#.U1-mQPldWSo",
137 |       "title": "Hackathons generate solutions, opportunities and support for women in computer science"
138 |     },
139 | 
140 |     {
141 |       "url": "http://www.iowastatedaily.com/news/article_f08f0130-b91e-11e3-86c8-0019bb2963f4.html",
142 |       "title": "ISU students win Money Game Jam, have financial fun"
143 |     },
144 | 
145 |     {
146 |       "url": "http://whotv.com/2014/04/01/winning-idea-isu-students-do-hackathon/",
147 |       "title": "Winning Idea: ISU Students do a hackathon"
148 |     },
149 | 
150 |     {
151 |       "url": "http://tedxtalks.ted.com/video/Growing-up-in-STEM-as-a-girl-Ca",
152 |       "title": "Growing up in STEM - as a girl: Cassidy Williams at TEDxDesMoinesWomen"
153 |     },
154 | 
155 |     {
156 |       "url": "http://www.cupofleadership.com/the-daily-cup/2014/1/24/from-me-to-we",
157 |       "title": "From 'Me' to 'We'"
158 |     },
159 | 
160 |     {
161 |       "url": "http://www.forbes.com/sites/quora/2014/01/21/why-dont-more-women-go-to-hackathons/",
162 |       "title": "Forbes - Why Don't More Women Go To Hackathons?"
163 |     },
164 | 
165 |     {
166 |       "url": "http://www.dailyherald.com/article/20131226/news/712269952/",
167 |       "title": "Chicago Suburban Standouts 2013"
168 |     },
169 | 
170 |     {
171 |       "url": "http://www.washingtonpost.com/blogs/innovations/wp/2013/12/09/the-childhood-toys-that-inspired-female-engineers-and-scientists/",
172 |       "title": "The childhood toys that inspired female engineers and scientists"
173 |     },
174 | 
175 |     {
176 |       "url": "http://www.iastate.edu/stories/2013/11/twins",
177 |       "title": "Adventure is in their genes (Iowa State Homepage cover story)"
178 |     },
179 | 
180 |     {
181 |       "url": "http://www.deseretnews.com/article/865591365/Why-more-girls-should-study-computer-science.html?pg=all",
182 |       "title": "Code secrets: The real reasons why girls need to become computer geeks"
183 |     },
184 | 
185 |     {
186 |       "url": "http://www.informit.com/articles/article.aspx?p=2159655",
187 |       "title": "How My Love of Programming Took Me to Microsoft, the White House, a Mile-High Hackathon, and My Dream Job: A Student's Story"
188 |     },
189 | 
190 |     {
191 |       "url": "http://www.iowastatedaily.com/news/article_32a0ac24-28b3-11e3-a9c2-001a4bcf887a.html",
192 |       "title": "ISU senior takes flight for social change in STEM fields"
193 |     },
194 | 
195 |     {
196 |       "url": "http://www.dailyherald.com/article/20130918/news/709189699/",
197 |       "title": "Suburban wiz wants to lead women into tech world"
198 |     },
199 | 
200 |     {
201 |       "url": "http://issuu.com/iowastate-liberalarts-sciences/docs/link_2013/1?e=1512885/3521774",
202 |       "title": "Link Magazine, Spring 2013"
203 |     },
204 | 
205 |     {
206 |       "url": "http://www.las.iastate.edu/computer-science-majors-ideas-take-flight-on-british-airways-ungrounded/",
207 |       "title": "Computer science major's ideas take flight on British Airways' UnGrounded"
208 |     },
209 | 
210 |     {
211 |       "url": "http://network.intuit.com/2013/06/24/plane-innovations/",
212 |       "title": "Brains on a Plane: Innovation at 30,000 Feet"
213 |     },
214 | 
215 |     {
216 |       "url": "http://www.contracostatimes.com/breaking-news/ci_23447687/silicon-valley-stars-take-off-flight-london-change",
217 |       "title": "Silicon Valley stars take off on British Airways 'UnGrounded' flight to London 'to change the world'"
218 |     },
219 | 
220 |     {
221 |       "url": "http://nationbuilder.com/ungrounded_landed_in_london",
222 |       "title": "UnGrounded in London, encouraging women in STEM"
223 |     },
224 | 
225 |     {
226 |       "url": "http://www.ncwit.org/news/young-women-ncwit-aspirations-computing-program-invited-join-british-airways%E2%80%99-ungrounded-flight",
227 |       "title": "Young Women from NCWIT Aspirations in Computing Program Invited To Join British Airways' UnGrounded Flight"
228 |     },
229 | 
230 |     {
231 |       "url": "http://www.mysuburbanlife.com/2013/05/24/a-package-deal-downers-grove-sisters-fly-high-in-tech-industry/a2a4b82/",
232 |       "title": "'A package deal': Downers Grove sisters fly high in tech industry"
233 |     },
234 | 
235 |     {
236 |       "url": "http://www.iowastatedaily.com/news/article_4ba74962-b37e-11e2-83ea-001a4bcf887a.html",
237 |       "title": "ISU student to join flight for social change"
238 |     },
239 | 
240 |     {
241 |       "url": "http://www.news.iastate.edu/news/2013/05/01/williamsungrounded",
242 |       "title": "Iowa State computer science student selected for Innovation Lab in the Sky flight"
243 |     },
244 | 
245 |     {
246 |       "url": "http://www.women2.com/5-girl-coders-under-21-to-watch/",
247 |       "title": "5 Girl Coders Under 21 To Watch"
248 |     },
249 | 
250 |     {
251 |       "url": "http://cra.org/resources/crn-archive-view-detail/expanding_the_pipeline/?utm_source=Computing+Research+News&utm_campaign=53f53260e7-March_2013_CRN&utm_medium=email",
252 |       "title": "Growing the Tech Talent Pool: NCWIT Aspirations in Computing Program Scales Up"
253 |     },
254 | 
255 |     {
256 |       "url": "http://www.cs.iastate.edu/files/page/files/AtansoffToday_Spring2013.pdf",
257 |       "title": "Atanasoff Today Cover"
258 |     },
259 | 
260 |     {
261 |       "url": "http://www.las.iastate.edu/iowa-states-williams-sisters-share-their-computer-science-experiences-at-white-house-tech-summit/",
262 |       "title": "Iowa State's Williams sisters share their computer science experiences at White House tech summit"
263 |     },
264 | 
265 |     {
266 |       "url": "http://www.iowastatedaily.com/news/article_10795dd6-6fad-11e2-aa21-001a4bcf887a.html",
267 |       "title": "The Williams sisters head to the White House"
268 |     },
269 | 
270 |     {
271 |       "url": "http://www.cs.iastate.edu/cassidy-and-camryn-williams-featured-microsoft-researchncwit-promotional-video",
272 |       "title": "Cassidy and Camryn Williams Featured in Microsoft Research/NCWIT Promotional Video"
273 |     },
274 | 
275 |     {
276 |       "url": "http://research.microsoft.com/apps/video/default.aspx?id=179475",
277 |       "title": "Get Inspired by Aspiration Award Winners"
278 |     }
279 |   ]
280 | }
281 | 


--------------------------------------------------------------------------------
/css/main.css:
--------------------------------------------------------------------------------
  1 | html, body {
  2 |   height: 100%;
  3 |   margin: 0;
  4 |   padding: 0;
  5 | }
  6 | 
  7 | body {
  8 |   background-color: #9771e3;
  9 |   color: #fff;
 10 |   font-family: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif;
 11 |   overflow: hidden;
 12 | }
 13 | 
 14 | ::selection {
 15 |     background-color: #9771e3;
 16 |     color: #ffdf79;
 17 |     text-shadow: none;
 18 | }
 19 | ::-moz-selection {
 20 |     background-color: #9771e3;
 21 |     color: #ffdf79;
 22 | }
 23 | 
 24 | h1 {
 25 |   font-family: 'Raleway', 'Helvetica', 'Arial', sans-serif;
 26 |   font-size: 8em;
 27 |   font-weight: 800;
 28 |   line-height: .8em;
 29 |   margin: 0;
 30 |   -webkit-margin-after: 0;
 31 |   -webkit-margin-before: 0;
 32 | }
 33 | 
 34 | h2 {
 35 |   font-size: 1.8em;
 36 |   font-weight: 300;
 37 |   margin: 5px 0;
 38 | }
 39 | 
 40 | h1, h2 {
 41 |   text-shadow: rgba(0, 0, 0, .2) 0 2px 3px;
 42 | }
 43 | 
 44 | a {
 45 |   color: white;
 46 | }
 47 | 
 48 | .container {
 49 |   background: linear-gradient(316deg, #ffdf79, #ed747f, #e371d4, #8d5993, #9771e3);
 50 |   background-size: 600% 600%;
 51 |   display: flex;
 52 |   align-items: center;
 53 |   flex-direction: column;
 54 |   height: 100%;
 55 |   justify-content: center;
 56 |   position: relative;
 57 | 
 58 |   -webkit-animation: gradientShift 18s ease infinite;
 59 |   -moz-animation: gradientShift 18s ease infinite;
 60 |   animation: gradientShift 18s ease infinite;
 61 | }
 62 | 
 63 | .header {
 64 |   max-width: 600px;
 65 | }
 66 | 
 67 | .icons {
 68 |   display: flex;
 69 |   align-items: flex-start;
 70 |   flex-wrap: wrap;
 71 |   justify-content: flex-start;
 72 | }
 73 | 
 74 | .icons svg {
 75 |   fill: #fff;
 76 |   -webkit-filter: drop-shadow(0px 2px 2px rgba(0,0,0,.1));
 77 |   -moz-filter: drop-shadow(0px 2px 2px rgba(0,0,0,.1));
 78 |   filter: drop-shadow(0px 2px 2px rgba(0,0,0,.1));
 79 |   margin: 10px;
 80 |   width: 50px;
 81 | 
 82 |   -webkit-tap-highlight-color: rgba(255,255,255,.1);
 83 | }
 84 | 
 85 | .icons svg:hover {
 86 |   cursor: pointer;
 87 | 
 88 |   -ms-transform: translate(0px,-10px);
 89 |   -moz-transform: translate(0px,-10px);
 90 |   -webkit-transform: translate(0px,-10px);
 91 |   transform: translate(0px,-10px);
 92 |   -webkit-transition: transform .5s;
 93 |   transition: transform .5s;
 94 | }
 95 | 
 96 | .content {
 97 |   display: none;
 98 |   max-width: 600px;
 99 | }
100 | 
101 | @media(max-width: 768px) {
102 |   h1 {
103 |     font-size: 5em;
104 |   }
105 |   h2 {
106 |     font-size: 1em;
107 |     margin: 15px 0;
108 |   }
109 |   a {
110 |     text-decoration: none;
111 |   }
112 |   .container {
113 |     padding: 20px;
114 |     text-align: center;
115 |   }
116 |   .content, .header {
117 |     max-width: 100%;
118 |   }
119 |   .icons {
120 |     justify-content: center;
121 |   }
122 |   .icons svg {
123 |     width: 80px;
124 |   }
125 |   .icons svg:hover {
126 |     transform: none;
127 |   }
128 | }
129 | 
130 | @media(max-width: 768px) {
131 |   .ellipsis {
132 |     display: none;
133 |   }
134 | }
135 | 
136 | /* animations */
137 | @-webkit-keyframes gradientShift {
138 |   0%{background-position:24% 0;}
139 |   50%{background-position:77% 100%;}
140 |   100%{background-position:24% 0;}
141 | }
142 | @-moz-keyframes gradientShift {
143 |   0%{background-position:24% 0;}
144 |   50%{background-position:77% 100%;}
145 |   100%{background-position:24% 0;}
146 | }
147 | @keyframes gradientShift {
148 |   0%{background-position:24% 0;}
149 |   50%{background-position:77% 100%;}
150 |   100%{background-position:24% 0;}
151 | }
152 | 


--------------------------------------------------------------------------------
/css/popup.css:
--------------------------------------------------------------------------------
  1 | .blur .content {
  2 |   display: block;
  3 |   position: absolute;
  4 |   top: -20px;
  5 |   left: 50%;
  6 |   height: 100%;
  7 | 
  8 |   letter-spacing: .05em;
  9 |   font-weight: 300;
 10 |   text-align: justify;
 11 |   transform: translate(-50%, 0%);
 12 |   white-space: pre-wrap;
 13 |   z-index: 100;
 14 | 
 15 |   -webkit-animation: fadeInFromNone 1s ease-out;
 16 |   -moz-animation: fadeInFromNone 1s ease-out;
 17 |   animation: fadeInFromNone 1s ease-out;
 18 | }
 19 | 
 20 | .blur .content .close {
 21 |   text-align: center;
 22 |   width: 100%;
 23 |   height: 60px;
 24 | }
 25 | 
 26 | .blur .content svg {
 27 |   fill: #fff;
 28 |   width: 60px;
 29 | }
 30 | 
 31 | .blur .content svg:hover {
 32 |   cursor: pointer;
 33 | 
 34 |   -webkit-animation: spin .5s linear;
 35 |   -moz-animation: spin .5s linear;
 36 |   animation: spin .5s linear;
 37 | }
 38 | 
 39 | .about {
 40 |   height: 70%;
 41 |   padding: 0 15px 0 0;
 42 |   overflow-y: auto;
 43 |   text-shadow: 1px 1px 1px rgba(0,0,0,.3);
 44 | }
 45 | 
 46 | .about a:hover {
 47 |   background-color: rgba(62,31,125,.2);
 48 | }
 49 | 
 50 | .about.shrink {
 51 |   -webkit-animation: shrink .5s ease-out;
 52 |   -moz-animation: shrink .5s ease-out;
 53 |   animation: shrink .5s ease-out;
 54 | }
 55 | 
 56 | .blur .header {
 57 |   z-index: 0;
 58 | }
 59 | 
 60 | .blur h1, .blur h2 {
 61 |   color: transparent;
 62 |   text-shadow: 0 0 40px rgba(255,255,255,.4);
 63 | 
 64 |   transition: text-shadow .5s;
 65 |   transition: color .5s;
 66 | }
 67 | 
 68 | .blur .icons svg {
 69 |   fill: rgba(255,255,255,.5);
 70 |   -webkit-filter: blur(20px);
 71 |   -moz-filter: blur(20px);
 72 |   filter: blur(20px);
 73 |   margin: 10px;
 74 |   width: 60px;
 75 | 
 76 |   transition: filter .5s;
 77 | }
 78 | 
 79 | /* custom scrollbar */
 80 | ::-webkit-scrollbar {
 81 |   width: 10px;
 82 |   background-color: rgba(62,31,125,0);
 83 |   -webkit-border-radius: 100px;
 84 | }
 85 | ::-webkit-scrollbar:hover {
 86 |   background-color: rgba(0,0,0,0.09);
 87 | }
 88 | ::-webkit-scrollbar-thumb:vertical {
 89 |   background: linear-gradient(316deg, rgba(62,31,125,.2), rgba(0,0,0,.2));
 90 |   -webkit-border-radius: 100px;
 91 |   background-clip: padding-box;
 92 |   border: 2px solid rgba(0,0,0,0);
 93 |   min-height: 10px;
 94 | }
 95 | ::-webkit-scrollbar-thumb:vertical:active {
 96 |   background: rgba(62,31,125,0.3);
 97 |   -webkit-border-radius: 100px;
 98 | }
 99 | 
100 | /* animations */
101 | @-moz-keyframes shrink {
102 |   0% {height: 70%; opacity: 1;}
103 |   100% {height: 0; opacity: 0;}
104 | }
105 | @-webkit-keyframes shrink {
106 |   0% {height: 70%; opacity: 1;}
107 |   100% {height: 0; opacity: 0;}
108 | }
109 | @keyframes shrink {
110 |   0% {height: 70%; opacity: 1;}
111 |   100% {height: 0; opacity: 0;}
112 | }
113 | 
114 | @-moz-keyframes spin {
115 |   100% {-moz-transform: rotate(90deg); transform:rotate(90deg);}
116 | }
117 | @-webkit-keyframes spin {
118 |   100% {-webkit-transform: rotate(90deg); transform:rotate(90deg);}
119 | }
120 | @keyframes spin {
121 |   100% {transform:rotate(90deg);}
122 | }
123 | 
124 | @-webkit-keyframes fadeInFromNone {
125 |   0% {display: none; opacity: 0;}
126 |   1% {display: block; opacity: 0;}
127 |   100% {display: block;opacity: 1;}
128 | }
129 | @-moz-keyframes fadeInFromNone {
130 |   0% {display: none; opacity: 0;}
131 |   1% {display: block; opacity: 0;}
132 |   100% {display: block;opacity: 1;}
133 | }
134 | @keyframes fadeInFromNone {
135 |   0% {display: none; opacity: 0;}
136 |   1% {display: block; opacity: 0;}
137 |   100% {display: block;opacity: 1;}
138 | }
139 | 


--------------------------------------------------------------------------------
/favicons/android-chrome-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cassidoo/cassidoo-v4/80e34edb5cdc4b3cdda08b95275b907c2cc16ba6/favicons/android-chrome-144x144.png


--------------------------------------------------------------------------------
/favicons/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cassidoo/cassidoo-v4/80e34edb5cdc4b3cdda08b95275b907c2cc16ba6/favicons/android-chrome-192x192.png


--------------------------------------------------------------------------------
/favicons/android-chrome-36x36.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cassidoo/cassidoo-v4/80e34edb5cdc4b3cdda08b95275b907c2cc16ba6/favicons/android-chrome-36x36.png


--------------------------------------------------------------------------------
/favicons/android-chrome-48x48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cassidoo/cassidoo-v4/80e34edb5cdc4b3cdda08b95275b907c2cc16ba6/favicons/android-chrome-48x48.png


--------------------------------------------------------------------------------
/favicons/android-chrome-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cassidoo/cassidoo-v4/80e34edb5cdc4b3cdda08b95275b907c2cc16ba6/favicons/android-chrome-72x72.png


--------------------------------------------------------------------------------
/favicons/android-chrome-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cassidoo/cassidoo-v4/80e34edb5cdc4b3cdda08b95275b907c2cc16ba6/favicons/android-chrome-96x96.png


--------------------------------------------------------------------------------
/favicons/apple-touch-icon-114x114.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cassidoo/cassidoo-v4/80e34edb5cdc4b3cdda08b95275b907c2cc16ba6/favicons/apple-touch-icon-114x114.png


--------------------------------------------------------------------------------
/favicons/apple-touch-icon-120x120.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cassidoo/cassidoo-v4/80e34edb5cdc4b3cdda08b95275b907c2cc16ba6/favicons/apple-touch-icon-120x120.png


--------------------------------------------------------------------------------
/favicons/apple-touch-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cassidoo/cassidoo-v4/80e34edb5cdc4b3cdda08b95275b907c2cc16ba6/favicons/apple-touch-icon-144x144.png


--------------------------------------------------------------------------------
/favicons/apple-touch-icon-152x152.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cassidoo/cassidoo-v4/80e34edb5cdc4b3cdda08b95275b907c2cc16ba6/favicons/apple-touch-icon-152x152.png


--------------------------------------------------------------------------------
/favicons/apple-touch-icon-180x180.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cassidoo/cassidoo-v4/80e34edb5cdc4b3cdda08b95275b907c2cc16ba6/favicons/apple-touch-icon-180x180.png


--------------------------------------------------------------------------------
/favicons/apple-touch-icon-57x57.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cassidoo/cassidoo-v4/80e34edb5cdc4b3cdda08b95275b907c2cc16ba6/favicons/apple-touch-icon-57x57.png


--------------------------------------------------------------------------------
/favicons/apple-touch-icon-60x60.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cassidoo/cassidoo-v4/80e34edb5cdc4b3cdda08b95275b907c2cc16ba6/favicons/apple-touch-icon-60x60.png


--------------------------------------------------------------------------------
/favicons/apple-touch-icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cassidoo/cassidoo-v4/80e34edb5cdc4b3cdda08b95275b907c2cc16ba6/favicons/apple-touch-icon-72x72.png


--------------------------------------------------------------------------------
/favicons/apple-touch-icon-76x76.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cassidoo/cassidoo-v4/80e34edb5cdc4b3cdda08b95275b907c2cc16ba6/favicons/apple-touch-icon-76x76.png


--------------------------------------------------------------------------------
/favicons/apple-touch-icon-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cassidoo/cassidoo-v4/80e34edb5cdc4b3cdda08b95275b907c2cc16ba6/favicons/apple-touch-icon-precomposed.png


--------------------------------------------------------------------------------
/favicons/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cassidoo/cassidoo-v4/80e34edb5cdc4b3cdda08b95275b907c2cc16ba6/favicons/apple-touch-icon.png


--------------------------------------------------------------------------------
/favicons/browserconfig.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <browserconfig>
 3 |   <msapplication>
 4 |     <tile>
 5 |       <square70x70logo src="/favicons/mstile-70x70.png"/>
 6 |       <square150x150logo src="/favicons/mstile-150x150.png"/>
 7 |       <square310x310logo src="/favicons/mstile-310x310.png"/>
 8 |       <wide310x150logo src="/favicons/mstile-310x150.png"/>
 9 |       <TileColor>#da532c</TileColor>
10 |     </tile>
11 |   </msapplication>
12 | </browserconfig>
13 | 


--------------------------------------------------------------------------------
/favicons/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cassidoo/cassidoo-v4/80e34edb5cdc4b3cdda08b95275b907c2cc16ba6/favicons/favicon-16x16.png


--------------------------------------------------------------------------------
/favicons/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cassidoo/cassidoo-v4/80e34edb5cdc4b3cdda08b95275b907c2cc16ba6/favicons/favicon-32x32.png


--------------------------------------------------------------------------------
/favicons/favicon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cassidoo/cassidoo-v4/80e34edb5cdc4b3cdda08b95275b907c2cc16ba6/favicons/favicon-96x96.png


--------------------------------------------------------------------------------
/favicons/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cassidoo/cassidoo-v4/80e34edb5cdc4b3cdda08b95275b907c2cc16ba6/favicons/favicon.ico


--------------------------------------------------------------------------------
/favicons/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "cassidoo.co",
 3 | 	"icons": [
 4 | 		{
 5 | 			"src": "\/favicons\/android-chrome-36x36.png",
 6 | 			"sizes": "36x36",
 7 | 			"type": "image\/png",
 8 | 			"density": 0.75
 9 | 		},
10 | 		{
11 | 			"src": "\/favicons\/android-chrome-48x48.png",
12 | 			"sizes": "48x48",
13 | 			"type": "image\/png",
14 | 			"density": 1
15 | 		},
16 | 		{
17 | 			"src": "\/favicons\/android-chrome-72x72.png",
18 | 			"sizes": "72x72",
19 | 			"type": "image\/png",
20 | 			"density": 1.5
21 | 		},
22 | 		{
23 | 			"src": "\/favicons\/android-chrome-96x96.png",
24 | 			"sizes": "96x96",
25 | 			"type": "image\/png",
26 | 			"density": 2
27 | 		},
28 | 		{
29 | 			"src": "\/favicons\/android-chrome-144x144.png",
30 | 			"sizes": "144x144",
31 | 			"type": "image\/png",
32 | 			"density": 3
33 | 		},
34 | 		{
35 | 			"src": "\/favicons\/android-chrome-192x192.png",
36 | 			"sizes": "192x192",
37 | 			"type": "image\/png",
38 | 			"density": 4
39 | 		}
40 | 	]
41 | }
42 | 


--------------------------------------------------------------------------------
/favicons/mstile-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cassidoo/cassidoo-v4/80e34edb5cdc4b3cdda08b95275b907c2cc16ba6/favicons/mstile-144x144.png


--------------------------------------------------------------------------------
/favicons/mstile-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cassidoo/cassidoo-v4/80e34edb5cdc4b3cdda08b95275b907c2cc16ba6/favicons/mstile-150x150.png


--------------------------------------------------------------------------------
/favicons/mstile-310x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cassidoo/cassidoo-v4/80e34edb5cdc4b3cdda08b95275b907c2cc16ba6/favicons/mstile-310x150.png


--------------------------------------------------------------------------------
/favicons/mstile-310x310.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cassidoo/cassidoo-v4/80e34edb5cdc4b3cdda08b95275b907c2cc16ba6/favicons/mstile-310x310.png


--------------------------------------------------------------------------------
/favicons/mstile-70x70.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cassidoo/cassidoo-v4/80e34edb5cdc4b3cdda08b95275b907c2cc16ba6/favicons/mstile-70x70.png


--------------------------------------------------------------------------------
/favicons/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 3 |  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 4 | <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 5 |  width="260.000000pt" height="260.000000pt" viewBox="0 0 260.000000 260.000000"
 6 |  preserveAspectRatio="xMidYMid meet">
 7 | <metadata>
 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013
 9 | </metadata>
10 | <g transform="translate(0.000000,260.000000) scale(0.100000,-0.100000)"
11 | fill="#000000" stroke="none">
12 | <path d="M0 1300 l0 -1300 863 0 864 0 436 435 437 436 0 864 0 865 -1300 0
13 | -1300 0 0 -1300z"/>
14 | </g>
15 | </svg>
16 | 


--------------------------------------------------------------------------------
/icons.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 |   <path id="blog" d="M6 0l-1 1 2 2 1-1-2-2zm-2 2l-4 4v2h2l4-4-2-2z" />
 3 |   <path id="close" d="M9.016,40.837c0.195,0.195,0.451,0.292,0.707,0.292c0.256,0,0.512-0.098,0.708-0.293l14.292-14.309
 4 |           l14.292,14.309c0.195,0.196,0.451,0.293,0.708,0.293c0.256,0,0.512-0.098,0.707-0.292c0.391-0.39,0.391-1.023,0.001-1.414
 5 |           L26.153,25.129L40.43,10.836c0.39-0.391,0.39-1.024-0.001-1.414c-0.392-0.391-1.024-0.391-1.414,0.001L24.722,23.732L10.43,9.423
 6 |           c-0.391-0.391-1.024-0.391-1.414-0.001c-0.391,0.39-0.391,1.023-0.001,1.414l14.276,14.293L9.015,39.423
 7 |           C8.625,39.813,8.625,40.447,9.016,40.837z"/>
 8 |   <path id="codepen" d="M32,10.9C32,10.9,32,10.9,32,10.9c0-0.1,0-0.1,0-0.2c0,0,0,0,0-0.1c0,0,0-0.1,0-0.1c0,0,0,0,0-0.1
 9 |           c0,0,0-0.1,0-0.1c0,0,0,0,0-0.1c0,0,0-0.1-0.1-0.1c0,0,0,0,0-0.1c0,0,0-0.1-0.1-0.1c0,0,0,0-0.1-0.1c0,0-0.1,0-0.1-0.1
10 |           c0,0,0,0-0.1,0c0,0,0,0,0,0L16.8,0.2c-0.5-0.3-1.1-0.3-1.5,0L0.6,10c0,0,0,0,0,0c0,0,0,0-0.1,0c0,0-0.1,0-0.1,0.1c0,0,0,0-0.1,0.1
11 |           c0,0,0,0-0.1,0.1c0,0,0,0,0,0.1c0,0,0,0.1-0.1,0.1c0,0,0,0,0,0.1c0,0,0,0.1,0,0.1c0,0,0,0,0,0.1c0,0,0,0.1,0,0.1c0,0,0,0,0,0.1
12 |           c0,0,0,0.1,0,0.1c0,0,0,0,0,0.1c0,0.1,0,0.1,0,0.2v9.7c0,0.1,0,0.1,0,0.2c0,0,0,0,0,0.1c0,0,0,0.1,0,0.1c0,0,0,0,0,0.1
13 |           c0,0,0,0.1,0,0.1c0,0,0,0,0,0.1c0,0,0,0.1,0,0.1c0,0,0,0,0,0.1c0,0,0,0.1,0.1,0.1c0,0,0,0,0,0.1c0,0,0,0.1,0.1,0.1c0,0,0,0,0.1,0.1
14 |           c0,0,0.1,0,0.1,0.1c0,0,0,0,0.1,0c0,0,0,0,0,0l14.6,9.8c0.2,0.2,0.5,0.2,0.8,0.2c0.3,0,0.5-0.1,0.8-0.2L31.4,22c0,0,0,0,0,0
15 |           c0,0,0,0,0.1,0c0,0,0.1,0,0.1-0.1c0,0,0,0,0.1-0.1c0,0,0,0,0.1-0.1c0,0,0,0,0-0.1c0,0,0-0.1,0.1-0.1c0,0,0,0,0-0.1c0,0,0-0.1,0-0.1
16 |           c0,0,0,0,0-0.1c0,0,0-0.1,0-0.1c0,0,0,0,0-0.1c0,0,0-0.1,0-0.1c0,0,0,0,0-0.1c0-0.1,0-0.1,0-0.2v-9.7C32,11.1,32,11,32,10.9z
17 |            M17.4,3.9l10.8,7.2l-4.8,3.2l-6-4V3.9z M14.6,3.9v6.4l-6,4l-4.8-3.2L14.6,3.9z M2.8,13.7L6.2,16l-3.4,2.3V13.7z M14.6,28.1
18 |           L3.9,20.9l4.8-3.2l6,4V28.1z M16,19.3L11.1,16l4.9-3.3l4.9,3.3L16,19.3z M17.4,28.1v-6.4l6-4l4.8,3.2L17.4,28.1z M29.2,18.3L25.8,16
19 |           l3.4-2.3V18.3z"/>
20 |   <path id="ellipses" d="M0 0v2h2v-2h-2zm3 0v2h2v-2h-2zm3 0v2h2v-2h-2z" transform="translate(0 3)" />
21 |   <path id="email" d="M0 0v1l4 2 4-2v-1h-8zm0 2v4h8v-4l-4 2-4-2z" transform="translate(0 1)" />
22 |   <path id="github" fill-rule="evenodd" clip-rule="evenodd" d="M16,0.4c-8.8,0-16,7.2-16,16c0,7.1,4.6,13.1,10.9,15.2
23 |           c0.8,0.1,1.1-0.3,1.1-0.8c0-0.4,0-1.4,0-2.7c-4.5,1-5.4-2.1-5.4-2.1c-0.7-1.8-1.8-2.3-1.8-2.3c-1.5-1,0.1-1,0.1-1
24 |           c1.6,0.1,2.5,1.6,2.5,1.6c1.4,2.4,3.7,1.7,4.7,1.3c0.1-1,0.6-1.7,1-2.1c-3.6-0.4-7.3-1.8-7.3-7.9c0-1.7,0.6-3.2,1.6-4.3
25 |           c-0.2-0.4-0.7-2,0.2-4.2c0,0,1.3-0.4,4.4,1.6c1.3-0.4,2.6-0.5,4-0.5c1.4,0,2.7,0.2,4,0.5C23.1,6.6,24.4,7,24.4,7
26 |           c0.9,2.2,0.3,3.8,0.2,4.2c1,1.1,1.6,2.5,1.6,4.3c0,6.1-3.7,7.5-7.3,7.9c0.6,0.5,1.1,1.5,1.1,3c0,2.1,0,3.9,0,4.4
27 |           c0,0.4,0.3,0.9,1.1,0.8C27.4,29.5,32,23.5,32,16.4C32,7.6,24.8,0.4,16,0.4z"/>
28 |   <path id="instagram" d="M28.2,0H3.8C1.7,0,0,1.7,0,3.8v24.4C0,30.3,1.7,32,3.8,32h24.4c2.1,0,3.8-1.7,3.8-3.8V3.8
29 |           C32,1.7,30.3,0,28.2,0z M24,4h3c0.6,0,1,0.4,1,1v3c0,0.6-0.4,1-1,1h-3c-0.6,0-1-0.4-1-1V5C23,4.4,23.4,4,24,4z M16,9.9
30 |           c3.4,0,6.2,2.7,6.2,6.1c0,3.4-2.8,6.1-6.2,6.1c-3.4,0-6.2-2.7-6.2-6.1C9.9,12.6,12.6,9.9,16,9.9z M28,29H4c-0.6,0-1-0.4-1-1V13h4
31 |           c-0.5,0.8-0.7,2.1-0.7,3c0,5.4,4.4,9.7,9.7,9.7c5.4,0,9.7-4.4,9.7-9.7c0-0.9-0.1-2.3-0.8-3h4v15C29,28.6,28.6,29,28,29z"/>
32 |   <path id="linkedin" d="M30.7,0H1.3C0.6,0,0,0.6,0,1.3v29.3C0,31.4,0.6,32,1.3,32h29.3c0.7,0,1.3-0.6,1.3-1.3V1.3
33 |           C32,0.6,31.4,0,30.7,0z M9.5,27.3H4.7V12h4.8V27.3z M7.1,9.9c-1.5,0-2.8-1.2-2.8-2.8c0-1.5,1.2-2.8,2.8-2.8c1.5,0,2.8,1.2,2.8,2.8
34 |           C9.9,8.7,8.6,9.9,7.1,9.9z M27.3,27.3h-4.7v-7.4c0-1.8,0-4-2.5-4c-2.5,0-2.8,1.9-2.8,3.9v7.6h-4.7V12H17v2.1h0.1
35 |           c0.6-1.2,2.2-2.5,4.5-2.5c4.8,0,5.7,3.2,5.7,7.3V27.3z"/>
36 |   <path id="twitter" d="M32,6.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6C25.7,3.8,24,3,22.2,3
37 |           c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5C10.3,10.8,5.5,8.2,2.2,4.2c-0.6,1-0.9,2.1-0.9,3.3c0,2.3,1.2,4.3,2.9,5.5
38 |           c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1
39 |           c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1C2.9,27.9,6.4,29,10.1,29c12.1,0,18.7-10,18.7-18.7
40 |           c0-0.3,0-0.6,0-0.8C30,8.5,31.1,7.4,32,6.1z"/>
41 | </svg>
42 | 


--------------------------------------------------------------------------------
/img/casssquare.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cassidoo/cassidoo-v4/80e34edb5cdc4b3cdda08b95275b907c2cc16ba6/img/casssquare.jpg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <title>Cassidy Williams</title>
 4 |     <meta name="description" content="Cassidy Williams, Software Engineer &amp; Developer Evangelist in NYC." />
 5 | 
 6 |     <!-- Favicon -->
 7 |     <link rel="apple-touch-icon" sizes="57x57" href="/favicons/apple-touch-icon-57x57.png">
 8 |     <link rel="apple-touch-icon" sizes="60x60" href="/favicons/apple-touch-icon-60x60.png">
 9 |     <link rel="apple-touch-icon" sizes="72x72" href="/favicons/apple-touch-icon-72x72.png">
10 |     <link rel="apple-touch-icon" sizes="76x76" href="/favicons/apple-touch-icon-76x76.png">
11 |     <link rel="apple-touch-icon" sizes="114x114" href="/favicons/apple-touch-icon-114x114.png">
12 |     <link rel="apple-touch-icon" sizes="120x120" href="/favicons/apple-touch-icon-120x120.png">
13 |     <link rel="apple-touch-icon" sizes="144x144" href="/favicons/apple-touch-icon-144x144.png">
14 |     <link rel="apple-touch-icon" sizes="152x152" href="/favicons/apple-touch-icon-152x152.png">
15 |     <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon-180x180.png">
16 |     <link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32">
17 |     <link rel="icon" type="image/png" href="/favicons/android-chrome-192x192.png" sizes="192x192">
18 |     <link rel="icon" type="image/png" href="/favicons/favicon-96x96.png" sizes="96x96">
19 |     <link rel="icon" type="image/png" href="/favicons/favicon-16x16.png" sizes="16x16">
20 |     <link rel="manifest" href="/favicons/manifest.json">
21 |     <link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#5bbad5">
22 |     <link rel="shortcut icon" href="/favicons/favicon.ico">
23 |     <meta name="msapplication-TileColor" content="#da532c">
24 |     <meta name="msapplication-TileImage" content="/favicons/mstile-144x144.png">
25 |     <meta name="msapplication-config" content="/favicons/browserconfig.xml">
26 | 
27 |     <!-- Twitter Card data -->
28 |     <meta name="twitter:card" content="summary">
29 |     <meta name="twitter:title" content="Cassidy Williams">
30 |     <meta name="twitter:description" content="Cassidy Williams, Software Engineer &amp; Developer Evangelist in NYC.">
31 |     <meta name="twitter:creator" content="@cassidoo">
32 |     <meta name="twitter:image" content="http://cassidoo.co/img/casssquare.jpg">
33 | 
34 |     <!-- Open Graph data -->
35 |     <meta property="og:title" content="Cassidy Williams" />
36 |     <meta property="og:url" content="http://cassidoo.co/" />
37 |     <meta property="og:image" content="http://cassidoo.co/img/casssquare.jpg" />
38 |     <meta property="og:description" content="Cassidy Williams, Software Engineer &amp; Developer Evangelist in NYC." />
39 |     <meta property="og:site_name" content="Cassidy Williams' personal website" />
40 |     <meta name="theme-color" content="#9771e3">
41 |     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
42 | 
43 |     <link href="https://fonts.googleapis.com/css?family=Raleway:800,400" rel="stylesheet" type="text/css">
44 |     <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300' rel='stylesheet' type='text/css'>
45 |     <link href="css/main.css" rel="stylesheet" type="text/css">
46 |     <link href="css/popup.css" rel="stylesheet" type="text/css">
47 |     <script type='text/javascript' src='js/content.compiled.js'></script>
48 |     <script type='text/javascript' src='js/popup.js'></script>
49 |   </head>
50 |   <body>
51 |     <div class="container">
52 |       <div class="header">
53 |         <h1>Cassidy Williams</h1>
54 |         <h2>Software Engineer &amp; Developer Evangelist</h2>
55 |         <div class="icons">
56 |           <a href="http://github.com/cassidoo">
57 |             <svg viewBox="0 0 32 32"><use xlink:href="icons.svg#github"></svg>
58 |           </a>
59 |           <a href="http://twitter.com/cassidoo">
60 |             <svg viewBox="0 0 32 32"><use xlink:href="icons.svg#twitter"></svg>
61 |           </a>
62 |           <a href="http://codepen.io/cassidoo/">
63 |             <svg viewBox="0 0 32 32"><use xlink:href="icons.svg#codepen"></svg>
64 |           </a>
65 |           <a href="http://linkedin.com/in/cassidoo">
66 |             <svg viewBox="0 0 32 32"><use xlink:href="icons.svg#linkedin"></svg>
67 |           </a>
68 |           <a href="http://instagram.com/superandomness">
69 |             <svg viewBox="0 0 32 32"><use xlink:href="icons.svg#instagram"></svg>
70 |           </a>
71 |           <a href="http://cassidoo.github.io">
72 |             <svg viewBox="0 0 8 8"><use xlink:href="icons.svg#blog"></svg>
73 |           </a>
74 |           <a href="mailto:cassidy@cassidoo.co">
75 |             <svg viewBox="0 0 8 8"><use xlink:href="icons.svg#email"></svg>
76 |           </a>
77 |           <svg class="ellipsis" onclick="popupToggle()" viewBox="0 0 8 8"><use xlink:href="icons.svg#ellipses"></svg>
78 |         </div>
79 |       </div>
80 |       <div class="content">
81 |         <div class="close">
82 |           <svg onclick="closePopup()" viewBox="0 0 50 50"><use xlink:href="icons.svg#close"></svg>
83 |         </div>
84 |         <div class="about" id="about">
85 |           <div id="content">
86 |           </div>
87 |           <div id="press">
88 |           </div>
89 |           <div>Want to read more? <a href="mailto:cassidy@cassidoo.co">Contact me</a> or <a href="https://github.com/cassidoo/cassidoo-v4/blob/master/contents/press.json">dig into the code yourself.</a></div>
90 |         </div>
91 |       </div>
92 |     </div>
93 |   </body>
94 | </html>
95 | 


--------------------------------------------------------------------------------
/js/content.js:
--------------------------------------------------------------------------------
  1 | // build headers for requests
  2 | function buildHeader() {
  3 |   var head = new Headers();
  4 |   head.append('pragma', 'no-cache');
  5 |   head.append('cache-control', 'no-cache');
  6 | 
  7 |   var init = {
  8 |     method: 'GET',
  9 |     headers: head,
 10 |   };
 11 |   return init;
 12 | }
 13 | 
 14 | // pull infomation about me
 15 | function pullInfo() {
 16 |   return fetch('contents/info.json', buildHeader()).then(function(response) {
 17 |     return response.json();
 18 |   });
 19 | }
 20 | 
 21 | // get variable values for About section
 22 | function infoVars() {
 23 |   var info = {};
 24 | 
 25 |   pullInfo().then(function(r) {
 26 |     var x = r.data;
 27 |     info.title = x.title;
 28 |     info.company = x.companies.fulltime[0];
 29 |     info.fulltime = x.companies.fulltime.slice(1);
 30 |     info.intern = x.companies.intern;
 31 |     info.city = x.city;
 32 |     info.school = x.school;
 33 |     info.grad = x.grad;
 34 |     info.major = x.major;
 35 |     info.hobbies = x.hobbies;
 36 |   })
 37 |   .then(function() {
 38 |     intro(info);
 39 |   });
 40 | }
 41 | 
 42 | // pull press links
 43 | function pullPress() {
 44 |   return fetch('contents/press.json', buildHeader()).then(function(response) {
 45 |     return response.json();
 46 |   });
 47 | }
 48 | 
 49 | // first 5 press articles
 50 | function pressVars() {
 51 |   var recent = [];
 52 | 
 53 |   pullPress().then(function(r) {
 54 |     for (var i = 0; i < 5; i++) {
 55 |       recent[i] = r.data[i];
 56 |     }
 57 |   })
 58 |   .then(function() {
 59 |     press(recent);
 60 |   });
 61 | }
 62 | 
 63 | function formListString(arr) {
 64 |   if (arr.length > 1) {
 65 |     return arr.slice(0, -2).join(', ') + ', and ' + arr.slice(-1);
 66 |   } else {
 67 |     return arr;
 68 |   }
 69 | }
 70 | 
 71 | // generate info section
 72 | function intro(info) {
 73 |   var content = document.getElementById('content');
 74 |   var fulltime = formListString(info.fulltime);
 75 |   var intern = formListString(info.intern);
 76 | 
 77 |   console.log(info);
 78 | 
 79 |   content.innerHTML = `Hi, my name is Cassidy Williams (if you couldn't figure that out already) and I am a ${info.title} at ${info.company} in ${info.city}!
 80 | 
 81 |       I started my voyage into coding when I was an 8th grader in the suburbs of Chicago, and I've been loving it ever since. I'm primarily interested in front-end development, but hey, it's always fun to try other things too. You can see my projects on my <a href="http://github.com/cassidoo">GitHub profile</a>.
 82 | 
 83 |       I joined ${info.company} in August 2015, where I'm working on building developer evangelism in the organization from the ground up. I'm also doing some front-end engineering work, as their first female engineer! At the hackathons we've attended so far, we're consistently one of the top APIs used (if not the top) every single time, which is very exciting.
 84 | 
 85 |       Previously, I was at ${fulltime}, and before that, I graduated from ${info.school} in ${info.grad} with my degree in ${info.major}. While there, I interned at ${intern}. Since moving to NYC, I've had the honor of working with various organizations, such as <a href="http://hacker.fund/">Hacker Fund</a> as their Director of Outreach, and I've been included as one of <a href="http://www.glamour.com/inspired/2014/09/top-new-women-leaders-in-technology/33">Glamour Magazine's 35 Women Under 35 Who Are Changing the Tech Industry</a> and <a href="https://lists.linkedin.com/2015/next-wave/enterprise-tech/cassidy-williams">LinkedIn's top 10 Professionals 35 & Under in Enterprise Tech</a>. I've also had the pleasure of working with Microsoft on the <a href="http://www.bigdreammovement.com/">Big Dream documentary</a> and the U.S.A. Science and Engineering Festival with their <a href="http://scienceblogs.com/usasciencefestival/2014/09/24/cassidy-williams-an-emerging-computer-scientist-with-a-desire-to-inspire-more-women-in-stem/">Nifty Fifty program</a> to encourage more students to participate in STEM.
 86 | 
 87 |       In addition to ${info.hobbies[Math.floor(Math.random()*info.hobbies.length)]}, one of my favorite things to do is help people be successful, whether it means mentoring them at a hackathon, editing their resume, or giving a talk. Check out my <a href="http://github.com/cassidoo/getting-a-gig">Getting a Gig</a> guide or my <a href="http://cassidoo.github.io">blog</a> to learn more about that. If you want. You don't have to. I'm not your mother.
 88 | 
 89 |       If you have any questions about me or you just want to send me a joke, take a look at any of my profiles listed on this site. If you want Clarifai to sponsor an event of yours, please <a href="hackers@clarifai.com">email me at work</a>.
 90 |       Thanks for reading this far. In exchange for your seemingly undying loyalty, here is a joke: Why are mountains so funny? Because they're hill areas.`;
 91 | }
 92 | 
 93 | // generate press section
 94 | function press(articles) {
 95 |   var press = document.getElementById('press');
 96 |   press.innerHTML = `<div>Recent news with me:</div><ul>`;
 97 |   articles.forEach(function(x) {
 98 |     press.innerHTML += `<li><a href="${x.url}">${x.title}</a></li>`;
 99 |   });
100 |   press.innerHTML += `</ul>`;
101 | }
102 | 
103 | // generate all content
104 | function generateContent() {
105 |   infoVars();
106 |   pressVars();
107 | }
108 | 


--------------------------------------------------------------------------------
/js/popup.js:
--------------------------------------------------------------------------------
 1 | function popupToggle() {
 2 |   [].forEach.call(document.getElementsByClassName('container'), function(x) {
 3 |     if (!x.classList.contains('blur')) {
 4 |       generateContent();
 5 |     }
 6 |     x.classList.toggle('blur');
 7 |   });
 8 | }
 9 | 
10 | function closePopup() {
11 |   var aboutClass = document.getElementById('about').classList;
12 |   aboutClass.toggle('shrink');
13 |   window.setTimeout(function() {
14 |     aboutClass.toggle('shrink');
15 |     popupToggle();
16 |   }, 500);
17 | }
18 | 


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