{"id":21169100,"url":"https://github.com/cosmicjs/nextjs-developer-portfolio","last_synced_at":"2025-07-09T18:31:48.233Z","repository":{"id":77502830,"uuid":"501344028","full_name":"cosmicjs/nextjs-developer-portfolio","owner":"cosmicjs","description":"A developer portfolio template powered by the Cosmic headless CMS.","archived":false,"fork":false,"pushed_at":"2024-07-03T13:33:22.000Z","size":44732,"stargazers_count":42,"open_issues_count":0,"forks_count":14,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-05T05:03:27.237Z","etag":null,"topics":["cosmicjs","headless-cms","nextjs","reactjs"],"latest_commit_sha":null,"homepage":"https://nextjs-developer-portfolio-cms.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cosmicjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-06-08T17:15:02.000Z","updated_at":"2025-04-04T17:45:02.000Z","dependencies_parsed_at":null,"dependency_job_id":"ee0e9ae5-4ee3-4ec1-98bf-c14571347a95","html_url":"https://github.com/cosmicjs/nextjs-developer-portfolio","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/cosmicjs/nextjs-developer-portfolio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cosmicjs%2Fnextjs-developer-portfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cosmicjs%2Fnextjs-developer-portfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cosmicjs%2Fnextjs-developer-portfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cosmicjs%2Fnextjs-developer-portfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cosmicjs","download_url":"https://codeload.github.com/cosmicjs/nextjs-developer-portfolio/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cosmicjs%2Fnextjs-developer-portfolio/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264502387,"owners_count":23618587,"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":["cosmicjs","headless-cms","nextjs","reactjs"],"created_at":"2024-11-20T15:22:58.985Z","updated_at":"2025-07-09T18:31:46.970Z","avatar_url":"https://github.com/cosmicjs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Developer Portfolio built with Next.js and Cosmic\n\n![Screenshot of the Cosmic Developer Porfolio application template](/public/images/dev-portfolio.png)\n\nTo build this app, we’re going to use the following technologies:\n\n- [Next.js](https://nextjs.org/docs) - A React framework for production that makes it easy to spin up a full-stack application.\n- [Cosmic](https://www.cosmicjs.com/) - A Headless CMS enables the independence of the data (content) layer and gives us the ability to quickly manage template content.\n- [Tailwind CSS](https://tailwindcss.com/) - A performant utility-first CSS framework that can be composed directly in your markup.\n\n### Links\n\n- [Read how the template was built](https://www.cosmicjs.com/blog/creating-a-developer-portfolio-with-nextjs-and-cosmic)\n- [Install the template](https://www.cosmicjs.com/marketplace/templates/developer-portfolio)\n- [View the live demo](https://nextjs-developer-portfolio-cms.vercel.app/)\n\n## Getting started\n\n### Environment Variables\n\nYou'll need to create an .env file in the root of the project. Log in to Cosmic and from Bucket Settings \u003e API Access take the following values:\n\n```\n//.env\nCOSMIC_BUCKET_SLUG=your_cosmic_slug\nCOSMIC_READ_KEY=your_cosmic_read_key\nCOSMIC_PREVIEW_SECRET=your_preview_secret\n```\n\nInstall the dependencies by running one of the following commands:\n\n```\npnpm install\n# or\nyarn\n# or\nnpm install\n```\n\nThen run the development server:\n\n```\npnpm dev\n# or\nyarn dev\n# or\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.\n\n## Previewing Unpublished Content\n\nThis template supports [Next.js Draft Mode](https://nextjs.org/docs/app/building-your-application/configuring/draft-mode), allowing you to preview unpublished blog posts and works pages from the Cosmic dashboard.\n\n### Setup in the codebase\n\nTo enable preview mode, you'll need to set the `COSMIC_PREVIEW_SECRET` environment variable in your `.env` file. This secret can be any random string, though we recommend creating a secure string for security reasons.\n\n### Setup in Cosmic\n\n\\*Note that this template currently supports Draft Mode for **Posts** and **Works** Object types.\n\nIn your Cosmic dashboard, go to your **Content** and select **Posts** or **Works** from the list of Object types. Next, select **Object type settings \u003e Additional settings**.\n\nStart by copying and pasting this URL into the **Preview link** field:\n\n`https://YOUR_LOCAL_OR_PROD_HOST/api/draft?secret=YOUR_SECRET_PREVIEW_KEY\u0026path=OBJECT_TYPE_PATH\u0026slug=[object_slug]`\n\nReplace `YOUR_LOCAL_OR_PROD_HOST` with your local host (e.g. `http://localhost:3000`) or production host (e.g. `https://your-app.vercel.app`), and replace `YOUR_SECRET_PREVIEW_KEY` with the secret you set in your `.env` file. Match the `OBJECT_TYPE_PATH` to the Object type you're editing (e.g. `posts` or `works`).\n\nFrom here, you can now preview unpublished content from the Cosmic dashboard by clicking the **Preview** button in the righthand sidebar when editing an individual Object.\n\n## Deploy on Vercel\n\n\u003cp\u003eUse the following button to deploy to \u003ca href=\"https://vercel.com/\" rel=\"noopener noreferrer\" target=\"_blank\"\u003eVercel\u003c/a\u003e. You will need to add API accesss keys as environment variables. Find these in \u003cem\u003eBucket Settings \u0026gt; API Access\u003c/em\u003e.\u003c/p\u003e\n\u003cp\u003e\n\u003ca href=\"https://vercel.com/new/clone?env=COSMIC_BUCKET_SLUG%2CCOSMIC_READ_KEY%2CCOSMIC_PREVIEW_SECRET\u0026repository-url=https%3A%2F%2Fgithub.com%2Fcosmicjs%2Fnextjs-developer-portfolio%2Ftree%2Fapi-v3\" rel=\"noopener noreferrer\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.cosmicjs.com/d3f0d5e0-c064-11ea-9a05-6f8a16b0b14c-deploy-to-vercel.svg\" style=\"width: 100px;\" class=\"fr-fic fr-dib fr-fil\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n\nYour feedback and contributions are welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcosmicjs%2Fnextjs-developer-portfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcosmicjs%2Fnextjs-developer-portfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcosmicjs%2Fnextjs-developer-portfolio/lists"}