Gatsby Portfolio Cara Theme
Gatsby theme adapted from the beautiful Cara starter.
Features
- Write a simple portfolio site from just one markdown file
Installation
- On a new repo install gatsby and this theme
yarn add gatsby gatsby-theme-portfolio-cara -D
- Create a
gatsby-config.js
file in the root - Set the
gatsby-theme-portfolio-cara
in the__experimentalThemes
option inside yourgatsby-config.js
moduleexports = __experimentalThemes: resolve: "gatsby-theme-portfolio-cara" NOTREADY_options: siteTitle: `Your site title` siteDescription: `Here is a site title`
- Create directory
src/pages/markdown
mkdir -p src/pages/markdown
- Create
index.md
insrc/pages/markdown
and add the following to it
---title: "Hello"subtitle: "I'm creating nice web experiences for the next generation of consumer-facing companies"email: 'hi@hi.com'aboutDesc: "The English language can not fully capture the depth and complexity of my thoughts. So I'm incorporating Emoji into my speech to better express myself. Winky face."aboutSub: "You know the way you feel when you see a picture of two otters holding hands? That's how you're gonna feel every day. My mother cried the day I was born because she knew she’d never be prettier than me. You should make me your campaign manager. I was born for politics. I have great hair and I love lying. Captain? The kids want to know where Paulie the Pigeon is. I told them he got sucked up into an airplane engine, is that all right?"projectOneTitle : "Freiheit" projectOneUrl : "https://www.behance.net/gallery/58937147/Freiheit" projectOneDesc : "This project is my entry to Adobe's #ChallengeYourPerspective contest." projectTwoTitle : "Project 2" projectTwoUrl : "https://github.com/cthogg/gatsby-theme-portfolio-cara"projectTwoDesc : "Description of project 2" projectThreeTitle : "Project 3" projectThreeUrl : "https://github.com/cthogg/gatsby-theme-portfolio-cara"projectThreeDesc : "Description of project 3" projectFourTitle : "Project 4" projectFourDesc : "Description of project 4"projectFourUrl : "https://github.com/cthogg/gatsby-theme-portfolio-cara" profileImageUrl: "https://cara.lekoarts.de/static/avatar-c99035c8ff4376bb578c17e597c4baed.jpg"---
-
Copy and paste this file into the project root and name as
tailwind.js
-
Add
.cache
andpublic
to the repo's.gitignore
file -
Run with
yarn gatsby develop
-
Edit the page's content from
src/pages/markdown/index.md
to edit the website. -
Want to change something? Take advantage of Gatsby's component shadowing by creating a copy of the component you want to modify and editing that.
Roadmap:
- change the site's ui with simple theming.
- instructions to deploy to Netlify
- put the config file as a theme option
- integration with one of the many CMSs from the list at the power of serverless
- Add a license.
- Compare to modern-portfolio to make a template for themes so can easily switch between themes (probably best to put the questions object in commander-pages in the theme repo for added extensibility)
Inspiration:
- https://github.com/LekoArts/gatsby-starter-portfolio-cara for the starter template.
- https://github.com/cthogg/gatsby-theme-modern-portfolio for the theme template.