{"id":22319377,"url":"https://github.com/gah-code/gilbertoharosite","last_synced_at":"2026-04-12T06:32:22.237Z","repository":{"id":265061300,"uuid":"895000978","full_name":"gah-code/gilbertoharosite","owner":"gah-code","description":"This project is a modern web application that demonstrates my front-end design patterns, passion for creative solutions, and a variety of projects, including blogs with code snippets, research notes from my learning journey, and more.","archived":false,"fork":false,"pushed_at":"2025-11-02T04:53:07.000Z","size":9830,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-11-02T06:15:22.349Z","etag":null,"topics":["content-modelling","contentful","css","gatsby","gatsby-theme","graphql","mdx","pwa","seo-friendly","typescript","ui"],"latest_commit_sha":null,"homepage":"https://gilbertaharo.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"0bsd","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gah-code.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-11-27T11:36:33.000Z","updated_at":"2025-11-02T04:53:10.000Z","dependencies_parsed_at":"2024-12-12T00:23:09.200Z","dependency_job_id":"cffbe18f-1429-4985-b630-ede3dcc336c5","html_url":"https://github.com/gah-code/gilbertoharosite","commit_stats":null,"previous_names":["gah-code/gilbertoharosite"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gah-code/gilbertoharosite","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gah-code%2Fgilbertoharosite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gah-code%2Fgilbertoharosite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gah-code%2Fgilbertoharosite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gah-code%2Fgilbertoharosite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gah-code","download_url":"https://codeload.github.com/gah-code/gilbertoharosite/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gah-code%2Fgilbertoharosite/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31706764,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-12T06:22:27.080Z","status":"ssl_error","status_checked_at":"2026-04-12T06:21:52.710Z","response_time":58,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["content-modelling","contentful","css","gatsby","gatsby-theme","graphql","mdx","pwa","seo-friendly","typescript","ui"],"created_at":"2024-12-04T00:08:34.686Z","updated_at":"2026-04-12T06:32:22.229Z","avatar_url":"https://github.com/gah-code.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# My 2025 Website Update: Contentful-Powered Gatsby Site 1.3.0\n\u003e\n\n![Lighthouse Score](./light-house.png)\n\n![Content Model](./content-mod-lastest.png)\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/f2ecbaf1-b540-48fd-82fd-b0d389e98a81/deploy-status)](https://app.netlify.com/sites/gilbertaharocode/deploys)\n\n## Project Overview\n\nThis repository contains a **Gatsby** website integrated with **Contentful** for content management and a newly introduced **Blog Post** system. By leveraging **GraphQL** queries and Contentful’s flexible data model, the site can fetch and render content for **Pages**, **Blog Posts**, and modular homepage blocks (e.g., Hero, Feature, CTA, etc.).\n\n## Key Features\n\n- **Blog Post Content Type**: Manage blog articles (title, slug, excerpt, body, image, category, date, etc.) directly from Contentful.\n- **Modular Homepage Blocks**: Use a variety of content types (Hero, Feature, CTA, etc.) for flexible, reusable homepage sections.\n- **SEO-Friendly**: Includes separate fields for SEO Title and SEO Description in both Page and Blog Post content types, plus a custom `\u003cSEOHead\u003e` component for meta tags.\n- **Dynamic Routing**: Gatsby’s `createPages` API in `gatsby-node.js` generates individual blog pages and category-based archives automatically.\n- **Responsive, Accessible UI**: Styles built with **Vanilla Extract** for consistent design tokens and fluid responsiveness.\n\n# 🔌 Contentful API Integration (Postman)\n\n- Postman allows you to quickly test and prototype Contentful API queries without writing code. You can:\n- Validate content structure before frontend integration\n- Debug or inspect specific entries and assets\n- Preview query filters, sorting, and field selections\n\nIN PROGRESS\n\n## Core Technologies\n\n- **Gatsby**: React-based static site generator for high performance and speed.\n- **Contentful**: Headless CMS to store and deliver structured content.\n- **GraphQL**: Query language for pulling data from Contentful.\n- **Vanilla Extract**: CSS-in-JS approach for theming and design tokens.\n- **Netlify**: Hosting and continuous deployment (see `netlify.toml`).\n- **Node.js**: For local development scripts and Gatsby build process.\n\n---\n\n## Contentful Model Overview\n\n### 1. **Blog Post**\n\n**Fields**:\n\n- **Slug** *(Short text, required)*  \n- **Title** *(Short text, required)*  \n- **Body** *(Rich text)*  \n- **Excerpt** *(Long text)*  \n- **Image** *(File)*  \n- **Date** *(Date \u0026 time)*  \n- **Category** *(Short text)*  \n- **Author** *(Reference to an Author or text)*  \n- **SEO Title** *(Short text, \u003c 50 chars)*  \n- **SEO Description** *(Long text)*\n\n\u003e **Note**: The `slug` is used to generate the page URL (e.g. `/blogs/{slug}`). GraphQL queries in `gatsby-node.js` or `blog-post.js` fetch data for each post.\n\n### 2. **Page**\n\n**Fields**:\n\n- **title** *(Short text)*  \n- **slug** *(Short text, required)*  \n- **description** *(Short text)*  \n- **Image** *(File)*  \n- **Body** *(Rich text)*  \n- **SEO Title** *(Short text, \u003c35 chars)*  \n- **SEO Description** *(Long text)*\n\n\u003e **Note**: Typically used for top-level site pages with custom content.\n\n### 3. **Layout \u0026 Homepage Blocks**\n\nThese content types (e.g., Homepage Hero, Feature List, CTA, LayoutHeader, LayoutFooter, etc.) are stored in Contentful and retrieved for the homepage and global site layout. They share common fields via GraphQL **interfaces**.\n\n---\n\n## Developer Documentation\n\n1. **Setup**  \n   - Copy `.env.EXAMPLE` → `.env.development` \u0026 `.env.production`, fill in **Contentful** credentials:\n\n     ```env\n     CONTENTFUL_SPACE_ID=xxxx\n     CONTENTFUL_ACCESS_TOKEN=xxxx\n     CONTENTFUL_MANAGEMENT_TOKEN=xxxx\n     ```\n\n   - Install dependencies:  \n\n     ```bash\n     npm install\n     # or\n     yarn install\n     ```\n\n2. **Local Development**  \n   - Run `npm run develop` or `yarn develop`.\n   - Open `http://localhost:8000` to see the site locally.  \n   - Use `gatsby-source-contentful` for fetching data. Check `gatsby-config.mjs` for plugin options.\n\n3. **Creating Blog Post Pages**  \n   - In `gatsby-node.js`, we query all blog post slugs and create individual pages at build time, using the `blog-post.js` template.  \n   - For category listings, `blog-category.js` can filter posts by a `category` field.\n\n4. **SEO \u0026 `\u003cSEOHead\u003e`**  \n   - Use `src/components/head.js` to inject meta tags on each page or post.  \n   - Pass `title`, `description`, and optional `image` or `url` props.\n\n---\n\n## Full Folder Structure (with Comments)\n\n```bash\n└── gah-code-gilbertoharosite/      # Root of the project\n    ├── README.md                  # Project readme (this file)\n    ├── LICENSE                    # License info (BSD 0-Clause)\n    ├── gatsby-browser.js          # Gatsby browser-level APIs (fonts, global styles)\n    ├── gatsby-config.mjs          # Main Gatsby config, includes plugins\n    ├── gatsby-node.js             # Gatsby Node APIs for dynamic page creation\n    ├── netlify.toml               # Netlify configuration for deployment\n    ├── package.json               # NPM/Yarn dependencies and scripts\n    ├── .env.EXAMPLE               # Example env variables for Contentful\n    ├── .nvmrc                     # Node version specification\n    ├── .prettierignore            # Prettier ignore rules\n    ├── .prettierrc.json           # Prettier configuration\n    └── src/                       # Source code for the Gatsby site\n        ├── components/            # Reusable and layout components\n        │   ├── fallback.js        # Fallback component for unknown block types\n        │   ├── head.js            # SEOHead component for meta tags\n        │   ├── sections.js        # Exports homepage sections (Hero, CTA, etc.)\n        │   ├── blog/              # Blog post-specific components\n        │   │   ├── Card.js\n        │   │   ├── PostCard.jsx\n        │   │   └── PostCardSmall.jsx\n        │   ├── design-system/     # Vanilla Extract theming + base styles\n        │   │   ├── 404.css.ts\n        │   │   ├── about-hero.css.ts\n        │   │   ├── colors.css.ts\n        │   │   ├── skill.css.ts\n        │   │   ├── styles.css.ts\n        │   │   └── theme.css.ts\n        │   ├── layout/            # Layout and navigation structure\n        │   │   ├── footer.js      # Global footer\n        │   │   ├── hero.js        # Hero layout section\n        │   │   ├── layout.js      # Wraps each page with header/footer\n        │   │   ├── header/\n        │   │   │   ├── header.css.ts\n        │   │   │   └── header.js\n        │   │   └── navigation/\n        │   │       ├── caret.css.ts\n        │   │       ├── caret.js\n        │   │       ├── nav-item-group.css.ts\n        │   │       └── nav-item-group.js\n        │   └── ui/                 # Generic UI components (buttons, lists, etc.)\n        │       ├── benefit-list.js\n        │       ├── brand-logo.js\n        │       ├── chevron-right.js\n        │       ├── cta.js\n        │       ├── logo-list.js\n        │       ├── product-list.js\n        │       ├── stat-list.js\n        │       ├── ui.css.ts\n        │       ├── ui.jsx\n        │       ├── certifications/\n        │       │   ├── resume-styled-cert-list.css.ts\n        │       │   ├── resume-styled-cert-list.jsx\n        │       │   └── resume-styled-item.js\n        │       ├── feature/\n        │       │   ├── feature-list.jsx\n        │       │   └── feature.jsx\n        │       └── skills/\n        │           ├── skill-list-grid.js\n        │           └── styles.css\n        ├── data/\n        │   └── certifications.json # Content data for certifications\n        ├── pages/                  # Gatsby pages mapped to routes\n        │   ├── 404.js              # Custom 404 page\n        │   ├── experience.js       # Experience page\n        │   ├── index.js            # Homepage\n        │   ├── learning.js         # Learning page\n        │   └── {Page.slug}.js      # Dynamically created pages from Contentful\n        └── templates/              # Templates for dynamic page creation\n            ├── RichTextRenderer.js # Renders rich text fields from Contentful\n            ├── blog-category.js    # Lists posts under specific categories\n            ├── blog-index.js       # Main blog listing or \"index\" page\n            ├── blog-post.css.ts    # Styling for single blog posts\n            └── blog-post.js        # Template for rendering individual blog posts\n\n```\n\n---\n\n## Local Development \u0026 Deployment\n\n1. **Clone \u0026 Install**  \n\n   ```bash\n   git clone \u003crepo-url\u003e\n   cd gah-code-gilbertoharosite\n   npm install\n   # or\n   yarn install\n   ```\n\n2. **Environment Variables**  \n   - Copy `.env.EXAMPLE` → `.env.development` / `.env.production`\n   - Provide **Contentful** credentials.\n\n3. **Develop**  \n\n   ```bash\n   npm run develop\n   ```\n\n   or\n\n   ```bash\n   yarn develop\n   ```\n\n   Go to `http://localhost:8000`.\n\n4. **Build \u0026 Serve**  \n\n   ```bash\n   npm run build \u0026\u0026 npm run serve\n   ```\n\n   or\n\n   ```bash\n   yarn build \u0026\u0026 yarn serve\n   ```\n\n5. **Deploy**  \n   - **Netlify**: This project includes `netlify.toml` for config.  \n   - Other hosts: Serve the `public/` folder after `gatsby build`.\n\n---\n\n## License\n\nThis project is licensed under **BSD Zero Clause License (0BSD)**. See [LICENSE](./LICENSE) for details.\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgah-code%2Fgilbertoharosite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgah-code%2Fgilbertoharosite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgah-code%2Fgilbertoharosite/lists"}