Skip to content

Commit b3333e4

Browse files
mohamedsadiqmohamedsadiq
committed
update home
1 parent 2b5abe4 commit b3333e4

File tree

6 files changed

+178
-72
lines changed

6 files changed

+178
-72
lines changed

‎Layers_logo.svg

+1
Loading

‎components/Content/index.js

+83-49
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
11
import { motion } from "framer-motion";
22
import Link from "next/link";
33
import Image from "next/image";
4-
import { useState, useEffect } from "react";
4+
import { useState, useEffect,useRef } from "react";
55
import arrow from "../../img/Group 192.svg";
66

77

8-
import work1 from '../../img/boidddd.svg'
9-
import work2 from '../../img/daosspoticon.svg'
10-
import work3 from '../../img/developerdaofm.svg'
8+
const MyComponent = (mode) => {
9+
10+
const [svgColor, setSvgColor] = useState("#000")
11+
const valueOfMood = mode.mode.valueOfMode;
12+
13+
const svgColorsFun = () => {
14+
if(valueOfMood === "dark"){
15+
setSvgColor("#fff")
16+
}else if (valueOfMood === "light"){
17+
setSvgColor("#000")
18+
}
19+
}
1120

12-
const MyComponent = () => {
1321
const [divTop, setDivTop] = useState("68vh"); // Default value for smaller heights
1422

1523
const updateDivPosition = () => {
@@ -28,13 +36,19 @@ const MyComponent = () => {
2836
};
2937

3038
useEffect(() => {
39+
svgColorsFun();
3140
updateDivPosition();
3241
window.addEventListener("resize", updateDivPosition);
3342

3443
return () => {
3544
window.removeEventListener("resize", updateDivPosition);
3645
};
37-
}, []);
46+
}, [valueOfMood]);
47+
48+
// useEffect(() => {
49+
// svgColorsFun();
50+
// }, [valueOfMood]); // Run svgColorsFun whenever valueOfMood changes
51+
3852

3953
return (
4054
<div
@@ -49,16 +63,14 @@ const MyComponent = () => {
4963
ease: "easeOut",
5064
}}
5165
>
52-
53-
5466
<div id="name">Mohamed Sadiq</div>
5567
<div>
5668
<p>
5769
A Product Designer & engineer, Dedicated to turning ideas into
5870
well-crafted products. Founder of{" "}
5971
<a href={"/projects/daosspot"} target="_blink">
6072
DAOs Spot
61-
</a> {" "}
73+
</a> {" "}, Early
6274
OSS contributor at {""}
6375
<a href="https://www.developerdao.com/" target="_blink">
6476
Developer DAO
@@ -83,15 +95,52 @@ const MyComponent = () => {
8395
</Link>
8496
</p>
8597
</div>
86-
<div className="mainContent">
98+
99+
<div className="mainContent">
100+
<h1>Future Project</h1>
101+
</div>
102+
<div className="mainContent main_projects">
103+
<div className="hover_project padding-0">
104+
<a href="https://daospot.xyz" target="_blink">
105+
<h1 className=""> DAOs Spot <span className="arrowspan"> <span className="req">4th product of the week on PH</span> ↗</span></h1>
106+
</a>
107+
</div>
108+
<div className="hover_project padding-0">
109+
<a href="https://www.developerdaofm.xyz" target="_blink">
110+
<h1 className=""> DeeveloperDAO FM<span className="arrowspan"> <span className="req">Top product PH </span>↗</span></h1>
111+
</a>
112+
</div>
113+
114+
<div className="hover_project padding-0">
115+
<a href="https://www.behance.net/gallery/134169935/Certified-Web3-Boy-NFTs" target="_blink">
116+
<h1 className="">Certified Web3 Boy <span className="arrowspan">↗</span></h1>
117+
</a>
118+
</div>
119+
<div className="hover_project padding-0">
120+
<a href="https://www.boimaginations.com/" target="_blink">
121+
<h1 className="h_m">Building On Imagination <span className="arrowspan">↗</span></h1>
122+
</a>
123+
</div>
124+
</div>
125+
<div className="mainContent">
87126
<h1>Social media</h1>
88127
</div>
89128
<div className="mainContent margin-top " id="links_home">
90129
<ul className="links_home">
91-
<li> <a href="https://dribbble.com/Mohamed-Sadiq" target="_blink">Dribbble</a> </li>
92-
<li> <a href="https://layers.to/mohamed.sadiq" target="_blink">Layers</a> </li>
93-
<li> <a href="https://github.com/mohamedsadiq" target="_blink">Github</a> </li>
94-
<li> <a href="https://x.com/sadiq_moo" target="_blink">X (Twitter)</a> </li>
130+
<a href="https://dribbble.com/Mohamed-Sadiq" target="_blink">
131+
<svg width="20px" height="20px" strokeWidth="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color={svgColor}><path d="M2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12Z" stroke={svgColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path><path d="M16.6726 20.8435C15.5 14 12.5 8.00003 8.5 2.62964" stroke={svgColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path><path d="M2.06653 10.8406C6.00004 11 15.2829 10.5 19.1415 5" stroke={svgColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path><path d="M21.9677 12.81C15.3438 10.8407 7.50002 14.0001 5.23145 19.3613" stroke={svgColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path></svg>
132+
</a>
133+
<a href="https://github.com/mohamedsadiq" target="_blink">
134+
<svg width="20px" height="20px" strokeWidth="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color={svgColor}><path d="M16 22.0268V19.1568C16.0375 18.68 15.9731 18.2006 15.811 17.7506C15.6489 17.3006 15.3929 16.8902 15.06 16.5468C18.2 16.1968 21.5 15.0068 21.5 9.54679C21.4997 8.15062 20.9627 6.80799 20 5.79679C20.4558 4.5753 20.4236 3.22514 19.91 2.02679C19.91 2.02679 18.73 1.67679 16 3.50679C13.708 2.88561 11.292 2.88561 8.99999 3.50679C6.26999 1.67679 5.08999 2.02679 5.08999 2.02679C4.57636 3.22514 4.54413 4.5753 4.99999 5.79679C4.03011 6.81549 3.49251 8.17026 3.49999 9.57679C3.49999 14.9968 6.79998 16.1868 9.93998 16.5768C9.61098 16.9168 9.35725 17.3222 9.19529 17.7667C9.03334 18.2112 8.96679 18.6849 8.99999 19.1568V22.0268" stroke={svgColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path><path d="M9 20.0267C6 20.9999 3.5 20.0267 2 17.0267" stroke={svgColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path></svg>
135+
</a>
136+
137+
<a href="https://x.com/sadiq_moo" target="_blink">
138+
<svg width="20px" height="20px" viewBox="0 0 24 24" strokeWidth="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color={svgColor}><path d="M16.8198 20.7684L3.75317 3.96836C3.44664 3.57425 3.72749 3 4.22678 3H6.70655C6.8917 3 7.06649 3.08548 7.18016 3.23164L20.2468 20.0316C20.5534 20.4258 20.2725 21 19.7732 21H17.2935C17.1083 21 16.9335 20.9145 16.8198 20.7684Z" stroke={svgColor} strokeWidth="1.5"></path><path d="M20 3L4 21" stroke={svgColor} strokeWidth="1.5" strokeLinecap="round"></path></svg>
139+
</a>
140+
<a href="https://layers.to/mohamed.sadiq" target="_blink">
141+
<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" fill="none" viewBox="0 0 32 33"><path fill={svgColor} fillOpacity="0.2" d="M0 18.83L.08 6.832C.094 4.66 1.613 2.798 3.71 2.383L15.297.086c2.784-.552 5.368 1.627 5.35 4.51l-.08 12c-.015 2.171-1.534 4.032-3.631 4.448L5.349 23.341C2.565 23.893-.019 21.714 0 18.83z"/><path fill={svgColor} fillOpacity="0.5" d="M5.677 23.617l.08-12C5.77 9.447 7.29 7.586 9.387 7.17l11.587-2.296c2.784-.552 5.368 1.626 5.349 4.51l-.08 12c-.014 2.171-1.533 4.032-3.63 4.448l-11.587 2.297c-2.784.551-5.368-1.627-5.349-4.51z"/><path fill={svgColor} fillOpacity="0.8" d="M11.354 28.404l.08-12c.014-2.172 1.533-4.032 3.63-4.448l11.587-2.297c2.784-.552 5.368 1.627 5.349 4.51l-.08 12c-.014 2.172-1.533 4.033-3.63 4.448l-11.587 2.297c-2.784.552-5.368-1.627-5.35-4.51z"/></svg>
142+
</a>
143+
95144
</ul>
96145
</div>
97146
<div className="mainContent">
@@ -107,6 +156,7 @@ const MyComponent = () => {
107156
<span>An AI project I am working on</span>
108157
</a>
109158
</div>
159+
110160
{/* <div className="hover_project latest_activity_project">
111161
112162
<Link href="/sparks/family_transactions">
@@ -119,38 +169,14 @@ const MyComponent = () => {
119169
</div> */}
120170

121171
</div>
172+
122173
{/* <div className="mainContent">
123174
<h1>Future Project</h1>
124175
</div> */}
125176

126177

127-
<div className="mainContent">
128-
<h1>Future Project</h1>
129-
</div>
130-
<div className="mainContent main_projects">
131-
132-
<div className="hover_project padding-0">
133-
<a href="https://www.boimaginations.com/" target="_blink">
134-
<h1 className="h_m">Building On Imagination <span className="arrowspan">↗</span></h1>
135-
</a>
136-
</div>
137-
<div className="hover_project padding-0">
138-
<a href="https://daospot.xyz" target="_blink">
139-
<h1 className=""> DAOs Spot <span className="arrowspan">↗</span></h1>
140-
</a>
141-
</div>
142-
<div className="hover_project padding-0">
143-
<a href="https://www.developerdaofm.xyz" target="_blink">
144-
<h1 className=""> DeeveloperDAO FM <span className="arrowspan">↗</span></h1>
145-
</a>
146-
</div>
147-
{/* <a href="https://www.behance.net/gallery/134169935/Certified-Web3-Boy-NFTs" target="_blink">
148-
<h1 className=""> Certifed Web3 Boy <span className="arrowspan">↗</span></h1>
149-
</a> */}
150-
151-
152-
</div>
153-
<div className="mainContent ">
178+
179+
{/* <div className="mainContent ">
154180
<h1> Thoughts</h1>
155181
</div>
156182
<div className="mainContent thoughts">
@@ -161,28 +187,36 @@ const MyComponent = () => {
161187
<span>January 13, 2024</span>
162188
</Link>
163189
</div>
164-
{/* <div className="hover_project">
165-
<Link href="blog/reflections-on-the-role-of-Intentionality">
166-
<h1 className=""> Intentional Development of Technology: A Path to a Better Future for All. <span className="arrowspan">↗</span></h1>
167-
<span>January 13, 2024</span>
168-
</Link>
169-
</div> */}
190+
191+
170192
171193
<div>
172194
195+
173196
</div>
197+
198+
</div> */}
199+
200+
<div className="mainContent">
201+
<h1>Available to work</h1>
202+
</div>
203+
<div className="mainContent margin-top " id="links_home">
204+
<a className="calltoation" href="mailto:[email protected]"><button className="workbutton"> <span id="workbutton"></span> Reach To Me</button></a>
174205
</div>
175206

176207
</motion.div>
177208
</div>
209+
178210
);
179211
};
180212

181-
const Content = () => {
213+
const Content = (valueOfMode) => {
214+
const theValueOFMode = valueOfMode;
215+
// console.log(test)
182216
return (
183217
<div>
184218
{/* ... */}
185-
<MyComponent />
219+
<MyComponent mode={theValueOFMode}/>
186220
</div>
187221
);
188222
};

‎components/Layout/index.js

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { useState, useEffect } from "react";
1+
import React, { useState, useEffect } from "react";
2+
23
import Header from "../Header";
34
import KeyNav from "../keyNav";
45

@@ -32,6 +33,10 @@ const Layout = ({ children }) => {
3233
}
3334
}, [mode]);
3435

36+
const clonedChildren = React.Children.map(displayChildren, child =>
37+
React.cloneElement(child, { mode })
38+
);
39+
// console.log(clonedChildren[1].props.mode)
3540
return (
3641
<div className={mode + " theBody"}>
3742
<Header modeValue={mode} setMode={setMode} />
@@ -45,7 +50,7 @@ const Layout = ({ children }) => {
4550
}}
4651
className={`${contents} ${transitionStage}`}
4752
>
48-
{displayChildren}
53+
{clonedChildren}
4954
</div>
5055
<KeyNav />
5156
</div>

‎components/Post.js

-4
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,5 @@ export default function Post({ post }) {
4040

4141
</div>
4242
</div>
43-
44-
45-
46-
4743
)
4844
}

‎pages/index.js

+16-5
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,21 @@
11
import Head from 'next/head'
22
import Script from 'next/script'
3+
import { useState, useEffect,useRef } from "react";
4+
35
import Content from '../components/Content'
4-
export default function Home() {
6+
export default function Home(props) {
7+
const modeOfThePc = props.mode;
8+
// console.log(modeOfThePc);
9+
const parentRef = useRef(null);
10+
const childRef = useRef(null);
11+
12+
useEffect(() => {
13+
if (parentRef.current && childRef.current) {
14+
parentRef.current.style.height = `${childRef.current.offsetHeight}px`;
15+
}
16+
}, []);
517
return (
6-
<div className="class_body">
18+
<div className="class_body" >
719
<Head>
820
<title>Home - Mohamed Sadiq</title>
921
<meta name="description" content="A product designer who can code, focusing on Web 3, Open source products @DeveloperDAO, member of @Bulidspace and @Anti" />
@@ -14,12 +26,11 @@ export default function Home() {
1426
<meta name="twitter:site" content="@mohamedsadiq.me" />
1527
<meta name="twitter:title" content="Mohamed Sadiq" />
1628
<meta name="twitter:description" content="A product designer" />
17-
<meta name="twitter:image" content="https://i.ibb.co/Cvc4f6R/Instagram-post-6.png" />
18-
29+
<meta name="twitter:image" content="https://i.ibb.co/Cvc4f6R/Instagram-post-6.png" />
1930
</Head>
2031
<main>
2132

22-
<Content />
33+
<Content valueOfMode={props.mode} />
2334

2435
</main>
2536
<Script

0 commit comments

Comments
 (0)