Skip to content

DopamineDriven/asross-portfolio

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

670 Commits
.vscode
.vscode
 
 
_about
_about
 
 
_blog
_blog
 
 
_posts
_posts
 
 
_purgatory
_purgatory
 
 
components
components
 
 
lib
lib
 
 
pages
pages
 
 
patches
patches
 
 
public
public
 
 
scripts
scripts
 
 
styles
styles
 
 
types
types
 
 
.gitignore
.gitignore
 
 
.gitignore copy
.gitignore copy
 
 
.prettierignore
.prettierignore
 
 
.prettierrc
.prettierrc
 
 
.stylelintignore
.stylelintignore
 
 
.stylelintrc.json
.stylelintrc.json
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
global.d.ts
global.d.ts
 
 
next-env.d.ts
next-env.d.ts
 
 
next.config.js
next.config.js
 
 
package.json
package.json
 
 
postcss.config.js
postcss.config.js
 
 
tailwind.config.js
tailwind.config.js
 
 
tsconfig.json
tsconfig.json
 
 
yarn.lock
yarn.lock
 
 

Repository files navigation

asross-portfolio

troubleshooting

Check this

Detect Outdated Browser (IE11) via CDN injection

Next Framer Page Transitions

Sourcemaps - WithSentry

Sitemaps

crawlers

COnfigured prettier pre-commit husky hook

Other Domains Linked to this Repository

Headless CMS

Prettier Locally Targeted

yarn add -D prettier --save-exact
yarn add -D pretty-quick

# Ignore Artifacts
node_modules
.next
.vercel
.vscode
yarn-error.log
yarn.lock
patches
public
.VSCodeCounter
_about
_blog
_posts


{
	"python.pythonPath": "/usr/local/bin/python3",
	"workbench.sideBar.location": "left",
	"open-in-browser.default": "Google Chrome",
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"[javascript]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"files.autoSave": "afterDelay"
}

  • create a .prettierignore file

  • Scripts and Husky in package.json should resemble the following

	"scripts": {
		"dev": "next",
		"build": "next build",
		"start": "next start",
		"analyze": "ANALYZE=true yarn build",
		"postinstall": "npx patch-package",
		"prettier-check": "prettier --config .prettierrc --check .",
		"prettier-write": "prettier --config .prettierrc --write ."
	},
	"husky": {
		"hooks": {
			"pre-commit": "pretty-quick --staged"
		}
	},

Favicon generator

Feather - Simply Beautiful Open Source Icons

React-Spring

TS Operators

import { Arrify, Constrain } from './util';
import { Animatable } from './animated';

export type EasingFunction = (t: number) => number;

export type ExtrapolateType = 'identity' | 'clamp' | 'extend';

export interface InterpolatorFactory {
	<In, Out>(interpolator: InterpolatorFn<In, Out>): typeof interpolator;

	<Out>(config: InterpolatorConfig<Out>): (input: number) => Animatable<Out>;

	<Out>(
		range: readonly number[],
		output: readonly Constrain<Out, Animatable>[],
		extrapolate?: ExtrapolateType
	): (input: number) => Animatable<Out>;

	<In, Out>(...args: InterpolatorArgs<In, Out>): InterpolatorFn<In, Out>;
}

export type InterpolatorArgs<In = any, Out = any> =
	| [InterpolatorFn<Arrify<In>, Out>]
	| [InterpolatorConfig<Out>]
	| [
			readonly number[],
			readonly Constrain<Out, Animatable>[],
			(ExtrapolateType | undefined)?
	  ];

export type InterpolatorFn<In, Out> = (...inputs: Arrify<In>) => Out;

export type InterpolatorConfig<Out = Animatable> = {
	/**
	 * What happens when the spring goes below its target value.
	 *
	 *  - `extend` continues the interpolation past the target value
	 *  - `clamp` limits the interpolation at the max value
	 *  - `identity` sets the value to the interpolation input as soon as it hits the boundary
	 *
	 * @default 'extend'
	 */
	extrapolateLeft?: ExtrapolateType;

	/**
	 * What happens when the spring exceeds its target value.
	 *
	 *  - `extend` continues the interpolation past the target value
	 *  - `clamp` limits the interpolation at the max value
	 *  - `identity` sets the value to the interpolation input as soon as it hits the boundary
	 *
	 * @default 'extend'
	 */
	extrapolateRight?: ExtrapolateType;

	/**
	 * What happens when the spring exceeds its target value.
	 * Shortcut to set `extrapolateLeft` and `extrapolateRight`.
	 *
	 *  - `extend` continues the interpolation past the target value
	 *  - `clamp` limits the interpolation at the max value
	 *  - `identity` sets the value to the interpolation input as soon as it hits the boundary
	 *
	 * @default 'extend'
	 */
	extrapolate?: ExtrapolateType;

	/**
	 * Input ranges mapping the interpolation to the output values.
	 *
	 * @example
	 *
	 *   range: [0, 0.5, 1], output: ['yellow', 'orange', 'red']
	 *
	 * @default [0,1]
	 */
	range?: readonly number[];

	/**
	 * Output values from the interpolation function. Should match the length of the `range` array.
	 */
	output: readonly Constrain<Out, Animatable>[];

	/**
	 * Transformation to apply to the value before interpolation.
	 */
	map?: (value: number) => number;

	/**
	 * Custom easing to apply in interpolator.
	 */
	easing?: EasingFunction;
};
typeof and instanceof: type query used for refinement
keyof: get keys of an object
O[K]: property lookup
[K in O]: mapped types
+ or - or readonly or ?: addition and subtraction and readonly and optional modifiers
x ? Y : Z: Conditional types for generic types, type aliases, function parameter types
!: Nonnull assertion for nullable types
=: Generic type parameter default for generic types
as: type assertion
is: type guard for function return types
Conditional Types are a difficult topic to get around so here are some extra resources:

fully walked through explanation https://artsy.github.io/blog/2018/11/21/conditional-types-in-typescript/
Bailing out and other advanced topics https://github.com/sw-yx/ts-spec/blob/master/conditional-types.md
Basarat's video https://www.youtube.com/watch?v=SbVgPQDealg&list=PLYvdvJlnTOjF6aJsWWAt7kZRJvzw-en8B&index=2&t=0s

Sitemap generation

const withMDX = require('@next/mdx')({
	extension: /\.mdx?$/,
	options: {
		remarkPlugins: [require('remark-slug')]
	}
});
const withSvgr = require('next-svgr');
const withPlugins = require('next-compose-plugins');
module.exports = withPlugins(
	withMDX({
		webpack: (config, { isServer }) => {
			if (isServer) {
				require('./scripts/generate-sitemap');
			}

			return config;
		}
	})
);

React-TS Hooks

Framer Motion Page Animations on load

Tailwind Dark Mode

Configure method to reveal user ISP

Google Analytics Added

GA Events + TS

Social Extended Types Mapping

React Animations

Dark Mode React App Aug 5, 2020

Smooth Scrolling React Library (alternative to global html css call scroll-behavior: smooth)

Mobile-Detect and React-Sizes

Conditionally render by device type

TS interfaces vs Types

TS Classes vs interfaces

nextjs portfolio

To-do

  • About section beneath portfolio items
    • Sub routed About
  • Sub-routing for blog
  • everything is blue toggle for global theme shift
  • style it out
    • screen size dependent refactoring for xs:sm:md:lg:xl/portrait vs landscape etc etc
  • ship!

odd/even offset columns

  • 108px in height
  • 32px gap-x (2.2284 vw)
  • 1232px frame
  • 328px mobile frame
  • one card per row (mobile)
  • 40px gap-y
  • coverphoto height 37.5em

VW conversions for cards (md or larger viewport)

  • 2.2284vw gap-x
  • 600 px in a 1436px viewport -> 41.7827vw
  • px -> 7.1031vw

About section

  • aboutOffsetPR - 7.7994vw
  • aboutGapX - 8.9136vw
  • HFA column-right pt - 6.6852vw
  • description text (48pt) - 3.3426vw
  • header text (200pt) - 13.9276vw;
  • image
    • 300x300px width - 20.8914vw
    • 400x536px width - 27.8552vw
    • 600x600px width - 41.7827vw

Z-index tailwind

Window Size

Sitemaps in nextjs

Tips of nextjsv9 with typescript

Tailwind Templates

Notes

  • Drop me a line
  • Opens email so they can email right away
  • Call out what specialize in
  • Helvetica New
  • Goudy Bookletter 1911
  • 1232 grid on a 1440
  • 77em (1232px → grid width, xl viewport)
  • 600x600 squares
  • will be a 6.5 em offset between col 1 and col 2 for projects
<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="32.5" cy="32.5" r="31.5" stroke="#151515" stroke-width="2"/>
<path d="M30.116 39H32.816L27.956 26.238H25.076L20.18 39H22.808L23.87 36.084H29.054L30.116 39ZM26.462 28.992L28.226 33.816H24.698L26.462 28.992ZM40.7482 39H43.5202L40.7842 33.78C42.4582 33.294 43.5022 31.944 43.5022 30.162C43.5022 27.948 41.9182 26.238 39.4342 26.238H34.4482V39H36.9502V34.086H38.2462L40.7482 39ZM36.9502 31.944V28.398H38.9662C40.2262 28.398 40.9642 29.1 40.9642 30.18C40.9642 31.224 40.2262 31.944 38.9662 31.944H36.9502Z" fill="#151515"/>
</svg>

Typography themes for utils

yarn add typography-theme-sutro typeface-merriweather typeface-open-sans

Mailchimp for contact page

lquip 86'd over security vulnerability

Markdown

SCSS + Tailwind

Add several components to bitsrc.io

Patching Node_Modules

npx patch-package @fortawesome/fontawesome-common-types
  • then, add the following to scripts in package.json
"postinstall": "npx patch-package"

import { useState, useCallback, useEffect } from 'react';

const useMediaQuery = (width) => {
  const [targetReached, setTargetReached] = useState(false);

  const updateTarget = useCallback((e) => {
    if (e.matches) {
      setTargetReached(true);
    } else {
      setTargetReached(false);
    }
  }, []);

  useEffect(() => {
    const media = window.matchMedia(`(max-width: ${width}px)`);
    media.addListener(updateTarget);

    // Check on mount (callback is not called until a change occurs)
    if (media.matches) {
      setTargetReached(true);
    }

    return () => media.removeListener(updateTarget);
  }, []);

  return targetReached;
};


const Navbar = () => {
   const isBreakpoint = useMediaQuery(768)
   return (
    <div>
      { isBreakpoint ? (
        <div>
          <HamburgerMenu />
        </div>
      ) : (
        <div>
           <FullMenu />
        </div>
   )
)}

export default Navbar;

About

nextjs portfolio

andrewross.dev

Resources

Readme

License

MIT license
Activity

Stars

2 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages