My new source code has moved to ancinape/personal-website-v2
A personal website to host my blog, resume, and contact info.
I have long wanted a personal website for hosting my articles and projects. I am a backend programmer by day and wanted a platform that is flexible for my kind. I stumbled upon SSGs then Eleventy and fell in love with its simplicity and versatility. The project is generated with Eleventy, in my native Russian tongue and English.
The design of the website is minimal and retro. Retro in both sense of the word. It is meant to invoke the feeling of looking at old paper, with an 80's-like computer GUI hovering above. Edges are sharp, with large gaps between elements for comfortable reading. The color scheme is Belafonte Day, chosen because of its contrasting but calming mix of browns. The background is covered with a grainy noise, to complement the paper-like colors. The fonts are Elisabethische and Liberation Serif, both FOSS-licensed, compatible with the Cyrillic script, and serif.
I want my website to be accessible to as many people as possible. It is the reason there are two languages available. However, I have yet to explicitly follow any web accessibility guidelines. Something to work on in the future. 😄
Inspired by Multilingual sites with Eleventy and Eleventy-multilingual starter, the website is available in two languages: English and Russian. This includes automatic quotes translation by markdown-it and appropriate date formatting by moment. Any page can switch between English and Russian by selecting the appropriate language on the top right.
Generated with Eleventy (11ty), the website is a simple, static site with few clientside processes (exceptions being the JavaScript toy on the home page, and the language switcher on the landing page). The source utilizes between multiple languages, namely HTML, Nunjucks, Liquid, Markdown, and JavaScript with styling by Sass.
Inspired by Using SASS Mixins for Responsive Web Design, Sass enables the site to be responsive between mobile and desktop interfaces. The navigation panel and language switcher remains on the sides unless viewed through a mobile device, in which they take the top and bottom of the page respectively.
- 11ty/eleventy
- sass
- moment
- npm-run-all
- markdown-it
- markdown-it-anchor
- markdown-it-emoji
- eleventy-plugin-toc
- eleventy-plugin-svg-sprite
To run your own instance of the website, follow these steps on your commandline.
> git clone https://github.com/ancinape/personal-website.git
> cd personal-website
> npm install
> npm start- Text overflows in mobile view
- Missing aria-labels
- Markdown not fully tested with my style
The project's structure is explained in STRUCTURE with notes for each directory. Useful if you want to learn what each part of the project does.
All personal work released into the public domain. See LICENSE for details.
"Multilingual sites with Eleventy" by Jérôme Coupé
Eleventy-multilingual starter by Léa Tortay and Frank Taillandier
Elisabethische Font by Салиховъ/Salychow
Belafonte Day Color Scheme by Jan T. Sott
Noise Background from "One Page Résumé Site" by Chris Coyier
@for Loop for heading styles by Fabian Mebus
"Using SASS Mixins for Responsive Web Design" by Ching Wang