Merge pull request #1 from rachelslurs/updating

fix: updating content and design

edit-me/config/links.ts

@@ -1,22 +1,12 @@
-import {
-  faGithub,
-  faInstagram,
-  faLinkedin,
-  faNpm,
-} from '@fortawesome/free-brands-svg-icons';
-import { CMSLink } from 'edit-me/types/CMSLink';
+import { faGithub, faLinkedin, faNpm } from '@fortawesome/free-brands-svg-icons'
+import { CMSLink } from 'edit-me/types/CMSLink'
 
 export const links: CMSLink[] = [
   {
     href: 'https://github.com/rachelslurs',
     icon: faGithub,
     title: 'GitHub',
   },
-  {
-    href: 'https://www.instagram.com/rachelslurz',
-    icon: faInstagram,
-    title: 'Instagram',
-  },
   {
     href: 'https://www.linkedin.com/in/rachelcantor',
     icon: faLinkedin,
@@ -26,5 +16,5 @@ export const links: CMSLink[] = [
     href: 'https://www.npmjs.com/~rachelslurs',
     icon: faNpm,
     title: 'NPM',
-  }
-];
+  },
+]

edit-me/config/resumeConfig.ts

@@ -4,14 +4,14 @@ import {
   ResumeConfig,
   Theme,
   ThemeSetting,
-} from '../types/Config';
+} from '../types/Config'
 
 const config: ResumeConfig = {
-  accentColor: AccentColors.Mint,
-  neutralColor: NeutralColors.Sand,
+  accentColor: AccentColors.Orange,
+  neutralColor: NeutralColors.Gray,
   appTheme: ThemeSetting.System,
   imageTheme: Theme.Light,
   pdfTheme: Theme.Light,
-};
+}
 
-export default config;
+export default config

edit-me/content/achievements/01-some-certification.md

@@ -1,7 +1,8 @@
 ---
-achievement: Some Certification
-organization: Some Program
-completionYear: 2015
+achievement: IxDA Interaction Awards
+organization: Best in Category, Connecting
+completionYear: 2016
+icon: faTrophy
 ---
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultrices in iaculis nunc sed augue lacus viverra vitae congue. Neque viverra justo nec ultrices. Urna nunc id cursus metus aliquam eleifend mi in nulla. Proin sagittis nisl rhoncus mattis rhoncus urna neque viverra. Tristique senectus et netus et malesuada fames ac.
+Edward M. Kennedy Institute for the United States Senate

edit-me/content/achievements/02-another-award.md

@@ -0,0 +1,8 @@
+---
+achievement: Core 77 Design Awards
+organization: Notable Interaction Award
+completionYear: 2016
+icon: faTrophy
+---
+
+Edward M. Kennedy Institute for the United States Senate

edit-me/content/additionalInfo.md

@@ -2,6 +2,5 @@
 title: Hobbies & Interests
 ---
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultrices in iaculis nunc sed augue lacus viverra vitae congue. Neque viverra justo nec ultrices. Urna nunc id cursus metus aliquam eleifend mi in nulla. Proin sagittis nisl rhoncus mattis rhoncus urna neque viverra.
-
-All Markdown files will be rendered as rich text, so you can include features such as [links](#).
+- Birding
+-

edit-me/content/personal.md

@@ -1,8 +1,8 @@
 ---
 givenName: Rachel
 familyName: Cantor
-title: Architect of software, watcher of bears
+title: Senior Full Stack UI Engineer
 location: New York, NY
 ---
 
-A senior full stack engineer with 12+ years experience with a frontend focus, passionate about fostering collaboration, who is eager to explore a new opportunity to apply technical leadership and expertise in an environment that embraces innovation, while delivering measurable value to users.
+A senior engineer with 12+ years experience, with a background spanning the full stack of web development; passionate about delivering exceptional UI/UX; eager to apply technical expertise while delivering measurable value to users.

edit-me/content/professionalExperiences/00-some-company.md

@@ -1,6 +1,6 @@
 ---
 title: Senior Staff Engineer
-organization: Hype
+organization: Hype (formerly Pico)
 startDate: '2017'
 endDate: '2023'
 previousTitles:
@@ -19,12 +19,12 @@ previousTitles:
 ---
 
 - Led architecture and implementation of "Design Pro," a comprehensive design customization initiative, positioning the company as a competitive customizable Link in Bio solution.
-- Planning entailed documentation of anticipated database structure, CRUD operations, transformation of data between frontend and backend, collaborating with Product Head on requirements.
-- Migrated to the proposed database structure, added and amended REST endpoints, created packages for the purpose of transforming data between the API response and the CSS styles applied to the page. 
+- Planning entailed [documentation](https://rcantor.notion.site/Design-Pro-392156c7f47b41c5b647f6563f4c6f0d) of anticipated database structure, CRUD operations, transformation of data between frontend and backend, collaborating with Product Head on requirements.
+- Migrated to the proposed database structure, added and amended REST endpoints, created packages for the purpose of transforming data between the API response and the CSS styles applied to the page.
 - Created a reusable components library using Storybook
-- Developed and standardized processes for building and releasing internal packages using yarn v3 and the GitHub package registry. 
+- Developed and standardized processes for building and releasing internal packages using yarn v3 and the GitHub package registry.
 - Architected and implemented key product initiatives, broke down complex product initiatives into manageable epics and tasks.
-- Led evaluation of libraries and frameworks, driving adoption to enhance UX and DX. 
+- Led evaluation of libraries and frameworks, driving adoption to enhance UX and DX.
 - Pivoted landing pages to a “link in bio” offering.
 - Created the end-user portal for publishers and later, link in bio users to be able to edit their settings, provide credit card info, and modify the look and content of their popups and landing pages using the Next.js framework and React Final Form library..
-- Built a Wordpress plugin in use by publishers for incentivizing readers to subscribe and register for email lists. 
+- Built a Wordpress plugin in use by publishers for incentivizing readers to subscribe and register for email lists.

package.json

@@ -33,16 +33,14 @@
     "@fortawesome/free-brands-svg-icons": "6.5.1",
     "@fortawesome/free-solid-svg-icons": "6.5.1",
     "@fortawesome/react-fontawesome": "0.2.0",
-    "@headlessui/react": "1.7.18",
+    "@headlessui/react": "^2.0.0-alpha.4",
     "@radix-ui/colors": "3.0.0",
-    "@react-pdf/renderer": "3.3.4",
     "class-variance-authority": "0.7.0",
     "contentlayer": "0.3.4",
     "next": "14.1.0",
     "next-contentlayer": "0.3.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-pdf-html": "1.2.0",
     "tailwind-merge": "2.2.1"
   },
   "devDependencies": {
@@ -66,4 +64,4 @@
     "webpack": "5.90.1",
     "windy-radix-palette": "2.0.0-beta.7"
   }
-}
+}

src/app/layout.tsx

@@ -1,43 +1,43 @@
-import * as colors from '@radix-ui/colors';
-import { Metadata, Viewport } from 'next';
-import { Albert_Sans, JetBrains_Mono } from 'next/font/google';
-import { PropsWithChildren } from 'react';
-import resumeConfig from '../../edit-me/config/resumeConfig';
+import * as colors from '@radix-ui/colors'
+import { Metadata, Viewport } from 'next'
+import { Inter, JetBrains_Mono } from 'next/font/google'
+import { PropsWithChildren } from 'react'
+import resumeConfig from '../../edit-me/config/resumeConfig'
 
 // ICONS CONFIG
-import { config } from '@fortawesome/fontawesome-svg-core';
-config.autoAddCss = false;
+import { config } from '@fortawesome/fontawesome-svg-core'
+config.autoAddCss = false
 
 // STYLES
-import { personal } from '@content';
-import '@fortawesome/fontawesome-svg-core/styles.css';
-import { headers } from 'next/headers';
-import { protocol, vercelURL } from 'src/helpers/env';
-import { fullName } from 'src/helpers/utils';
-import { twMerge } from 'tailwind-merge';
-import { ThemeSetting } from '../../edit-me/types/Config';
-import './globals.css';
+import { personal } from '@content'
+import '@fortawesome/fontawesome-svg-core/styles.css'
+import { headers } from 'next/headers'
+import { protocol, vercelURL } from 'src/helpers/env'
+import { fullName } from 'src/helpers/utils'
+import { twMerge } from 'tailwind-merge'
+import { ThemeSetting } from '../../edit-me/types/Config'
+import './globals.css'
 
-const accentColor = resumeConfig.accentColor;
+const accentColor = resumeConfig.accentColor
 
-const albert = Albert_Sans({
+const inter = Inter({
   display: 'swap',
   subsets: ['latin'],
-  variable: '--font-albert',
-});
+  variable: '--font-inter',
+})
 
 const jetBrainsMono = JetBrains_Mono({
   display: 'swap',
   subsets: ['latin'],
   variable: '--font-jetbrains-mono',
-});
+})
 
 export const generateMetadata = async (): Promise<Metadata> => {
-  const host = headers().get('host');
-  const baseURL = `${protocol}://${host || vercelURL}`;
-  const siteName = `${fullName} Professional Résumé`;
-  const title = `Résumé | ${fullName} | Somewhere`;
-  const description = `Professional résumé for ${fullName}.`;
+  const host = headers().get('host')
+  const baseURL = `${protocol}://${host || vercelURL}`
+  const siteName = `${fullName} Resume`
+  const title = `${fullName} Resume | New York, NY`
+  const description = `Professional resume for ${fullName}.`
 
   return {
     metadataBase: new URL(baseURL),
@@ -46,7 +46,7 @@ export const generateMetadata = async (): Promise<Metadata> => {
     creator: fullName,
     description,
     generator: 'Next.js',
-    keywords: ['resume', fullName, 'next.js', 'pdf'],
+    keywords: ['resume', fullName, 'next.js', 'typescript', 'tailwindcss'],
     openGraph: {
       type: 'profile',
       firstName: personal.givenName,
@@ -63,22 +63,22 @@ export const generateMetadata = async (): Promise<Metadata> => {
       description,
       title,
     },
-  };
-};
+  }
+}
 
 export const viewport: Viewport = {
   initialScale: 1,
   // @ts-ignore
   themeColor: colors[accentColor][`${accentColor}9`],
   width: 'device-width',
-};
+}
 
 const RootLayout: React.FC<PropsWithChildren> = async ({ children }) => {
   return (
     <html
       lang="en"
       className={twMerge(
-        albert.variable,
+        inter.variable,
         jetBrainsMono.variable,
         resumeConfig.appTheme === ThemeSetting.Dark && 'dark',
       )}
@@ -87,7 +87,7 @@ const RootLayout: React.FC<PropsWithChildren> = async ({ children }) => {
         {children}
       </body>
     </html>
-  );
-};
+  )
+}
 
-export default RootLayout;
+export default RootLayout

src/app/opengraph-image.tsx

@@ -1,17 +1,17 @@
-import resumeConfig from 'edit-me/config/resumeConfig';
-import { ImageResponse } from 'next/og';
-import { getAccentColor, getNeutralColor } from 'src/helpers/colors';
-import { fullName } from 'src/helpers/utils';
+import resumeConfig from 'edit-me/config/resumeConfig'
+import { ImageResponse } from 'next/og'
+import { getAccentColor, getNeutralColor } from 'src/helpers/colors'
+import { fullName } from 'src/helpers/utils'
 
-const theme = resumeConfig.imageTheme;
+const theme = resumeConfig.imageTheme
 
-export const alt = 'Professional Résumé';
-export const contentType = 'image/png';
-export const runtime = 'edge';
+export const alt = 'Professional Resume'
+export const contentType = 'image/png'
+export const runtime = 'edge'
 export const size = {
   width: 1200,
   height: 630,
-};
+}
 
 export default async function og() {
   return new ImageResponse(
@@ -45,7 +45,7 @@ export default async function og() {
             }}
             tw="text-6xl"
           >
-            Professional Résumé
+            Professional Resume
           </div>
           <div
             style={{ color: getAccentColor(12, theme) }}
@@ -56,5 +56,5 @@ export default async function og() {
         </div>
       </div>
     ),
-  );
+  )
 }

src/app/page.tsx

@@ -1,21 +1,18 @@
-import AboutMe from 'src/components/Articles/AboutMe';
-import Achievements from 'src/components/Articles/Achievements';
-import { AdditionalInfo } from 'src/components/Articles/AdditionalInfo';
-import { ContactInformation } from 'src/components/Articles/ContactInformation';
-import Professional from 'src/components/Articles/Professional';
-import Skills from 'src/components/Articles/Skills';
-import { Footer } from 'src/components/Footer/Footer';
-import { Header } from 'src/components/Header/Header';
+import AboutMe from 'src/components/Articles/AboutMe'
+import Achievements from 'src/components/Articles/Achievements'
+import Professional from 'src/components/Articles/Professional'
+import Skills from 'src/components/Articles/Skills'
+import { Footer } from 'src/components/Footer/Footer'
+import { Header } from 'src/components/Header/Header'
 
 const Page: React.FC<PageProps> = () => {
   return (
     <>
       <Header />
 
       <div className="container">
-        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+        <div className="grid grid-cols-1">
           <AboutMe />
-          <ContactInformation />
         </div>
 
         <div className="mt-12">
@@ -29,15 +26,11 @@ const Page: React.FC<PageProps> = () => {
         <div className="mt-12">
           <Achievements />
         </div>
-
-        <div className="mt-12">
-          <AdditionalInfo />
-        </div>
       </div>
 
       <Footer />
     </>
-  );
-};
+  )
+}
 
-export default Page;
+export default Page

src/components/Articles/AboutMe.tsx

@@ -1,15 +1,16 @@
-import { personal } from '@content';
-import React from 'react';
-import Prose from '../Prose/Prose';
-import { SectionHeading } from '../SectionHeading/SectionHeading';
+import { personal } from '@content'
+import React from 'react'
+import Prose from '../Prose/Prose'
 
 const AboutMe: React.FC = () => {
   return (
-    <article>
-      <SectionHeading level={3} text="About Me" />
-      <Prose html={personal.body.html} />
-    </article>
-  );
-};
+    <>
+      <Prose
+        html={personal.body.html}
+        className="mt-8 max-w-[36rem] xl:max-w-[44rem]"
+      />
+    </>
+  )
+}
 
-export default AboutMe;
+export default AboutMe