tyronem/takehome

takehome

This site uses Eleventy, GitHub, and Netlify.

Start creating your site

Create and edit your site right from this readme file!.

Step 1: Creating and editing site pages and content

Pages

Create your site's main content! Pages can be written in HTML or Markdown!

• Edit the homepage
• Create a new page

Or edit your entire site in a web-based editor by clicking here. Your changes will be automatically saved to this GitHub repository and published to your site.

Step 2: Look and Feel

Navigation

Your site's navigation is how your users will get around! Edit the site's navigation menu in JSON format!

• Edit the navigation

Styles

Colors, spacing, and fonts, oh my! You can edit your branding and styles here using CSS, SCSS, and CSS variables! Remember adding styles on MySpace? Same thing!

• Edit your branding
• Edit your overall styles

Learning CSS can be daunting but there are a ton of useful resources on the web. Check out SmolCSS to get started!

Javascript

Optional! Add javascript functionality to your site

• Add Javascript

Step 3: Deploy takehome

Launch takehome on Netlify for Free!

---

Get to Know takehome

Ready to go deeper? Here's how takehome is laid out:

example.com                 # → Root of your takehome-based project
├── src/                    # → Source directory
│   ├── assets/             # → Site assets
│   │   ├── fonts/
│   │   ├── images/
│   │   ├── scripts/
│   │   ├── styles/
│   │   └── views/
│   │       └── layouts/
│   │       └── partials/
│   ├── config/             # → Eleventy configuration
│   │   ├── collections.js  # → Add and configure collections (https://www.11ty.dev/docs/collections/)
│   │   ├── filters.js      # → Add and configure filters (https://www.11ty.dev/docs/filters/)
│   │   ├── passthroughs.js # → Add and configure passthroughs (https://www.11ty.dev/docs/copy/)
│   │   ├── plugins.js      # → Add and configure plugins (https://www.11ty.dev/docs/plugins/)
│   │   ├── shortcodes.js   # → Add and configure shortcodes (https://www.11ty.dev/docs/shortcodes/)
│   │   ├── templateLanguages.js   # → Configure custom template languages (HINT: this is where takehome's Sass and Javascript pipelines are set up!) (https://www.11ty.dev/docs/languages/custom/)
│   │   └── watchtargets.js # → Add and configure watch targets (https://www.11ty.dev/docs/watch-serve/)
│   ├── data                # → Customize site data (https://www.11ty.dev/docs/data/)
│   │   └── navigation.json # → Site navigation configuration
│   └── pages               # → Add "pages" collection items here
│       ├── index.md        # → Default index page
│       └── pages.json      # → Shared pages attributes
├── .eleventy.js            # → Core Eleventy config file
├── netlify.toml            # → Netlify deployment and plugin configuration (optional)
├── README.template.md      # → takehome readme
└── README.md               # → Your project's readme (automatically generated when this template is used)

Eleventy Configuration

Eleventy configuration is abstracted from the typical .eleventy.js file and moved to /src/config/ for easy organization and configuration of collections, filters, passthroughs, etc.

Install project dependencies

npm i

Run the project locally

npm run start

Build for production

npm run production