set up links for projects

tin0312 · Sep 21, 2023 · 2f9a8af · 2f9a8af
1 parent 38444da
commit 2f9a8af
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 15 deletions.
diff --git a/src/App.css b/src/App.css
@@ -178,11 +178,51 @@ nav a:hover {
   width: 18%;
   height: 100%;
 }
+.image-container{
+  width: 100%;
+  position: relative;
+}
 .project-thumb-nail {
   width: 100%;
   height: 70%;
   border-radius: 20px;
+  opacity: 1;
+}
+/* Make a container in each clickable images */
+.middle {
+  transition: .5s ease;
+  opacity: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  text-align: center;
+  font-family: "Poppins", sans-serif;
+}
+.image-container:hover img{
+  cursor: pointer;
+  opacity: 0.4;
+}
+.image-container:hover .middle {
+  cursor: pointer;
+  opacity: 1;
 }
+.text{
+  display: flex;
+  flex-direction: column;
+  gap:2%;
+  width: 100%;
+}
+.text a:hover {
+  color: #4ee1a0;
+  cursor: pointer;
+}
+.text a{
+  text-decoration: none;
+  color: white;
+}
+
 .project-content {
   margin-top: 4%;
 }

diff --git a/src/Pages/Contacts.jsx b/src/Pages/Contacts.jsx
@@ -25,7 +25,7 @@ export default function Contacts() {
       const base = new Airtable({
         apiKey: "patVJYRDfNeQgFxcb.6d134f1e7190daf5a66ed80d732be67c3e981d8a0f9221dfe03eca5e901d8a45"
       }).base("app2ECwavIy178eTW");
-
+      // create a record
       const records = await base("Users Inquiry").create([
         {
           fields: {
@@ -35,8 +35,6 @@ export default function Contacts() {
           },
         },
       ]);
-
-      console.log("Record created", records);
       setFormInfo({
         name: "",
         email: "",

diff --git a/src/Pages/Projects.jsx b/src/Pages/Projects.jsx
@@ -6,23 +6,39 @@ export default function Projects() {
       <h1 className="project-header">Project</h1>
       <div className="project-container">
         <div className="project-section">
+          <div className="image-container">
           <img
             src={Images.weatherThumbNail}
             alt="weather-thumb-nail"
             className="project-thumb-nail"
           />
+          <div className="middle">
+            <div className="text">
+             <a href = "https://clinquant-marshmallow-2752bd.netlify.app/" target="_blank" rel="noopener noreferrer">View live</a>
+             <a href="https://github.com/tin0312/weather-app">View source</a>
+            </div>
+          </div>
+          </div>
           <div className="project-content">
             <h3 className="project-title">WEATHER APP</h3>
             <h4 className="project-stacks">HTML • CSS • React • API </h4>
           </div>
         </div>
         {/* project section-2 */}
         <div className="project-section">
+          <div className="image-container">
           <img
             src={Images.quizThumbNail}
             alt="weather-thumb-nail"
             className="project-thumb-nail"
           />
+          <div className="middle">
+            <div className="text">
+             <a href = "https://unrivaled-sorbet-b6c280.netlify.app/" target="_blank" rel="noopener noreferrer">View live</a>
+             <a href="https://github.com/tin0312/quizApp">View source</a>
+            </div>
+          </div>
+          </div>
           <div className="project-content">
             <h3 className="project-title"> QUIZZICAL</h3>
             <h4 className="project-stacks">HTML • CSS • React • API </h4>
@@ -31,11 +47,19 @@ export default function Projects() {
 
         {/* Project section-3 */}
         <div className="project-section">
+          <div className="image-container">
           <img
             src={Images.roomsystemThumbNail}
             alt="weather-thumb-nail"
             className="project-thumb-nail"
           />
+          <div className="middle">
+            <div className="text">
+             <a href = "http://roomreservation.pythonanywhere.com/" target="_blank" rel="noopener noreferrer">View live</a>
+             <a href="https://github.com/tin0312/roomBookingSystem">View source</a>
+            </div>
+          </div>
+          </div>
           <div className="project-content">
             <h3 className="project-title">ROOM BOOKING SYSTEM</h3>
             <h4 className="project-stacks">
@@ -46,30 +70,25 @@ export default function Projects() {
 
         {/* Project section-4 */}
         <div className="project-section">
+          <div className="image-container">
           <img
             src={Images.chromeExtThumbNail}
             alt="weather-thumb-nail"
             className="project-thumb-nail"
           />
+          <div className="middle">
+            <div className="text">
+             <a href = "https://github.com/tin0312/walk-more-than-you-scroll" target="_blank" rel="noopener noreferrer">View source</a>
+            </div>
+          </div>
+          </div>
           <div className="project-content">
             <h3 className="project-title">Walk-As-You-Scroll</h3>
             <h4 className="project-stacks">
               HTML • CSS • Javascript • jQuery{" "}
             </h4>
           </div>
         </div>
-
-        {/* <div className="project-section">
-          <img
-            src={Images.weatherThumbNail}
-            alt="weather-thumb-nail"
-            className="project-thumb-nail"
-          />
-          <div className="project-content">
-            <h3 className="project-title">WEATHER APP</h3>
-            <h4 className="project-stacks">HTML • CSS • React • API </h4>
-          </div>
-        </div> */}
       </div>
     </div>
   );