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

gitfolio

v0.1.5

Published

a portfolio website for everyone to showcase their work

Downloads

97

Readme

Gitfolio

Tweet GitHub release npm GitHub top language GitHub last commit GitHub code style: prettier

personal website + blog for every github user

Gitfolio will help you get started with a portfolio website where you could showcase your work + a blog that will help you spread your ideas into real world.

Check out this live demo to see gitfolio in action.

Getting Started

Let's Install

Install gitfolio

npm i gitfolio -g

Let's Build

Using the UI

$ gitfolio ui

Tip: You can use ui to create new blogs and for updating your folio too.

or

gitfolio build <username>

<username> is your username on github. This will build your website using your GitHub username and put it in the /dist folder.

To run your website use run command, Default port is 3000

gitfolio run -p [port]

🎉 Congrats, you just made yourself a personal website!

Let's Customize

Forks

To include forks on your personal website just provide -f or --fork argument while building

$ gitfolio build <username> -f

Sorting Repos

To sort repos provide --sort [sortBy] argument while building. Where [sortBy] can be star, created, updated, pushed,full_name. Default: created

$ gitfolio build <username> --sort star

Ordering Repos

To order the sorted repos provide --order [orderBy] argument while building. Where [orderBy] can be asc or desc. Default: asc

$ gitfolio build <username> --sort star --order desc

Customize Themes

Themes are specified using the --theme [theme-name] flag when running the build command. The available themes are

  • light
  • dark

TODO: Add more themes

For example, the following command will build the website with the dark theme

$ gitfolio build <username> --theme dark

Customize background image

To customize the background image just provide --background [url] argument while building

$ gitfolio build <username> --background https://images.unsplash.com/photo-1557277770-baf0ca74f908?w=1634

You could also add in your custom CSS inside index.css to give it a more personal feel.

Add Social Media links on your profile

Twitter, LinkedIn, Medium & Dribbble links to your profile while building

gitfolio build <username> --twitter <twitter_username> --linkedin <linkedin_username> --medium <medium_username> --dribbble <dribbble_username>

Let's Publish

Head over to GitHub and create a new repository named username.github.io, where username is your username. Push the files inside/dist folder to repo you just created.

Go To username.github.io your site should be up!!

Updating

To update your info, simply run

$ gitfolio update

or use the Update options in gitfolio's UI

This will update your info and your repository info.

To Update background or theme you need to run build command again.

Add a Blog

To add your first blog use the UI.

$ gitfolio ui

This will open up a UI page and you can click on New Blog to create a new blog. Once you are done writing your blog you can hit the Create Blog.

This will create a blog inside ./dist/blog folder.

Look for success or error in your terminal.

This also adds content to blog.json file. This file helps in showcasing your blogs on your personal website as cards. You could customize the JSON object that corresponds your current blog.

Blog Demo? here

Blog's default JSON Format

{
  "url_title": "my-first-blog", // the title you provide while creating a new blog, this appears in url
  "title": "Lorem ipsum dolor sit amet", // main title of blog
  "sub_title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", // sub-title of blog
  "top_image": "https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450", // main image of blog
  "visible": true // don't worry about this
}

Follow me on twitter for more updates @imfunnieee

License

GitHub