64 |
66 |
2 |
3 | 
4 |
5 | # Github Profilinator
6 |
7 | Generate creative GitHub profile readmes in few click!
8 |
9 | 
10 |
11 | 
12 |
13 | 
14 |
15 | 
16 |
17 | 
18 |
19 |
20 |
21 | 22 | View Generator · View Generated Profile · Report Bug · Request Feature 23 | 24 | _Loved the project? Show your love to the developer by starring this repo._ 25 | 26 |
27 | 28 |
29 |
30 |
31 |
32 | ---
33 |
34 | This project is aimed to simplify your GitHub profile generation process by providing creative components from all over the web which can be added in a few click. In the end, with the click of a button, markdown is auto-generated which you can directly add to your readmes.
35 |
36 | ---
37 |
38 | ## 🧐 Feature list
39 |
40 | - [x] Image and text fields have multiple options like alignment, sizes, fit to screen
41 | - [x] Skill set filed
42 | - [x] Social badges field
43 | - [x] GitHub activity and language stats
44 | - [x] Dynamic blog posts
45 | - [x] Visitor counter
46 | - [x] Init with demo template
47 | - [x] Multi column support
48 | - [x] Customizable blocks and layouts
49 | - [x] Listening to from Spotify
50 | - [x] Multi template
51 | - [ ] Last tweet from Twitter
52 | - [ ] Last 3 uploads from Instagram
53 |
54 | ## 🚀 Getting started
55 |
56 | This project is already deployed on https://profilinator.rishav.dev
57 |
58 | Instructions for local deployment are given below:
59 |
60 | 1. Clone the repository
61 |
62 | ```
63 | git clone git@github.com:rishavanand/github-profilinator.git
64 | ```
65 |
66 | 2. Enter the project directory
67 |
68 | ```
69 | cd github-profilinator
70 | ```
71 |
72 | 3. Install dependencies
73 |
74 | ```
75 | npm i
76 | ```
77 |
78 | 4. Start local dev server
79 |
80 | ```
81 | npm start
82 | ```
83 |
84 | 5. View local deployment at [http://127.0.0.1:8000](http://127.0.0.1:8000)
85 |
86 | ## 💫 Built on the shoulders of giants
87 |
88 | - [amazing github-readme-stats](https://github.com/anuraghazra/github-readme-stats) by Anurag Hazra for creating detailed statistics
89 | - [github-profile-views-counter](https://github.com/antonkomarev/github-profile-views-counter) by Anton Komarev for simplifying visitor counter
90 | - [blog post workflow](https://github.com/gautamkrishnar/blog-post-workflow) by Gautam Krishna R which is a Genius use of Github Actions.
91 | - [spotify-github-profile](https://github.com/kittinan/spotify-github-profile) by Kittinan which generated Spotify's currently listening album cover image.
92 |
93 | NOTE : All the logos/icons belong to their respective owners , we don't own them.
94 |
95 | ## :heart: Supporting the project
96 |
97 | A simple star to this project repo is enough to keep me motivated on this project for days. If you find your self very much excited with this project let me know with a tweet.
98 |
99 | Thanks!
100 |
101 | Contributions are welcomed!
102 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 |
2 | # Created by https://www.gitignore.io/api/node,react,linux,macos,windows
3 | # Edit at https://www.gitignore.io/?templates=node,react,linux,macos,windows
4 |
5 | ### Linux ###
6 | *~
7 |
8 | # temporary files which can be created if a process still has a handle open of a deleted file
9 | .fuse_hidden*
10 |
11 | # KDE directory preferences
12 | .directory
13 |
14 | # Linux trash folder which might appear on any partition or disk
15 | .Trash-*
16 |
17 | # .nfs files are created when an open file is removed but is still being accessed
18 | .nfs*
19 |
20 | ### macOS ###
21 | # General
22 | .DS_Store
23 | .AppleDouble
24 | .LSOverride
25 |
26 | # Icon must end with two \r
27 | Icon
28 |
29 | # Thumbnails
30 | ._*
31 |
32 | # Files that might appear in the root of a volume
33 | .DocumentRevisions-V100
34 | .fseventsd
35 | .Spotlight-V100
36 | .TemporaryItems
37 | .Trashes
38 | .VolumeIcon.icns
39 | .com.apple.timemachine.donotpresent
40 |
41 | # Directories potentially created on remote AFP share
42 | .AppleDB
43 | .AppleDesktop
44 | Network Trash Folder
45 | Temporary Items
46 | .apdisk
47 |
48 | ### Node ###
49 | # Logs
50 | logs
51 | *.log
52 | npm-debug.log*
53 | yarn-debug.log*
54 | yarn-error.log*
55 | lerna-debug.log*
56 |
57 | # Diagnostic reports (https://nodejs.org/api/report.html)
58 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
59 |
60 | # Runtime data
61 | pids
62 | *.pid
63 | *.seed
64 | *.pid.lock
65 |
66 | # Directory for instrumented libs generated by jscoverage/JSCover
67 | lib-cov
68 |
69 | # Coverage directory used by tools like istanbul
70 | coverage
71 | *.lcov
72 |
73 | # nyc test coverage
74 | .nyc_output
75 |
76 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
77 | .grunt
78 |
79 | # Bower dependency directory (https://bower.io/)
80 | bower_components
81 |
82 | # node-waf configuration
83 | .lock-wscript
84 |
85 | # Compiled binary addons (https://nodejs.org/api/addons.html)
86 | build/Release
87 |
88 | # Dependency directories
89 | node_modules/
90 | jspm_packages/
91 |
92 | # TypeScript v1 declaration files
93 | typings/
94 |
95 | # TypeScript cache
96 | *.tsbuildinfo
97 |
98 | # Optional npm cache directory
99 | .npm
100 |
101 | # Optional eslint cache
102 | .eslintcache
103 |
104 | # Optional REPL history
105 | .node_repl_history
106 |
107 | # Output of 'npm pack'
108 | *.tgz
109 |
110 | # Yarn Integrity file
111 | .yarn-integrity
112 |
113 | # dotenv environment variables file
114 | .env
115 | .env.test
116 |
117 | # parcel-bundler cache (https://parceljs.org/)
118 | .cache
119 |
120 | # next.js build output
121 | .next
122 |
123 | # nuxt.js build output
124 | .nuxt
125 |
126 | # rollup.js default build output
127 | dist/
128 |
129 | # Uncomment the public line if your project uses Gatsby
130 | # https://nextjs.org/blog/next-9-1#public-directory-support
131 | # https://create-react-app.dev/docs/using-the-public-folder/#docsNav
132 | public
133 |
134 | # Storybook build outputs
135 | .out
136 | .storybook-out
137 |
138 | # vuepress build output
139 | .vuepress/dist
140 |
141 | # Serverless directories
142 | .serverless/
143 |
144 | # FuseBox cache
145 | .fusebox/
146 |
147 | # DynamoDB Local files
148 | .dynamodb/
149 |
150 | # Temporary folders
151 | tmp/
152 | temp/
153 |
154 | ### react ###
155 | .DS_*
156 | **/*.backup.*
157 | **/*.back.*
158 |
159 | node_modules
160 |
161 | *.sublime*
162 |
163 | psd
164 | thumb
165 | sketch
166 |
167 | ### Windows ###
168 | # Windows thumbnail cache files
169 | Thumbs.db
170 | Thumbs.db:encryptable
171 | ehthumbs.db
172 | ehthumbs_vista.db
173 |
174 | # Dump file
175 | *.stackdump
176 |
177 | # Folder config file
178 | [Dd]esktop.ini
179 |
180 | # Recycle Bin used on file shares
181 | $RECYCLE.BIN/
182 |
183 | # Windows Installer files
184 | *.cab
185 | *.msi
186 | *.msix
187 | *.msm
188 | *.msp
189 |
190 | # Windows shortcuts
191 | *.lnk
192 |
193 | # End of https://www.gitignore.io/api/node,react,linux,macos,windows
--------------------------------------------------------------------------------
/static/skills-assets/backbonejs-original-wordmark.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/Sidebar.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useContext } from 'react';
2 | import { Form, Input, Layout, Menu, Button, Divider, Modal, Tooltip } from 'antd';
3 | import { PlusOutlined } from '@ant-design/icons';
4 | import styles from '../styles/sidebar.module.scss';
5 | import { globalContext, GlobalContext } from '../context/GlobalContextProvider';
6 | import { SectionProps } from './Section';
7 |
8 | const { TextArea } = Input;
9 | const { Sider } = Layout;
10 |
11 | export const Sidebar = () => {
12 | const [addSectionVisible, setAddSectionVisibility] = useState(false);
13 | const [form] = Form.useForm();
14 | const context = useContext(globalContext) as GlobalContext;
15 |
16 | const addSection = (formValues: { name: string }) => {
17 | context.addSection({
18 | ...formValues,
19 | fields: [],
20 | });
21 | setAddSectionVisibility(false);
22 | };
23 |
24 | const generateMenu = (activeSectionIndex: number, sections: SectionProps[]) => {
25 | return (
26 |
36 | );
37 | };
38 |
39 | const generateAddSectionForm = () => {
40 | return (
41 |
46 | );
47 | };
48 |
49 | const generateAddSectionModal = () => {
50 | return (
51 |
4 |
5 | # Github Profilinator
6 |
7 | Generate creative GitHub profile readmes in few click!
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 |
21 | 22 | View Generator · View Generated Profile · Report Bug · Request Feature 23 | 24 | _Loved the project? Show your love to the developer by starring this repo._ 25 | 26 |
27 | 28 |
29 |
30 |
75 |
78 | {generateMenu(context.activeSectionIndex, context.sections)}
79 | GITHUB
76 |PROFILINATOR
77 |
81 | Add a Section}>
82 |
92 |
93 |
94 | {generateAddSectionModal()}
95 |
96 |
101 | More tools:
97 | 98 | - RewardMatrix 99 | 100 |\n`;
33 | else if ((alignment === STATS_ALIGNMENT.CENTRE || alignment === STATS_ALIGNMENT.RIGHT) && type === 'end')
34 | return `\n
`;
35 | else return '';
36 | };
37 |
38 | export const generateImageTag = (data: FieldData, options: FiledOptions) => {
39 | const statsUrl = `https://komarev.com/ghpvc/?username=${data.username}&&style=flat-square`;
40 | if (
41 | options.alignment &&
42 | (options.alignment === STATS_ALIGNMENT.CENTRE || options.alignment === STATS_ALIGNMENT.RIGHT)
43 | )
44 | return `