├── .gitignore ├── README.md ├── gridsome.config.js ├── gridsome.server.js ├── package-lock.json ├── package.json ├── projects.json ├── src ├── assets │ ├── fonts │ │ ├── Jost-300-Light.ttf │ │ ├── Jost-400-Book.ttf │ │ └── Jost-700-Bold.ttf │ ├── img │ │ └── .gitkeep │ └── styles │ │ └── main.css ├── components │ ├── ProjectCard.vue │ ├── ProjectsList.vue │ └── README.md ├── favicon.png ├── layouts │ ├── Default.vue │ └── README.md ├── main.js ├── pages │ ├── Index.vue │ └── README.md └── templates │ ├── Project.vue │ └── README.md ├── static └── README.md └── tailwind.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | *.log 2 | .cache 3 | .DS_Store 4 | src/.temp 5 | src/assets/img/[a-zA-Z0-9]*.png 6 | node_modules 7 | dist 8 | .env 9 | .env.* 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Built with Gridsome 2 | 3 | [![Netlify Status](https://api.netlify.com/api/v1/badges/de71dc2d-137d-4d12-9f21-16ef16dc3ef0/deploy-status)](https://app.netlify.com/sites/built-with-gridsome/deploys) 4 | 5 | **Built with Gridsome** is a showcase of projects made with [Gridsome](https://gridsome.org). 6 | 7 | ## Add a project 8 | 9 | The only and easy way to add a project to the list is to edit `projects.json` file. 10 | 11 | Then create a Pull Request on this repository, once merged, it will rebuild the site and republish it. 12 | 13 | ### Structure 14 | 15 | ```json 16 | { 17 | "name": "Website name", 18 | "description": "Optional description", 19 | "url": "https://websi.te", 20 | "source": "https://optional.sources", 21 | "tags": ["portfolio", "web", "optional"] 22 | } 23 | ``` 24 | 25 | *Note*: screenshot of provided URL will be automatically taken - tags are not displayed yet. 26 | 27 | ### How does it work? 28 | 29 | Thanks to the [JAMstack](https://jamstack.org), every time `master` branch is modified, a build is triggered on [Netlify](https://www.netlify.com) and is redeployed on the CDN. 30 | -------------------------------------------------------------------------------- /gridsome.config.js: -------------------------------------------------------------------------------- 1 | // This is where project configuration and plugin options are located. 2 | // Learn more: https://gridsome.org/docs/config 3 | 4 | // Changes here require a server restart. 5 | // To restart press CTRL + C in terminal and run `gridsome develop` 6 | 7 | module.exports = { 8 | siteName: "Built with Gridsome", 9 | plugins: [ 10 | { 11 | use: "gridsome-plugin-tailwindcss", 12 | options: { 13 | tailwindConfig: "./tailwind.config.js", 14 | purgeConfig: {}, 15 | presetEnvConfig: {}, 16 | shouldPurge: true, 17 | shouldImport: true, 18 | shouldTimeTravel: true, 19 | shouldPurgeUnusedKeyframes: true 20 | } 21 | }, 22 | { 23 | use: "@gridsome/plugin-google-analytics", 24 | options: { 25 | id: "UA-63673840-4" 26 | } 27 | } 28 | ], 29 | templates: { 30 | Project: "/project/:id" 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /gridsome.server.js: -------------------------------------------------------------------------------- 1 | const cw = require('capture-website') 2 | const crypto = require('crypto') 3 | 4 | const projects = require('./projects.json') 5 | 6 | module.exports = function(api) { 7 | api.loadSource(async (actions) => { 8 | const contentTypeProjects = actions.addCollection('Project') 9 | 10 | for (const [index, project] of projects.entries()) { 11 | const randomId = crypto.randomBytes(12).toString('hex') 12 | try { 13 | await cw.file(project.url, `./src/assets/img/${randomId}.png`, { 14 | scaleFactor: 1, 15 | timeout: 360, 16 | }) 17 | project.image = `${randomId}.png` 18 | contentTypeProjects.addNode({ 19 | id: index, 20 | name: project.name, 21 | image: project.image, 22 | description: project.description, 23 | url: project.url, 24 | source: project.source, 25 | tags: project.tags, 26 | }) 27 | } catch (err) { 28 | console.error(`Capture website error: project ${project.name}`, err) 29 | } 30 | } 31 | }) 32 | } 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "built-with-gridsome", 3 | "scripts": { 4 | "build": "gridsome build", 5 | "develop": "gridsome develop", 6 | "explore": "gridsome explore" 7 | }, 8 | "dependencies": { 9 | "@fortawesome/fontawesome-svg-core": "^1.2.29", 10 | "@fortawesome/free-brands-svg-icons": "^5.13.1", 11 | "@fortawesome/free-regular-svg-icons": "^5.13.1", 12 | "@fortawesome/free-solid-svg-icons": "^5.13.1", 13 | "@fortawesome/vue-fontawesome": "^0.1.10", 14 | "@gridsome/plugin-google-analytics": "^0.1.1", 15 | "capture-website": "0.7.0", 16 | "gridsome": "^0.7.17", 17 | "tailwindcss": "^1.4.6" 18 | }, 19 | "devDependencies": { 20 | "gridsome-plugin-tailwindcss": "^2.2.26" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /projects.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "Gridsome", 4 | "description": "Gridsome official website", 5 | "url": "https://gridsome.org", 6 | "source": "https://github.com/gridsome/gridsome.org/", 7 | "tags": ["documentation"] 8 | }, 9 | { 10 | "name": "Built with Gridsome", 11 | "description": "Showcase of projects built with Gridsome", 12 | "url": "http://builtwithgridso.me", 13 | "source": "https://github.com/HZooly/built-with-gridsome", 14 | "tags": ["showcase"] 15 | }, 16 | { 17 | "name": "Agregador FC", 18 | "description": "Website to help assemble a team to play Cartola FC, a fantasy soccer game from Brazil. It shows statistics about the teams that will face each other.", 19 | "url": "https://atilacamurca.github.io/agregador-fc/", 20 | "source": "https://github.com/atilacamurca/agregador-fc", 21 | "tags": ["cartolafc", "fantasy soccer game", "statistics"] 22 | }, 23 | { 24 | "name": "Martin Fracker, Jr.", 25 | "description": "Display the projects Martin's worked on and promote his personal brand", 26 | "url": "https://www.martinfrackerjr.com", 27 | "source": "https://github.com/towerism/personal-site", 28 | "tags": ["personal", "software", "javascript"] 29 | }, 30 | { 31 | "name": "Tech Jr Podcast", 32 | "description": "Website for the Tech Jr Podcast, a show about breaking into the tech industry and growing your skillset.", 33 | "url": "https://techjr.dev", 34 | "source": "https://github.com/mynar7/techjr", 35 | "tags": ["podcast", "careeradvice", "juniordevs"] 36 | }, 37 | { 38 | "name": "Montreal Powerhouse", 39 | "description": "E-commerce and blog website for the online coaching company Montreal Powerhouse", 40 | "url": "https://www.montrealpowerhouse.com/", 41 | "source": "https://github.com/f-elix/montreal-powerhouse", 42 | "tags": ["ecommerce", "fitness", "coaching"] 43 | }, 44 | { 45 | "name": "Maciej Kulczewski - Product Designer & Frontend Developer", 46 | "description": "Portfolio of Maciej Kulczewski", 47 | "url": "https://maciejkulczewski.de" 48 | }, 49 | { 50 | "name": "Gauz Technologies", 51 | "description": "Professional web development and tech blog", 52 | "url": "https://gauztech.com/", 53 | "source": "https://github.com/gauztech", 54 | "tags": ["web development", "blog", "portfolio"] 55 | }, 56 | { 57 | "name": "Iman Sugirman", 58 | "description": "Personal website of a tutorial Laravel, Ruby on Rails, Wordpress, Cloud Server Indonesia Language", 59 | "url": "https://imansugirman.com/", 60 | "source": "https://github.com/bogordesaincom", 61 | "tags": ["web development", "blog"] 62 | }, 63 | { 64 | "name": "mario.tours", 65 | "description": "Mario Kart Tour companion site including daily ranking leaderboards, top tier items and much more!", 66 | "url": "https://www.mario.tours/", 67 | "tags": ["mario kart", "nintendo", "mobile", "games", "gaming"] 68 | }, 69 | { 70 | "name": "Sarah Dayan - Software Engineer", 71 | "description": "Portfolio of Sarah Dayan", 72 | "url": "https://sarahdayan.dev/", 73 | "source": "https://github.com/sarahdayan/sarahdayan.dev", 74 | "tags": [ 75 | "web development", 76 | "blog", 77 | "portfolio", 78 | "software engineering", 79 | "front end" 80 | ] 81 | }, 82 | { 83 | "name": "Moving Pixels by Joran Quinten", 84 | "description": "Image portfolio of Joran Quinten", 85 | "url": "https://movingpixels.joranquinten.nl/", 86 | "tags": ["photography", "blog", "portfolio"] 87 | }, 88 | { 89 | "name": "Design Systems Repo", 90 | "description": "A frequently updated collection of Design System examples, articles, tools and talks.", 91 | "url": "https://designsystemsrepo.com/", 92 | "tags": ["design system", "design", "code"] 93 | }, 94 | { 95 | "name": "DOCC", 96 | "description": "A starter documentation theme for Gridsome. Featuring instant search, great navigation and a dark mode!", 97 | "url": "https://docc-theme.netlify.com/", 98 | "source": "https://github.com/mrcrmn/docc", 99 | "tags": ["documentation"] 100 | }, 101 | { 102 | "name": "SmokeyFro", 103 | "description": "The personal portfolio of Chris Rault (aka SmokeyFro), a front-end designer and occasional entrepreneur working remotely from South Africa.", 104 | "url": "https://smokeyfro.com", 105 | "source": "https://github.com/smokeyfro/SmokeyFro.com", 106 | "tags": [ 107 | "web development, portfolio, blog, tutorials, tailwindui, ghost, cockpit, markdown" 108 | ] 109 | }, 110 | { 111 | "name": "IamVue", 112 | "description": "Vue.js and Web programing tutorials for Indonesian", 113 | "url": "https://iamvue.com", 114 | "source": "https://github.com/devsourceid/iamvue", 115 | "tags": ["web development, portfolio, blog, tutorials, markdown"] 116 | }, 117 | { 118 | "name": "Thevueguy", 119 | "description": "VueJS tutorials, courses, videos and tips.", 120 | "url": "https://thevueguy.com", 121 | "source": "https://github.com/thevueguy", 122 | "tags": ["web development", "blog", "vuejs", "gridsome", "jamstack"] 123 | }, 124 | { 125 | "name": "upnext.com.au", 126 | "description": "Fun and interesting things to do in Australia.", 127 | "url": "https://upnext.com.au", 128 | "source": "", 129 | "tags": ["events", "australia", "things to do", "what's on", "sydney"] 130 | }, 131 | { 132 | "name": "1896 Gallery", 133 | "description": "Website for Scottish art gallery showing art on display.", 134 | "url": "https://1896gallery.com", 135 | "tags": ["art", "design", "wordpress"] 136 | }, 137 | { 138 | "name": "Potter Tree Consultancy", 139 | "description": "Brochure and project website for Scottish Arboriculturalist", 140 | "url": "https://pottertreeconsultancy.com", 141 | "tags": ["trees", "wordpress"] 142 | }, 143 | { 144 | "name": "Bio X Cell", 145 | "description": "Ecommerce website for antibody manufacturer in New Hampshire, US.", 146 | "url": "https://bxcell.com", 147 | "tags": ["ecommerce", "antibodies", "wordpress"] 148 | }, 149 | { 150 | "name": "IFFBoston", 151 | "description": "Website for the Independent Film Festival Boston.", 152 | "url": "https://iffboston.org", 153 | "tags": ["film", "festivals", "events", "wordpress"] 154 | }, 155 | { 156 | "name": "Narrandum", 157 | "description": "Narrandum is a customer journey mapping tool that's simple, fast and fun. Create personas and journey maps for free.", 158 | "url": "https://narrandum.com", 159 | "tags": ["saas", "web", "design"] 160 | }, 161 | { 162 | "name": "The Lockdown", 163 | "description": "A Fan Written Seinfeld script during COVID-19", 164 | "url": "https://thelockdown.netlify.app", 165 | "tags": ["script", "tailwindcss", "seinfeld", "tv show"] 166 | }, 167 | { 168 | "name": "Lindahl Studios", 169 | "description": "A small two man/brother development shop", 170 | "url": "https://lindahlstudios.com", 171 | "tags": ["portfolio", "web", "agency"] 172 | }, 173 | { 174 | "name": "Gift Egwuenu", 175 | "description": "Personal website for Gift Egwuenu", 176 | "url": "https://giftegwuenu.com", 177 | "source": "https://github.com/lauragift21/giftegwuenu.dev", 178 | "tags": ["portfolio", "frontend engineer", "jamstack", "tailwindcss"] 179 | }, 180 | { 181 | "name": "Michael Pumo", 182 | "description": "Portfolio of freelance UI developer in London, UK", 183 | "url": "https://michaelpumo.com", 184 | "source": "https://github.com/michaelpumo/michaelpumo", 185 | "tags": ["portfolio", "frontend", "javascript", "vue", "freelance", "london"] 186 | }, 187 | { 188 | "name": "HeartFlow, Inc.", 189 | "description": "Corporate website for HeartFlow, Inc.", 190 | "url": "https://www.heartflow.com/", 191 | "tags": ["corporate", "healthcare", "medical"] 192 | } 193 | ] 194 | -------------------------------------------------------------------------------- /src/assets/fonts/Jost-300-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HZooly/built-with-gridsome/4e3f54722a743f665fe4654a3071ac4b8bffc70b/src/assets/fonts/Jost-300-Light.ttf -------------------------------------------------------------------------------- /src/assets/fonts/Jost-400-Book.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HZooly/built-with-gridsome/4e3f54722a743f665fe4654a3071ac4b8bffc70b/src/assets/fonts/Jost-400-Book.ttf -------------------------------------------------------------------------------- /src/assets/fonts/Jost-700-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HZooly/built-with-gridsome/4e3f54722a743f665fe4654a3071ac4b8bffc70b/src/assets/fonts/Jost-700-Bold.ttf -------------------------------------------------------------------------------- /src/assets/img/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HZooly/built-with-gridsome/4e3f54722a743f665fe4654a3071ac4b8bffc70b/src/assets/img/.gitkeep -------------------------------------------------------------------------------- /src/assets/styles/main.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: Jost; 3 | src: url("./../fonts/Jost-300-Light.ttf"); 4 | font-weight: 300; 5 | } 6 | 7 | @font-face { 8 | font-family: Jost; 9 | src: url("./../fonts/Jost-400-Book.ttf"); 10 | font-weight: 400; 11 | } 12 | 13 | @font-face { 14 | font-family: Jost; 15 | src: url("./../fonts/Jost-700-Bold.ttf"); 16 | font-weight: 700; 17 | } 18 | 19 | body { 20 | font-family: "Jost"; 21 | font-weight: 300; 22 | } 23 | -------------------------------------------------------------------------------- /src/components/ProjectCard.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 47 | -------------------------------------------------------------------------------- /src/components/ProjectsList.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 26 | 27 | 40 | -------------------------------------------------------------------------------- /src/components/README.md: -------------------------------------------------------------------------------- 1 | Add components that will be imported to Pages and Layouts to this folder. 2 | Learn more about components here: https://gridsome.org/docs/components/ 3 | 4 | You can delete this file. 5 | -------------------------------------------------------------------------------- /src/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HZooly/built-with-gridsome/4e3f54722a743f665fe4654a3071ac4b8bffc70b/src/favicon.png -------------------------------------------------------------------------------- /src/layouts/Default.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 46 | -------------------------------------------------------------------------------- /src/layouts/README.md: -------------------------------------------------------------------------------- 1 | Layout components are used to wrap pages and templates. Layouts should contain components like headers, footers or sidebars that will be used across the site. 2 | 3 | Learn more about Layouts: https://gridsome.org/docs/layouts/ 4 | 5 | You can delete this file. 6 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; 2 | import { config, library } from "@fortawesome/fontawesome-svg-core"; 3 | import { faGithub, faTwitter } from "@fortawesome/free-brands-svg-icons"; 4 | import { faFileCode } from "@fortawesome/free-regular-svg-icons"; 5 | import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons"; 6 | import "@fortawesome/fontawesome-svg-core/styles.css"; 7 | 8 | import DefaultLayout from "~/layouts/Default.vue"; 9 | 10 | import "~/assets/styles/main.css"; 11 | 12 | library.add(faGithub, faTwitter, faExternalLinkAlt, faFileCode); 13 | 14 | export default function(Vue, { router, head, isClient }) { 15 | Vue.component("font-awesome-icon", FontAwesomeIcon); 16 | Vue.component("Layout", DefaultLayout); 17 | } 18 | -------------------------------------------------------------------------------- /src/pages/Index.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 38 | 39 | 40 | query Projects($page: Int) { 41 | projects: allProject(perPage: 6, page: $page, sortBy: "id", order: ASC) @paginate { 42 | pageInfo { 43 | totalPages 44 | currentPage 45 | } 46 | totalCount 47 | edges { 48 | node { 49 | id 50 | name 51 | image 52 | url 53 | source 54 | path 55 | } 56 | } 57 | } 58 | } 59 | 60 | 61 | 91 | -------------------------------------------------------------------------------- /src/pages/README.md: -------------------------------------------------------------------------------- 1 | Pages are usually used for normal pages or for listing items from a GraphQL collection. 2 | Add .vue files here to create pages. For example **About.vue** will be **site.com/about**. 3 | Learn more about pages: https://gridsome.org/docs/pages/ 4 | 5 | You can delete this file. 6 | -------------------------------------------------------------------------------- /src/templates/Project.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 30 | query Project($id: ID!) { 31 | project(id: $id) { 32 | name 33 | description 34 | image 35 | source 36 | url 37 | } 38 | } 39 | 40 | 41 | 50 | -------------------------------------------------------------------------------- /src/templates/README.md: -------------------------------------------------------------------------------- 1 | Templates for **GraphQL collections** should be added here. 2 | To create a template for a collection called `WordPressPost` 3 | create a file named `WordPressPost.vue` in this folder. 4 | 5 | Learn more: https://gridsome.org/docs/templates/ 6 | 7 | You can delete this file. 8 | -------------------------------------------------------------------------------- /static/README.md: -------------------------------------------------------------------------------- 1 | Add static files here. Files in this directory will be copied directly to `dist` folder during build. For example, /static/robots.txt will be located at https://yoursite.com/robots.txt. 2 | 3 | This file should be deleted. -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | theme: { 3 | extend: {} 4 | }, 5 | variants: {}, 6 | plugins: [] 7 | } 8 | --------------------------------------------------------------------------------