
Template details
Particle
A free, open-source Jekyll portfolio theme for developers with an animated particle.js background, SASS customization, and Gulp workflow.
About this template
Particle is a free, open-source Jekyll portfolio theme for developers, built around an animated particle.js background and a single-page layout with SASS styling.
What is Particle?
Particle is a minimalist, single-page portfolio theme built on Jekyll, the Ruby-based static site generator. It takes the site author's details from _config.yml — username, title, description, email, Twitter, GitHub, and Google Plus handles — and renders a static personal portfolio page with a particle.js canvas in the header. The theme is maintained by GitHub user nrandecker and is distributed under the MIT License, so it can be freely forked, modified, and deployed. The repository has collected over 1,000 GitHub stars, indicating active use.
Key Features
- Particle.js background — An interactive, animated particle network in the page header; the particle colors, density, and linking behavior are configured via a JSON object in
app.js. - Gulp automation — A Gulp workflow compiles SASS assets, launches BrowserSync for live reload, and executes Jekyll builds; this requires Node.js and Yarn to be installed locally.
- SASS variables — The theme's colors and visual styles are customized by editing SASS variables, so no hand-written CSS changes are needed for common tweaks.
- Sweet Scroll — Provides smooth scrolling navigation between the page's sections.
- Icon sets — Bundles Font Awesome and Devicon, giving you icons for social links, contact methods, and technology stack badges.
- Google Analytics — Google Analytics tracking is included; the site owner adds their tracking code through the
_config.ymlsettings. - Info customization — All personal information is managed from
_config.yml, keeping layout files untouched when updating your profile. - MIT License — Free to use commercially and personally; you can adapt the theme to any project.
Who is it for?
- Developer freelancers — Present your services and portfolio on a lightweight, fast-loading page that still looks technical and modern.
- Open-source contributors — Use it as a personal landing page that links out to your GitHub, Twitter, and Google Plus profiles.
- Junior developers — Study the project as a learning resource: you can trace how Jekyll, SASS, Gulp, and JavaScript interact in a real theme.
- Tech bloggers — Jekyll's native blog post support lets you combine a portfolio with a simple blog under one consistent design.
What can you do with it?
- Showcase your work: Feature your best projects with icon badges, descriptions, and links to the live sites or repositories.
- Publish blog posts: Write Markdown posts and have them rendered with the same visual style as the portfolio sections.
- Customize the animation: Tweak the particle count, colors, and connection distance by editing the
particlesJSON inapp.js, using the particles.js documentation.
How does it work?
- Install Jekyll and its Ruby dependencies by running
sudo gem install bundler jekyll. - Clone the repository from GitHub.
- Edit
_config.ymlwith your username, description, social links, and site URL. - Install Node.js, install Yarn globally, then run
yarnin the project folder. - Run
gulpto compile assets, start BrowserSync, and serve the site locally athttp://localhost:3000.
Pricing
Particle is free and open source software distributed under the MIT License. There are no paid tiers or premium features; everything is available in the public GitHub repository.
Alternatives
- will-jekyll-template — Another Jekyll portfolio theme, created by Willian Justen, which the Particle README credits as partial design inspiration.
FAQ
Is Particle Jekyll Theme free?
Yes, the theme is licensed under the MIT License. You can use, modify, and distribute it freely, including in commercial projects, without paying any fee.
Do I need Ruby to use this theme?
Yes, Jekyll is a Ruby-based static site generator, so Ruby, Bundler, and Jekyll must be installed to build the site locally. However, deployment to GitHub Pages can handle the Jekyll build remotely.
How do I change the particle animation?
Edit the particle configuration JSON found in the particle function inside app.js. The format follows the particles.js library, so you can adjust particle count, colors, size, and linking behavior directly in that object.
Does this theme support blogging?
Yes, Jekyll includes built-in blog post support, and Particle inherits it. You can create Markdown posts that are styled consistently with the rest of the portfolio page.
Where do I set up Google Analytics?
The theme includes Google Analytics support; you configure it by editing the _config.yml settings file. The README lists Google Analytics among its features without specifying a dedicated field, so check the theme's configuration comments for the exact key.
















