scroll outside container

RikhiSingh · May 10, 2024 · c5dd8d2 · c5dd8d2
1 parent a16adb1
commit c5dd8d2
Showing 1 changed file with 33 additions and 34 deletions.
diff --git a/src/app/about/page.jsx b/src/app/about/page.jsx
@@ -48,7 +48,7 @@ const AboutPage = () => {
                             Life Long Learner
                         </span>
                         {/* BIOGRAPHY SIGN SVG*/}
-                        <div className="self-end flex w-full flex-row-reverse justify-between">
+                        <div className="self-end">
                             <svg width="136" height="100" viewBox="0 0 136 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <path d="M8 15C10.6439 17.764 11.896 21.1864 13.3333 24.7222C17.4964 34.9634 21.0182 45.4959 24.4444 56C28.9203 69.7221 33.7983 83.689 36 98" stroke="black" stroke-width="3" stroke-linecap="round" />
                                 <path d="M2.00057 48.8012C2.00057 39.5303 1.79625 32.6268 9.11168 25.4679C15.2432 19.4675 29.3365 7.37709 38.6672 13.8567C45.4482 18.5657 51.6695 36.0698 44.6672 42.6901C38.3791 48.6353 29.0175 50.1805 21.7783 54.579C17.8739 56.9513 22.1597 58.5757 24.445 59.8012C34.0562 64.955 43.0849 70.5361 50.7784 78.3568C52.9712 80.5859 55.2276 84.4147 58.0006 85.8012" stroke="black" stroke-width="3" stroke-linecap="round" />
@@ -62,40 +62,39 @@ const AboutPage = () => {
                                 <path d="M110.104 32.8776C110.125 33.2395 110.344 33.5138 110.431 33.8592" stroke="black" stroke-width="3" stroke-linecap="round" />
                                 <path d="M72.6416 92.5877C73.3 92.478 74.1801 91.5995 74.5865 91.279C80.2937 86.7779 85.923 82.1506 91.8906 77.9919C102.409 70.6615 113.767 65.0788 125.299 59.5608C128.196 58.175 131.172 56.9288 133.824 55.1258" stroke="black" stroke-width="3" stroke-linecap="round" />
                             </svg>
-                            {/* BIOGRAPHY SCROLL SVG */}
-                            <div className="flex mt-6">
-                                <motion.svg
-                                    initial={{ opacity: 0.2, y: 0 }}
-                                    animate={{ opacity: 1, y: "10px" }}
-                                    transition={{ repeat: Infinity, duration: 3, ease: "easeInOut" }}
-                                    viewBox="0 0 24 24"
-                                    fill="none"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    width={50}
-                                    height={50}
-                                >
-                                    <path
-                                        d="M5 15C5 16.8565 5.73754 18.6371 7.05029 19.9498C8.36305 21.2626 10.1435 21.9999 12 21.9999C13.8565 21.9999 15.637 21.2626 16.9498 19.9498C18.2625 18.6371 19 16.8565 19 15V9C19 7.14348 18.2625 5.36305 16.9498 4.05029C15.637 2.73754 13.8565 2 12 2C10.1435 2 8.36305 2.73754 7.05029 4.05029C5.73754 5.36305 5 7.14348 5 9V15Z"
-                                        stroke="#000000"
-                                        strokeWidth="1"
-                                    ></path>
-                                    <path d="M12 6V14" stroke="#000000" strokeWidth="1"></path>
-                                    <path
-                                        d="M15 11L12 14L9 11"
-                                        stroke="#000000"
-                                        strokeWidth="1"
-                                    ></path>
-                                </motion.svg>
-                                <motion.div
-                                    initial={{ opacity: 0.2, y: 0 }}
-                                    animate={{ opacity: 1, y: "30px" }}
-                                    transition={{ repeat: Infinity, duration: 3, ease: "easeInOut" }}
-                                >
-                                    Scroll Down
-                                </motion.div>
-                            </div>
                         </div>
-
+                        {/* BIOGRAPHY SCROLL SVG */}
+                        <div className="flex mt-6">
+                            <motion.svg
+                                initial={{ opacity: 0.2, y: 0 }}
+                                animate={{ opacity: 1, y: "10px" }}
+                                transition={{ repeat: Infinity, duration: 3, ease: "easeInOut" }}
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                                width={50}
+                                height={50}
+                            >
+                                <path
+                                    d="M5 15C5 16.8565 5.73754 18.6371 7.05029 19.9498C8.36305 21.2626 10.1435 21.9999 12 21.9999C13.8565 21.9999 15.637 21.2626 16.9498 19.9498C18.2625 18.6371 19 16.8565 19 15V9C19 7.14348 18.2625 5.36305 16.9498 4.05029C15.637 2.73754 13.8565 2 12 2C10.1435 2 8.36305 2.73754 7.05029 4.05029C5.73754 5.36305 5 7.14348 5 9V15Z"
+                                    stroke="#000000"
+                                    strokeWidth="1"
+                                ></path>
+                                <path d="M12 6V14" stroke="#000000" strokeWidth="1"></path>
+                                <path
+                                    d="M15 11L12 14L9 11"
+                                    stroke="#000000"
+                                    strokeWidth="1"
+                                ></path>
+                            </motion.svg>
+                            <motion.div
+                                initial={{ opacity: 0.2, y: 0 }}
+                                animate={{ opacity: 1, y: "30px" }}
+                                transition={{ repeat: Infinity, duration: 3, ease: "easeInOut" }}
+                            >
+                                Scroll Down
+                            </motion.div>
+                        </div>
                     </div>
                     {/* skills container */}
                     <div className="flex flex-col gap-12 justify-center" ref={skillRef}>