The latest articles on DEV Community by SimonAking (@tomotoes). https://dev.to/tomotoes https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F99130%2F5cd4f626-6679-4f63-9e56-d3dd4b60284c.jpg https://dev.to/tomotoes en SimonAking Sun, 18 May 2025 16:35:08 +0000 https://dev.to/tomotoes/sharing-several-personal-blog-related-projects-homepage-about-page-and-photo-gallery-6dh https://dev.to/tomotoes/sharing-several-personal-blog-related-projects-homepage-about-page-and-photo-gallery-6dh <p>I'd like to share three open-source projects that can help you build a complete personal website: a creative homepage for navigation, an interactive about page, and a dynamic photo gallery.</p> <h2> [Open Source] TermFolio - A Terminal-Style Personal Information Display Component </h2> <p><a href="https://github.com/SimonAKing/TermFolio" rel="noopener noreferrer">https://github.com/SimonAKing/TermFolio</a></p> <p>TermFolio is a terminal-style component designed for developers to showcase their personal information, project experience, and technical skills. Key features include:</p> <p>Authentic Terminal Experience:</p> <ul> <li>Supports common commands like <code>ls</code>, <code>cd</code>, <code>pwd</code> </li> <li>Smart command completion with Tab</li> <li>Command history navigation using arrow keys</li> <li>Highly customizable: Define custom commands, prompts, and display content</li> </ul> <p>Perfect for technical blog introduction pages and developer online resumes.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcn0z61372btu6k6eblg9.gif" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcn0z61372btu6k6eblg9.gif" alt="terminal-intro" width="480" height="458"></a></p> <p><a href="https://simonaking.com/about/" rel="noopener noreferrer">Live Demo</a></p> <h2> [Open Source] Blog Homepage Template: WebGL Fluid Animation + Interactive Gaming Background </h2> <p><a href="https://github.com/SimonAKing/HomePage" rel="noopener noreferrer">https://github.com/SimonAKing/HomePage</a></p> <p>An elegant and user-friendly personal homepage template featuring fluid animation backgrounds and smooth page transitions. Ideal for developers, designers, or creative professionals looking to quickly build a personal showcase website. For beginners, it's an excellent opportunity to learn about WebGL animation implementation, page transition effects, and how to combine stunning visuals with practicality. The entire project is simple to configure - just modify the configuration file for complete personalization.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi6evaitzgos8e7mryqw3.gif" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi6evaitzgos8e7mryqw3.gif" alt="preview" width="480" height="264"></a></p> <p><a href="http://simonaking.com" rel="noopener noreferrer">Live Demo</a></p> <h2> [Open Source] Elegant Photo Gallery Template: Image Preview &amp; Compression Ready </h2> <p>Project Repository:<br> <a href="https://github.com/SimonAKing/AnimatedGallery" rel="noopener noreferrer">https://github.com/SimonAKing/AnimatedGallery</a></p> <p>Project Description:<br> This is an open-source photo gallery project that uses a masonry layout to display images, featuring responsive design that perfectly adapts to both mobile and desktop platforms.<br> The project implements BlurHash for elegant image loading, combined with lazy loading strategies to enhance performance. It uses Sharp for image compression, automatically balancing loading speed and display quality.<br> It's ready to use out of the box - simply place your photos in the designated directory to update the gallery.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9kpj8pgv0l7r6x8k8enb.gif" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9kpj8pgv0l7r6x8k8enb.gif" alt="preview" width="480" height="266"></a></p> <p><a href="http://simonaking.com/gallery" rel="noopener noreferrer">Live Demo</a></p> blog