=> zikailiu.com
I do all the design by myself with manually crafted HTML/CSS/JS, without using website generators. I get inspiration from a lot of great websites. This site is of nothing compared with those masterpieces.
The About page is designed separately for professional use. The design goal is to maximize readability and conciseness.
I use Start Bootstrap - Grayscale as the starting template but end up changing almost everything.
As you may already notice, masthead images for Home, Projects, Photography, and the 404 page (try if you haven't seen it!) are of the same 3D model but rendered in different styles. I create them with Blender.
The work is inspired by Testify from Arcaea, as well as this Bilibili video. Many thanks to @落琳雪泪 for sharing the 2D masks of gears.
Vector graphs are widely used in the website. Icons are mostly taken from Bootstrap Icons and Noun Project.
Large vector graphs are used in Projects. As you may already notice, they draw as you scroll! They act not only as icons for projects, but also as the scroll indicator: an icon completely display when the project scrolls to the center of the viewpoint (or when reaching the top, for small screens). I made those SVGs myself, mostly using Adobe Illustrator. See REFERENCE.md for references and inspirations.
The Photography page employs a modified version of baguetteBox.js. Each collection has a header image displayed in the grid, while other photos can be viewed by opening the collection. When reaching the end of a collection, the viewer continues into the next collection so that the user doesn't need to return to the grid view.
This is a static website. Bootstrap is used for its responsive design. A bit of details:
- Use EJS to generate HTML (instead of PUG used in the Bootstrap template).
- Use SCSS to generate CSS (same as the Bootstrap template).
- CSS is post-processed
with autoprefixer (render-scss.js)
so there is no need to add prefixes manually. Currently, the target compatibility is set
to
cover 99.5%(browserslist). - Favicon assets are generated with RealFaviconGenerator.
- Animations with GSAP.
Specifically, about performance optimizations:
- One CSS and one JS (including Bootstrap, baguetteBox, and GSAP) for all pages.
- Include only the necessary Bootstrap scripts. Minify JS using terser. Minify CSS using PurgeCSS.
- Vanilla JS. No JQuery.
- Self-host fonts (only three weights of Nunito Sans). No Google Fonts.
- Inline SVG icons. No CDN-delivered FontAwesome.
Lossy WEBP for images. Targeting Fast 3G loading speed.JPEG images for backward compatibility. WEBP saves up to ~ 50% for normal size images (e.g. photos in Projects), but not that much for large masthead images (~10%-20%), which are the real bottlenecks.- GZIP encoding (less important after deploying the CDN).
- Preload CSS, fonts, JS and the masthead background.
- Customized images/video lazy loading on Projects.
- CDN.
In Projects, the SVG scrolling animation is driven by scripts.js. The main idea:
- Find all SVG containers and the corresponding wrapper project containers after DOM loads.
- On scroll, for each SVG, get the position of the project container in the viewpoint.
- Compute the SVG loading percentage with ease.
- Apply the style
stroke-dashoffsetto the SVG.
The SVGs are lazily loaded as inline HTML (img does not work).
The stroke size of the longest path in each SVG is defined
in src/scss/components/_svgs.scss.
The About page is implemented separately as a standalone HTML. The goal is to maximize compatibility.
Any feedback is appreciated! If you know me, just drop me a message to :)
All source code (HTML, JS, CSS) is released under the MIT open source license. Texts and images remain copyrighted unless originated from somewhere else (REFERENCE.md).