{"id":20436423,"url":"https://github.com/cloderic/gatsby-starter-portfolio-cara","last_synced_at":"2025-08-24T22:07:37.488Z","repository":{"id":146172449,"uuid":"159942727","full_name":"cloderic/gatsby-starter-portfolio-cara","owner":"cloderic","description":null,"archived":false,"fork":false,"pushed_at":"2018-12-01T12:33:46.000Z","size":7023,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-15T19:44:45.330Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cloderic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-12-01T12:33:36.000Z","updated_at":"2018-12-01T12:33:52.000Z","dependencies_parsed_at":null,"dependency_job_id":"7dd9f780-e5a9-4770-b525-ba89288e2bfe","html_url":"https://github.com/cloderic/gatsby-starter-portfolio-cara","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloderic%2Fgatsby-starter-portfolio-cara","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloderic%2Fgatsby-starter-portfolio-cara/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloderic%2Fgatsby-starter-portfolio-cara/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloderic%2Fgatsby-starter-portfolio-cara/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cloderic","download_url":"https://codeload.github.com/cloderic/gatsby-starter-portfolio-cara/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241982491,"owners_count":20052530,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-15T08:41:30.881Z","updated_at":"2025-03-05T06:42:27.514Z","avatar_url":"https://github.com/cloderic.png","language":"JavaScript","funding_links":["https://www.patreon.com/lekoarts"],"categories":[],"sub_categories":[],"readme":"![](https://i.imgur.com/hWB1XRO.png)\n\n# Gatsby Starter Portfolio: Cara\n\nA portfolio starter for [Gatsby](https://www.gatsbyjs.org/). The target audience are designers and photographers.\n\n[Demo Website](https://portfolio-cara.netlify.com/)\n\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/LeKoArts/gatsby-starter-portfolio-cara) [![Edit gatsby-starter-portfolio-cara](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/LeKoArts/gatsby-starter-portfolio-cara/tree/master/)\n\n- TailwindCSS \u0026 Emotion\n- React Spring\n- Playful \u0026 Colorful One-Page website with Parallax effect\n\nBased on [gatsby-tailwind-demo](https://github.com/jlengstorf/gatsby-tailwind-demo).\n\n## Why?\n\nIf you want to quickly bootstrap a design/photography portfolio or use it as a foundation for your personal site, the starters in *gatsby-starter-portfolio* are a perfect fit for you! The project's goal is to offer minimalistic and fast websites. \n\nI hope you like my starters and create something awesome! To see some of my work, you can visit my [website](https://www.lekoarts.de) or support me on [Patreon](https://www.patreon.com/lekoarts) to get some neat rewards (4K images, project files, tutorial insights). Every pledge on Patreon helps me create more free starters!\n\nAlso, check out the other themes for *gatsby-starter-portfolio*:\n- [gatsby-starter-portfolio-emma](https://github.com/LeKoArts/gatsby-starter-portfolio-emma)\n- [gatsby-starter-portfolio-emilia](https://github.com/LeKoArts/gatsby-starter-portfolio-emilia)\n- [gatsby-starter-portfolio-bella](https://github.com/LeKoArts/gatsby-starter-portfolio-bella)\n\nCheck out the [Gatsby Starter Portfolio Overview](https://gatsby-starter-portfolio.netlify.com/)!\n\n## Features\n\n- Gatsby v2.0.0\n- [React Spring](https://github.com/drcmda/react-spring) (Used for Parallax effect)\n- [TailwindCSS](https://tailwindcss.com/) \u0026 [Emotion](https://emotion.sh/) for styling\n    - Use the full power of TailwindCSS while generating small styles (as unused data gets deleted)\n- SEO\n    - Schema.org JSONLD\n    - OpenGraph Tags\n    - Twitter Tags\n- [Typefaces](https://github.com/KyleAMathews/typefaces) for quicker font loading\n- Offline Support\n- WebApp Manifest Support\n- Responsive images\n    - The right image size for every screen size\n    - Traced SVG Loading (Lazy-Loading)\n    - WebP Support\n\n**Please note:** The parallax effect can be quite heavy for some older CPUs and the site uses some newer CSS features which will result in incompatibility with older browsers.\n\n## Getting Started\n\nCheck your development environment! You'll need [Node.js](https://nodejs.org/en/), the [Gatsby CLI](https://www.gatsbyjs.org/docs/) and [node-gyp](https://github.com/nodejs/node-gyp#installation) installed. The official Gatsby website also lists two articles regarding this topic:\n- [Gatsby on Windows](https://www.gatsbyjs.org/docs/gatsby-on-windows/)\n- [Check your development environment](https://www.gatsbyjs.org/tutorial/part-zero/)\n\nTo copy and install this starter run this command (with \"project-name\" being the name of your folder you wish to install it in):\n\n```\ngatsby new project-name https://github.com/LeKoArts/gatsby-starter-portfolio-cara\ncd project-name\nnpm run dev\n```\n\n### Adding new features/plugins\n\nYou can add other features by having a look at the official [plugins page](https://www.gatsbyjs.org/docs/plugins/).\n\n### Building your site\n\n```\nnpm run build\n```\nCopy the content of the ``public`` folder to your webhost or use a website like Netlify which automates that for you.\n\nMake sure to use the right build command in your build settings e.g. if you use Netlify!\nPer default Netlify sets it to `gatsby build` but you have to use `yarn run build` to run postcss before building the Gatsby site.\n\n## Configuration\n\nYou have multiple options to configure this project.\n\n1) Use the `config/website.js` to configure data passed to the SEO component and other parts of the Gatsby site:\n\n```JS\nmodule.exports = {\n  pathPrefix: '/', // Prefix for all links. If you deploy your site to example.com/portfolio your pathPrefix should be \"/portfolio\"\n\n  siteTitle: 'Cara - Gatsby Starter Portfolio', // Navigation and Site Title\n  siteTitleAlt: 'Cara', // Alternative Site title for SEO\n  siteUrl: 'https://portfolio-cara.netlify.com', // Domain of your site. No trailing slash!\n  siteLanguage: 'en', // Language Tag on \u003chtml\u003e element\n  siteLogo: '/logos/logo-1024.png', // Used for SEO and manifest\n  siteDescription: 'Playful \u0026 Colorful One-Page website with Parallax effect',\n\n  // siteFBAppID: '123456789', // Facebook App ID - Optional\n  userTwitter: '@cara', // Twitter Username\n  ogSiteName: 'cara', // Facebook Site Name\n  ogLanguage: 'en_US', // Facebook Language\n\n  // Manifest and Progress color\n  themeColor: tailwind.colors.orange,\n  backgroundColor: tailwind.colors.blue,\n};\n```\n\n2) Use the `tailwind.js` file to configure TailwindCSS. Their [documentation](https://tailwindcss.com/docs/configuration) explains it step-by-step.\n\n3) Modify the files in the `src/styles` directory.\n\n4) You can also place the icons somewhere else on the page, modify their animation and hide them on smaller screens:\n\n```JSX\n  \u003cSVG icon=\"triangle\" className={hidden} width={48} stroke={colors.orange} left=\"10%\" top=\"20%\" /\u003e\n  \u003cSVG icon=\"hexa\" width={48} stroke={colors.red} left=\"60%\" top=\"70%\" /\u003e\n  \u003cSVG icon=\"box\" width={6} fill={colors['grey-darker']} left=\"60%\" top=\"15%\" /\u003e\n```\n\n- For `icon`, you have the options: `triangle, circle, arrowUp, upDown, box, hexa`\n- If you want the SVG to be hidden on mobile view, add `className={hidden}` to the SVG component\n- You can define the width via the TailwindCSS width [option](https://tailwindcss.com/docs/width)\n- The colors get defined via the TailwindCSS color [option](https://tailwindcss.com/docs/colors)\n    - Please note that you will either have to define the color in `stroke` **or** `fill` depending on the icon. For reference, have a look at the currently used SVGs\n- The options `left` and `top` position the icon relatively to its parent container\n- You can also wrap the SVGs with `\u003cUpDown /\u003e` or `\u003cUpDownWide /\u003e` to animate them\n\n### Typography\n\nInstead of relying on Google's CDN to host its fonts, this site self-hosts the fonts and therefore benefits from increased performance. The installed fonts can be found in `src/pages/index.jsx`:\n\n```JSX\nimport 'typeface-cantata-one';\nimport 'typeface-open-sans';\n```\n\nThis starter uses [typefaces](https://github.com/KyleAMathews/typefaces) by Kyle Mathews. Have a look at the repository if you want to install \u0026 use other fonts.\n\nYou'll also need to configure `fonts` in `tailwind.js` to reflect the changes. You then can use the fonts with `font-sans` and `font-serif`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloderic%2Fgatsby-starter-portfolio-cara","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcloderic%2Fgatsby-starter-portfolio-cara","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloderic%2Fgatsby-starter-portfolio-cara/lists"}