responsive about

RamdaniRamdane · Sep 7, 2024 · 83cf057 · 83cf057
1 parent e723fef
commit 83cf057
Show file tree

Hide file tree

Showing 19 changed files with 371 additions and 179 deletions.
diff --git a/src/app/about/page.module.css b/src/app/about/page.module.css
@@ -1,6 +1,7 @@
 .container {
   width: 100%;
   height: 100%;
+  overflow: hidden;
 
 }
 
@@ -140,3 +141,136 @@
   left: 0;
   object-fit: cover;
 }*/ 
+
+
+@media only screen and (max-width: 600px){
+.container{
+    width: 100%;
+    height: inherit;
+    overflow: scroll;
+    margin-bottom: 100px;
+}
+.cardContainer {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column ;
+  width: 100%;
+  height: auto;
+  align-items: center;
+  justify-content: center;
+}
+.left {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+}
+.imageText{
+    height:inherit;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: #11151C;
+    border-radius: 15px;
+    margin-bottom:20px ;
+}
+.textContainer{
+    width:200px ;
+    height: auto;
+    color: #ccc;
+    font-weight: bold;
+    text-align: left;
+    font-size:1rem ;
+    margin-bottom: 20px;
+}
+.imageContainer{
+    width: 200px;
+    height: 200px;
+    overflow: hidden;
+    border-radius:  15px ;
+    background: #73B8FF55;
+    margin: 20px;
+    -webkit-box-shadow: inset 18px -159px 82px -56px rgba(0,0,0,1);
+    -moz-box-shadow: inset 18px -159px 82px -56px rgba(0,0,0,1);
+    box-shadow: inset 18px -159px 82px -56px rgba(0,0,0,1);
+    filter: saturate(0);
+}
+.img{
+    width:120%;
+    height: 120%;
+    position: relative;
+    bottom: 10%;
+    right: 10%;
+    filter: blur(8px);
+}
+
+.img:hover{
+    filter: blur(0);
+    transition: .5s;
+}
+
+.CvGit{
+    width: 100%;
+    height: 200px;
+    display: flex;
+    flex-direction: row;
+}
+
+.Git , .Cv {
+    height: 200px;
+    width: 200px;
+    background: #11151C;
+    border-radius: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.Cv{
+    margin-right: 20px
+}
+
+.icon{
+    height: 70px;
+    width: 70px;
+    filter: brightness(70%) sepia(20%);
+}
+.right {
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  overflow:scroll;
+  scrollbar-width: none;
+  background: #11151C;
+  margin-top: 20px;
+  margin-left: 0;
+  margin-bottom: 30px;
+  padding-bottom:20px ;
+}
+
+
+
+
+.titleBar {
+  width: 100%;
+  height: 18px;
+  color: #999;
+  display: flex;
+  align-items: flex-start;
+  padding: 3px;
+}
+.json {
+  width: 100%;
+  height: 90%;
+  margin: 18px 0 ;
+  padding: 15px;
+  display: flex;
+  justify-items: flex-start;
+  background: #00000080;
+  overflow: scroll;
+}
+}
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -13,25 +13,25 @@ export default function about() {
       <Title text="About" textColored=" Me" />
       <div className={styles.cardContainer}>
         <div className={styles.left}>
-            <div className={styles.imageText}>
-                <div className={styles.imageContainer}>
-                    <Image className={styles.img} src={reyImg} alt="rey" />
-                </div>
-                <div className={styles.textContainer}>
-                    <h1>Hi &#128075;</h1>
-                    <h3>i am Rey</h3>
-                    <p>please dont look a lot on my pic and i use Arch btw ...</p>
-                </div>
+          <div className={styles.imageText}>
+            <div className={styles.imageContainer}>
+              <Image className={styles.img} src={reyImg} alt="rey" />
             </div>
-
-            <div className={styles.CvGit}>
-                <div className={styles.Cv}>
-                    <Image src={cv} alt="cv" width={100} height={100} />
-                </div> 
-                <div className={styles.Git}>
-                    <Image src={github} alt="git" width={100} height={100} />
-                </div>
+            <div className={styles.textContainer}>
+              <h1>Hi &#128075;</h1>
+              <h3>i am Rey</h3>
+              <p>please dont look a lot on my pic and i use Arch btw ...</p>
             </div>
+          </div>
+
+          <div className={styles.CvGit}>
+            <div className={styles.Cv}>
+              <Image src={cv} alt="cv" className={styles.icon} />
+            </div>
+            <div className={styles.Git}>
+              <Image src={github} alt="git" className={styles.icon} />
+            </div>
+          </div>
         </div>
         <div className={styles.right}>
           <div className={styles.titleBar}>

diff --git a/src/app/components/asciiart/asciiart.module.css b/src/app/components/asciiart/asciiart.module.css
@@ -2,15 +2,28 @@
 
 .typingText {
   font-size: 1.2rem;
-  font-family:  "Space mono", monospace , system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family:
+    "Space mono",
+    monospace,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    "Open Sans",
+    "Helvetica Neue",
+    sans-serif;
   font-weight: 300;
   display: flex;
   flex-direction: column;
-  color:#999
+  color: #999;
 }
 
 .typingText h3 {
-  color: #FF8F40;
+  color: #ff8f40;
   margin: auto;
   margin-top: 30px;
 }
diff --git a/src/app/components/buffer/buffer.module.css b/src/app/components/buffer/buffer.module.css
@@ -4,6 +4,6 @@
   flex-direction: row;
 }
 
-.button{
-    background: white;
+.button {
+  background: white;
 }
diff --git a/src/app/components/buffer/buffer.tsx b/src/app/components/buffer/buffer.tsx
@@ -2,8 +2,6 @@
 import styles from "./buffer.module.css";
 
 function Buffer() {
-  return (
-      <div className={styles.bufferContainer}>
-      </div>
-  )}
+  return <div className={styles.bufferContainer}></div>;
+}
 export default Buffer;
diff --git a/src/app/components/linecounter/linecouter.module.css b/src/app/components/linecounter/linecouter.module.css
@@ -1,4 +1,3 @@
-
 .lineCounter {
   width: inherit;
   height: calc(100vh - 20px);
@@ -13,6 +12,6 @@
 
 .lineCounter p {
   color: #88888866;
-  font-family: 'Open Sans', 'Helvetica Neue', sans-serif ;
+  font-family: "Open Sans", "Helvetica Neue", sans-serif;
   font-size: 0.8rem;
 }
diff --git a/src/app/components/linecounter/linecouter.tsx b/src/app/components/linecounter/linecouter.tsx
@@ -1,32 +1,32 @@
 "use client";
-import { useEffect , useState } from "react"
-import styles from "./linecouter.module.css"
+import { useEffect, useState } from "react";
+import styles from "./linecouter.module.css";
 
-export default function LineCounter (){
-    const [height , setHeight] = useState(0)
-    const [ nums  , setNums ]=useState(Array.from(Array(60).keys(), n => n+1))
-
-    const handleNums =()=>{
-        setHeight(window.innerHeight)
-        let nbLines=(height-15)/14
-        let arr =[]
-        for(let i=1;i<=Math.ceil(nbLines);i++){
-            arr.push(i) 
-        }
-        setNums(arr)
+export default function LineCounter() {
+  const [height, setHeight] = useState(0);
+  const [nums, setNums] = useState(Array.from(Array(60).keys(), (n) => n + 1));
+
+  const handleNums = () => {
+    setHeight(window.innerHeight);
+    let nbLines = (height - 15) / 14;
+    let arr = [];
+    for (let i = 1; i <= Math.ceil(nbLines); i++) {
+      arr.push(i);
     }
-    useEffect(()=>{
-        window.addEventListener('resize', handleNums);
-        return () => window.removeEventListener('resize', handleNums);
-    })
+    setNums(arr);
+  };
+  useEffect(() => {
+    window.addEventListener("resize", handleNums);
+    return () => window.removeEventListener("resize", handleNums);
+  });
 
-    return(
-        <>
-        <div id="line" className={styles.lineCounter}>
-        { nums.map( (num , index) =>(
-            <p key={index}>{num}</p>
+  return (
+    <>
+      <div id="line" className={styles.lineCounter}>
+        {nums.map((num, index) => (
+          <p key={index}>{num}</p>
         ))}
-        </div>
-        </>
-    )
+      </div>
+    </>
+  );
 }