snipette/snipette-datpro-site
snipette
/
snipette-datpro-site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Convert to basic DatPro site (images yet to be replaced!) 

Changed most of the site and content to reflect that of the
Blogging With Data course instead of the Snipette Writers'
Programme. Images are yet to be inserted, and there is of course
always fine tuning to be done, but otherwise this seems more or
less workable!
This commit is contained in:
Hippo 2021-10-26 16:31:39 +05:30
parent a602a76ae0
commit e2a35462bc
3 changed files with 204 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/img/python-console.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

274
src/index.htm
View File

@ -2,19 +2,23 @@
<html>
<head>
<meta charset="utf-8">
<title>Snipette Writers' Programme</title>
<title>Blogging With Data</title>
<link rel="stylesheet" href="style.css" />
<!-- Fonts: Crimson Text, Abhaya Libre, Open Sans -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@800&family=Crimson+Text&family=Open+Sans:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
</head>
<body class="bg-orange-100">
<div class="bg-orange-800 uppercase text-lg text-orange-900 p-5">
<a href="https://www.snipettemag.com/" target="_blank" class="m-5"><img src="img/snipette-logo-inverse.png" class="h-6 inline mr-4" alt="Snipette"/> Writers' Programme</a>
<body class="bg-blue-100 font-serif">
<div class="bg-blue-800 uppercase text-lg text-blue-900 p-5">
Blogging With Data Course
</div>
<div class="bg-orange-800 p-10 text-center">
<div class="bg-blue-800 p-10 text-center">
<img src="img/penknife.png" class="w-1/2 sm:w-auto md:w-full lg:w-64 mx-auto mb-10" />
<p class="text-gray-300 text-4xl">You write. We set it right.</p>
<p class="text-gray-300 text-4xl lowercase font-heading font-extrabold">Data science <span class="text-blue-300">with a literary touch</span></p>
</div>
<div class="bg-orange-900 text-gray-100 p-10 text-center">
<p>Want to write an article, but don't know how to go about it? The Snipette Writers' Programme is here to help. <a href="#pricing" class="text-orange-300 hover:text-orange-400">And it's free!</a></p>
<div class="bg-blue-900 text-gray-400 p-10 text-center uppercase font-sans">
<p>A <span class="bg-blue-700 text-gray-400 hover:bg-yellow-400 hover:text-black px-2 py-1 mx-1">data science</span> experience with a focus on <span class="bg-blue-700 text-gray-400 hover:bg-yellow-400 hover:text-black px-2 py-1 mx-1">narrative</span>, in addition to fact. <a href="#pricing" class="text-yellow-400 hover:text-blue-300 underline ml-2">See pricing</a></p>
</div>
<div class="max-w-4xl mx-auto">
<div class="flex flex-wrap mx-auto">
@ -22,31 +26,30 @@
<img src="img/aspiring-writer.png" />
</div>
<div class="sm:w-full md:w-1/2 lg:w-2/3 p-10">
<a name="aspiring-writers">
<h1 class="text-2xl">Aspiring writers <i class="icon-paperclip"></i></h1>
<a name="hands-on-experience">
<h1 class="text-2xl font-sans">A hands-on experience <i class="icon-paperclip"></i></h1>
</a>
<p>Whether it's giving you tips or writing paragraphs for you—we'll help you as much or as little as you need.</p>
<ul class="list-check-circle m-4">
<li>Brainstorming help</li>
<li>Layout and structure</li>
<li>Grammar and punctuation</li>
<li>Custom illustrations</li>
<ul class="list-check-circle m-4 text-lg">
<li class="m-2">Start with a topic of your choice. (If you can't decide, we'll help you choose)</li>
<li class="m-2">Work with real-world data from publicly available sources</li>
<li class="m-2">Write your own scripts and algorithms to analyse the data</li>
<li class="m-2">Draw conclusions with practical implications</li>
</ul>
</div>
</div>
<div class="flex flex-wrap sm:flex-row md:flex-row-reverse mx-auto bg-orange-200">
<div class="flex flex-wrap sm:flex-row md:flex-row-reverse mx-auto bg-blue-200">
<div class="sm:w-full md:w-1/2 lg:w-1/3">
<img src="img/researcher.png" />
</div>
<div class="sm:w-full md:w-1/2 lg:w-2/3 p-10">
<a name="researchers">
<h1 class="text-2xl">Scientists &amp; researchers <i class="icon-flask"></i></h1>
<a name="larger-picture">
<h1 class="text-2xl font-sans">The larger picture <i class="icon-flask"></i></h1>
</a>
<p>Share your work beyond its specific niche. Put your technical writing on hold and let creativity run wild—because it's time the rest of the world knows what you're doing.</p>
<ul class="list-check-circle m-4">
<li>Use stories to showcase the science</li>
<li>Explain points using metaphors</li>
<li>Grip readers with fiction techniques</li>
<ul class="list-check-circle m-4 text-lg">
<li class="m-2">Learn cutting-edge data science in real-world contexts</li>
<li class="m-2">Develop your data communication skills and become a content creation expert</li>
<li class="m-2">Get your work published on multiple platforms</li>
<li class="m-2">Have a ton of fun along the way!</li>
</ul>
</div>
</div>
@ -55,75 +58,196 @@
<img src="img/established-writer.png" />
</div>
<div class="sm:w-full md:w-1/2 lg:w-2/3 p-10">
<a name="established-writers">
<h1 class="text-2xl">Established writers <i class="icon-edit"></i></h1>
<a name="share-your-findings">
<h1 class="text-2xl font-sans">Share your findings <i class="icon-edit"></i></h1>
</a>
<p>Try out a new writing style, with new quirky rules. What we're doing here is neither fact nor fiction—but something in between.</p>
<ul class="list-check-circle m-4">
<li>Breathe new life into old pieces</li>
<li>Try out new writing styles</li>
<li>New people to brainstorm with</li>
<ul class="list-check-circle m-4 text-lg">
<li class="m-2">Get your work published so others can find it</li>
<li class="m-2">Learn how to frame your arguments and present your data</li>
<li class="m-2">Use literary techniques to tell a compelling story</li>
</ul>
<p class="text-sm mt-1">or, skip the Programme and <a href="https://www.snipettemag.com/write/" class="text-orange-800 hover:text-orange-900">write for us directly.</a></p>
</div>
</div>
<div class="bg-orange-200 flex flex-wrap mx-auto my-16 shadow-xl sm:mx-4 rounded">
<div class="xs:w-auto sm:w-full md:w-1/3 lg:w-1/3 p-4">
<a name="pricing">
<h2 class="text-center uppercase">Price</h2>
</a>
<p class="text-center text-4xl"><span class="text-base">$</span>0</p>
<p class="text-center text-lg my-2">That's right—it's free!</p>
<p class="text-sm">You can even earn money through the <a href="//medium.com/creators" target="_blank" class="text-orange-800 hover:text-orange-900">Medium Partner Programme</a>. We're working on setting up our own monetisation strategy too: let us know if you want to know more.</p>
</div>
<div class="xs:w-full sm:w-1/2 md:w-1/3 lg:w-1/3 p-4">
<h2 class="text-center uppercase">You give us</h2>
<ul class="list-chevron m-3">
<li>Content written in the Snipette Style</li>
<li>Rights to publish your piece on our <a href="//www.snipettemag.com" target="_blank" class="text-orange-800 hover:text-orange-900">website</a> and <a href="//medium.com/snipette" target="_blank" class="text-orange-800 hover:text-orange-900">Medium publication</a></li>
<li>Credit-lines to Snipette if you re-post elsewhere</li>
<li>Good company to work with ;)</li>
</ul>
</div>
<div class="xs:w-full sm:w-1/2 md:w-1/3 lg:w-1/3 p-4">
<h2 class="text-center uppercase">We give you</h2>
<ul class="list-chevron m-3">
<li>Help and guidance creating your piece</li>
<li>More exposure for your piece</li>
<li>Custom illustrations</li>
<li>Rights to re-post <abbr title="You are free to re-post with permission from Snipette for the first 6 months after publication, and without permission ever afterwards">anywhere you like*</abbr></li>
</ul>
<a href="https://www.snipettemag.com/writers-programme/"><div class="border-orange-500 border-solid border-2 text-orange-500 uppercase rounded p-2 text-center">Read the full terms</div></a>
</div>
</div>
</div>
<div class="p-4 pb-20 max-w-4xl mx-auto text-justify">
<h1 class="text-3xl text-center">How it works</h1>
<p>We understand that no two peoples’ requirements of us will be the same. No two people’s ideas or problems or finished products will be identical. Having said that, we do have some ideas about the system, that will hold constant for all our applicants</p>
<div class="bg-blue-200 flex flex-wrap sm:my-16 max-w-4xl mx-auto sm:shadow-xl border-8 border-blue-900">
<div class="xs:w-auto sm:w-1/2 md:w-1/3 lg:w-1/3 p-4 sm:p-8 mx-auto font-sans">
<a name="pricing">
<h2 class="text-center uppercase">Price</h2>
</a>
<p class="text-center text-6xl"><span class="text-base">$</span>49</p>
<p class="text-sm text-center text-green-900 font-bold"><del class="text-red-900">$99</del> Early bird offer</p>
<p class="text-center">
<a href="#signup-form" class="text-base mt-4 p-4 border-2 border-solid border-blue-900 text-blue-900 hover:border-blue-700 hover:text-blue-700 uppercase rounded w-full inline-block">Join the waitlist</a>
</p>
<p class="text-sm text-blue-800 text-center">The entire course lasts 6-8 weeks</p>
</div>
<div class="xs:w-full sm:w-1/2 md:w-2/3 lg:w-2/3 p-4 sm:p-8 flex flex-col items-center mx-auto">
<h2 class="text-center uppercase font-sans">You will learn to:</h2>
<ul class="list-chevron my-auto p-4 sm:p-0 text-lg">
<li class="m-2">Gather and analyse data using manual and programming tools</li>
<li class="m-2">Observer trends and statistics in data</li>
<li class="m-2">Formulate and present your conclusions</li>
<li class="m-2">Communicate your work to the general public by placing it within the larger context</li>
</ul>
</div>
</div>
<ul class="list-chevron m-4">
<li>Your workplace will be an empty Google Docs sheet. This is where you’ll be writing your article and we, the Snipette editors, will be using the “comments” and “suggestions” features to help you out and suggest edits.</li>
<li>Meanwhile, we’ll also keep an email thread going. This is where we, writer and editors, will be discussing the article in general. You can also ask any questions you might have or ask for help if you need it.</li>
<li>When your article is done, you will need to copy-paste it to a Medium draft, and submit it to Snipette. This is so that we can publish it under your name. This is where we’ll adjust the images and text formatting.</li>
<li>Once you give your approval, your article will be scheduled for publication <a href="https://medium.com/snipette/" target="_blank" style="text-orange-100 hover:text-orange-900">on Medium</a> as well as <a href="https://www.snipettemag.com" target="_blank" style="text-orange-100 hover:text-orange-900">on our own website.</a></li>
<div class="py-16 max-w-4xl mx-auto text-justify">
<h1 class="text-3xl text-center mb-4 font-heading font-extrabold">Pre-requisites</h1>
<div class="flex flex-col md:flex-row">
<figure class="w-full md:w-1/2 lg:w-2/3 inline-block">
<img src="img/python-console.png" class="shadow-xl rounded-lg"/>
</figure>
<div class="w-full md:w-1/2 lg:w-1/3 p-8 text-lg">
<p>Due to the data-science and coding-intensive nature of the course, we are currently only able to take on participants with some knowledge of Python.</p>
<p>The course will make use of Python-based data analysis software, which we will help you familiarise yourself with. Towards this, we will be screening participants with a quick questionnaire.</p>
</div>
</div>
</div>
<div class="px-4 py-16 text-center bg-blue-900 text-gray-100">
<a name="our-team">
<h1 class="text-3xl text-center font-heading font-extrabold">Our Team</h1>
</a>
<ul class="m-4 flex flex-wrap flex-row justify-center text-lg font-sans">
<li class="inline-block p-8 hover:opacity-75 cursor-pointer">
<figure class="bg-yellow-500 w-40 h-40 rounded-full mb-4"></figure>
<span>Dr. Skanda Vivek</span>
</li>
<li class="inline-block p-8 hover:opacity-75 cursor-pointer">
<figure class="bg-green-500 w-40 h-40 rounded-full mb-4"></figure>
<span>Manasa Kashi</span>
</li>
<li class="inline-block p-8 hover:opacity-75 cursor-pointer">
<figure class="bg-purple-500 w-40 h-40 rounded-full mb-4"></figure>
<span>Badri Sunderarajan</span>
</li>
<li class="inline-block p-8 hover:opacity-75 cursor-pointer">
<figure class="bg-orange-500 w-40 h-40 rounded-full mb-4"></figure>
<span>Nia Chari</span>
</li>
<li class="inline-block p-8 hover:opacity-75 cursor-pointer">
<figure class="bg-blue-500 w-40 h-40 rounded-full mb-4"></figure>
<span>Akil Ravi</span>
</li>
</ul>
<p>And that's it! Time to sit back and show off your brand-new article :)</p>
<p class="max-w-4xl mx-auto font-sans">Our team has unique expertise at the interface of data science and content creation. We think these are life-changing skills that enable your dream job: following your passions, showcasing what you learn along the way, and making a sustainable income in the process.</p>
</div>
<div class="bg-orange-900 text-orange-100">
<div class="py-16 max-w-4xl mx-auto text-justify p-8 lg:px-0">
<h1 class="text-3xl text-center my-4 font-heading font-extrabold">How it works</h1>
<p class="text-lg">This course is based on our experience in private informal sessions and the <a href="https://write.snipettemag.com" class="text-blue-900 underline">Snipette Writers' Programme</a>. We understand that no two peoples' ideas or problems or finished products will be identical; hence a lot of how the course works depends on your personal needs. However, here's what will remain constant:</p>
<ul class="m-4 text-lg">
<li class="flex">
<div class="w-1/2 p-4">
<img width=640 height=480 />
</div>
<div class="py-4 w-8">
<p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">1</p>
<div class="w-0 h-full border border-blue-700 mx-auto"></div>
</div>
<div class="w-1/2 pl-4 flex items-center">
<p>Your workplace will begin as a Google Docs sheet. This is where you will be brainstorming ideas and figuring out what area you want to research. In the meantime, you will also be in touch with the team over email.</p>
</div>
</li>
<li class="flex flex-row-reverse">
<div class="w-1/2 p-4">
<img width=640 height=480 />
</div>
<div class="py-4 w-8">
<p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">2</p>
<div class="w-0 h-full border border-blue-700 mx-auto"></div>
</div>
<div class="w-1/2 pl-4 flex items-center">
<p>Once your topic is chosen, we will work together on finding links, resources, and publicly available datasets. Of course, all details and final choices will be up to you.</</p>
</div>
</li>
<li class="flex">
<div class="w-1/2 p-4">
<img width=640 height=480 />
</div>
<div class="py-4 w-8">
<p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">3</p>
<div class="w-0 h-full border border-blue-700 mx-auto"></div>
</div>
<div class="w-1/2 pl-4 flex items-center">
<p>You will then switch to a Google Colab notebook, where you will document your project, data analytics, and visualization with state of the art Python-based data analysis tools.</p>
</div>
</li>
<li class="flex flex-row-reverse">
<div class="w-1/2 p-4">
<img width=640 height=480 />
</div>
<div class="py-4 w-8">
<p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">4</p>
<div class="w-0 h-full border border-blue-700 mx-auto"></div>
</div>
<div class="w-1/2 pl-4 flex items-center">
<p>We will guide you in constructing a compelling data-based story based on your analyses.</p>
</div>
</li>
<li class="flex">
<div class="w-1/2 p-4">
<img width=640 height=480 />
</div>
<div class="py-4 w-8">
<p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">5</p>
<div class="w-0 h-full border border-blue-700 mx-auto"></div>
</div>
<div class="w-1/2 pl-4 flex items-center">
<p>Once your conclusions are ready, you will move back to Google Docs to present your findings.</p>
</div>
</li>
<li class="flex flex-col items-center">
<div class="py-4 w-8">
<div class="w-0 h-full border border-blue-700 mx-auto"></div>
<p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">6</p>
</div>
<p class="text-lg mt-4">
When all is done, you will be ready for publication! This happens in two components:
</p>
<ul class="m-4 text-lg flex">
<li class="p-4">
A more technical overview of your work, along with graphs, stats, and links to raw data. This is aimed at being shared with the data science community, through the <a href="https://medium.com/emergent-phenomena" target="_blank">Emergent Phenomena</a> Medium publication. Emergent Phenomenan is a space for innovative work at the interface of data, storytelling, and society, filling a much-needed niche for in-depth analyses on societal issues backed by data.
</li>
<li class="p-4">
A more general-purpose article which gives a general overview of your chosen topic and provides context for where your work fits in. This is aimed at spreading awareness of the topic and your findings to the general public. You will use literary techniques like suspense and metaphor to get your point across, and the final article will be published in <a href="https://www.snipettemag.com" target="_blank">Snipette</a>—a magazine seeking to explain the world in a fun and accessible way.
</li>
</ul>
</li>
</ul>
<p class="text-lg">Once both versions of your article are published, you will receive a certificate of completion from Snipette/Emergent Phenomena and a print copy of the edition in which your article appears. The whole process is expected to take 6-8 weeks. Given that the course is wholly unique and tailored specifically to each participant, timings may vary from person to person.</p>
</div>
<div class="p-4 pb-20 max-w-4xl mx-auto text-center">
<h1 class="text-3xl text-center font-heading font-extrabold">Sample Certificate</h1>
<img class="max-w-md bg-orange-800 rounded-lg mt-8 mx-auto" width="640" height="480"/>
</div>
<div class="bg-blue-900 text-blue-100 py-8">
<div class="max-w-4xl mx-auto flex flex-wrap justify-center">
<img src="img/pup-with-penknife.png" class="w-auto h-48">
<div class="w-auto my-auto sm:mx-auto md:ml-10">
<a name="signup-form"></a>
<div class="w-auto flex flex-wrap justify-center sm:justify-start">
<p class="text-3xl text-orange-200 my-auto text-center sm:text-left m-2">Ready to give us a spin?</p>
<a href="//goo.gl/forms/NAf4TRKFBZ73v9C02"class="text-base m-4 p-4 border-2 border-solid border-orange-500 text-orange-500 uppercase rounded">Apply Now</a>
<p class="text-3xl text-blue-200 mt-auto text-center sm:text-left m-2 font-sans">Ready to give us a spin?</p>
<a href="//airtable.com/shrfr7646K3LUFMIG" target="_blank" class="text-base m-4 p-4 border-2 border-solid border-blue-500 text-blue-500 uppercase rounded font-sans">Join the waitlist</a>
</div>
<p class="text-sm text-orange-200 text-center sm:text-left m-3">Or, email <a href="mailto:editors@snipettemag.com" class="text-orange-300">editors@snipettemag.com</a> to know more</p>
<p class="text-blue-200 text-center sm:text-left mx-3 mt-0 mb-auto">Or, email <a href="mailto:editors@snipettemag.com" class="text-blue-300">editors@snipettemag.com</a> to know more</p>
</div>
</div>
<!-- Airtable form -->
<script src="https://static.airtable.com/js/embed/embed_snippet_v1.js"></script>
<iframe class="airtable-embed airtable-dynamic-height max-w-4xl mx-auto my-8 rounded-lg" src="https://airtable.com/embed/shrfr7646K3LUFMIG?backgroundColor=cyan" frameborder="0" onmousewheel="" width="100%" height="1132" style="background: transparent; border: 1px solid #ccc;"></iframe>
<!-- End Airtable form -->
</div>
<div class="bg-black text-gray-100 p-4 text-xs">
<div class="bg-black text-gray-100 p-4 text-xs font-sans">
&copy; Snipette 2020
<div class="float-right">
<a href="//www.snipettemag.com">Home</a>

5
tailwind.config.js
View File

@ -1,6 +1,11 @@
module.exports = {
theme: {
extend: {},
fontFamily: {
'serif': [ 'Crimson Text', 'Crimson Pro', 'Georgia', 'ui-serif', ],
'heading': [ 'Abhaya Libre', 'ui-serif' ],
'sans': [ 'Open Sans', 'sans-serif' ],
}
},
variants: {},
plugins: [],