Add new page

.me/package.json

@@ -3,8 +3,8 @@
   "version": "0.0.1",
   "description": "Gatsby.js V2 starter template based on Resume by startbootstrap – site for @guicheffer",
   "engines": {
-    "node": "14",
-    "npm": "8"
+    "node": "19",
+    "npm": "9"
   },
   "repository": {
     "type": "git",
@@ -15,22 +15,23 @@
     "email": "[email protected]"
   },
   "dependencies": {
-    "gatsby": "^2.20.2",
-    "gatsby-plugin-manifest": "^2.3.1",
-    "gatsby-plugin-offline": "^3.1.0",
-    "gatsby-plugin-open-graph-images": "^0.1.6",
-    "gatsby-plugin-react-helmet": "^3.2.0",
-    "gatsby-plugin-s3": "^0.3.8",
-    "gatsby-plugin-sass": "^2.2.0",
-    "node-sass": "^4.13.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-helmet": "^5.2.1",
-    "react-images": "^1.1.0",
+    "gatsby": "^5.12.9",
+    "gatsby-plugin-manifest": "^5.12.3",
+    "gatsby-plugin-offline": "^6.12.3",
+    "gatsby-plugin-open-graph-images": "^0.1.8",
+    "gatsby-plugin-react-helmet": "^6.12.0",
+    "gatsby-plugin-s3": "^0.4.1",
+    "gatsby-plugin-sass": "^6.12.3",
+    "node-sass": "^9.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
+    "react-images": "^1.1.7",
     "react-scrollspy": "^3.4.2",
     "smoothscroll-polyfill": "^0.4.4"
   },
   "scripts": {
+    "start": "npm run develop",
     "develop": "gatsby develop",
     "build": "npm run clean && gatsby build",
     "deploy": "gatsby-plugin-s3 deploy --yes",
@@ -40,9 +41,9 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {
-    "gh-pages": "^2.0.1",
-    "prettier": "^1.17.0",
-    "rimraf": "^3.0.2"
+    "gh-pages": "^6.0.0",
+    "prettier": "^3.0.3",
+    "rimraf": "^5.0.5"
   },
   "keywords": [
     "gatsby",

.me/src/assets/sass/_variables.scss

@@ -1,7 +1,4 @@
-// Variables
-
 // Restate Bootstrap Variables
-
 $white: #fff !default;
 $gray-100: #f8f9fa !default;
 $gray-200: #e9ecef !default;

.me/src/assets/sass/tolu.scss

@@ -0,0 +1,60 @@
+@import 'variables.scss';
+
+body {
+  padding :0;
+}
+
+header {
+  text-align: center;
+}
+
+img {
+  width: 100vw;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  margin-top: 16px;
+  gap: 4px;
+}
+
+.announcement-text {
+  font-size: 16px;
+}
+
+.gift-button {
+  background-color: #FFF;
+  color: #000;
+  padding: 10px 20px;
+  border: 1px solid #333;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.gift-button:hover {
+  background-color: #000;
+  border-color: #FFF;
+  color: #FFF;
+}
+
+@media (min-width: 999px) {
+  .guicheffer-me {
+    display: flex;
+    position: absolute;
+    top: 30%;
+  }
+
+  .picture {
+    align-items: center;
+    display: flex;
+    height: 100%;
+    justify-content: space-between;
+  }
+
+  img {
+    border-radius: 16px;
+    width: 50vw;
+  }
+}