├── public ├── logo.png ├── Resume.pdf ├── favicon.ico ├── fonts │ ├── cmunbx.ttf │ ├── cmunrm.ttf │ ├── Roboto-Bold.ttf │ ├── Unna-Bold.ttf │ ├── Raleway-Bold.ttf │ ├── Unna-Regular.ttf │ ├── Inconsolata-Bold.ttf │ ├── Mabry-Pro-Medium.ttf │ ├── Raleway-Regular.ttf │ ├── Roboto-Regular.ttf │ ├── SpaceMono-Bold.ttf │ ├── SpaceMono-Regular.ttf │ └── Inconsolata-Regular.ttf ├── splash_image.gif ├── splash_image.png ├── darkmoderesume.png ├── style_font_roboto.png ├── style_font_unna.png ├── style_mode_dark.png ├── style_mode_light.png ├── style_theme_oak.png ├── style_theme_tall.png ├── style_font_raleway.png ├── style_theme_classic.png ├── style_theme_modern.png ├── style_font_inconsolata.png ├── style_theme_minimalist.png ├── style_theme_one_column.png ├── style_theme_left_handed.png ├── style_theme_right_handed.png └── style_font_computermodern.png ├── .prettierrc ├── pages ├── test.jsx ├── .vscode │ └── settings.json ├── _app.jsx ├── _document.jsx ├── builder.jsx └── index.jsx ├── prettier.config.js ├── components ├── Section │ ├── headers │ │ ├── index.js │ │ ├── Center.jsx │ │ ├── LeftHanded.jsx │ │ └── RightHanded.jsx │ ├── themes │ │ ├── index.js │ │ ├── Simple.jsx │ │ ├── Modern.jsx │ │ ├── Classic.jsx │ │ ├── Minimalist.jsx │ │ └── Oak.jsx │ ├── index.jsx │ └── styles.jsx ├── index.js ├── Resume │ ├── Content.jsx │ ├── OneColumn.jsx │ ├── TwoColumn.jsx │ └── index.jsx ├── Menu │ ├── TabMenu │ │ ├── Tab.jsx │ │ └── index.jsx │ ├── Textbox │ │ └── index.jsx │ ├── index.jsx │ ├── Windows │ │ ├── ThemesWindow │ │ │ ├── index.jsx │ │ │ └── ImageSelect.jsx │ │ └── SectionsWindow │ │ │ └── index.jsx │ └── utils.js ├── Button │ └── index.jsx ├── Upload │ └── index.jsx ├── Footer │ └── index.jsx └── AutoLinkText │ ├── match_format.jsx │ ├── index.js │ ├── url_match.js │ ├── match_parser.js │ └── match_validator.js ├── constants ├── triggers.js ├── index.js ├── colors.js ├── fields.js ├── styling.js └── sections.js ├── .gitignore ├── .eslintrc.js ├── next.config.js ├── context └── state.jsx ├── README.md ├── jsconfig.json ├── .vscode └── settings.json ├── .babelrc ├── .github └── FUNDING.yml ├── LICENSE ├── package.json ├── styles └── global.css └── utils └── index.js /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/logo.png -------------------------------------------------------------------------------- /public/Resume.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/Resume.pdf -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/fonts/cmunbx.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/fonts/cmunbx.ttf -------------------------------------------------------------------------------- /public/fonts/cmunrm.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/fonts/cmunrm.ttf -------------------------------------------------------------------------------- /public/splash_image.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/splash_image.gif -------------------------------------------------------------------------------- /public/splash_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/splash_image.png -------------------------------------------------------------------------------- /public/darkmoderesume.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/darkmoderesume.png -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 80, 3 | "singleQuote": true, 4 | "trailingComma": "es5" 5 | } 6 | -------------------------------------------------------------------------------- /public/fonts/Roboto-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/fonts/Roboto-Bold.ttf -------------------------------------------------------------------------------- /public/fonts/Unna-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/fonts/Unna-Bold.ttf -------------------------------------------------------------------------------- /public/style_font_roboto.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/style_font_roboto.png -------------------------------------------------------------------------------- /public/style_font_unna.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/style_font_unna.png -------------------------------------------------------------------------------- /public/style_mode_dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/style_mode_dark.png -------------------------------------------------------------------------------- /public/style_mode_light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/style_mode_light.png -------------------------------------------------------------------------------- /public/style_theme_oak.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/style_theme_oak.png -------------------------------------------------------------------------------- /public/style_theme_tall.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/style_theme_tall.png -------------------------------------------------------------------------------- /public/fonts/Raleway-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/fonts/Raleway-Bold.ttf -------------------------------------------------------------------------------- /public/fonts/Unna-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/fonts/Unna-Regular.ttf -------------------------------------------------------------------------------- /public/style_font_raleway.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/style_font_raleway.png -------------------------------------------------------------------------------- /public/style_theme_classic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/style_theme_classic.png -------------------------------------------------------------------------------- /public/style_theme_modern.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/style_theme_modern.png -------------------------------------------------------------------------------- /public/fonts/Inconsolata-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/fonts/Inconsolata-Bold.ttf -------------------------------------------------------------------------------- /public/fonts/Mabry-Pro-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/fonts/Mabry-Pro-Medium.ttf -------------------------------------------------------------------------------- /public/fonts/Raleway-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/fonts/Raleway-Regular.ttf -------------------------------------------------------------------------------- /public/fonts/Roboto-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/fonts/Roboto-Regular.ttf -------------------------------------------------------------------------------- /public/fonts/SpaceMono-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/fonts/SpaceMono-Bold.ttf -------------------------------------------------------------------------------- /public/style_font_inconsolata.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/style_font_inconsolata.png -------------------------------------------------------------------------------- /public/style_theme_minimalist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/style_theme_minimalist.png -------------------------------------------------------------------------------- /public/style_theme_one_column.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/style_theme_one_column.png -------------------------------------------------------------------------------- /public/fonts/SpaceMono-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/fonts/SpaceMono-Regular.ttf -------------------------------------------------------------------------------- /public/style_theme_left_handed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/style_theme_left_handed.png -------------------------------------------------------------------------------- /public/style_theme_right_handed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/style_theme_right_handed.png -------------------------------------------------------------------------------- /pages/test.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function Test() { 4 | return

hello

; 5 | } 6 | -------------------------------------------------------------------------------- /public/fonts/Inconsolata-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/fonts/Inconsolata-Regular.ttf -------------------------------------------------------------------------------- /public/style_font_computermodern.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cnnmon/ezcv/HEAD/public/style_font_computermodern.png -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tabWidth: 2, 3 | semi: true, 4 | singleQuote: true, 5 | trailingComma: 'es5', 6 | }; 7 | -------------------------------------------------------------------------------- /components/Section/headers/index.js: -------------------------------------------------------------------------------- 1 | import Center from './Center'; 2 | import RightHanded from './RightHanded'; 3 | import LeftHanded from './LeftHanded'; 4 | 5 | export { Center, RightHanded, LeftHanded }; 6 | -------------------------------------------------------------------------------- /constants/triggers.js: -------------------------------------------------------------------------------- 1 | // globally used trigger 2 | export const trigger = '#'; 3 | export const stylingTrigger = '@'; 4 | export const commentTrigger = '/'; 5 | 6 | // mobile breakpoint 7 | // TODO: modify 8 | export const mobileBreakpoint = '800px'; 9 | -------------------------------------------------------------------------------- /components/Section/themes/index.js: -------------------------------------------------------------------------------- 1 | import Classic from './Classic'; 2 | import Modern from './Modern'; 3 | import Minimalist from './Minimalist'; 4 | import Simple from './Simple'; 5 | import Oak from './Oak'; 6 | 7 | export { Classic, Modern, Minimalist, Simple, Oak }; 8 | -------------------------------------------------------------------------------- /constants/index.js: -------------------------------------------------------------------------------- 1 | import COLORS from './colors'; 2 | import * as SECTIONS from './sections'; 3 | import * as FIELDS from './fields'; 4 | import * as STYLING from './styling'; 5 | import * as TRIGGERS from './triggers'; 6 | 7 | export { COLORS, SECTIONS, FIELDS, STYLING, TRIGGERS }; 8 | -------------------------------------------------------------------------------- /components/index.js: -------------------------------------------------------------------------------- 1 | import Menu, { Textbox } from './Menu'; 2 | import Resume, { Content } from './Resume'; 3 | import Button from './Button'; 4 | import Upload from './Upload'; 5 | import Footer from './Footer'; 6 | 7 | export { Upload, Menu, Resume, Button, Textbox, Content, Footer }; 8 | -------------------------------------------------------------------------------- /pages/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "files.exclude": { 3 | "**/.git": true, 4 | "**/.svn": true, 5 | "**/.hg": true, 6 | "**/CVS": true, 7 | "**/.DS_Store": true, 8 | "**/Thumbs.db": true, 9 | "**/.buckd": true, 10 | "**/buck-out": true, 11 | "**/.lsp.buckd": true, 12 | "**/.lsp-buck-out": true 13 | }, 14 | "hide-files.files": [] 15 | } 16 | -------------------------------------------------------------------------------- /pages/_app.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-props-no-spreading */ 2 | import React from 'react'; 3 | import '../styles/global.css'; 4 | import { AppWrapper } from '../context/state'; 5 | 6 | function Application({ Component, pageProps }) { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | } 13 | 14 | export default Application; 15 | -------------------------------------------------------------------------------- /constants/colors.js: -------------------------------------------------------------------------------- 1 | /* COLOR PALETTE */ 2 | const COLORS = { 3 | background: '#f3ece5', 4 | red: '#da6940', 5 | redOrange: '#ebc8c6', 6 | orange: '#EDB97C', 7 | yellow: '#f4debd', 8 | yellowGreen: '#EAE18C', 9 | green: '#a7c983', 10 | teal: '#72c49a', 11 | blue: '#b6e3e3', 12 | lavender: '#b6b7e3', 13 | purple: '#cfb6e3', 14 | darkBrown: '#292524', 15 | }; 16 | 17 | export default COLORS; 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | 21 | # debug 22 | npm-debug.log* 23 | 24 | # local env files 25 | .env.local 26 | .env.development.local 27 | .env.test.local 28 | .env.production.local 29 | .vercel 30 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es2021: true, 5 | }, 6 | extends: ['plugin:react/recommended', 'airbnb', 'prettier', 'next'], 7 | parserOptions: { 8 | ecmaFeatures: { 9 | jsx: true, 10 | }, 11 | ecmaVersion: 'latest', 12 | sourceType: 'module', 13 | }, 14 | plugins: ['react', 'prettier'], 15 | rules: { 16 | 'prettier/prettier': 'error', 17 | 'react/prop-types': 'off', 18 | 'react/no-unknown-property': ['error', { ignore: ['jsx', 'global'] }], 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-param-reassign */ 2 | module.exports = { 3 | async rewrites() { 4 | return [ 5 | { 6 | source: '/api/:path*', 7 | destination: 'https://api.example.com/:path*', 8 | }, 9 | ]; 10 | }, 11 | webpack(config) { 12 | config.module.rules.push({ 13 | test: /\.svg$/, 14 | use: ['@svgr/webpack'], 15 | }); 16 | 17 | return config; 18 | }, 19 | images: { 20 | dangerouslyAllowSVG: true, 21 | domains: ['api.producthunt.com'], 22 | formats: ['image/webp', 'image/avif'], 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /components/Resume/Content.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Section from '../Section'; 3 | import { STYLING } from '../../constants'; 4 | 5 | function Content({ content, styling = STYLING.getDefaultStyling() }) { 6 | return ( 7 | <> 8 | {content.map(({ body, header, type }, i) => ( 9 |
10 |
16 |
17 | ))} 18 | 19 | ); 20 | } 21 | 22 | export default Content; 23 | -------------------------------------------------------------------------------- /context/state.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-no-constructed-context-values */ 2 | import { createContext, useContext, useState } from 'react'; 3 | import { getDefaultSections } from '../constants/sections'; 4 | 5 | const AppContext = createContext(); 6 | 7 | export function AppWrapper({ children }) { 8 | const [sections, setSections] = useState(getDefaultSections()); 9 | 10 | return ( 11 | 12 | {children} 13 | 14 | ); 15 | } 16 | 17 | export function useAppContext() { 18 | return useContext(AppContext); 19 | } 20 | -------------------------------------------------------------------------------- /components/Section/headers/Center.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles, { getLargeSectionHeader, getInlineItems } from '../styles'; 3 | 4 | function Body({ subsection }) { 5 | const { title, subtitle, description, date, other } = subsection; 6 | return getInlineItems([title, subtitle, description, date, ...other], true); 7 | } 8 | 9 | export default function Center({ header, subsections }) { 10 | return ( 11 |
12 | {getLargeSectionHeader(header, true)} 13 | {subsections.map((s, key) => ( 14 | 15 | ))} 16 |
17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ezcv 2 | 3 | 4 | 5 | a free resume builder that makes creating a resume as simple as typing. generate a beautiful, formatted cv instantly from the plaintext builder. customize in a few clicks with live preview 6 | and get hired faster. 7 | 8 | **Tools:** 9 | 10 | - nextjs 11 | - react 12 | - html/css/js 13 | 14 | go try it out at [**ezcv.pro**](https://ezcv.pro). 15 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "paths": { 5 | "components/*": ["src/components/*"], 6 | "constants/*": ["src/constants/*"], 7 | "utils/*": ["src/utils/*"] 8 | } 9 | }, 10 | "target": "es5", 11 | "lib": ["dom", "dom.iterable", "esnext"], 12 | "allowJs": true, 13 | "skipLibCheck": true, 14 | "strict": true, 15 | "forceConsistentCasingInFileNames": true, 16 | "noEmit": true, 17 | "esModuleInterop": true, 18 | "module": "esnext", 19 | "moduleResolution": "node", 20 | "resolveJsonModule": true, 21 | "isolatedModules": true, 22 | "jsx": "preserve", 23 | "incremental": true 24 | } 25 | -------------------------------------------------------------------------------- /components/Resume/OneColumn.jsx: -------------------------------------------------------------------------------- 1 | import Content from './Content'; 2 | import { SECTIONS } from '../../constants'; 3 | 4 | export default function OneColumn({ content, styling }) { 5 | const columns = { 6 | center: [], 7 | rest: [], 8 | }; 9 | 10 | for (let i = 0; i < content.length; i += 1) { 11 | const c = content[i]; 12 | 13 | if (c.type === SECTIONS.TYPES.HEADER) { 14 | columns.center.push(c); 15 | } else { 16 | columns.rest.push(c); 17 | } 18 | } 19 | 20 | return ( 21 | <> 22 | 23 | 24 | 25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "files.exclude": { 3 | "**/.git": true, 4 | "**/.svn": true, 5 | "**/.hg": true, 6 | "**/CVS": true, 7 | "**/.DS_Store": true, 8 | "**/Thumbs.db": true, 9 | ".prettierrc": true, 10 | ".vercel": true, 11 | ".vscode": true, 12 | ".babelrc": true, 13 | ".gitignore": true, 14 | "README.md": true, 15 | "prettier.config.js": true, 16 | "pages/.vscode": true, 17 | "jsconfig.json": true 18 | }, 19 | "hide-files.files": [ 20 | ".prettierrc", 21 | ".vercel", 22 | ".vscode", 23 | ".babelrc", 24 | ".gitignore", 25 | "README.md", 26 | "prettier.config.js", 27 | "pages/.vscode", 28 | "jsconfig.json" 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "development": { 4 | "presets": ["next/babel"], 5 | "plugins": [ 6 | [ 7 | "babel-plugin-styled-components", 8 | { "ssr": true, "displayName": true, "preprocess": false } 9 | ] 10 | ] 11 | }, 12 | "production": { 13 | "plugins": [ 14 | [ 15 | "babel-plugin-styled-components", 16 | { "ssr": true, "displayName": true, "preprocess": false } 17 | ] 18 | ], 19 | "presets": ["next/babel"] 20 | }, 21 | "test": { 22 | "presets": ["next/babel"] 23 | } 24 | }, 25 | "plugins": [ 26 | [ 27 | "babel-plugin-styled-components", 28 | { "ssr": true, "displayName": true, "preprocess": false } 29 | ] 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /components/Menu/TabMenu/Tab.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { COLORS } from '../../../constants'; 3 | 4 | const styles = { 5 | tab: { 6 | cursor: 'pointer', 7 | border: `2px solid ${COLORS.darkBrown}`, 8 | borderBottom: 'none', 9 | backgroundColor: COLORS.yellow, 10 | fontWeight: 'bold', 11 | width: 160, 12 | minWidth: 160, 13 | padding: '8px 0', 14 | }, 15 | active: { 16 | backgroundColor: COLORS.darkBrown, 17 | color: 'white', 18 | }, 19 | }; 20 | 21 | export default function Tab({ isActive, onClick, title }) { 22 | return ( 23 | 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: cnnmon 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 13 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 14 | -------------------------------------------------------------------------------- /components/Section/index.jsx: -------------------------------------------------------------------------------- 1 | import { Classic, Modern, Minimalist, Simple, Oak } from './themes'; 2 | import { Center, LeftHanded, RightHanded } from './headers'; 3 | 4 | const HEADERS = { 5 | onecolumn: Center, 6 | lefthanded: LeftHanded, 7 | righthanded: RightHanded, 8 | }; 9 | 10 | const THEMES = { 11 | classic: Classic, 12 | modern: Modern, 13 | minimalist: Minimalist, 14 | simple: Simple, 15 | oak: Oak, 16 | }; 17 | 18 | export default function Section({ styling, type, ...props }) { 19 | if (!styling) { 20 | return THEMES.classic(props); 21 | } 22 | 23 | const { themes, columns, mode } = styling; 24 | 25 | if (type === 'header') { 26 | return HEADERS[columns.key](props); 27 | } 28 | 29 | // enlarges/formats header section differently 30 | return THEMES[themes.key]({ columns, mode, ...props }); 31 | } 32 | -------------------------------------------------------------------------------- /components/Section/headers/LeftHanded.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { getLargeSectionHeader, getItems } from '../styles'; 3 | 4 | const STYLES = { 5 | inline: { 6 | display: 'flex', 7 | width: '100%', 8 | }, 9 | left: { 10 | width: '72%', 11 | }, 12 | }; 13 | 14 | function Body({ subsection }) { 15 | const { title, subtitle, description, date, other } = subsection; 16 | return getItems([title, subtitle, description, date, ...other], true); 17 | } 18 | 19 | export default function LeftHanded({ header, subsections }) { 20 | return ( 21 |
22 |
{getLargeSectionHeader(header)}
23 |
24 | {subsections.map((s, key) => ( 25 | 26 | ))} 27 |
28 |
29 | ); 30 | } 31 | -------------------------------------------------------------------------------- /components/Section/headers/RightHanded.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { getLargeSectionHeader, getItems } from '../styles'; 3 | 4 | const STYLES = { 5 | inline: { 6 | display: 'flex', 7 | width: '100%', 8 | }, 9 | left: { 10 | width: '31%', 11 | }, 12 | }; 13 | 14 | function Body({ subsection }) { 15 | const { title, subtitle, description, date, other } = subsection; 16 | return getItems([title, subtitle, description, date, ...other], true); 17 | } 18 | 19 | export default function RightHanded({ header, subsections }) { 20 | return ( 21 |
22 |
{getLargeSectionHeader(header)}
23 |
24 | {subsections.map((s, key) => ( 25 | 26 | ))} 27 |
28 |
29 | ); 30 | } 31 | -------------------------------------------------------------------------------- /components/Menu/Textbox/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { COLORS } from '../../../constants'; 3 | 4 | export default function Textbox({ text, setText, textbox, readOnly = false }) { 5 | const getStyle = () => ({ 6 | width: '100%', 7 | border: `2px solid ${COLORS.darkBrown}`, 8 | backgroundColor: COLORS.yellow, 9 | padding: 15, 10 | boxSizing: 'border-box', 11 | minHeight: 300, 12 | resize: 'none', 13 | outline: 'none', 14 | fontFamily: 'Inter', 15 | fontSize: 13, 16 | height: '100%', 17 | cursor: readOnly ? 'not-allowed' : undefined, 18 | }); 19 | 20 | return ( 21 |