update contact page

asmitbm · Dec 16, 2023 · ad5ec6c · ad5ec6c
1 parent ad5bdc8
commit ad5ec6c
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 8 deletions.
diff --git a/app/contact/page.jsx b/app/contact/page.jsx
@@ -6,6 +6,7 @@ import ContactForm from "@/components/ContactForm";
 import { ContactCard } from "@/components/ContactCard";
 import AnimatedTitle from "@/components/Animations/AnimatedTitle";
 import AnimatedText from "@/components/Animations/AnimatedText";
+import Image from "next/image";
 import styles from "./page.module.css";
 
 export default function Contact() {
@@ -67,8 +68,16 @@ export default function Contact() {
                     </div>
                 </div>
                 <div className={styles.contact}>
-                    <div className={styles.contact_card}>
-                        <ContactCard />
+                    <div className={styles.contact_image}>
+                        <div className={styles.contact_card}>
+                            <ContactCard />
+                        </div>
+                        <div className={styles.random_image}>
+                            <p>
+                                {" "}
+                                <AnimatedText content="Random images from Unsplash" />
+                            </p>
+                        </div>
                     </div>
                     <div className={styles.contact_form}>
                         <ContactForm />

diff --git a/app/contact/page.module.css b/app/contact/page.module.css
@@ -50,9 +50,36 @@
 .contact {
     display: flex;
     flex-direction: row;
-    align-items: flex-start;
+    align-items: center;
     justify-content: center;
-    gap: 2vw;
+    gap: 1.5vw;
+    height: 100%;
+}
+
+.contact_image {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5vw;
+    flex: 1;
+}
+
+.random_image {
+    display: flex;
+    align-items: flex-end;
+    justify-content: flex-end;
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700'%3E%3Cdefs%3E%3Cfilter id='gggrain-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='2' seed='2' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeColorMatrix type='saturate' values='0' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='colormatrix'%3E%3C/feColorMatrix%3E%3CfeComponentTransfer x='0%25' y='0%25' width='100%25' height='100%25' in='colormatrix' result='componentTransfer'%3E%3CfeFuncR type='linear' slope='3'%3E%3C/feFuncR%3E%3CfeFuncG type='linear' slope='3'%3E%3C/feFuncG%3E%3CfeFuncB type='linear' slope='3'%3E%3C/feFuncB%3E%3C/feComponentTransfer%3E%3CfeColorMatrix x='0%25' y='0%25' width='100%25' height='100%25' in='componentTransfer' result='colormatrix2' type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -10'%3E%3C/feColorMatrix%3E%3C/filter%3E%3Cfilter id='gggrain-saturate' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeColorMatrix type='saturate' values='3' x='0%25' y='0%25' width='100%25' height='100%25' in='SourceGraphic' result='colormatrix'%3E%3C/feColorMatrix%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23gggrain-saturate)'%3E%3Crect width='100%25' height='100%25' fill='transparent' filter='url(%23gggrain-filter)' opacity='0.3' style='mix-blend-mode: soft-light'%3E%3C/rect%3E%3C/g%3E%3C/svg%3E"),
+        url(https://source.unsplash.com/random/?art);
+    background-position: center;
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 21.5vh;
+    border-radius: 25px;
+    position: relative;
+}
+
+.random_image p {
+    padding: 5px;
+    color: #fff;
 }
 
 .contact_card {

diff --git a/components/ContactCard/index.jsx b/components/ContactCard/index.jsx
@@ -97,7 +97,7 @@ const AnimatedCard = () => {
                 ></motion.div>
 
                 <div className={styles.base_text}>
-                    <p>Have an idea? or Want to Work With Me?</p>
+                    <p>Want to work with me?</p>
                     <Stars />
                 </div>
             </div>

diff --git a/components/ContactCard/styles.module.css b/components/ContactCard/styles.module.css
@@ -4,7 +4,7 @@
     border-radius: 25px;
     padding: 2rem;
     background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700'%3E%3Cdefs%3E%3Cfilter id='gggrain-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='2' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeColorMatrix type='saturate' values='0' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='colormatrix'%3E%3C/feColorMatrix%3E%3CfeComponentTransfer x='0%25' y='0%25' width='100%25' height='100%25' in='colormatrix' result='componentTransfer'%3E%3CfeFuncR type='linear' slope='3'%3E%3C/feFuncR%3E%3CfeFuncG type='linear' slope='3'%3E%3C/feFuncG%3E%3CfeFuncB type='linear' slope='3'%3E%3C/feFuncB%3E%3C/feComponentTransfer%3E%3CfeColorMatrix x='0%25' y='0%25' width='100%25' height='100%25' in='componentTransfer' result='colormatrix2' type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -10'%3E%3C/feColorMatrix%3E%3C/filter%3E%3Cfilter id='gggrain-saturate' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeColorMatrix type='saturate' values='3' x='0%25' y='0%25' width='100%25' height='100%25' in='SourceGraphic' result='colormatrix'%3E%3C/feColorMatrix%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23gggrain-saturate)'%3E%3Crect width='100%25' height='100%25' fill='transparent' filter='url(%23gggrain-filter)' opacity='0.2' style='mix-blend-mode: soft-light'%3E%3C/rect%3E%3C/g%3E%3C/svg%3E");
-    background-color: #dbdbdb;
+    background-color: #e8e6e6;
     width: 100%;
     position: relative;
     overflow: hidden;
@@ -28,7 +28,7 @@
 .hover_text {
     position: absolute;
     background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700'%3E%3Cdefs%3E%3Cfilter id='gggrain-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='2' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeColorMatrix type='saturate' values='0' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='colormatrix'%3E%3C/feColorMatrix%3E%3CfeComponentTransfer x='0%25' y='0%25' width='100%25' height='100%25' in='colormatrix' result='componentTransfer'%3E%3CfeFuncR type='linear' slope='3'%3E%3C/feFuncR%3E%3CfeFuncG type='linear' slope='3'%3E%3C/feFuncG%3E%3CfeFuncB type='linear' slope='3'%3E%3C/feFuncB%3E%3C/feComponentTransfer%3E%3CfeColorMatrix x='0%25' y='0%25' width='100%25' height='100%25' in='componentTransfer' result='colormatrix2' type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -10'%3E%3C/feColorMatrix%3E%3C/filter%3E%3Cfilter id='gggrain-saturate' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeColorMatrix type='saturate' values='3' x='0%25' y='0%25' width='100%25' height='100%25' in='SourceGraphic' result='colormatrix'%3E%3C/feColorMatrix%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23gggrain-saturate)'%3E%3Crect width='100%25' height='100%25' fill='transparent' filter='url(%23gggrain-filter)' opacity='0.2' style='mix-blend-mode: soft-light'%3E%3C/rect%3E%3C/g%3E%3C/svg%3E");
-    background-color: #dbdbdb;
+    background-color: #e8e6e6;
     z-index: 20;
     will-change: transform;
     width: 100%;

diff --git a/components/ContactForm/index.jsx b/components/ContactForm/index.jsx
@@ -112,7 +112,7 @@ export default function ContactForm() {
                     >
                         <textarea
                             className={styles.inputs}
-                            rows="10"
+                            rows="11"
                             required
                             placeholder="Message * (you will receive a copy of this in your inbox)"
                             value={data.message}

diff --git a/next.config.js b/next.config.js
@@ -3,3 +3,15 @@ const { withContentlayer } = require("next-contentlayer");
 const nextConfig = {};
 
 module.exports = withContentlayer(nextConfig);
+
+module.exports = {
+    images: {
+        remotePatterns: [
+            {
+                protocol: "https",
+                hostname: "source.unsplash.com",
+            },
+        ],
+    },
+    ...withContentlayer(nextConfig),
+};