diff --git a/src/site/generators/minimal-gallery.md b/src/site/generators/minimal-gallery.md new file mode 100644 index 00000000..a6e412a6 --- /dev/null +++ b/src/site/generators/minimal-gallery.md @@ -0,0 +1,58 @@ +--- +title: Minimal Gallery +repo: tomcomtang/minimal-gallery +homepage: https://minimal-gallery.edgeone.app +startertemplaterepo: https://github.com/tomcomtang/minimal-gallery +language: + - JavaScript + - HTML + - CSS +license: + - MIT +templates: + - HTML + - CSS + - JavaScript +description: A lightweight, fast, and easy-to-use static image gallery template for quickly showcasing photos or artwork with a minimalist design. +thumbnailurl: /img/cms/minimal-gallery.jpeg +--- + +## Project Overview + +**Minimal Gallery** is a simple and efficient static image gallery template. It allows users to display images or artwork in a clean, distraction-free layout. The gallery is easy to set up, requires no backend, and is ideal for photographers, artists, or anyone who wants to share visual content online. + +## Key Features + +- Minimalist and clean design +- No backend required—purely static +- Fast loading and optimized for performance +- Responsive layout for all devices +- Easy to add or remove images +- Supports image thumbnails and fullscreen view +- Built with HTML, CSS, and JavaScript + +## Getting Started + +1. **Clone the repository** + `git clone https://github.com/tomcomtang/minimal-gallery.git` +2. **Open `index.html` in your browser** + Or deploy the folder to any static hosting service. +3. **Add your images** + Place your images in the designated folder and update the gallery markup as needed. + +## Use Cases + +- Personal or professional photo gallery +- Art or design portfolio +- Event or travel photo showcase +- Simple static gallery for any visual content + +## Demo + +[Live Demo](https://minimal-gallery-demo.example.com) + +[GitHub Repo](https://github.com/tomcomtang/minimal-gallery) + +## License + +MIT License diff --git a/src/site/generators/minimalist-portfolio.md b/src/site/generators/minimalist-portfolio.md new file mode 100644 index 00000000..47d0ec18 --- /dev/null +++ b/src/site/generators/minimalist-portfolio.md @@ -0,0 +1,61 @@ +--- +title: Minimalist Portfolio +repo: tomcomtang/minimalist-portfolio +startertemplaterepo: https://github.com/tomcomtang/minimalist-portfolio +homepage: https://minimalist-portfolio.edgeone.app +language: + - JavaScript + - HTML + - CSS +license: + - MIT +templates: + - React + - HTML + - CSS + - JavaScript +description: A clean, modern, and responsive portfolio template designed for developers and creatives to showcase their work with minimal distraction and maximum impact. +thumbnailurl: /img/cms/minimalist-portfolio.jpeg +--- + +## Project Overview + +**Minimalist Portfolio** is a modern, responsive portfolio template built with React, HTML, and CSS. It is designed to help developers, designers, and creatives showcase their projects, skills, and achievements in a visually appealing and distraction-free way. The template features a clean layout, easy customization, and is suitable for both personal and professional use. + +## Key Features + +- Minimalist and modern design +- Fully responsive layout for all devices +- Easy to customize content, colors, and sections +- Project and work showcase with links +- About and contact sections +- Fast loading and SEO-friendly +- Built with React, HTML, and CSS + +## Getting Started + +1. **Clone the repository** + `git clone https://github.com/tomcomtang/minimalist-portfolio.git` +2. **Install dependencies** + `npm install` +3. **Start the development server** + `npm start` +4. **Customize your content** + Edit the relevant files to add your projects, skills, and personal information. + +## Use Cases + +- Personal developer or designer portfolio +- Freelance showcase site +- Resume and CV website +- Creative project gallery + +## Demo + +[Live Demo](https://minimalist-portfolio-demo.example.com) + +[GitHub Repo](https://github.com/tomcomtang/minimalist-portfolio) + +## License + +MIT License diff --git a/src/site/generators/multiplepage-portfolio.md b/src/site/generators/multiplepage-portfolio.md new file mode 100644 index 00000000..ffa3cff4 --- /dev/null +++ b/src/site/generators/multiplepage-portfolio.md @@ -0,0 +1,57 @@ +--- +title: Multiple Page Portfolio +repo: tomcomtang/multiplepage-portfolio +startertemplaterepo: https://github.com/tomcomtang/multiplepage-portfolio +homepage: https://multiplepage-portfolio.edgeone.app +language: + - JavaScript + - HTML + - CSS +license: + - MIT +templates: + - HTML + - CSS + - JavaScript +description: A multi-page portfolio template for developers and creatives, featuring separate pages for projects, about, contact, and more, with a modern and responsive design. +thumbnailurl: /img/cms/multiplepage-portfolio.jpeg +--- + +## Project Overview + +**Multiple Page Portfolio** is a modern, multi-page portfolio template designed for developers, designers, and creatives. It features dedicated pages for projects, about, contact, and more, allowing for a comprehensive presentation of your work and background. The template is fully responsive, easy to customize, and suitable for both personal and professional use. + +## Key Features + +- Multi-page layout (Home, About, Projects, Contact, etc.) +- Modern and clean design +- Fully responsive for all devices +- Easy to customize content and styles +- Fast loading and SEO-friendly +- Built with HTML, CSS, and JavaScript + +## Getting Started + +1. **Clone the repository** + `git clone https://github.com/tomcomtang/multiplepage-portfolio.git` +2. **Open `index.html` in your browser** + Or deploy the folder to any static hosting service. +3. **Customize your content** + Edit the HTML and CSS files to add your own information, projects, and contact details. + +## Use Cases + +- Personal or professional portfolio website +- Resume and CV site +- Creative project showcase +- Multi-section landing page + +## Demo + +[Live Demo](https://multiplepage-portfolio-demo.example.com) + +[GitHub Repo](https://github.com/tomcomtang/multiplepage-portfolio) + +## License + +MIT License diff --git a/src/site/generators/wordpress-gatsby.md b/src/site/generators/wordpress-gatsby.md new file mode 100644 index 00000000..df1ae3bd --- /dev/null +++ b/src/site/generators/wordpress-gatsby.md @@ -0,0 +1,111 @@ +--- +title: WordPress Gatsby +repo: tomcomtang/wordpress-gatsby +startertemplaterepo: https://github.com/tomcomtang/wordpress-gatsby +homepage: https://wordpress-gatsby.edgeone.app +language: + - JavaScript + - PHP +license: + - MIT +templates: + - Gatsby + - WordPress + - Markdown +description: A personal blog template integrating WordPress and Gatsby, supporting both remote WordPress content and local config file modes for performance and flexibility. +thumbnailurl: /img/cms/wordpress-gatsby.jpeg +--- + +## Project Overview + +**WordPress Gatsby** is a personal blog and portfolio template that seamlessly integrates WordPress as a headless CMS with Gatsby as a static site generator. It supports both fetching content from a remote WordPress site and using local configuration files, offering maximum flexibility and performance. The project works out-of-the-box with zero configuration, making it ideal for both beginners and advanced users. + +## Key Features + +- **Dual Content Modes:** + Fetch content from a remote WordPress site via REST API + Or use local fallback data/config files (`src/data/fallbackData.js`) for a fully static experience +- **Zero Configuration Required:** + All environment variables are optional; the site works immediately with local data +- **Giscus Comments Integration:** + Optional GitHub Discussions-based comments, auto-enabled if configured +- **Flexible Data Structure:** + Supports ACF custom fields, category description JSON, and more +- **Modern Portfolio Sections:** + Hero, About, Contact, Socials, Comments, Footer, Skills, Projects, and more +- **Easy Customization:** + Edit styles, layouts, and content structure with clear separation of concerns +- **Production Ready:** + One-click deploy to EdgeOne, Netlify, Vercel, or any static host + +## Getting Started + +### Prerequisites + +- Node.js 16+ +- npm or yarn + +### Installation + +1. **Clone the repository** + `git clone https://github.com/tomcomtang/wordpress-gatsby.git` +2. **Install dependencies** + `npm install` +3. **Start the development server** + `npm run develop` + The site will work immediately with local fallback data! +4. **(Optional) Configure WordPress** + - Create a `.env` file + - Add your `GATSBY_WORDPRESS_URL` + - Restart the development server +5. **(Optional) Configure Comments** + - Add Giscus environment variables to `.env` + - Comments menu will appear automatically + +### Build for Production + +```bash +npm run build +``` + +The built site will be in the `public/` directory, ready for deployment. + +## Content Management + +- **With WordPress:** + Update content through the WordPress admin panel +- **Without WordPress:** + Edit `src/data/fallbackData.js` for all content sections + +## Customization + +- **Styling:** + Modify `src/styles/` for global styles + Update component-specific CSS modules +- **Layout:** + Edit components in `src/components/` + Update page templates in `src/pages/` + Customize navigation in `src/components/header.js` + +## Use Cases + +- Personal blogs and portfolios +- Company or team websites +- Content-driven sites needing both static and dynamic content options +- Projects that want the WordPress editing experience with the performance of a static frontend + +## Demo + +[Live Demo](https://wordpress-gatsby-demo.example.com) + +[GitHub Repo](https://github.com/tomcomtang/wordpress-gatsby) + +## License + +MIT License + +## Acknowledgments + +- Gatsby team for the static site generator +- WordPress for content management +- Giscus for GitHub Discussions integration diff --git a/src/site/img/cms/minimal-gallery.jpeg b/src/site/img/cms/minimal-gallery.jpeg new file mode 100644 index 00000000..1f99a29f Binary files /dev/null and b/src/site/img/cms/minimal-gallery.jpeg differ diff --git a/src/site/img/cms/minimalist-portfolio.jpeg b/src/site/img/cms/minimalist-portfolio.jpeg new file mode 100644 index 00000000..3b5111f9 Binary files /dev/null and b/src/site/img/cms/minimalist-portfolio.jpeg differ diff --git a/src/site/img/cms/multiplepage-portfolio.jpeg b/src/site/img/cms/multiplepage-portfolio.jpeg new file mode 100644 index 00000000..21d4944e Binary files /dev/null and b/src/site/img/cms/multiplepage-portfolio.jpeg differ diff --git a/src/site/img/cms/wordpress-gatsby.jpeg b/src/site/img/cms/wordpress-gatsby.jpeg new file mode 100644 index 00000000..58cf7c15 Binary files /dev/null and b/src/site/img/cms/wordpress-gatsby.jpeg differ