npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gatsby-theme-portfolio-cara

v0.0.4

Published

Gatsby Portfolio Theme

Downloads

3

Readme

Gatsby Portfolio Cara Theme

Gatsby theme adapted from the beautiful Cara starter.

Features

  • Write a simple portfolio site from just one markdown file

Installation

  1. On a new repo install gatsby and this theme yarn add gatsby gatsby-theme-portfolio-cara -D
  2. Create agatsby-config.js file in the root
  3. Set the gatsby-theme-portfolio-cara in the __experimentalThemes option inside your gatsby-config.js
module.exports = {
  __experimentalThemes: [    {
    resolve: "gatsby-theme-portfolio-cara" ,
    NOTREADY_options: {
      siteTitle: `Your site title`,
      siteDescription: `Here is a site title`,
    }
  },]
}
  1. Create directory src/pages/markdown mkdir -p src/pages/markdown
  2. Create index.md in src/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: '[email protected]'
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"
---
  1. Copy and paste this file into the project root and name as tailwind.js

  2. Add .cache and public to the repo's .gitignore file

  3. Run with yarn gatsby develop

  4. Edit the page's content from src/pages/markdown/index.md to edit the website.

  5. 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.