rephrase content

.eslintignore

@@ -7,4 +7,5 @@ node_modules
 /scripts/
 handle-pdf.js
 webpack.config.babel.js
-unused/
+unused/
+todo.js

.gitignore

@@ -21,6 +21,7 @@ vscode
 unused.html
 inter/
 handle-pdf.js
+todo.js
 
 src/imgprojstart2/
 

README.md

@@ -171,6 +171,12 @@ First, I keep all project images within the same directory on the same level.
 
 ---
 
+## Resources
 - [placeholder images](https://dummyimage.com/1600x900/000/000&text=.)
 - [textures](https://www.transparenttextures.com/)
 - [textures-two](https://www.toptal.com/designers/subtlepatterns/)
+- [vercel-icons](https://vercel.com/design/icons)
+- [react-icons](https://react-icons.github.io/react-icons/search)
+- [Neue-Montreal-Font](https://pangrampangram.com/products/neue-montreal)
+- [Basement-Expanded-Font](https://grotesque.basement.studio/)
+- []

scripts/testing/test-index.js

@@ -11,7 +11,6 @@ import measureFocus from './measure-focus';
  * @param {boolean} width 
  */
 const enableTesting = (focus, memory, shift, width) => {
-
   if (focus) {
     measureFocus();
   }

src/components/contact-modal/contact-menu.js

@@ -1,5 +1,5 @@
-import { mailtoHref } from '../../data/constants';
 import badgeData from '../../data/json/contact/contact-modal.json';
+import personalContactData from '../../data/json/contact/contact-personal.json';
 import useCopyToClipboard from '../../hooks/handle-copy';
 import createButton from '../ui/button';
 import createLink from '../ui/link';
@@ -77,6 +77,8 @@ const createCmBottomCell = (
   dataText,
   imgs,
 ) => {
+  const mailToSubject = personalContactData.mailto;
+
   const menuCell = document.createElement('div');
   menuCell.classList.add('cm-right--bottom__cell');
   const menuSpan = document.createElement('span');
@@ -85,7 +87,7 @@ const createCmBottomCell = (
   menuCellIcons.classList.add('cm-right--bottom__cell-icons');
 
   if (btnHref) {
-    const menuLink = createLink(mailtoHref, 'Open Mail-to', 'cm-email-goto', null, '_self');
+    const menuLink = createLink(mailToSubject, 'Open Mail-to', 'cm-email-goto', null, '_self');
     const menuLinkImg = document.createElement('img');
     menuLinkImg.classList.add('img-icon');
     menuLinkImg.src = imgs[0].src;

src/components/form/form-utilities.js

@@ -1,3 +1,5 @@
+const googleSheetsFormId = process.env.SHEET_ID;
+
 const checkEmailValidity = (email) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
 
 const checkPhoneValidity = (phone) => phone && phone.length >= 10;
@@ -28,5 +30,6 @@ export {
   checkEmailValidity,
   checkPhoneValidity,
   checkValidNameMessage,
+  googleSheetsFormId,
   sanitizeInput,
 };

src/components/form/form.js

@@ -5,6 +5,7 @@ import {
   checkEmailValidity,
   checkPhoneValidity,
   checkValidNameMessage,
+  googleSheetsFormId,
   sanitizeInput,
 } from './form-utilities';
 
@@ -25,10 +26,8 @@ const initForm = () => {
     const selectedOption = e.target.value;
     if (selectedOption === 'phone') {
       contactValueInput.type = 'tel';
-      // contactValueInput.placeholder = 'Enter your phone number';
     } else if (selectedOption === 'email') {
       contactValueInput.type = 'email';
-      // contactValueInput.placeholder = 'Enter your email address';
     }
   };
 
@@ -172,7 +171,7 @@ const initForm = () => {
     disableForm();
     toggleSkeleton();
     createSuccessMessage();
-    fetch(`https://script.google.com/macros/s/${process.env.SHEET_ID}/exec`, {
+    fetch(`https://script.google.com/macros/s/${googleSheetsFormId}/exec`, {
       method: 'POST',
       body: formData,
     })

src/components/projects/project-tabs.js

@@ -1,3 +1,11 @@
+/**
+ *
+ * @param {string} title
+ * @param {object} identifiers
+ * @param {number} tabIdx
+ * @param {boolean} checked
+ * @param {function} listener
+ */
 const createProjectTabs = (title, identifiers, tabIdx, checked, listener) => {
   const { tabId, projName, suffix } = identifiers;
   const labSm = title[0];
@@ -16,7 +24,7 @@ const createProjectTabs = (title, identifiers, tabIdx, checked, listener) => {
   label.dataset.tabIdx = tabIdx;
   label.setAttribute('for', tabId);
   label.ariaLabel = labelTxt;
-  label.textContent = `${title} `;
+  label.textContent = `${title}`;
   wrapper.append(input, label);
 
   input.addEventListener('change', () => {

src/components/projects/projects.js

@@ -1,6 +1,6 @@
 import { projectImageType } from '../../data/constants';
 import cardData from '../../data/json/projects/projects-card-data.json';
-import getImgArrayFormatted from '../../utilities/get-imgarr-formatted';
+import getImgArray from '../../utilities/get-imgarr-formatted';
 import svgIcons from '../../utilities/get-svg';
 import handlePopupImage from './handle-popup-image';
 import handleTab from './handle-project-tabs';
@@ -10,6 +10,19 @@ import createAuditModal from './project-modal-audit';
 import createProjectModal from './project-modal-overview';
 import createProjectTabs from './project-tabs';
 
+/**
+ *
+ * @param {HTMLPictureElement} picture
+ * @param {Array<object>} images
+ * images format example:
+ * [
+    {
+        "src": "images/cday1.8e769cb7.webp",
+        "alt": "cdaylgdark",
+        "media": "(min-width: 721px)"
+    },
+  ]
+ */
 const configProjectPicture = (picture, images) => {
   const img = picture.querySelector('img');
   const sources = picture.querySelectorAll('source');
@@ -20,6 +33,8 @@ const configProjectPicture = (picture, images) => {
     source.media = media;
     source.type = projectImageType;
     img.srcset += src;
+
+    // set first image in provided images array as default
     if (i === 0) {
       img.src = src;
       img.srcset = `${src} 1x, `;
@@ -45,21 +60,31 @@ const createProjectHeader = (projectCell, tabs, projLink, githubLink, title, pub
   const projectHeader = projectCell.querySelector('.project-content__header');
   // Only create tabs if there are more than 1, if a project does not have tabs, it will
   // be represented by an empty array
+
+  // format title to be used as ID prefix for tabs
   if (tabs.length > 1) {
     const tabsWrapper = projectHeader.querySelector('.pc__header-tabs');
+    const formattedTitle = title.toLowerCase().replaceAll(/[^a-z]/g, '');
+
     for (let i = 0; i < tabs.length; i += 1) {
       const tab = tabs[i];
       const identifiers = {
-        tabId: `proj-${title}-${tab.toLowerCase()}`,
-        projName: title,
+        tabId: `${formattedTitle}-${tab.toLowerCase()}`,
+        projName: formattedTitle,
         suffix: 'View',
       };
-      tabsWrapper.append(createProjectTabs(tab, identifiers, i + 1, i === 0, handleTab));
+
+      tabsWrapper.append(createProjectTabs(
+        tab, // string: tab value
+        identifiers, // object created above
+        i + 1, // number: tab index
+        i === 0, // boolean: input checked
+        handleTab, // function: handle tab change
+      ));
     }
   }
 
   const publishedText = projectCell.querySelector('.content-published--text');
-  // publishedText.textContent = `— ${published}`;
   publishedText.textContent = `- ${published}`;
 
   // set search bar link and title
@@ -124,22 +149,25 @@ const createProjectFooter = (projectCell, stacks, description, title, lighthouse
   overviewBtn.addEventListener('click', createProjectModal);
 };
 
+/**
+ * A skeleton of each project card already exists in the HTML
+ * This function fills in the skeleton with data, images, and sets up any event listeners
+ *
+ * If the project card needs tabs, aka more than 1 image, ensure that a temporary imageSet
+ * is provided within 'imageSets' so that only the first image is loaded initially
+ *
+ * I've added two html templates within the '../templates' folder, one for a
+ * project with tabs, and one without.
+ * @returns {void}
+ */
 const createProjectCards = () => {
   const projectCells = document.querySelectorAll('.project-cell');
   const {
     cal, blog, monthPicker, markdown,
   } = imageSets;
-  const {
-    calendarCard, blogCard, monthPickerCard, markdownCard,
-  } = cardData;
-  const imgArrays = [
-    getImgArrayFormatted(cal),
-    getImgArrayFormatted(blog),
-    getImgArrayFormatted(monthPicker),
-    getImgArrayFormatted(markdown),
-  ];
-
-  const cardDataArray = [calendarCard, blogCard, monthPickerCard, markdownCard];
+  // remove the last element from data array, which is the project menu
+  const cardDataArray = Object.values(cardData).slice(0, -1);
+  const imgArrays = getImgArray([cal, blog, monthPicker, markdown]);
 
   for (let i = 0; i < projectCells.length; i += 1) {
     const {

src/components/ui/button.js

@@ -3,19 +3,23 @@ const createButton = (
   btnClass,
   title = '',
   ariaLabel = 'button',
-
 ) => {
   const btn = document.createElement('button');
+
   if (btnClass) {
     btn.setAttribute('class', btnClass);
   }
+
   if (textContent) {
     btn.textContent = textContent;
   }
+
   if (title) {
     btn.title = title;
   }
+
   btn.ariaLabel = ariaLabel;
+
   return btn;
 };
 

src/components/ui/image-popup.js

@@ -1,6 +1,13 @@
 import closeOnEscManager from '../../hooks/handle-closeonesc';
 import useHandleModalOffset from '../../hooks/handle-modal-offset';
 
+/**
+ * Allows images in the project section to be clicked on and
+ * viewed in their full size as a popup
+ *
+ * @param {HTMLImageElement} img
+ * @returns {void}
+ */
 const configCreateFullImagePopup = (img) => {
   const popupPicture = document.querySelector('.popup-picture');
   const popupPictureImgWrapper = popupPicture.querySelector('.popup-picture__imgwrapper');

src/data/constants.js

@@ -2,4 +2,3 @@ export const aspectSmallHeight = 540;
 export const aspectSmallWidth = 720;
 export const aspectLargeWidth = 1600;
 export const projectImageType = 'image/webp';
-export const mailtoHref = 'mailto:[email protected]?subject=Contacting%20you%20from%20Portfolio';

src/data/json/contact/contact-personal.json

@@ -0,0 +1,6 @@
+{
+  "mailto": "mailto:[email protected]?subject=Contacting%20you%20from%20Portfolio",
+  "phone": "9709882548",
+  "email": "[email protected]",
+  "name": "Chase Ottofy"
+}

src/data/json/section-overviews-data.json

@@ -1,4 +1,4 @@
 {
-  "projectsExcerpt": "Instead of only showcasing my latest work, I've chosen four projects from the beginning and current stage of my learning. By showcasing early efforts like the Google Calendar clone, I am in no way trying to represent my current skillset, but rather, who I am as a developer, and who I continue to strive to be - someone who will output high quality work, regardless of whether or not they have the immediate knowledge to do so. If you are only interested in my current skillset, the Next.js Blog and Monthpicker Plugin are my two most recent projects.",
-  "skillsExcerpt": "I believe in the principle that form follows function. A stellar user experience should arise from meticulously planned functionality, and similarly, well-conceived functionality can lead to great user experience. My strengths lie in developing and refining this functionality. I've prioritized building a robust foundation in fundamental web technologies and have utilized modern frameworks to enhance that foundation."
+  "projects": "I've chosen four projects from both the beginning and current stage of my learning. By including early works like the Google Calendar Clone, I am in no way trying to showcase the quality of code, but rather, who I am as a developer, and my consistency in delivering high quality work, regardless of whether or not I have the immediate knowledge to do so.",
+  "skills": "My skills as a front-end web developer are a reflection of my relentless effort to push the very basics of web technologies to their limits. I made a conscious decision early to build a foundation that will last, and after two years of daily effort, I began to utilize modern frameworks and libraries like React, Typescript, and Next.js. Although I only have a year and a half of experience with these technologies, I have never felt disadvantaged when working with them, they have only enhanced my ability to build robust, scalable, and maintainable web applications."
 }

src/data/json/skills/skills-data.json

@@ -1,17 +1,18 @@
 [
   {
     "content": [
-      "Nearly 2 years of experience with React. I have built several projects with it, and have used it in conjunction with Next.js for the past year.",
-      "1 year of experience using React with TypeScript"
+      "Nearly 2 years of experience with React, the last year of which has been exclusively with TypeScript.",
+      "Capable of building apps from the ground up, and do not rely on any libraries or third party packages to do so.",
+      "I've invested a lot of time into learning how React works, and through doing so have refined my approach to get the most out off performance and maintainability. All of my projects are built with the same approach, I prioritize finding the right answer when it comes to React, not the easiest."
     ],
     "imgSrc": "react",
     "title": "React JS"
   },
   {
     "content": [
-      "Familiar with new Nextjs features such as the App Router.",
       "1 year of experience building Next.js applications, all of which are written in TypeScript.",
-      "The only Next.js project I have made public is the blog above in the 'Projects' section. I have built several other projects with Next.js and have tried to cover as many of the features as possible."
+      "Well-versed in the majority of Next.js features, both new and old.",
+      "Have built dozens of projects with Next.js and have carefully refined my approach to get the most out of the framework. My most recent project is a blog built from scratch meant to demonstrate my current skill level, it is featured in the 'Projects' section."
     ],
     "imgSrc": "next",
     "title": "Next.js"
@@ -35,17 +36,17 @@
   },
   {
     "content": [
-      "Automation is important to me, unfortunately there are not many tools I'm aware of that are great at it. I have been honing with Node for a year now and have built several CLI tools to automate various tasks.",
-      "I do not publicly share the majority of these tools, but I will leave them in whatever project I am working on that requires them. This portfolio for example hass a CLI Image Handling Script that automates several annoying tasks relative to image handling such as resizing, applying filters, converting to webp, creating queries, data URIs, and more."
+      "1.5 years of experience with Node JS. I use it for all of my automation and have built dozens of CLI tools with it. Normally I will not share these tools publicly but I left an example of one in this project that handles image optimization, resizing, compression, and more.",
+      "I have not attempted any backend development with Node nor do I plan to. I use it exclusively to refine my workflow and worth with the file system."
     ],
     "imgSrc": "node",
     "title": "Node JS"
   },
   {
     "content": [
-      "I have over 5 years of experience with CSS, enough to know how to re-create any design so long as it doesn't involve canvas magic.",
+      "Over 5 years of experience with CSS, enough to know how to re-create any design so long as it doesn't involve canvas magic.",
       "Am open to using any CSS framework or tooling, some of the ones I am familiar with are: Bootstrap, Tailwind, and Module CSS.",
-      "My eye for design is not great, but I have a keen eye for detail and am adept at identifying UX issues."
+      "Familiar and proficient with recreating designs from Figma, Adobe XD, or any other design tool. I am not great at designing myself due to how long it takes me, but if necessary I can do it, an example being this portfolio."
     ],
     "imgSrc": "css",
     "title": "CSS"
@@ -55,7 +56,7 @@
       "2 years of experience with Webpack.",
       "Familiar with all of the core loading and optimization features in standard webpack.",
       "Have explored many of the more advanced features such as code splitting, tree shaking, and module federation.",
-      "Make it a habit to try out different configurations with each new project. For example, this portfolio utilizes a very underrated plugin called 'html-bundler-webpack-plugin' which allows you to resolve images, fonts, css, and js files from your html files."
+      "Lots of experience debugging webpack issues, and have a good understanding of how to resolve them, and how to avoid them all together."
     ],
     "imgSrc": "webpack",
     "title": "Webpack"