@@ -52,16 +49,15 @@ const ProjectItem: React.FC<{ project: any }> = ({ project }) => {
threshold: 0.1,
});
- const fade = useSpring({
- opacity: inView ? 1 : 0,
- transform: inView ? 'translateY(0)' : 'translateY(20px)',
- });
-
return (
-
-
-
-
{project.title}
{project.languages}
@@ -69,18 +65,18 @@ const ProjectItem: React.FC<{ project: any }> = ({ project }) => {
-
+
);
};
-export default Projects;
\ No newline at end of file
+export default Projects;
From 9ec0f8c5eb5954d39a889a6ecd566c8600120062 Mon Sep 17 00:00:00 2001
From: carsonSgit <92652800+carsonSgit@users.noreply.github.com>
Date: Mon, 22 Jul 2024 01:39:44 -0400
Subject: [PATCH 04/21] fix: Mobile responsiveness
---
src/Components/Projects/Projects.scss | 9 +++++++++
1 file changed, 9 insertions(+)
diff --git a/src/Components/Projects/Projects.scss b/src/Components/Projects/Projects.scss
index 8ece3b7..1bf42aa 100644
--- a/src/Components/Projects/Projects.scss
+++ b/src/Components/Projects/Projects.scss
@@ -78,6 +78,15 @@ $font-color: #61665b;
box-sizing: border-box;
}
+// media query for ProjectContent where position is not absolute
+@media (max-width: 767px) {
+ .ProjectContent {
+ position: relative;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+}
+
.ProjectTitle {
font-size: 1.4em;
color: #fff;
From 892ed50d79d8ccc28920be64d7711de50f4359d6 Mon Sep 17 00:00:00 2001
From: carsonSgit <92652800+carsonSgit@users.noreply.github.com>
Date: Mon, 22 Jul 2024 01:47:40 -0400
Subject: [PATCH 05/21] fix: Font size and padding
---
src/Components/Projects/Projects.scss | 8 ++++----
src/Components/Projects/Projects.tsx | 6 +++---
2 files changed, 7 insertions(+), 7 deletions(-)
diff --git a/src/Components/Projects/Projects.scss b/src/Components/Projects/Projects.scss
index 1bf42aa..56732e8 100644
--- a/src/Components/Projects/Projects.scss
+++ b/src/Components/Projects/Projects.scss
@@ -18,7 +18,7 @@ $font-color: #61665b;
text-align: center;
@media (min-width: 768px) {
- padding: 60px 40px;
+ padding: 0px 40px;
}
}
@@ -28,7 +28,7 @@ $font-color: #61665b;
color: $text-color;
@media (min-width: 768px) {
- font-size: 3em;
+ font-size: 4em;
}
}
@@ -37,8 +37,8 @@ $font-color: #61665b;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
- width: 60em;
- height: 30em;
+ width: 75em;
+ height: 35em;
background-size: cover;
background-position: center;
border-radius: 15px;
diff --git a/src/Components/Projects/Projects.tsx b/src/Components/Projects/Projects.tsx
index 8374657..71e2d4e 100644
--- a/src/Components/Projects/Projects.tsx
+++ b/src/Components/Projects/Projects.tsx
@@ -7,9 +7,9 @@ import './Projects.scss';
const projects = [
{
image: 'DEADWEIGHT_WideThumbnail.png',
- title: 'Pomgradient',
- languages: 'JavaScript, React',
- description: 'Pomegranate is a web-based gradient solution currently in beta that allows you to find, save, and craft gradients with a creative community!',
+ title: 'DEADWEIGHT',
+ languages: 'C#, Unity',
+ description: 'DEADWEIGHT is a game developed for the Kenney Jam 2024.',
github: 'https://github.com/example/pomgradient',
website: 'https://pomgradient.com',
},
From 13050700d81a5c820fb7cac09a1266e17dcca619 Mon Sep 17 00:00:00 2001
From: carsonSgit <92652800+carsonSgit@users.noreply.github.com>
Date: Mon, 22 Jul 2024 01:49:49 -0400
Subject: [PATCH 06/21] chore: Install libraries
---
package-lock.json | 20 ++++++++++++++++++++
package.json | 1 +
2 files changed, 21 insertions(+)
diff --git a/package-lock.json b/package-lock.json
index 9db16e4..ca27e92 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
"react-dom": "^18.3.1",
"react-icons": "^5.2.1",
"react-intersection-observer": "^9.13.0",
+ "react-reveal": "^1.2.2",
"react-router-dom": "^6.25.1",
"react-scripts": "5.0.1",
"react-simple-typewriter": "^5.0.1",
@@ -19690,6 +19691,17 @@
"node": ">=0.10.0"
}
},
+ "node_modules/react-reveal": {
+ "version": "1.2.2",
+ "resolved": "https://registry.npmjs.org/react-reveal/-/react-reveal-1.2.2.tgz",
+ "integrity": "sha512-JCv3fAoU6Z+Lcd8U48bwzm4pMZ79qsedSXYwpwt6lJNtj/v5nKJYZZbw3yhaQPPgYePo3Y0NOCoYOq/jcsisuw==",
+ "dependencies": {
+ "prop-types": "^15.5.10"
+ },
+ "peerDependencies": {
+ "react": "^15.3.0 || ^16.0.0"
+ }
+ },
"node_modules/react-router": {
"version": "6.25.1",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.25.1.tgz",
@@ -37930,6 +37942,14 @@
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
"integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
},
+ "react-reveal": {
+ "version": "1.2.2",
+ "resolved": "https://registry.npmjs.org/react-reveal/-/react-reveal-1.2.2.tgz",
+ "integrity": "sha512-JCv3fAoU6Z+Lcd8U48bwzm4pMZ79qsedSXYwpwt6lJNtj/v5nKJYZZbw3yhaQPPgYePo3Y0NOCoYOq/jcsisuw==",
+ "requires": {
+ "prop-types": "^15.5.10"
+ }
+ },
"react-router": {
"version": "6.25.1",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.25.1.tgz",
diff --git a/package.json b/package.json
index d11647d..75834e7 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
"react-dom": "^18.3.1",
"react-icons": "^5.2.1",
"react-intersection-observer": "^9.13.0",
+ "react-reveal": "^1.2.2",
"react-router-dom": "^6.25.1",
"react-scripts": "5.0.1",
"react-simple-typewriter": "^5.0.1",
From 190927c453ba2872e237092263e3226e9cced962 Mon Sep 17 00:00:00 2001
From: carsonSgit <92652800+carsonSgit@users.noreply.github.com>
Date: Mon, 22 Jul 2024 01:51:56 -0400
Subject: [PATCH 07/21] feat: Implement react spring & Animated div
---
src/Components/Projects/Projects.tsx | 20 ++++++++++++++------
1 file changed, 14 insertions(+), 6 deletions(-)
diff --git a/src/Components/Projects/Projects.tsx b/src/Components/Projects/Projects.tsx
index 71e2d4e..1afd4c5 100644
--- a/src/Components/Projects/Projects.tsx
+++ b/src/Components/Projects/Projects.tsx
@@ -2,6 +2,8 @@ import React from 'react';
import { useInView } from 'react-intersection-observer';
import { FaGithub, FaExternalLinkAlt } from 'react-icons/fa';
import { motion } from 'framer-motion';
+import { useSpring, animated } from 'react-spring';
+import { Link } from 'react-router-dom'; // Import React Router for navigation
import './Projects.scss';
const projects = [
@@ -49,13 +51,19 @@ const ProjectItem: React.FC<{ project: any }> = ({ project }) => {
threshold: 0.1,
});
+ const props = useSpring({
+ opacity: inView ? 1 : 0,
+ transform: inView ? 'translateY(0)' : 'translateY(20px)',
+ config: { tension: 200, friction: 20 }
+ });
+
return (
-
@@ -75,7 +83,7 @@ const ProjectItem: React.FC<{ project: any }> = ({ project }) => {
)}
-
A collection of my favorite works
+
My notable projects...
{projects.map((project, index) => (
))}
@@ -51,18 +53,22 @@ const ProjectItem: React.FC<{ project: any }> = ({ project }) => {
const props = useSpring({
opacity: inView ? 1 : 0,
- transform: inView ? 'scale(1)' : 'scale(0.95)',
+ transform: inView ? 'translateY(0)' : 'translateY(20px)',
config: { tension: 200, friction: 20 }
});
return (
-
{project.title}
@@ -81,7 +87,7 @@ const ProjectItem: React.FC<{ project: any }> = ({ project }) => {
)}