Mike's Portfolio

Mike's Portfolio is a public Eleventy (11ty) personal portfolio and blog site for designer-developer Mike Stilling, built to showcase case studies, work experience, and long-form writing.

What is Mike's Portfolio?

Mike's Portfolio is a static site generator project that takes content from Contentful and Markdown and produces a multi-page portfolio website. It runs on the Eleventy (11ty) framework, uses Webpack to bundle assets, and is styled with SCSS. The repository is maintained by Mike Stilling and the live site is deployed to Netlify.

The site itself contains a home page with a hero image, a case studies grid featuring Rewatch, FireHydrant, and Abstract, an experience timeline with nine past roles, a toolbelt listing design and development skills, and a blog with four articles. The underlying code pulls content from Contentful, a headless CMS, and combines it with local Markdown files.

Key Features

• Eleventy static site generation — Uses the 11ty framework to compile Markdown and Contentful data into static HTML files.
• Contentful CMS integration — Content such as case studies and blog posts is stored in Contentful, which the site fetches during build.
• Webpack asset pipeline — JavaScript and SCSS are processed and bundled with Webpack for production optimization.
• SCSS styling with no CSS framework — Styling is written in SCSS rather than relying on Tailwind, Bootstrap, or other utility frameworks.
• Barba.js page transitions — Smooth, AJAX-driven transitions between page loads using the Barba.js library.
• GSAP animations — Scroll-triggered and UI animations powered by GreenSock (GSAP).
• Locomotive Scroll — Adds a smooth, inertia-based scrolling effect via Locomotive Scroll.
• Netlify deployment — The live demo is hosted on Netlify, and the repository is configured for continuous deployment from GitHub.

Who is it for?

This portfolio is for front-end developers and designers who want a code-based portfolio that is fast, customizable, and connected to a CMS. It suits developers comfortable with the Jamstack approach—Eleventy, Webpack, and SCSS—who want a starting point with animations already wired in. Designers who want to separate content management from code can use Contentful to update case studies without touching the source. It also works well for creative developers who want to learn how GSAP, Barba.js, and Locomotive Scroll are integrated into a real static site.

What can you do with it?

• Designer-developers: Publish a personal portfolio with a hero section, case study cards, and an experience timeline, modeled directly on Mike Stilling's live site.
• Bloggers: Write and publish articles with publication dates and featured images; the included blog shows four example posts.
• Agency portfolios: Present client work as individual case-study pages with summaries and links, like the Rewatch, FireHydrant, and Abstract projects documented in the site.
• Jamstack learners: Fork the repository to see how Contentful data, Markdown files, and 11ty templates are combined into a static output.

How does it work?

The build process starts with content: pages and posts are stored as Markdown or in Contentful. Eleventy fetches the Contentful content through its API, merges it with local template files, and generates static HTML. Webpack processes the JavaScript and SCSS assets, and the finished site is deployed to Netlify. The live demo can be seen at mikes-portfolio.netlify.app.

Pros and cons

• Pros: Fast static output, content managed from a CMS, smooth animations without heavy frameworks, and a clean separation between content and presentation.
• Cons: Customizing the site requires familiarity with Eleventy, SCSS, Webpack, and the animation libraries; content is split between Contentful and Markdown, so editors need access to both.

FAQ

What stack does Mike's Portfolio use?

It uses Eleventy (11ty) as the static site generator, Contentful as the headless CMS, Webpack for asset bundling, SCSS for styling, and Netlify for hosting. It also includes Barba.js, GSAP, and Locomotive Scroll for page transitions and animations.

Is content stored in Markdown or a CMS?

Both. Blog posts and pages can be written in Markdown, while additional structured content like case studies and experience entries are managed in Contentful and pulled into the build.

Can I use this as a template for my own portfolio?

Yes, the repository is publicly available on GitHub and can be cloned, customized, and deployed to your own Netlify account. Be aware that it requires a working knowledge of Eleventy and SCSS to modify.

What sections are included?

The site includes a home page with hero and case-study grid, a qualifications and experience timeline with nine roles, a toolbelt listing design and development tools, and a blog with four sample articles.

Is there a live demo?

Yes, the portfolio is deployed at mikes-portfolio.netlify.app, and the repository is linked from the GitHub project page.