added tripser blog project

README.md

@@ -32,9 +32,9 @@ This will trigger Github Action and deploy the changes to gh-pages.
 
 ## TODO
 
+- add new projects (kineval, todolist?)
 - shorten cv old web experience? + add senior dev? + new skills to filter?
 - optimize images with script
-- add new projects (tripser, kineval, todolist?)
 - review images (avoid bg-img, use different resolutions: https://dev.to/builderio/optimal-images-in-html-5bg9)
 - review design: https://anthonyhobday.com/sideprojects/saferules/
 
@@ -46,6 +46,8 @@ X.X
 - add more images of features/pages?
 
 Blog posts
+- firebase series: rules, cloud fx, diff env., backup
+- react advanced?
 - use prism in your nextjs markdown (+scss)
 - css posts: dropdown, input with label animation
 - use mdx with nextjs

components/tech.tsx

@@ -11,13 +11,16 @@ import {
   SiCsharp,
   SiUmbraco,
   SiRedux,
-  SiMaterialui,
+  SiMui,
   SiChakraui,
   SiStyledcomponents,
   SiNodedotjs,
   SiFirebase,
   SiMongodb,
   SiJest,
+  SiMdx,
+  SiI18Next,
+  SiNextdotjs,
 } from 'react-icons/si';
 
 type TechProps = {
@@ -45,9 +48,12 @@ export default function Tech({ name, color }: TechProps) {
         <SiAngular color={color ? '#A6120D' : ''} title="Angular" aria-labelledby="Angular" />
       ) : null}
       {name === 'react' ? <SiReact color={color ? '#61DBFB' : ''} title="React" aria-labelledby="React" /> : null}
+      {name === 'next.js' ? (
+        <SiNextdotjs color={color ? '#000000' : ''} title="Next.js" aria-labelledby="Next.js" />
+      ) : null}
       {name === 'redux' ? <SiRedux color={color ? '#764ABC' : ''} title="Redux" aria-labelledby="Redux" /> : null}
       {name === 'material-ui' ? (
-        <SiMaterialui color={color ? '#007fff' : ''} title="Material UI" aria-labelledby="Material UI" />
+        <SiMui color={color ? '#007fff' : ''} title="Material UI" aria-labelledby="Material UI" />
       ) : null}
       {name === 'chakra-ui' ? (
         <SiChakraui color={color ? '#3cc7bd' : ''} title="Chakra UI" aria-labelledby="Chakra UI" />
@@ -56,6 +62,8 @@ export default function Tech({ name, color }: TechProps) {
         <SiStyledcomponents title="Styled components" aria-labelledby="Styled components" />
       ) : null}
       {name === 'jest' ? <SiJest color={color ? '#99415B' : ''} title="Jest" aria-labelledby="Jest" /> : null}
+      {name === 'mdx' ? <SiMdx color={color ? '#1b1f24' : ''} title="MDX" aria-labelledby="MDX" /> : null}
+      {name === 'i18n' ? <SiI18Next color={color ? '#009788' : ''} title="I18N" aria-labelledby="I18N" /> : null}
       {name === 'node.js' ? (
         <SiNodedotjs color={color ? '#689F63' : ''} title="Node.js" aria-labelledby="Node.js" />
       ) : null}

data/projects.js

@@ -1,21 +1,20 @@
 const projects = [
   {
-    slug: 'omega',
-    title: 'Omega',
-    link: '/projects/omega',
-    current: 'https://www.parcomega.ca/',
-    past: 'https://web.archive.org/web/20211213130150/https://app.staging.parcomega.ca/en/',
-    img: '/images/projects/omega.jpg',
-    screen: '/images/projects/omega-screen.png',
-    modified: '2023-11-27',
-    intro:
-      'Omega zoo booking website with React. Information about the park and its animals as well as ability to book your stay, table or entrance via ticketing system.',
-    tech: ['react', 'html', 'css', 'javascript'],
+    slug: 'tripser-blog',
+    title: 'Tripser Blog',
+    link: '/projects/tripser-blog',
+    current: 'https://tripser.blog/',
+    past: 'https://web.archive.org/web/20240403175710/https://tripser.blog/',
+    img: '/images/projects/tripser-blog.jpg',
+    screen: '/images/projects/tripser-blog-screen.jpg',
+    modified: '2024-07-15',
+    intro: 'Tripser blog built with Next.js, Sass, i18n and MDX.',
+    tech: ['react', 'next.js', 'mdx', 'sass', 'i18n'],
     chall: [
-      'Integration and front-end development from Figma designs to React and CSS-in-JS coding',
-      'Use Styled-system and Emotion for styling',
-      'Complex components in the likes of a Swiper, a Carousel, Deep navigation bar and Filtering',
-      'Used recent CSS features in the names of Image clip-path and CSS grids',
+      'Ensure great SEO practice in the code',
+      'Handle translation in the blog with i18n',
+      'Develop a rich text editor to create markdown content',
+      'Set up and develop MDX components',
     ],
     homepage: true,
     type: 'pro',
@@ -39,6 +38,27 @@ const projects = [
       'Ensured responsiveness of the different components of the site',
       'Special outlined style on titles',
     ],
+    homepage: true,
+    type: 'pro',
+  },
+  {
+    slug: 'omega',
+    title: 'Omega',
+    link: '/projects/omega',
+    current: 'https://www.parcomega.ca/',
+    past: 'https://web.archive.org/web/20211213130150/https://app.staging.parcomega.ca/en/',
+    img: '/images/projects/omega.jpg',
+    screen: '/images/projects/omega-screen.png',
+    modified: '2023-11-27',
+    intro:
+      'Omega zoo booking website with React. Information about the park and its animals as well as ability to book your stay, table or entrance via ticketing system.',
+    tech: ['react', 'html', 'css', 'javascript'],
+    chall: [
+      'Integration and front-end development from Figma designs to React and CSS-in-JS coding',
+      'Use Styled-system and Emotion for styling',
+      'Complex components in the likes of a Swiper, a Carousel, Deep navigation bar and Filtering',
+      'Used recent CSS features in the names of Image clip-path and CSS grids',
+    ],
     homepage: false,
     type: 'pro',
   },
@@ -123,6 +143,21 @@ const projects = [
     homepage: false,
     type: 'pro',
   },
+  // {
+  //   slug: 'kine-clarinval',
+  //   title: 'Kine Clarinval',
+  //   link: '/projects/kine-clarinval',
+  //   current: 'https://kine-clarinval.be/',
+  //   past: '',
+  //   img: '/images/projects/kine-clarinval.jpg',
+  //   screen: '/images/projects/kine-clarinval-screen.png',
+  //   modified: '2024-07-27',
+  //   intro: '',
+  //   tech: ['react', 'firebase', 'mdx', 'sass'],
+  //   chall: [''],
+  //   homepage: true,
+  //   type: 'pro',
+  // },
   {
     slug: 'shop',
     title: 'Shop',
@@ -140,7 +175,7 @@ const projects = [
       'Use Styled-components to design components',
       'Testing with Jest and React Testing Library',
     ],
-    homepage: true,
+    homepage: false,
     type: 'perso',
   },
   {

package.json

@@ -37,7 +37,7 @@
     "prop-types": "15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-icons": "4.3.1",
+    "react-icons": "5.2.1",
     "remark-frontmatter": "4.0.1",
     "sass": "1.37.5",
     "sharp": "0.32.1"