Skip to content

Commit

Permalink
Merge pull request #36 from manavsiddharthgupta/home-readme
Browse files Browse the repository at this point in the history 
feature: updated the readme file and home page
  • Loading branch information
@manavsiddharthgupta
manavsiddharthgupta authored Apr 23, 2023
2 parents 6a50a78 + fcfdb7c commit d30ea9d
Show file tree
Hide file tree
Showing 6 changed files with 225 additions and 190 deletions.
Binary file modified README.md
View file
Binary file not shown.
71 changes: 34 additions & 37 deletions client/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ function App() {
const onSetisLoggedState = () => {
setisLogged(true);
};

useEffect(() => {
const data = localStorage.getItem(localStorage_key);
console.log(data);
Expand All @@ -29,47 +29,44 @@ function App() {
}, []);

return (
<div className="h-full">

<BrowserRouter>
<Switch>
{isLogged &&(
<Route path="/home" exact >
<Navbar />
<BrowserRouter>
<Switch>
{isLogged && (
<Route path="/" exact>
<Navbar />
</Route>
)}

{!isLogged && (
<Route path="/register" exact>
<Register onsetislogged={onSetisLoggedState} />
</Route>
)}

{!isLogged && (
<Route path="/register" exact>
<Register onsetislogged={onSetisLoggedState} />
</Route>
)}
{!isLogged && (
<Route path="/login" exact>
<Login />
</Route>
)}

{!isLogged && (
<Route path="/login" exact>
<Login />
</Route>
)}

<Route path="/" exact>
<Home />
</Route>

{isLogged && (
<Route path="/profile" exact>
<Profile
name="Saurabh"
email="abcd.com"
bio="I'm a software engineer based in San Francisco."
/>
</Route>
)}
<Route path="*">
{isLogged ? <Redirect to="/home" /> : <Redirect to="/login" />}
<Route path="/home" exact>
<Home />
</Route>

{isLogged && (
<Route path="/profile" exact>
<Profile
name="Saurabh"
email="abcd.com"
bio="I'm a software engineer based in San Francisco."
/>
</Route>
</Switch>
</BrowserRouter>
</div>
)}
<Route path="*">
{isLogged ? <Redirect to="/home" /> : <Redirect to="/login" />}
</Route>
</Switch>
</BrowserRouter>
);
}

Expand Down
47 changes: 9 additions & 38 deletions client/src/components/home/Home.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,15 @@
import React from 'react';
import classes from "./home.module.css";
import styles from "./home.module.css";

const Home = () => {
return (
<div className={classes.home}>
<div className={classes.left}>
<h1 className={classes.brandName}>
<span className={classes.devText}>DEV</span>
<span className={classes.gramText}>GRAM.</span>
</h1>

<h2 className={classes.displayText}>
Built for developers by developers /&gt;
</h2>
</div>


<div className={classes.right}>
<div className={classes.loginSignup}>
<a href="/login" className={classes.loginLink}>Log in</a>
<a href="/register" className={classes.signupLink}>Sign up</a>
</div>

<h2 className={classes.devMeaning}>
Developer
<span className={classes.devMeaningNoun}>
noun
</span>
<br />
<span className={classes.devMeaningSentence}>
-a person or thing that develops something
</span>
</h2>

<h2 className={classes.descText}>
DevGram is a web application designed for developers to connect with each other.
</h2>
</div>
</div>
<main className={styles.home_outerdiv}>
<section>main data</section>
<aside>
<div>notification</div>
<div>Trending</div>
</aside>
</main>
);
}
};

export default Home;
141 changes: 26 additions & 115 deletions client/src/components/home/home.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,115 +1,26 @@
.home {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 20px;
position: relative;
}


.left {
display: flex;
flex-direction: column;
position: fixed;
left: 20px;
top: 20px;
}

.brandName {
position: fixed;
width: 120px;
height: 12px;
font-size: 35px;
font-weight: bold;
}

.devText {
color: rgba(0, 0, 0, 0.9);
}

.gramText {
color: #999999;
}

.displayText {
font-size: 50px;
margin-top: 16%;
margin-left: 40px;
width: 40%;
word-wrap: break-word;
white-space: pre-wrap;
background-repeat: repeat;
background-color: #fff;

}

.right {
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
right: 20px;
top: 25px;
}


.loginSignup {
display: flex;
align-items: center;
justify-content: flex-end;
margin-right: 40px;
}

.loginLink {
margin-right: 50px;
color: #808080;
font-size: 20px;
display: inline-block;
}

.signupLink {
color: #808080;
font-size: 20px;
display: inline-block;
}


.descText{
font-size: 15px;
position: fixed;
bottom: 70px;
margin-right: 300px;
left: auto;
width: 50%;
width: 40%;
word-wrap: break-word;
white-space: pre-wrap;
}

.devMeaning{
position: absolute;
font-size: 40px;
margin-top: 160px;
margin-right: 450px;
width: 40%;
}

.devMeaningNoun{
position: absolute;
font-size: 20px;
margin-top: 20px;
color: grey;
}

.devMeaningSentence{
position: absolute;
font-size: 20px;
margin-top: -5px;
margin-left: -10px;
font-weight:200;
width: 450%;
word-wrap: break-word;
white-space: pre-wrap;
color: grey;
}
.home_outerdiv {
border: 1px solid black;
min-height: 100vh;
position: relative;
padding: 2rem 4rem;
display: flex;
}
.home_outerdiv section {
height: 1500px;
margin-right: 300px;
border: 1px solid red;
width: 100%;
}
.home_outerdiv aside {
position: fixed;
width: 300px;
top: 2rem;
right: 4rem;
border: 2px solid black;
overflow-y: scroll;
height: 89vh;
}
.home_outerdiv aside div {
height: 300px;
border: 1px solid blue;
}
45 changes: 45 additions & 0 deletions client/src/components/landing page/LandingPage.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import classes from "./landing.module.css";

const LandingPage = () => {
return (
<div className={classes.home}>
<div className={classes.left}>
<h1 className={classes.brandName}>
<span className={classes.devText}>DEV</span>
<span className={classes.gramText}>GRAM.</span>
</h1>

<h2 className={classes.displayText}>
Built for developers by developers /&gt;
</h2>
</div>

<div className={classes.right}>
<div className={classes.loginSignup}>
<a href="/login" className={classes.loginLink}>
Log in
</a>
<a href="/register" className={classes.signupLink}>
Sign up
</a>
</div>

<h2 className={classes.devMeaning}>
Developer
<span className={classes.devMeaningNoun}>noun</span>
<br />
<span className={classes.devMeaningSentence}>
-a person or thing that develops something
</span>
</h2>

<h2 className={classes.descText}>
DevGram is a web application designed for developers to connect with
each other.
</h2>
</div>
</div>
);
};

export default LandingPage;
Loading

0 comments on commit d30ea9d

Please sign in to comment.