https://github.com/dopaminedriven/next-portfolio
developer/engineer facing portfolio
https://github.com/dopaminedriven/next-portfolio
customization font-awesome icons nextjs patching postcss postinstall react static-site-generator tailwindcss typescript vercel
Last synced: 2 months ago
JSON representation
developer/engineer facing portfolio
- Host: GitHub
- URL: https://github.com/dopaminedriven/next-portfolio
- Owner: DopamineDriven
- License: mit
- Created: 2020-07-29T06:34:03.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T12:44:33.000Z (almost 3 years ago)
- Last Synced: 2025-03-15T07:15:27.490Z (7 months ago)
- Topics: customization, font-awesome, icons, nextjs, patching, postcss, postinstall, react, static-site-generator, tailwindcss, typescript, vercel
- Language: TypeScript
- Homepage: https://next-portfolio-asross.vercel.app/
- Size: 1.91 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# next-jamstack-portfolio
- statically generated next-portfolio ft projects, blog posts, custom font-awesome icons generated via deconstructing declaration files, extending library interfaces, patching, and postinstall scripting.
```xml
```
## Typography themes for utils
- https://kyleamathews.github.io/typography.js/
- - https://tailwindcss.com/docs/typography-plugin
- Jose Felix
- https://dev.to/joserfelix/using-react-spring-to-animate-svg-icons-dark-mode-toggle-2c86
- https://dev.to/joserfelix/kick-start-your-newsletter-mailchimp-custom-form-with-react-og5
- https://dev.to/joserfelix/dynamic-theme-switching-in-ant-design-how-to-change-between-light-and-dark-themes-5b8p
- https://dev.to/joserfelix/how-to-make-text-match-any-background-color-1n0f
```git
yarn add typography-theme-sutro typeface-merriweather typeface-open-sans
```
## Mailchimp for contact page
- https://dev.to/joserfelix/kick-start-your-newsletter-mailchimp-custom-form-with-react-og5
## lquip 86'd over security vulnerability
- removed lquip-loader package as it flagged a high security vulnerability alert (regex)
- https://github.com/cyrilwanner/next-optimized-images#optimization-packages
## Markdown
- https://dev.to/joserfelix/how-to-make-a-static-blog-with-next-js-2bd6**
- https://dev.to/jfelx/how-to-make-a-static-blog-with-next-js-2bd6
- https://github.com/vriad/devii
- https://www.netlify.com/blog/2020/05/04/building-a-markdown-blog-with-next-9.4-and-netlify/
## SCSS + Tailwind
- https://nextjs.org/blog/next-9-3#built-in-sass-css-module-support-for-component-level-styles
- https://codeburst.io/next-js-boilerplate-with-tailwindcss-and-sass-ecc1df90f501
## Add several components to bitsrc.io
- https://blog.bitsrc.io/react-typescript-cheetsheet-2b6fa2cecfe2
## Patching Node_Modules
- https://stackoverflow.com/questions/13300137/how-to-edit-a-node-module-installed-via-npm
```git
npx patch-package @fortawesome/fontawesome-common-types
```
- then, add the following to scripts in package.json
```
"postinstall": "npx patch-package"
```
**_create a master svgLibrary function wrapping all svg declarations_**
- Pass Props
## Extending an abstracted functional component to an array of objects via props extension
- https://stackoverflow.com/questions/25469244/how-can-i-define-an-interface-for-an-array-of-objects-with-typescript/25470775
## SVG viewBox Exact Order of Translation and Scaling
- https://stackoverflow.com/questions/53582351/svg-viewbox-exact-order-of-translation-and-scaling
### Transformations
- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Transformations
## SVGs in tailwindcss
- https://medium.com/swlh/reusable-svg-icon-using-figma-react-typescript-and-tailwind-css-51b8ceb86ac2
- https://tailwindcss.com/course/working-with-svg-icons
## Ico Moon custom icons
- https://icomoon.io/app/#/select
- https://www.npmjs.com/package/react-icomoon
- ssg
- svg logo libraries
- https://www.vectorlogo.zone/index.html?q=gray%20matter
- http://www.lib4dev.in/info/unicodeveloper/awesome-nextjs/75291705
- https://favicon.io/favicon-converter/
- https://picsvg.com/
- https://www.favicon-generator.org/
- add custom svg icons Yes, as long as you create a definition file in the same format as the existing icon definitions, you can import and use them in the same way as the official icons. You may want to use a custom prefix for your own icons to keep them organised, though.
- https://www.digitalocean.com/community/tutorials/how-to-use-font-awesome-5-with-react#step-6-%E2%80%94-using-react-fontawesome-and-icons-outside-of-react
- https://github.com/remarkjs/remark/blob/HEAD/doc/plugins.md#list-of-plugins
- next plugins
- https://github.com/vercel/next-plugins
```js
module.exports = {
purge: ['./components/**/*.tsx', './pages/**/*.tsx'],
theme: {
extend: {
keyframes: {
wiggle: {
'0%, 100%': { transform: 'rotate(-3deg)' },
'50%': { transform: 'rotate(3deg)' }
}
},
animation: {
wiggle: 'wiggle 1s ease-in-out infinite'
},
fontFamily: {
header: ['Playfair Display', 'serif'],
body: ['Barlow Condensed', 'sans-serif'],
display: ['Barlow Condensed', 'sans-serif'],
polished: ['brandon-grotesque', 'sans-serif'],
subpolished: ['Montserrat', 'sans-serif']
},
colors: {
'accent-1': '#FAFAFA',
'accent-2': '#EAEAEA',
'accent-7': '#333',
black: '#000000',
white: '#ffffff',
success: '#0070f3',
cyan: '#79FFE1',
blizzardBlue: '#b3ddf2',
chicagoRed: '#ff0000',
cimaRed: '#B8242C',
wcdPink: '#eb57a3',
tinyHouseWhite: '#f0f1f2',
customGray: '#D0D0D0',
iconHover: '#9D9D9D',
iconHoverTwo: '#AEAEAE',
tailwindBlue: '#2298BD',
tailwindGreen: '#0ED7B5'
// tailwindBackground:
// 'linear-gradient(109.08deg, #2298BD 6.16%, #0ED7B5 91.66%)'
},
height: {
whole: '100vh',
nineTenths: '90vh',
fourFifths: '80vh',
threeFourths: '75vh',
twoThirds: '66.67vh',
threeFifths: '60vh',
half: '50vh',
nineTwentieths: '45vh',
twoFifths: '40vh',
sevenTwentieths: '35vh',
oneThird: '33.33vh',
threeTenths: '30vh',
oneFourth: '25vh',
oneFifth: '20vh',
oneSixth: '16.67vh'
},
spacing: {
7: '1.75rem',
14: '3.5rem',
18: '4.5rem',
28: '7rem',
44: '11rem',
100: '25rem',
150: '37.5rem',
200: '50rem',
250: '62.5rem',
300: '75rem',
309: '77.25rem'
},
letterSpacing: {
tighter: '-.04em'
},
lineHeight: {
tight: 1.2
},
fontSize: {
smxmd: '0.9375rem',
'1xl': '1.0rem',
'3xl': '2.0rem',
'5xl': '2.5rem',
'6xl': '2.75rem',
'7xl': '4.5rem',
'8xl': '6.25rem'
},
boxShadow: {
small: '0 5px 10px rgba(0, 0, 0, 0.12)',
medium: '0 8px 30px rgba(0, 0, 0, 0.12)'
}
}
}
// variants: {
// backgroundImage: ['responsive, hover, focus'], // this is for the "bg-none" utility
// linearGradients: ['responsive, hover, focus'],
// radialGradients: ['responsive, hover, focus'],
// conicGradients: ['responsive, hover, focus'],
// repeatingLinearGradients: ['responsive, hover, focus'],
// repeatingRadialGradients: ['responsive, hover, focus'],
// repeatingConicGradients: ['responsive, hover, focus']
// },
// plugins: [plugin(function(require('tailwindcss-gradients')))]
};
```
```ts
// const plugin = require('tailwindcss/plugin');
// module.exports = {
// plugins: [
// plugin(function({ addUtilities }) {
// const newUtilities =
// })
// ]
// } https://github.com/benface/tailwindcss-gradients
```
```ts
export type IconPrefix = "fas" | "fab" | "fac" | "far" | "fal" | "fad";
export type IconPathData = string | string[]
export interface IconLookup {
prefix: IconPrefix;
// IconName is defined in the code that will be generated at build time and bundled with this file.
iconName: IconName;
}
export interface IconDefinition extends IconLookup {
icon: [
number, // width
number, // height
string[], // ligatures
string, // unicode
IconPathData // svgPathData
];
}
export interface IconPack {
[key: string]: IconDefinition;
}
export type IconName = 'graphql-icon' | 'heroku-icon' | 'next-icon' | 'vercel-icon' | 'typescript-icon' | '500px' |
```
```xml
```
'0': '0ms',
'200': '200ms',
'300': '300ms',
'500': '500ms',
'700': '700ms',
'1000': '1000ms',