Update for 2026

.groupedtimelineinclude

@@ -0,0 +1,32 @@
+# Files to track with Grouped Timeline
+# Add patterns for files you want included in the Grouped Timeline
+# Use ! to exclude files/folders (anti-patterns)
+# After changing this file, refresh the Grouped Timeline view to see the updates
+
+# Track all files by default (commented out because it might be slow for large projects)
+# *
+# */**
+
+# Common exclusions
+!node_modules/**
+!dist/**
+!out/**
+!build/**
+!.git/**
+!coverage/**
+!.next/**
+!.cache/**
+!tmp/**
+!temp/**
+
+# Exclude common large/binary files
+!*/**.exe
+!*/**.dll
+!*/**.zip
+!*/**.tar
+!*/**.gz
+!*/**.rar
+!*/**.7z
+!*/**.iso
+!*/**.bin
+!*/**.log

README.md

@@ -1,7 +1,5 @@
 # My Developer Portfolio
 
-![AndyLech com - Scrolling Capture](https://github.com/andylech/andylech.github.io/assets/12124004/1c36cd07-37d1-405b-945b-b8f70e28d196)
-
 [Live demo on AndyLech.com](https://andylech.com)
 
 ## Background

package.json

@@ -16,8 +16,7 @@
     "react-reveal": "^1.2.2",
     "react-scripts": "^5.0.1",
     "react-test-renderer": "^16.10.2",
-    "react-twitter-embed": "3.0.3",
-    "sass": "^1.32.8"
+    "react-twitter-embed": "3.0.3"
   },
   "scripts": {
     "predeploy": "npm run build",
@@ -53,6 +52,14 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "dotenv": "^8.2.0",
-    "prettier": "2.8.8"
+    "prettier": "2.8.8",
+    "sass": "^1.101.0",
+    "vite": "^8.0.16"
+  },
+  "allowScripts": {
+    "@parcel/watcher": true,
+    "core-js": true,
+    "core-js-pure": true,
+    "sharp": true
   }
 }

src/components/talkCard/TalkCard.js

@@ -15,12 +15,12 @@ export default function TalkCard({talkDetails}) {
           <p className="talk-card-subtitle">{talkDetails.subtitle}</p>
 
           <div className="card-footer-button-div">
-            {/* <a href={talkDetails.slides_url} target="_" className="talk-button">
-              Slides
-            </a> */}
-            <a href={talkDetails.event_url} target="_" className="talk-button">
+            <a href={talkDetails.event_url} target="_blank" rel="noreferrer noopener" className="talk-button">
               Session
             </a>
+            <a href={talkDetails.slides_url} target="_blank" rel="noreferrer noopener" className="talk-button">
+              Slides
+            </a>
           </div>
         </div>
       </div>

src/containers/talks/Talks.js

@@ -14,15 +14,6 @@ export default function Talks() {
     <div className="section-div" id="talks">
       <div className="talks-content-div">
         <h1 className="section-title">{talkSection.title}</h1>
-        {/* <p
-          className={
-            isDark
-              ? "dark-mode talk-header-subtitle"
-              : "subTitle talk-header-subtitle"
-          }
-        >
-          {talkSection.subtitle}
-        </p> */}
         <div className="button-div">
           <Button
             className="project-button"
@@ -31,21 +22,23 @@ export default function Talks() {
             href={talkSection.sessionizeProfile}
           />
         </div>
-        {talkSection.talks.map((talk, i) => {
-          return (
-            <TalkCard
-              key={i}
-              talkDetails={{
-                title: talk.title,
-                subtitle: talk.subtitle,
-                slides_url: talk.slides_url,
-                event_url: talk.event_url,
-                image: talk.image,
-                isDark
-              }}
-            />
-          );
-        })}
+        <div className="talk-cards-div">
+          {talkSection.talks.map((talk, i) => {
+            return (
+              <TalkCard
+                key={i}
+                talkDetails={{
+                  title: talk.title,
+                  subtitle: talk.subtitle,
+                  slides_url: talk.slides_url,
+                  event_url: talk.event_url,
+                  image: talk.image,
+                  isDark
+                }}
+              />
+            );
+          })}
+        </div>
       </div>
     </div>
   );

src/containers/talks/Talks.scss

@@ -2,12 +2,40 @@
 
 .talk-cards-div {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
-  gap: 1rem 1rem;
+  grid-template-columns: repeat(1, minmax(280px, 1fr));
+  gap: 1rem;
 }
 
 // TODO Move this?
 .button-div {
   display: flex;
   margin-top: 20px;
 }
+
+/* Media Queries */
+
+// Determine # of card columns by viewport resolution
+
+@media (min-width: 1440px) {
+  .talk-cards-div {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 2160px) {
+  .talk-cards-div {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (min-width: 2880px) {
+  .talk-cards-div {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+@media (min-width: 3600px) {
+  .talk-cards-div {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}

src/containers/workExperience/WorkExperience.scss

@@ -8,25 +8,25 @@
 
 // Determine # of card columns by viewport resolution
 
-@media (min-width: 1280px) {
+@media (min-width: 1440px) {
   .experience-cards-div {
     grid-template-columns: repeat(2, 1fr);
   }
 }
 
-@media (min-width: 1920px) {
+@media (min-width: 2160px) {
   .experience-cards-div {
     grid-template-columns: repeat(3, 1fr);
   }
 }
 
-@media (min-width: 2560px) {
+@media (min-width: 2880px) {
   .experience-cards-div {
     grid-template-columns: repeat(4, 1fr);
   }
 }
 
-@media (min-width: 3200px) {
+@media (min-width: 3600px) {
   .experience-cards-div {
     grid-template-columns: repeat(5, 1fr);
   }