{children}
11 |
6 |
14 | );
15 | });
16 |
17 | ResumeSection.displayName = 'ResumeSection';
18 | export default ResumeSection;
19 |
--------------------------------------------------------------------------------
/src/hooks/useWindow.ts:
--------------------------------------------------------------------------------
1 | import {useEffect, useState} from 'react';
2 |
3 | interface WindowSize {
4 | width: number;
5 | height: number;
6 | }
7 |
8 | const useWindow = (): WindowSize => {
9 | const [windowSize, setWindowSize] = useState
7 |
12 |
8 |
11 | {title}
9 | 10 |{children}
13 |
9 |
19 | );
20 | });
21 |
22 | TimelineItem.displayName = 'TimelineItem';
23 | export default TimelineItem;
24 |
--------------------------------------------------------------------------------
/src/components/Icon/TwitterIcon.tsx:
--------------------------------------------------------------------------------
1 | import {FC, memo} from 'react';
2 |
3 | import Icon, {IconProps} from './Icon';
4 |
5 | const TwitterIcon: FC
10 |
17 | {content}
18 | {title}
11 |
12 | {location}
13 | •
14 | {date}
15 |
16 |
9 |
23 | ));
24 |
25 | Footer.displayName = 'Footer';
26 | export default Footer;
27 |
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 |
3 | // https://github.com/vercel/next.js/blob/master/packages/next/next-server/server/config.ts
4 | const nextConfig = {
5 | webpack: config => {
6 | const oneOfRule = config.module.rules.find(rule => rule.oneOf);
7 |
8 | // Next 12 has multiple TS loaders, and we need to update all of them.
9 | const tsRules = oneOfRule.oneOf.filter(rule => rule.test && rule.test.toString().includes('tsx|ts'));
10 |
11 | tsRules.forEach(rule => {
12 | // eslint-disable-next-line no-param-reassign
13 | rule.include = undefined;
14 | });
15 |
16 | return config;
17 | },
18 | compress: true,
19 | generateEtags: true,
20 | pageExtensions: ['tsx', 'mdx', 'ts'],
21 | poweredByHeader: false,
22 | productionBrowserSourceMaps: false,
23 | svgo: {
24 | multipass: true,
25 | plugins: ['removeDimensions'],
26 | },
27 | strictMode: true,
28 | swcMinify: true,
29 | trailingSlash: false,
30 | images: {
31 | domains: ['images.unsplash.com', 'source.unsplash.com'],
32 | },
33 | };
34 |
35 | module.exports = nextConfig;
36 |
--------------------------------------------------------------------------------
/src/globalStyles.scss:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @layer utilities {
6 | /* Chrome, Safari and Opera */
7 | .no-scrollbar::-webkit-scrollbar {
8 | display: none;
9 | }
10 |
11 | .no-scrollbar {
12 | -ms-overflow-style: none; /* IE and Edge */
13 | scrollbar-width: none; /* Firefox */
14 | }
15 | }
16 |
17 | @supports (-webkit-touch-callout: none) {
18 | .h-screen {
19 | height: -webkit-fill-available;
20 | }
21 | }
22 |
23 | /* Global styles */
24 | * {
25 | -webkit-font-smoothing: antialiased;
26 | -moz-osx-font-smoothing: grayscale;
27 | }
28 |
29 | html {
30 | -webkit-tap-highlight-color: transparent;
31 | scroll-behavior: smooth;
32 | height: 100vh;
33 | }
34 |
35 | body {
36 | position: relative;
37 | width: 100%;
38 | color: #444444;
39 | font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Ubuntu, 'Helvetica Neue', sans-serif;
40 | background-color: #fafafa;
41 | }
42 |
43 | td,
44 | th {
45 | padding: 4px 8px 4px 4px;
46 | text-align: left;
47 | }
48 |
49 | th {
50 | font-weight: 600;
51 | }
52 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Tim Baker
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import dynamic from 'next/dynamic';
2 | import {FC, memo} from 'react';
3 |
4 | import Page from '../components/Layout/Page';
5 | import About from '../components/Sections/About';
6 | import Contact from '../components/Sections/Contact';
7 | import Footer from '../components/Sections/Footer';
8 | import Hero from '../components/Sections/Hero';
9 | import Portfolio from '../components/Sections/Portfolio';
10 | import Resume from '../components/Sections/Resume';
11 | import Testimonials from '../components/Sections/Testimonials';
12 | import {homePageMeta} from '../data/data';
13 |
14 | // eslint-disable-next-line react-memo/require-memo
15 | const Header = dynamic(() => import('../components/Sections/Header'), {ssr: false});
16 |
17 | const Home: FC = memo(() => {
18 | const {title, description} = homePageMeta;
19 | return (
20 |
10 |
13 |
16 |
17 |
22 |
18 |
20 | © Copyright 2022 Tim Baker
21 |
9 | {name}
10 |
16 | );
17 | });
18 |
19 | SkillGroup.displayName = 'SkillGroup';
20 |
21 | export const Skill: FC<{skill: SkillType}> = memo(({skill}) => {
22 | const {name, level, max = 10} = skill;
23 | const percentage = useMemo(() => Math.round((level / max) * 100), [level, max]);
24 |
25 | return (
26 |
11 | {skills.map((skill, index) => (
12 |
15 |
27 | {name}
28 |
32 | );
33 | });
34 |
35 | Skill.displayName = 'Skill';
36 |
--------------------------------------------------------------------------------
/src/components/Sections/Resume/index.tsx:
--------------------------------------------------------------------------------
1 | import {FC, memo} from 'react';
2 |
3 | import {education, experience, SectionId, skills} from '../../../data/data';
4 | import Section from '../../Layout/Section';
5 | import ResumeSection from './ResumeSection';
6 | import {SkillGroup} from './Skills';
7 | import TimelineItem from './TimelineItem';
8 |
9 | const Resume: FC = memo(() => {
10 | return (
11 |
29 |
30 |
31 |
13 |
14 | {education.map((item, index) => (
15 |
18 |
19 | {experience.map((item, index) => (
20 |
23 |
24 |
31 |
32 | Here you can show a snapshot of your skills to show off to employers
25 |
26 | {skills.map((skillgroup, index) => (
27 |
30 |
13 | {!!profileImageSrc && (
14 |
36 |
15 |
19 | )}
20 |
16 |
18 |
21 |
35 |
22 |
25 | About me
23 |{description}
24 |-
26 | {aboutItems.map(({label, text, Icon}, idx) => (
27 |
-
28 | {Icon &&
} 29 | {label}: 30 | {text} 31 |
32 | ))}
33 |
16 |
56 |
26 |
48 |
27 |
47 | {name}
28 | {description} 29 |
30 |
32 |
33 | {actions.map(({href, text, primary, Icon}) => (
34 |
41 | {text}
42 | {Icon &&
46 |
49 |
52 |
55 |
16 |
34 | Check out some of my work
17 |
18 | {portfolioItems.map((item, index) => {
19 | const {title, image} = item;
20 | return (
21 |
33 |
22 |
30 | );
31 | })}
32 |
26 |
29 |
76 |
82 |
83 | );
84 | });
85 |
--------------------------------------------------------------------------------
/src/data/dataDef.ts:
--------------------------------------------------------------------------------
1 | import {StaticImageData} from 'next/image';
2 | import {FC, SVGProps} from 'react';
3 |
4 | import {IconProps} from '../components/Icon/Icon';
5 |
6 | export interface HomepageMeta {
7 | title: string;
8 | description: string;
9 | ogImageUrl?: string;
10 | twitterCardType?: 'summary' | 'summary_large';
11 | twitterTitle?: string;
12 | twitterSite?: string;
13 | twitterCreator?: string;
14 | twitterDomain?: string;
15 | twitterUrl?: string;
16 | twitterDescription?: string;
17 | twitterImageUrl?: string;
18 | }
19 |
20 | /**
21 | * Hero section
22 | */
23 | export interface Hero {
24 | imageSrc: string;
25 | name: string;
26 | description: JSX.Element;
27 | actions: HeroActionItem[];
28 | }
29 |
30 | interface HeroActionItem {
31 | href: string;
32 | text: string;
33 | primary?: boolean;
34 | Icon?: (props: SVGProps
77 |
80 | {title}
78 |{description}
79 |
31 |
66 |
32 |
35 | {headerText}
34 |
36 |
65 |
37 |
39 |
40 |
64 | {description}
41 |-
42 | {items.map(({type, text, href}) => {
43 | const {Icon, srLabel} = ContactValueMap[type];
44 | return (
45 |
- {srLabel} 47 |
- 48 | 55 | 56 | {text} 57 | 58 | 59 |
46 |
60 | );
61 | })}
62 |
82 |
113 |
83 |
112 |
84 |
111 |
88 | {testimonials.map((testimonial, index) => {
89 | const isActive = index === activeIndex;
90 | return (
91 |
95 |
96 | {[...Array(testimonials.length)].map((_, index) => {
97 | const isActive = index === activeIndex;
98 | return (
99 |
107 | );
108 | })}
109 |
110 |
124 | {image ? (
125 |
137 | ),
138 | );
139 |
140 | export default Testimonials;
141 |
--------------------------------------------------------------------------------
/src/components/Sections/Header.tsx:
--------------------------------------------------------------------------------
1 | import {Dialog, Transition} from '@headlessui/react';
2 | import {MenuAlt3Icon} from '@heroicons/react/outline';
3 | import classNames from 'classnames';
4 | import Link from 'next/link';
5 | import {FC, Fragment, memo, useCallback, useMemo, useState} from 'react';
6 |
7 | import {SectionId} from '../../data/data';
8 | import {useNavObserver} from '../../hooks/useNavObserver';
9 |
10 | export const headerID = 'headerNav';
11 |
12 | const Header: FC = memo(() => {
13 | const [currentSection, setCurrentSection] = useState
126 | 
128 |
129 | ) : (
130 |
133 |
136 | {text}
134 |-- {name}
135 |
6 |
7 | 
8 |
9 | 
10 |
11 | 
12 |
13 | 
14 |
15 | 
16 |
17 | 
18 |
19 | ## React based template for software developer-focused resume websites
20 |
21 |
22 |
23 | ### View a [live demo here.](https://reactresume.com)
24 |
25 | #### If this template has helped you and you'd like to support my work, feel free to [♥️ Sponsor](https://github.com/sponsors/tbakerx) the project
26 |
27 | ### 🎉 Version 2 is here! New features:
28 | 1. Completely rebuilt with React and full typescript support
29 | 2. Built on the [Next.js](https://nextjs.org/) framework for easy server side rendering/static generation, image optimization, api routes, and deployment
30 | 3. Styled entirely with [TailwindCss](https://tailwindcss.com/)
31 | 4. Re-organized data population file for customizing site.
32 | 5. Significant improvement/modernization of all site sections
33 |
34 | **Looking for the old version? You can find it [here.](https://github.com/tbakerx/react-resume-template/releases/tag/v1.0.0)**
35 |
36 | ## Description
37 |
38 | This is a React based personal resume website template. Built with typescript on the Next.js framework, styled with Tailwind css, and populated with data from a single file, you can easily create, customize and host your own personal website in minutes. Even better, the site is fully mobile-optimized and server-side rendered to ensure fast loading and a clean UI on any device. Read on to learn how to make it your own.
39 |
40 | ## Make it Your Own!
41 |
42 | ### 1. Make sure you have what you need
43 |
44 | To build this website, you will need to have the latest stable versions of Node and Yarn downloaded and installed on your machine. If you don't already have them, you can get Node [here,](https://nodejs.org/en/download/) and Yarn [here.](https://yarnpkg.com/getting-started/install)
45 |
46 | ### 2. Fork and download this repo (and star if you like!)
47 |
48 | Next, find the `Fork` button in the top right of this page. This will allow you to make your own copy, for more info on forking repo's see [here.](https://docs.github.com/en/get-started/quickstart/fork-a-repo#forking-a-repository) After this, download to your development machine using the green `Code` button at the top of the repo page.
49 |
50 | ### 3. Install dependencies and run
51 |
52 | Once you have your own copy of this repo forked and downloaded, open the folder in your favorite terminal and run `yarn install` to install dependencies. Following this, run `yarn dev` to run the project. In your terminal you should be given the url of the running instance (usually http://localhost:3000 unless you have something else running).
53 |
54 | ### 4. Customize the data to make it your own
55 |
56 | All of the data for the site is driven via a file at `/src/data/data.tsx`. This is where you'll find the existing content, and updating the values here will be reflected on the site. If you have the site running as described above, you should see these changes reflected on save. The data types for all of these items are given in the same folder in the `dataDef.ts` file. Example images can be found at `src/images/` and are imported in the data file. To change, simply update these images using the same name and location, or add new images and update the imports.
57 |
58 | ### 5. Hook up contact form
59 | Due to the variety of options available for contact form providers, I've hooked up the contact form only so far as handling inputs and state. Form submission and the actual sending of the email is open to your own implementation. My personal recommendation for email provider is [Sendgrid.](https://sendgrid.com/)
60 |
61 | ### 6. Make any other changes you like
62 |
63 | Of course, all of the code is there and nothing is hidden from you so if you would like to make any other styling/data changes, feel free!
64 |
65 | ### 7. Deploy to Vercel and enjoy your new Resume Website
66 |
67 | Deploying your new site to Vercel is simple, and can be done by following their guide [here.](https://vercel.com/guides/deploying-nextjs-with-vercel) When you're all done and the build succeeds, you should be given a url for your live site, go there and you'll see your new personal resume website! Congratulations!
68 |
69 | ## Project Created & Maintained By
70 |
71 | ### Tim Baker
72 |
73 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | ## React based template for software developer-focused resume websites
20 |
21 | 
74 |
75 | [](https://github.com/tbakerx/)
76 |
77 | ## Stargazers
78 |
79 | [](https://github.com/tbakerx/react-resume-template/stargazers)
80 |
81 | ## Forkers
82 |
83 | [](https://github.com/tbakerx/react-resume-template/network/members)
84 |
85 |
--------------------------------------------------------------------------------
/src/data/data.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | AcademicCapIcon,
3 | CalendarIcon,
4 | DownloadIcon,
5 | FlagIcon,
6 | MapIcon,
7 | OfficeBuildingIcon,
8 | SparklesIcon,
9 | } from '@heroicons/react/outline';
10 |
11 | import GithubIcon from '../components/Icon/GithubIcon';
12 | import InstagramIcon from '../components/Icon/InstagramIcon';
13 | import LinkedInIcon from '../components/Icon/LinkedInIcon';
14 | import StackOverflowIcon from '../components/Icon/StackOverflowIcon';
15 | import TwitterIcon from '../components/Icon/TwitterIcon';
16 | import heroImage from '../images/header-background.webp';
17 | import porfolioImage1 from '../images/portfolio/portfolio-1.jpg';
18 | import porfolioImage2 from '../images/portfolio/portfolio-2.jpg';
19 | import porfolioImage3 from '../images/portfolio/portfolio-3.jpg';
20 | import porfolioImage4 from '../images/portfolio/portfolio-4.jpg';
21 | import porfolioImage5 from '../images/portfolio/portfolio-5.jpg';
22 | import porfolioImage6 from '../images/portfolio/portfolio-6.jpg';
23 | import porfolioImage7 from '../images/portfolio/portfolio-7.jpg';
24 | import porfolioImage8 from '../images/portfolio/portfolio-8.jpg';
25 | import porfolioImage9 from '../images/portfolio/portfolio-9.jpg';
26 | import porfolioImage10 from '../images/portfolio/portfolio-10.jpg';
27 | import porfolioImage11 from '../images/portfolio/portfolio-11.jpg';
28 | import profilepic from '../images/profilepic.jpg';
29 | import testimonialImage from '../images/testimonial.webp';
30 | import {
31 | About,
32 | ContactSection,
33 | ContactType,
34 | Hero,
35 | HomepageMeta,
36 | PortfolioItem,
37 | SkillGroup,
38 | Social,
39 | TestimonialSection,
40 | TimelineItem,
41 | } from './dataDef';
42 |
43 | /**
44 | * Page meta data
45 | */
46 | export const homePageMeta: HomepageMeta = {
47 | title: 'React Resume Template',
48 | description: "Example site built with Tim Baker's react resume template",
49 | };
50 |
51 | /**
52 | * Section definition
53 | */
54 | export const SectionId = {
55 | Hero: 'hero',
56 | About: 'about',
57 | Contact: 'contact',
58 | Portfolio: 'portfolio',
59 | Resume: 'resume',
60 | Skills: 'skills',
61 | Stats: 'stats',
62 | Testimonials: 'testimonials',
63 | } as const;
64 |
65 | export type SectionId = typeof SectionId[keyof typeof SectionId];
66 |
67 | /**
68 | * Hero section
69 | */
70 | export const heroData: Hero = {
71 | imageSrc: heroImage,
72 | name: `I'm Tim Baker.`,
73 | description: (
74 | <>
75 | 76 | I'm a Victoria based Full Stack Software Engineer, currently working 77 | at Instant Domains helping build a modern, mobile-first, domain 78 | registrar and site builder. 79 |
80 |81 | In my free time time, you can catch me training in Muay Thai, 82 | plucking my banjo, or exploring beautiful{' '} 83 | Vancouver Island. 84 |
85 | 86 | ), 87 | actions: [ 88 | { 89 | href: '/assets/resume.pdf', 90 | text: 'Resume', 91 | primary: true, 92 | Icon: DownloadIcon, 93 | }, 94 | { 95 | href: `#${SectionId.Contact}`, 96 | text: 'Contact', 97 | primary: false, 98 | }, 99 | ], 100 | }; 101 | 102 | /** 103 | * About section 104 | */ 105 | export const aboutData: About = { 106 | profileImageSrc: profilepic, 107 | description: `Use this bio section as your way of describing yourself and saying what you do, what technologies you like 108 | to use or feel most comfortable with, describing your personality, or whatever else you feel like throwing 109 | in.`, 110 | aboutItems: [ 111 | {label: 'Location', text: 'Victoria, BC', Icon: MapIcon}, 112 | {label: 'Age', text: '29', Icon: CalendarIcon}, 113 | {label: 'Nationality', text: 'Canadian / Irish', Icon: FlagIcon}, 114 | {label: 'Interests', text: 'Motorcycles, Muay Thai, Banjos', Icon: SparklesIcon}, 115 | {label: 'Study', text: 'University of Victoria', Icon: AcademicCapIcon}, 116 | {label: 'Employment', text: 'Instant Domains, inc.', Icon: OfficeBuildingIcon}, 117 | ], 118 | }; 119 | 120 | /** 121 | * Skills section 122 | */ 123 | export const skills: SkillGroup[] = [ 124 | { 125 | name: 'Spoken languages', 126 | skills: [ 127 | { 128 | name: 'English', 129 | level: 10, 130 | }, 131 | { 132 | name: 'French', 133 | level: 4, 134 | }, 135 | { 136 | name: 'Spanish', 137 | level: 3, 138 | }, 139 | ], 140 | }, 141 | { 142 | name: 'Frontend development', 143 | skills: [ 144 | { 145 | name: 'React', 146 | level: 9, 147 | }, 148 | { 149 | name: 'Typescript', 150 | level: 7, 151 | }, 152 | { 153 | name: 'GraphQL', 154 | level: 6, 155 | }, 156 | ], 157 | }, 158 | { 159 | name: 'Backend development', 160 | skills: [ 161 | { 162 | name: 'Node.js', 163 | level: 8, 164 | }, 165 | { 166 | name: 'Rust', 167 | level: 5, 168 | }, 169 | { 170 | name: 'Golang', 171 | level: 4, 172 | }, 173 | ], 174 | }, 175 | { 176 | name: 'Mobile development', 177 | skills: [ 178 | { 179 | name: 'React Native', 180 | level: 9, 181 | }, 182 | { 183 | name: 'Flutter', 184 | level: 4, 185 | }, 186 | { 187 | name: 'Swift', 188 | level: 3, 189 | }, 190 | ], 191 | }, 192 | ]; 193 | 194 | /** 195 | * Portfolio section 196 | */ 197 | export const portfolioItems: PortfolioItem[] = [ 198 | { 199 | title: 'Project title 1', 200 | description: 'Give a short description of your project here.', 201 | url: 'https://timbaker.me', 202 | image: porfolioImage1, 203 | }, 204 | { 205 | title: 'Project title 2', 206 | description: 'Give a short description of your project here.', 207 | url: 'https://timbaker.me', 208 | image: porfolioImage2, 209 | }, 210 | { 211 | title: 'Project title 3', 212 | description: 'Give a short description of your project here.', 213 | url: 'https://timbaker.me', 214 | image: porfolioImage3, 215 | }, 216 | { 217 | title: 'Project title 4', 218 | description: 'Give a short description of your project here.', 219 | url: 'https://timbaker.me', 220 | image: porfolioImage4, 221 | }, 222 | { 223 | title: 'Project title 5', 224 | description: 'Give a short description of your project here.', 225 | url: 'https://timbaker.me', 226 | image: porfolioImage5, 227 | }, 228 | { 229 | title: 'Project title 6', 230 | description: 'Give a short description of your project here.', 231 | url: 'https://timbaker.me', 232 | image: porfolioImage6, 233 | }, 234 | { 235 | title: 'Project title 7', 236 | description: 'Give a short description of your project here.', 237 | url: 'https://timbaker.me', 238 | image: porfolioImage7, 239 | }, 240 | { 241 | title: 'Project title 8', 242 | description: 'Give a short description of your project here.', 243 | url: 'https://timbaker.me', 244 | image: porfolioImage8, 245 | }, 246 | { 247 | title: 'Project title 9', 248 | description: 'Give a short description of your project here.', 249 | url: 'https://timbaker.me', 250 | image: porfolioImage9, 251 | }, 252 | { 253 | title: 'Project title 10', 254 | description: 'Give a short description of your project here.', 255 | url: 'https://timbaker.me', 256 | image: porfolioImage10, 257 | }, 258 | { 259 | title: 'Project title 11', 260 | description: 'Give a short description of your project here.', 261 | url: 'https://timbaker.me', 262 | image: porfolioImage11, 263 | }, 264 | ]; 265 | 266 | /** 267 | * Resume section -- TODO: Standardize resume contact format or offer MDX 268 | */ 269 | export const education: TimelineItem[] = [ 270 | { 271 | date: 'April 2007', 272 | location: 'Clown college', 273 | title: 'Masters in Beer tasting', 274 | content:Describe your experience at school, what you learned, what useful skills you have acquired etc.
, 275 | }, 276 | { 277 | date: 'March 2003', 278 | location: 'School of Business', 279 | title: 'What did you study 101', 280 | content:Describe your experience at school, what you learned, what useful skills you have acquired etc.
, 281 | }, 282 | ]; 283 | 284 | export const experience: TimelineItem[] = [ 285 | { 286 | date: 'March 2010 - Present', 287 | location: 'Awesome Development Company', 288 | title: 'Senior UX Engineer', 289 | content: ( 290 |291 | Describe work, special projects, notable achievements, what technologies you have been working with, and 292 | anything else that would be useful for an employer to know. 293 |
294 | ), 295 | }, 296 | { 297 | date: 'March 2007 - February 2010', 298 | location: 'Garage Startup Studio', 299 | title: 'Junior bug fixer', 300 | content: ( 301 |302 | Describe work, special projects, notable achievements, what technologies you have been working with, and 303 | anything else that would be useful for an employer to know. 304 |
305 | ), 306 | }, 307 | ]; 308 | 309 | /** 310 | * Testimonial section 311 | */ 312 | export const testimonial: TestimonialSection = { 313 | imageSrc: testimonialImage, 314 | testimonials: [ 315 | { 316 | name: 'John Doe', 317 | text: 'Use this as an opportunity to promote what it is like to work with you. High value testimonials include ones from current or past co-workers, managers, or from happy clients.', 318 | image: 'https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/169.jpg', 319 | }, 320 | { 321 | name: 'Jane Doe', 322 | text: 'Here you should write some nice things that someone has said about you. Encourage them to be specific and include important details (notes about a project you were on together, impressive quality produced, etc).', 323 | image: 'https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/14.jpg', 324 | }, 325 | { 326 | name: 'Someone else', 327 | text: 'Add several of these, and keep them as fresh as possible, but be sure to focus on quality testimonials with strong highlights of your skills/work ethic.', 328 | image: 'https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/69.jpg', 329 | }, 330 | ], 331 | }; 332 | 333 | /** 334 | * Contact section 335 | */ 336 | 337 | export const contact: ContactSection = { 338 | headerText: 'Get in touch.', 339 | description: 'Here is a good spot for a message to your readers to let them know how best to reach out to you.', 340 | items: [ 341 | { 342 | type: ContactType.Email, 343 | text: 'reachout@timbaker.me', 344 | href: 'mailto:reachout@timbaker.me', 345 | }, 346 | { 347 | type: ContactType.Location, 348 | text: 'Victoria BC, Canada', 349 | href: 'https://www.google.ca/maps/place/Victoria,+BC/@48.4262362,-123.376775,14z', 350 | }, 351 | { 352 | type: ContactType.Instagram, 353 | text: '@tbakerx', 354 | href: 'https://www.instagram.com/tbakerx/', 355 | }, 356 | { 357 | type: ContactType.Github, 358 | text: 'tbakerx', 359 | href: 'https://github.com/tbakerx', 360 | }, 361 | ], 362 | }; 363 | 364 | /** 365 | * Social items 366 | */ 367 | export const socialLinks: Social[] = [ 368 | {label: 'Github', Icon: GithubIcon, href: 'https://github.com/tbakerx'}, 369 | {label: 'Stack Overflow', Icon: StackOverflowIcon, href: 'https://stackoverflow.com/users/8553186/tim-baker'}, 370 | {label: 'LinkedIn', Icon: LinkedInIcon, href: 'https://www.linkedin.com/in/timbakerx/'}, 371 | {label: 'Instagram', Icon: InstagramIcon, href: 'https://www.instagram.com/tbakerx/'}, 372 | {label: 'Twitter', Icon: TwitterIcon, href: 'https://twitter.com/TimBakerx'}, 373 | ]; 374 | --------------------------------------------------------------------------------