{"id":13725510,"url":"https://github.com/christiandavid/gatsby-theme-byfolio","last_synced_at":"2025-04-06T02:07:18.389Z","repository":{"id":36551931,"uuid":"228112399","full_name":"christiandavid/gatsby-theme-byfolio","owner":"christiandavid","description":"A simplified way to create a portfolio using GatsbyJS","archived":false,"fork":false,"pushed_at":"2023-03-04T15:05:04.000Z","size":160077,"stargazers_count":262,"open_issues_count":12,"forks_count":39,"subscribers_count":3,"default_branch":"dev","last_synced_at":"2025-03-30T01:04:52.180Z","etag":null,"topics":["gatsbyjs","portfolio","pwa-apps","react"],"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/christiandavid.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","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":"2019-12-15T01:20:10.000Z","updated_at":"2025-01-26T06:21:30.000Z","dependencies_parsed_at":"2024-12-30T07:16:31.136Z","dependency_job_id":null,"html_url":"https://github.com/christiandavid/gatsby-theme-byfolio","commit_stats":{"total_commits":53,"total_committers":6,"mean_commits":8.833333333333334,"dds":"0.28301886792452835","last_synced_commit":"924fc3d1621b3d8abe331581b7d7bf0113603193"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christiandavid%2Fgatsby-theme-byfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christiandavid%2Fgatsby-theme-byfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christiandavid%2Fgatsby-theme-byfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christiandavid%2Fgatsby-theme-byfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/christiandavid","download_url":"https://codeload.github.com/christiandavid/gatsby-theme-byfolio/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247423512,"owners_count":20936626,"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":["gatsbyjs","portfolio","pwa-apps","react"],"created_at":"2024-08-03T01:02:25.583Z","updated_at":"2025-04-06T02:07:18.371Z","avatar_url":"https://github.com/christiandavid.png","language":"JavaScript","funding_links":[],"categories":["Table of Contents","JavaScript"],"sub_categories":["Inspiration"],"readme":"# gatsby-theme-byfolio\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://github.com/christiandavid/gatsby-theme-byfolio/blob/dev/LICENSE)\n[![CircleCI](https://circleci.com/gh/christiandavid/gatsby-theme-byfolio.svg?style=svg)](https://circleci.com/gh/christiandavid/gatsby-theme-byfolio)\n![Twitter Follow](https://img.shields.io/twitter/follow/iChristianDavid?style=social)\n\nInitially this was a personal portfolio made in GatsbyJs, now it's a Gatsby theme available to anyone who wants to tell their work history focusing only on the content.\n\n![Gatsby Portfolio](https://raw.githubusercontent.com/christiandavid/gatsby-theme-byfolio/dev/readme-files/Byfolio.jpg)\n\n![Portfolio](https://raw.githubusercontent.com/christiandavid/gatsby-theme-byfolio/dev/readme-files/portfolio.gif)\n\n- [Installation](#installation)\n- [Configuration](#configuration)\n- [Adding experience and skills](#adding-experience-and-skills)\n- [Skills](#skills)\n- [Component shadowing](#component-shadowing)\n- [Examples](#examples)\n- [Authors](#authors)\n- [Credits](#credits)\n\n## Installation\n\n```sh\nmkdir portfolio \u0026\u0026 cd portfolio\nyarn init -y\nyarn add react react-dom gatsby @christiandavid/gatsby-theme-byfolio\n```\n\nCreate gatsby-config.js file and load the plugin\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: `@christiandavid/gatsby-theme-byfolio`,\n    },\n  ],\n}\n```\n\n```sh\ngatsby develop\n```\n\nIn your browser load [localhost:8000](http://localhost:8000/)\n\n## Configuration\n\nAfter each modification in gatsby-config.js it is necessary to restart the site from the terminal.\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: `@christiandavid/gatsby-theme-byfolio`,\n      options: {\n        basePath: ``,\n        path: `src/`,\n        imagesPath: `src/images/`,\n        iconFile: `src/images/icon.png`,\n        siteTitle: `Portfolio`,\n        siteUrl: `https://www.christianibarguen.com`,\n        siteName: `Christian David Ibarguen`,\n        siteShortName: `CD`,\n        siteDescription: `This cool App contains information about my work experience as a software developer.`,\n        siteKeywords: `Software developer, Full Stack Developer`,\n        useMozJpeg: true,\n        menuLinks: [\n          // title = Link text\n          // color = Animation background color on click\n          { name: `home`, title: `Home`, color: `#000`, link: `` },\n          {\n            name: `experience`,\n            title: `Experience`,\n            color: `#3a3d98`,\n            link: ``,\n          },\n          { name: `skills`, title: `Skills`, color: `#d52d43`, link: `` },\n          { name: `aboutMe`, title: `About Me`, color: `#fff`, link: `` },\n        ],\n        email: `christian@davidibarguen.com`,\n        social: {\n          // Usernames\n          twitter: `ichristiandavid`,\n          gitHub: `christiandavid`,\n          stackOverflow: `967956/christian-david`,\n          linkedIn: `in/christianibarguen/`,\n          resumeInPdf: `/CV-19.pdf`, // url or local link\n        },\n        homePage: {\n          availableToHire: true,\n          dotColors: [\"#0e3e1e\", \"#6CC551\"],\n          h1Text: `Hi!, I'm Christian David Ibarguen`,\n          h2Text: `I'm a Full Stack Developer who loves working in Backend, I have\n              worked as a software developer since 2006.`,\n          typewriter: [\n            `Coding is my passion 😎`,\n            `I'm a 🍕 lover`,\n            `I'm a pretty fast learner and always interested in learning new technologies 🤓`,\n            `I think one of my values is the \u003cstrong\u003eability to resolve problems\u003cstrong\u003e`,\n            `I like to share what I know 👨‍🏫`,\n            `In my non-coding hours, I'm at the 🏋‍`,\n            `I also do design and UX work \u003cspan style='color: #27ae60;'\u003eoccasionally\u003c/span\u003e`,\n          ],\n        },\n        // Color for menu background\n        shapeColor: {\n          link: { color: \"#171616\", hover: \"#fff\" },\n          shape1: {\n            color: `#413f46`,\n            opacity: `0.7`,\n          },\n          shape2: {\n            color: `#e6e5ea`,\n            opacity: `0.7`,\n          },\n          shape3: {\n            color: `#fff`,\n            opacity: `0.7`,\n          },\n        },\n        footer: `heart`,\n      },\n    },\n  ],\n}\n```\n\n| Option name     | Type    | Description                                                                                                                           |\n| --------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |\n| basePath        | string  | Where should the site be served from? /portfolio will change all paths to start with /portfolio                                         |\n| path            | string  | Place where the files are stored, for example: `src/`                                                                                 |\n| imagesPath      | string  | Place where the images files are stored, for example: `src/images/`                                                                   |\n| iconFile        | string  | Provides the icon path for the gatsby-plugin-manifest plugin                                                                          |\n| typographyPath  | string  | Place where the file that defines your website’s typography configuration is located                                                  |\n| siteTitle       | string  | The main title for the website, used in the `\u003ctitle\u003e` element                                                                         |\n| siteUrl         | string  | The portfolio url, example: `https://christianibarguen.com`                                                                           |\n| siteName        | string  | Represents the name of the web application as it is usually displayed to the user                                                     |\n| siteShortName   | string  | Represents a short version of the name of the web application                                                                         |\n| siteDescription | string  | Allows you to describe the purpose of the web application                                                                             |\n| siteKeywords    | string  | Keywords for the page                                                                                                                 |\n| useMozJpeg      | boolean | MozJPEG provides better image compression than the default encoder used in gatsby-plugin-sharp.                                       |\n| menuLinks       | array   | An array of objects for the menu, each item represents a link, color represents the color that the animation shows when it is pressed |\n| email           | string  | Email for contact, this is displayed when the Contact Me button is pressed                                                            |\n| social          | object  | An Object with the user accounts of: twitter, gitHub, stackOverflow, linkedIn and `resumeInPdf` resume link                           |\n| homePage        | object  | An object with information of titles, texts with animated description, and animation to show if you are available to be hired         |\n| shapeColor      | object  | Represents the colors used in the menu animation, in total there are 3 in which you can specify the color and the opacity             |\n| footer          | string  | Text to show in the footer only has 2 options: `heart`or `hand`                                                                       |\n\n## Adding experience and skills\n\nThis theme generates pages based on Markdown files in the `path`/experience directory. Your Markdown files should contain some frontmatter defining their company, logo, etc.\nAll company logos must be relative to `imagesPath`/companies directory.\nAll Skills logos must be relative to `imagesPath`/skills directory.\nAll layout images must be relative to company directory, for example: `imagesPath`/companies/vlooping\n\n### Important\n\nFor each Skill you must add the logo of the Framework, library or program, with a resolution of **width: 500px, height: 500px**, in the src/images/skills/ directory I leave several logos, **only Skills logos that I own are present, if the logo you need does not appear you must create it**.\n\nLayout number is for image animation you can select from 1 to 5, **please do not forget to add the images \"images/companies/vlooping.png, images/skills/html5.png, images/skills/react.png, images/companies/vlooping/vlooping.png\" to run the following example**\n\n```yaml\n---\ntitle: \"\"\ncompany: \"Company Name\"\nlogo: ../images/companies/vlooping.png\njobTitle: \"My job position\"\nskills:\n  [\n    { title: \"HTML 5\", image: ../images/skills/html5.png },\n    { title: \"HTML 5\", image: ../images/skills/react.png },\n  ]\nimages:\n  [\n    {\n      title: \"Layout 4\",\n      description: \"Description text for layout 4.\",\n      layout: \"4\",\n      files:\n        [\n          { image: ../images/companies/vlooping/vlooping.png },\n          { image: ../images/companies/vlooping/vlooping.png },\n          { image: ../images/companies/vlooping/vlooping.png },\n        ],\n    },\n    {\n      title: \"Layout 1\",\n      description: \"Description text for layout 1.\",\n      layout: \"1\",\n      files:\n        [\n          { image: ../images/companies/vlooping/vlooping.png },\n          { image: ../images/companies/vlooping/vlooping.png },\n          { image: ../images/companies/vlooping/vlooping.png },\n        ],\n    },\n    {\n      title: \"Layout 2\",\n      description: \"Description text for layout 2.\",\n      layout: \"2\",\n      files:\n        [\n          { image: ../images/companies/vlooping/vlooping.png },\n          { image: ../images/companies/vlooping/vlooping.png },\n          { image: ../images/companies/vlooping/vlooping.png },\n          { image: ../images/companies/vlooping/vlooping.png },\n          { image: ../images/companies/vlooping/vlooping.png },\n        ],\n      caption: \"New Message\",\n    },\n    {\n      title: \"Layout 3\",\n      description: \"Description text for layout 1.\",\n      layout: \"3\",\n      files:\n        [\n          { image: ../images/companies/vlooping/vlooping.png },\n          { image: ../images/companies/vlooping/vlooping.png },\n          { image: ../images/companies/vlooping/vlooping.png },\n          { image: ../images/companies/vlooping/vlooping.png },\n        ],\n    },\n    {\n      title: \"Layout 5\",\n      description: \"Description text for layout 5.\",\n      layout: \"5\",\n      files:\n        [\n          { image: ../images/companies/vlooping/vlooping.png },\n          { image: ../images/companies/vlooping/vlooping.png },\n          { image: ../images/companies/vlooping/vlooping.png },\n        ],\n    },\n  ]\ndateFrom: \"2015-12-01\"\ndateTo: \"2019-12-01\"\n---\n- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n- Contrary to popular belief, Lorem Ipsum is not simply random text\n- It is a long established fact that a reader will be distracted by the readable content of a page\n- There are many variations of passages of Lorem Ipsum available\n- The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested\n```\n\n### Skills\n\nThe Skills are automatically selected from experience, in case some skill you acquired does not correspond to a company you can add it in `path`/experience/\\_additionalSkills.md\n\n```yaml\n---\ntitle: \"\"\ncompany: \"\"\njobTitle: \"\"\nlogo:\nskills:\n  [\n    { title: \"React\", image: ../images/skills/react.png },\n    { title: \"React Native\", image: ../images/skills/react-native.png },\n    { title: \"Gatsby\", image: ../images/skills/gatsby.png },\n    { title: \"GraphQL\", image: ../images/skills/graphql.png },\n    { title: \"Redux\", image: ../images/skills/redux.png },\n    { title: \"Apollo GraphQL\", image: ../images/skills/apollo.png },\n    { title: \"Socket.io\", image: ../images/skills/socket-io.png },\n  ]\nimages: []\ndateFrom: \"2019-09-01\"\ndateTo: \"2019-09-01\"\n---\n\n```\n\n## Component shadowing\n\nYou can customize elements like the css style or about-me content by taking advantage of [component shadowing](https://www.gatsbyjs.org/blog/2019-04-29-component-shadowing/).\n\nI recommend using [Coolors.co](https://coolors.co/) to select a color palette and adapt it to your new portfolio.\n\nYou can change the color of the text and the background of each page, for example:\n\n```js\n// src/@christiandavid/gatsby-theme-byfolio/layout/layoutColors.css.js\nimport { css } from \"@emotion/core\"\nimport lineSvg from \"../../../static/assets/line.svg\"\n\nconst styles = css`\n  .e404.layout-wrapper .layout-inner {\n    background: #fff;\n  }\n  .e404 .data-section {\n    color: #000;\n  }\n  .aboutme.layout-wrapper .layout-inner {\n    background: #fff;\n  }\n  .aboutme .data-section {\n    color: #000;\n  }\n  .aboutme .hamburgercolr::before,\n  .aboutme .hamburgercolr::after,\n  .e404 .hamburgercolr::before,\n  .e404 .hamburgercolr::after {\n    background-color: #000;\n  }\n  .home.layout-wrapper .layout-inner {\n    background: #0e0f11;\n    background: #0e0f11 url(${lineSvg}) center center fixed;\n    background-size: contain;\n  }\n  .home.layout-wrapper h1,\n  .home.layout-wrapper h2 {\n    color: #fff;\n  }\n  .skill.layout-wrapper .layout-inner {\n    color: #fff;\n    background: #9d316e;\n    background: url(${lineSvg}) center center fixed, linear-gradient(\n        45deg,\n        #9d316e,\n        #de2d3e\n      );\n    background-size: cover;\n  }\n  .experience.layout-wrapper .layout-inner {\n    background: #3a3d98;\n    background: url(${lineSvg}) center center fixed, linear-gradient(\n        45deg,\n        #6f22b9,\n        #3a3d98\n      );\n    background-size: cover;\n  }\n  .home .hamburgercolr::before,\n  .home .hamburgercolr::after,\n  .skill .hamburgercolr::before,\n  .skill .hamburgercolr::after,\n  .experience .hamburgercolr::before,\n  .experience .hamburgercolr::after {\n    background-color: #fff;\n  }\n  .home .btn-contact-color,\n  .experience .btn-contact-color {\n    color: #fff;\n  }\n  .aboutme .btn-contact-color,\n  .e404 .btn-contact-color {\n    color: #000;\n  }\n`\n\nexport default styles\n```\n\nYou can change the about-me text in the \"src/@christiandavid/gatsby-theme-byfolio/contentJSON/about-me.json\" file, for example:\n\n```json\n[\n  {\n    \"subtitle\": \"About Me!\",\n    \"content\": \"I'm a \u003cstrong\u003eSoftware Developer\u003c/strong\u003e\"\n  },\n  {\n    \"subtitle\": \"Experience!\",\n    \"content\": \"I started developing software from \u003cstrong\u003e2004\u003c/strong\u003e working in several companies\"\n  }\n]\n```\n\n## Examples\n\n- [My Portfolio](https://christianibarguen.com)\n- [Mario Gómez Portfolio](http://mariogmz.com)\n\nAre you using this theme in your own project? Submit a PR with your website added to this list!\n\n## Authors\n\n- **Christian David Ibarguen R**\n\n## Credits\n\nSpecial thanks to:\n\n- [GatsbyJs](https://www.gatsbyjs.org/)\n- [Codrops](https://tympanus.net/codrops/)\n- [Fontawesome](https://fontawesome.com/license)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchristiandavid%2Fgatsby-theme-byfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchristiandavid%2Fgatsby-theme-byfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchristiandavid%2Fgatsby-theme-byfolio/lists"}