├── .editorconfig ├── .env.example ├── .eslintrc.js ├── .github └── dependabot.yml ├── .gitignore ├── .netlify └── state.json ├── .prettierrc ├── README.md ├── app.html ├── assets ├── css │ ├── styles.css │ └── tailwind.css └── icons │ ├── dark.svg │ ├── light.svg │ └── system.svg ├── components ├── Categories │ └── CategoryList.vue ├── Contact │ └── ContactForm.vue ├── DarkModeSwitcher.vue ├── General │ ├── Dropdown.vue │ ├── Footer.vue │ ├── PageHeader.vue │ └── navbar │ │ ├── DesktopNavLinks.vue │ │ ├── MobileNavLinks.vue │ │ └── Navbar.vue ├── Letters │ └── LetterList.vue ├── Links │ ├── DesktopNavLink.vue │ └── FooterLink.vue ├── Posts │ └── PostList.vue ├── Projects │ ├── ProjectLinks.vue │ ├── ProjectList.vue │ └── ProjectTechnologies.vue ├── Technologies │ └── TechnologyList.vue ├── Thoughts │ └── ThoughtList.vue └── utils │ └── Date.vue ├── jsconfig.json ├── layouts └── default.vue ├── modules └── sitemapRouteGenerator.js ├── netlify.toml ├── nuxt.config.js ├── package.json ├── pages ├── README.md ├── categories │ ├── _slug.vue │ └── index.vue ├── contact │ └── index.vue ├── index.vue ├── letters │ ├── _slug.vue │ └── index.vue ├── posts │ ├── _slug.vue │ └── index.vue ├── privacy-policy.vue ├── projects │ ├── _slug.vue │ └── index.vue ├── resume │ └── index.vue ├── technologies │ ├── _slug.vue │ └── index.vue └── thoughts │ └── index.vue ├── plugins ├── README.md └── preview.client.js ├── static ├── Christopher-Wray-Resume.pdf ├── ads.txt ├── chris-wray-family.jpg ├── favicon.svg ├── icon.png ├── web-programming-gray.svg └── web-programming.svg ├── store └── README.md ├── tailwind.config.js └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | API_ROUTE='http://localhost:1337' 2 | ANALYTICS_ID='' -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'], 7 | parserOptions: { 8 | parser: 'babel-eslint' 9 | }, 10 | rules: { 11 | quotes: ['single', 'double'], 12 | 'no-multi-spaces': ['error'], 13 | 'no-unused-vars': 'off', 14 | 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 15 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: npm 4 | directory: '/' 5 | schedule: 6 | interval: monthly 7 | time: '00:00' 8 | open-pull-requests-limit: 99 9 | reviewers: 10 | - cwray-tech 11 | assignees: 12 | - cwray-tech 13 | labels: 14 | - dependencies 15 | commit-message: 16 | prefix: fix 17 | prefix-development: chore 18 | include: scope 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | package-lock.json 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | 86 | # macOS 87 | .DS_Store 88 | 89 | # Vim swap files 90 | *.swp 91 | .vscode 92 | sw.* 93 | -------------------------------------------------------------------------------- /.netlify/state.json: -------------------------------------------------------------------------------- 1 | { 2 | "siteId": "2f35842b-9fc6-49b9-a49e-9d785d0525f3" 3 | } -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "tabWidth": 2, 4 | "singleQuote": true, 5 | "arrowParens": "avoid", 6 | "semi": false, 7 | "trailingComma": "none", 8 | "bracketSpacing": true 9 | } 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # My Personal Portfolio Frontend On NuxtJS 2 | 3 | This is the frontend code to [my personal portfolio](https://chriswray.dev). 4 | 5 | ![Chris-Wray-Full-Stack-Engineer-Dreamer-Father-Husband-screenshot](https://user-images.githubusercontent.com/53663762/170277473-c6244a3f-0e4c-4057-af9e-cb1519fa4b92.png) 6 | 7 | ## Build Setup 8 | 9 | ```bash 10 | # install dependencies 11 | $ yarn install 12 | 13 | # serve with hot reload at localhost:3000 14 | $ yarn dev 15 | 16 | # build for production and launch server 17 | $ yarn build 18 | $ yarn start 19 | 20 | # generate static project 21 | $ yarn generate 22 | ``` 23 | 24 | For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org). 25 | -------------------------------------------------------------------------------- /app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{ HEAD }} 6 | 7 | 8 | 15 | 16 | 17 | 18 | {{ APP }} 19 | 20 | 21 | -------------------------------------------------------------------------------- /assets/css/styles.css: -------------------------------------------------------------------------------- 1 | /*General Scrollbar Styling */ 2 | ::-webkit-scrollbar { 3 | width: 15px; 4 | height: 10px; 5 | } 6 | 7 | ::-webkit-scrollbar-track { 8 | background-color: #f9fafb; 9 | -webkit-border-radius: 20px; 10 | border-radius: 20px; 11 | } 12 | 13 | ::-webkit-scrollbar-thumb { 14 | -webkit-border-radius: 20px; 15 | border-radius: 20px; 16 | background: #5850ec; 17 | } 18 | -------------------------------------------------------------------------------- /assets/css/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /assets/icons/dark.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /assets/icons/light.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /assets/icons/system.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /components/Categories/CategoryList.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 33 | -------------------------------------------------------------------------------- /components/Contact/ContactForm.vue: -------------------------------------------------------------------------------- 1 | 144 | 184 | 197 | -------------------------------------------------------------------------------- /components/DarkModeSwitcher.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 44 | 45 | 55 | -------------------------------------------------------------------------------- /components/General/Dropdown.vue: -------------------------------------------------------------------------------- 1 | 28 | 42 | 51 | -------------------------------------------------------------------------------- /components/General/Footer.vue: -------------------------------------------------------------------------------- 1 | 283 | -------------------------------------------------------------------------------- /components/General/PageHeader.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 36 | -------------------------------------------------------------------------------- /components/General/navbar/DesktopNavLinks.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /components/General/navbar/MobileNavLinks.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | -------------------------------------------------------------------------------- /components/General/navbar/Navbar.vue: -------------------------------------------------------------------------------- 1 | 89 | 90 | 109 | 118 | -------------------------------------------------------------------------------- /components/Letters/LetterList.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 44 | -------------------------------------------------------------------------------- /components/Links/DesktopNavLink.vue: -------------------------------------------------------------------------------- 1 | 10 | 15 | 20 | -------------------------------------------------------------------------------- /components/Links/FooterLink.vue: -------------------------------------------------------------------------------- 1 | 12 | 17 | 22 | -------------------------------------------------------------------------------- /components/Posts/PostList.vue: -------------------------------------------------------------------------------- 1 | 42 | 43 | 48 | -------------------------------------------------------------------------------- /components/Projects/ProjectLinks.vue: -------------------------------------------------------------------------------- 1 | 46 | 51 | -------------------------------------------------------------------------------- /components/Projects/ProjectList.vue: -------------------------------------------------------------------------------- 1 | 110 | 111 | 116 | -------------------------------------------------------------------------------- /components/Projects/ProjectTechnologies.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 19 | -------------------------------------------------------------------------------- /components/Technologies/TechnologyList.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 33 | -------------------------------------------------------------------------------- /components/Thoughts/ThoughtList.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 22 | -------------------------------------------------------------------------------- /components/utils/Date.vue: -------------------------------------------------------------------------------- 1 | 6 | 11 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "paths": { 5 | "~/*": ["./*"], 6 | "@/*": ["./*"], 7 | "~~/*": ["./*"], 8 | "@@/*": ["./*"] 9 | } 10 | }, 11 | "exclude": ["node_modules", ".nuxt", "dist"] 12 | } 13 | -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /modules/sitemapRouteGenerator.js: -------------------------------------------------------------------------------- 1 | export default function() { 2 | this.nuxt.hook('generate:done', context => { 3 | const routesToExclude = [] // Add any route you don't want in your sitemap. Potentially get this from an .env file. 4 | const allRoutes = Array.from(context.generatedRoutes) 5 | const routes = allRoutes.filter(route => !routesToExclude.includes(route)) 6 | 7 | this.nuxt.options.sitemap.routes = [...routes] 8 | }) 9 | } 10 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "dist" -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | import colorModeModule from '@nuxtjs/color-mode' 2 | export default { 3 | // Target (https://go.nuxtjs.dev/config-target) 4 | target: 'static', 5 | env: { 6 | contactFormFunctionRoute: process.env.CONTACT_FORM_FUNCTION_API_ROUTE 7 | }, 8 | // Global page headers (https://go.nuxtjs.dev/config-head) 9 | head: { 10 | title: 'Chris Wray | Full Stack Engineer | Dreamer, Father & Husband', 11 | htmlAttrs: { 12 | lang: 'en' 13 | }, 14 | meta: [ 15 | { charset: 'utf-8' }, 16 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 17 | { 18 | hid: 'og:title', 19 | property: 'og:title', 20 | content: 'Chris Wray | Full Stack Engineer | Dreamer, Father & Husband' 21 | }, 22 | { hid: 'description', name: 'description', content: 'Get to know Chris.' }, 23 | { hid: 'og:type', property: 'og:type', content: 'website' }, 24 | { 25 | hid: 'og:image', 26 | property: 'og:image', 27 | content: 'https://chriswray.dev/chris-wray-family.jpg' 28 | } 29 | ], 30 | link: [ 31 | { rel: 'icon', type: 'image/x-icon', href: '/favicon.svg' }, 32 | { rel: 'apple-touch-icon', href: '/icon.png' } 33 | ] 34 | }, 35 | // Global CSS (https://go.nuxtjs.dev/config-css) 36 | css: [ 37 | { src: '~/node_modules/highlight.js/styles/base16/solarized-dark', lang: 'css' }, 38 | { src: '@/assets/css/styles.css', lang: 'css' } 39 | ], 40 | 41 | // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins) 42 | plugins: [ 43 | //This is for generating a preview. Add ?preview=true to url to see updated content from api. 44 | 'plugins/preview.client.js' 45 | ], 46 | 47 | // Auto import components (https://go.nuxtjs.dev/config-components) 48 | components: { 49 | dirs: [ 50 | '~/components', 51 | '~/components/Categories', 52 | '~/components/Contact', 53 | '~/components/General', 54 | '~/components/General/navbar', 55 | '~/components/Letters', 56 | '~/components/Links', 57 | '~/components/Posts', 58 | '~/components/Projects', 59 | '~/components/Technologies', 60 | '~/components/Thoughts', 61 | '~/components/utils' 62 | ] 63 | }, 64 | 65 | // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules) 66 | buildModules: [ 67 | // https://go.nuxtjs.dev/tailwindcss 68 | '@nuxtjs/tailwindcss', 69 | '@/modules/sitemapRouteGenerator', 70 | '@nuxtjs/svg', 71 | 72 | colorModeModule 73 | ], 74 | 75 | // Modules (https://go.nuxtjs.dev/config-modules) 76 | modules: [ 77 | // https://go.nuxtjs.dev/axios 78 | '@nuxtjs/axios', 79 | '@nuxtjs/markdownit', 80 | '@nuxtjs/sitemap', 81 | '@nuxtjs/date-fns' 82 | ], 83 | 84 | // Axios module configuration (https://go.nuxtjs.dev/config-axios) 85 | axios: { 86 | baseURL: process.env.API_ROUTE 87 | }, 88 | 89 | // This is for displaying rich text content in the frontend. 90 | markdownit: { 91 | preset: 'default', 92 | linkify: true, 93 | breaks: true, 94 | injected: true, 95 | html: true, 96 | use: ['markdown-it-highlightjs'] 97 | }, 98 | sitemap: { 99 | hostname: 'https://chriswray.dev', 100 | gzip: true, 101 | exclude: ['/letters'] 102 | }, 103 | 104 | colorMode: { 105 | classSuffix: '' 106 | }, 107 | 108 | // Build Configuration (https://go.nuxtjs.dev/config-build) 109 | build: { 110 | extend(config, { isClient }) { 111 | if (isClient) { 112 | config.optimization.splitChunks.maxSize = 200000 113 | } 114 | } 115 | }, 116 | 117 | // TailwindUi Configuration 118 | tailwindcss: { 119 | exposeConfig: true 120 | }, 121 | purgeCSS: { 122 | whitelist: ['dark-mode'] 123 | }, 124 | env: { 125 | googleAnalyticsId: process.env.ANALYTICS_ID 126 | } 127 | } 128 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "chris-wray-website-frontend", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "nuxt", 7 | "build": "nuxt build", 8 | "start": "nuxt start", 9 | "generate": "nuxt generate", 10 | "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .", 11 | "lint": "yarn lint:js" 12 | }, 13 | "dependencies": { 14 | "@nuxtjs/axios": "^5.13.6", 15 | "@nuxtjs/markdownit": "^2.0.0", 16 | "@nuxtjs/proxy": "^2.1.0", 17 | "@nuxtjs/sitemap": "^2.4.0", 18 | "@nuxtjs/svg": "^0.4.0", 19 | "@tailwindcss/aspect-ratio": "^0.4.0", 20 | "@tailwindcss/forms": "^0.5.2", 21 | "@tailwindcss/typography": "^0.5.2", 22 | "@tailwindcss/ui": "0.7.2", 23 | "axios": "^0.27.2", 24 | "core-js": "^3.23.1", 25 | "markdown-it-highlightjs": "^4.0.1", 26 | "nuxt": "^2.15.8", 27 | "qs": "^6.11.0" 28 | }, 29 | "devDependencies": { 30 | "@babel/eslint-parser": "^7.18.2", 31 | "@nuxtjs/color-mode": "^2.1.1", 32 | "@nuxtjs/date-fns": "^1.5.0", 33 | "@nuxtjs/eslint-config": "^10.0.0", 34 | "@nuxtjs/eslint-module": "^3.1.0", 35 | "@nuxtjs/tailwindcss": "^5.1.2", 36 | "autoprefixer": "^10.4.13", 37 | "eslint": "^8.17.0", 38 | "eslint-plugin-nuxt": "^3.2.0", 39 | "postcss": "^8.4.18" 40 | } 41 | } -------------------------------------------------------------------------------- /pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /pages/categories/_slug.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 61 | -------------------------------------------------------------------------------- /pages/categories/index.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 57 | -------------------------------------------------------------------------------- /pages/contact/index.vue: -------------------------------------------------------------------------------- 1 | 73 | 74 | 112 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 88 | 89 | 126 | -------------------------------------------------------------------------------- /pages/letters/_slug.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 61 | -------------------------------------------------------------------------------- /pages/letters/index.vue: -------------------------------------------------------------------------------- 1 | 77 | 78 | 127 | -------------------------------------------------------------------------------- /pages/posts/_slug.vue: -------------------------------------------------------------------------------- 1 | 42 | 43 | 82 | -------------------------------------------------------------------------------- /pages/posts/index.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 57 | -------------------------------------------------------------------------------- /pages/privacy-policy.vue: -------------------------------------------------------------------------------- 1 | 589 | -------------------------------------------------------------------------------- /pages/projects/_slug.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 73 | -------------------------------------------------------------------------------- /pages/projects/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 56 | -------------------------------------------------------------------------------- /pages/resume/index.vue: -------------------------------------------------------------------------------- 1 | 11 | 23 | -------------------------------------------------------------------------------- /pages/technologies/_slug.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 66 | -------------------------------------------------------------------------------- /pages/technologies/index.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 57 | -------------------------------------------------------------------------------- /pages/thoughts/index.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 61 | -------------------------------------------------------------------------------- /plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /plugins/preview.client.js: -------------------------------------------------------------------------------- 1 | export default function ({ query, enablePreview }) { 2 | if (query.preview) { 3 | enablePreview() 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /static/Christopher-Wray-Resume.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cwray-tech/portfolio-frontend/325616aa8013ab9adf1275aa0117438b45b7014c/static/Christopher-Wray-Resume.pdf -------------------------------------------------------------------------------- /static/ads.txt: -------------------------------------------------------------------------------- 1 | google.com, pub-5072125126275963, DIRECT, f08c47fec0942fa0 -------------------------------------------------------------------------------- /static/chris-wray-family.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cwray-tech/portfolio-frontend/325616aa8013ab9adf1275aa0117438b45b7014c/static/chris-wray-family.jpg -------------------------------------------------------------------------------- /static/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /static/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cwray-tech/portfolio-frontend/325616aa8013ab9adf1275aa0117438b45b7014c/static/icon.png -------------------------------------------------------------------------------- /static/web-programming-gray.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /static/web-programming.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | darkMode: 'class', 3 | theme: { 4 | fontSize: { 5 | xs: '0.75rem', 6 | sm: '0.875rem', 7 | base: '1rem', 8 | lg: '1.125rem', 9 | xl: '1.25rem', 10 | '2xl': '1.5rem', 11 | '3xl': '1.875rem', 12 | '4xl': '2.25rem', 13 | '5xl': '3rem', 14 | '6xl': '4rem' 15 | }, 16 | extend: { 17 | typography: theme => ({ 18 | DEFAULT: { 19 | css: { 20 | a: { 21 | transition: 'ease-in-out .15s', 22 | 'text-decoration': 'none', 23 | color: theme('colors.indigo.700'), 24 | '&:hover': { 25 | color: theme('colors.gray.700') 26 | } 27 | } 28 | } 29 | } 30 | }), 31 | padding: { 32 | '1/2': '50%', 33 | '1/3': '33.333333%', 34 | '2/3': '66.666667%', 35 | '1/4': '25%', 36 | '2/4': '50%', 37 | '3/4': '75%', 38 | '1/5': '20%', 39 | '2/5': '40%', 40 | '3/5': '60%', 41 | '4/5': '80%', 42 | '1/6': '16.666667%', 43 | '2/6': '33.333333%', 44 | '3/6': '50%', 45 | '4/6': '66.666667%', 46 | '5/6': '83.333333%', 47 | '1/12': '8.333333%', 48 | '2/12': '16.666667%', 49 | '3/12': '25%', 50 | '4/12': '33.333333%', 51 | '5/12': '41.666667%', 52 | '6/12': '50%', 53 | '7/12': '58.333333%', 54 | '8/12': '66.666667%', 55 | '9/12': '75%', 56 | '10/12': '83.333333%', 57 | '11/12': '91.666667%', 58 | full: '100%' 59 | } 60 | } 61 | }, 62 | plugins: [ 63 | require('@tailwindcss/forms'), 64 | require('@tailwindcss/typography'), 65 | require('@tailwindcss/aspect-ratio') 66 | ], 67 | purge: { 68 | enabled: process.env.NODE_ENV === 'production', 69 | content: [ 70 | './components/**/*.{vue,js}', 71 | './layouts/**/*.vue', 72 | './pages/**/*.vue', 73 | './plugins/**/*.{js,ts}', 74 | './nuxt.config.{js,ts}' 75 | ] 76 | } 77 | } 78 | --------------------------------------------------------------------------------