Skip to content

Commit

Permalink
🐼fixed mobile view and some bugs
Browse files Browse the repository at this point in the history
  • Loading branch information
@ullaskunder3
ullaskunder3 committed Aug 10, 2022
1 parent 7a2627e commit 594401f
Show file tree
Hide file tree
Showing 14 changed files with 199 additions and 177 deletions.
151 changes: 105 additions & 46 deletions package-lock.json
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import Project from "./components/Pages/Projects/Project";
const App = () => {
return (
<Router>
<div>
<>
<Switch>
<Route exact path="/">
<Home />
Expand All @@ -39,7 +39,7 @@ const App = () => {
<PageNotFound />
</Route>
</Switch>
</div>
</>
</Router>
);
};
Expand Down
4 changes: 2 additions & 2 deletions src/components/Home/Home.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,15 @@ const HomePage = (props) => {
}, [section]);

return (
<div>
<>
<Nav inView={inView} />
<Header setInView={setInView} />
<About setInView={setInView} />
<Exp setInView={setInView} />
<GithubRepo setInView={setInView} />
<Contact setInView={setInView} />
<Footer />
</div>
</>
);
};

Expand Down
2 changes: 1 addition & 1 deletion src/components/Pages/404Page/PageNotFound.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const PageNotFount = () => {
<h1>404</h1>
<h2>Page not found</h2>
</div>
<a href={"/"}>Go To Homepage</a>
<a href="/">Go To Homepage</a>
<p>
No match for <code>{location.pathname}</code>
</p>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Pages/ComingSoon/ComingSoon.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ const ComingSoon = () => {
<h2>This page is under construction.</h2>
<h3>Come back soon!</h3>
</div>
<a href={"/"}>Go To Homepage</a>
<a href="/">Go To Homepage</a>
<p>
<small>{timerDays}</small>
<sup>Days</sup>
Expand Down
27 changes: 6 additions & 21 deletions src/components/Section/About/About.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ span:hover {
.about_content p {
margin: 2rem 0 2.6rem;
color: var(--color-light);
font-size: 1.5rem;
}

/* ==================== MEDIA QUERIES (Medium DEVICES) ==================== */
Expand All @@ -97,7 +98,7 @@ span:hover {
}

.me {
width: 50%;
/* width: 50%; */
margin: 2rem auto 4rem;
}

Expand All @@ -109,7 +110,7 @@ span:hover {
/* ==================== MEDIA QUERIES (Small DEVICES) ==================== */
@media screen and (max-width: 600px) {
.me {
width: 65%;
/* width: 65%; */
margin: 0 auto 3rem;
}

Expand All @@ -130,38 +131,22 @@ span:hover {
/* ==================== My Image (PFP) ==================== */

.me {
width: 25rem;
height: 25rem;
/* position: absolute; */
/* left: calc(50% - 11rem); */
/* margin-top: 2rem; */
/* border-radius: 1rem 1rem 1rem 1rem; */
overflow: hidden;
padding: 1.5rem 1.5rem 1.5rem 1.5rem;
border-radius: 3px;
transition: all 0.4s;
aspect-ratio: 1/1;
/* border-radius: 2rem; */
/* background: linear-gradient(
45deg,
transparent,
var(--color-primary),
transparent
); */
display: grid;
place-items: center;
}
.image-card:hover {
box-shadow: 1px 1px 6px 1px #764ba2;
border-radius: 1px solid #7303c0;
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
background-color: whitesmoke;
}
.image-card:before {
content: "";
position: absolute;
top: 0;
left: 180%;
height: 100%;
width: 75%;
background: rgba(255, 255, 255, 0.1);
z-index: 1;
transform: skew(45deg);
Expand All @@ -180,5 +165,5 @@ span:hover {
}
.image-card:hover img {
filter: grayscale(0%);
transform: scale(1.1);
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
2 changes: 2 additions & 0 deletions src/components/Section/Contact/Contact.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
display: grid;
grid-template-columns: 30% 50%;
gap: 12%;
height: 100vh;
}

.contact_options {
Expand Down Expand Up @@ -100,5 +101,6 @@ textarea {
@media screen and (max-width: 600px) {
.container.contact_container {
width: var(--container-width-ms);
height: unset;
}
}
12 changes: 8 additions & 4 deletions src/components/Section/Footer/Footer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,15 @@ footer {
background-color: var(--color-bg);
background: url("../../../assets/othersPics/banner-bg.png");
padding: 3rem 0;
text-align: center;
font-size: 0.9rem;
padding-left: 2rem;
margin-top: 7rem;
font-weight: 800;
width: 100%;
margin: 0 auto;
}
.footer__wrapper{
max-width: 900px;
margin: 0 auto;
}

footer a {
Expand All @@ -21,14 +27,12 @@ footer a {
.permalinks {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
margin: 0 auto 3rem;
}

.social_media {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 2rem;
}
Expand Down
110 changes: 60 additions & 50 deletions src/components/Section/Footer/Footer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,58 +14,68 @@ import { IoMdRocket } from "react-icons/io";
const Footer = () => {
return (
<footer id="footer">
<a href={"/#"} className="footer_logo">
Aarab Nishchal
</a>
<div className="footer__wrapper">
<a href="/" className="footer_logo">
Aarab Nishchal
</a>

<ul className="permalinks">
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="about">About</Link>
</li>
<li>
<Link to="experience">Experience</Link>
</li>
<li>
<Link to="contact">Contact</Link>
</li>
</ul>
<ul className="permalinks">
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="about">About</Link>
</li>
<li>
<Link to="experience">Experience</Link>
</li>
<li>
<Link to="contact">Contact</Link>
</li>
</ul>

<div className="social_media">
<a href={"https://github.com/losier"} target="_blank" rel="noreferrer">
<FaGithub />
</a>
<a
href={"https://www.instagram.com/zzcwc/"}
target="_blank"
rel="noreferrer"
>
<FaInstagram />
</a>
<a href={"https://twitter.com/twxey_"} target="_blank" rel="noreferrer">
<FaTwitter />
</a>
<a
href={"https://www.facebook.com/zzcwc/"}
target="_blank"
rel="noreferrer"
>
<FaFacebookSquare />
</a>
<a href={"https://linktr.ee/zzcwc"} target="_blank" rel="noreferrer">
<SiLinktree />
</a>
</div>
<div className="rocket_container">
<a href={"/#"} className="rocket">
<IoMdRocket className="rocket-img" />
</a>
<p className="rocket_p">Beam me up, Shawty!</p>
</div>
<div className="copyright">
<small>&copy; Losier. All rights reserved.</small>
<div className="social_media">
<a
href={"https://github.com/losier"}
target="_blank"
rel="noreferrer"
>
<FaGithub />
</a>
<a
href={"https://www.instagram.com/zzcwc/"}
target="_blank"
rel="noreferrer"
>
<FaInstagram />
</a>
<a
href={"https://twitter.com/twxey_"}
target="_blank"
rel="noreferrer"
>
<FaTwitter />
</a>
<a
href={"https://www.facebook.com/zzcwc/"}
target="_blank"
rel="noreferrer"
>
<FaFacebookSquare />
</a>
<a href={"https://linktr.ee/zzcwc"} target="_blank" rel="noreferrer">
<SiLinktree />
</a>
</div>
<div className="rocket_container">
<a href={"/#"} className="rocket">
<IoMdRocket className="rocket-img" />
</a>
<p className="rocket_p">Beam me up, Shawty!</p>
</div>
<div className="copyright">
<small>&copy; Losier. All rights reserved.</small>
</div>
</div>
</footer>
);
Expand Down
11 changes: 2 additions & 9 deletions src/components/Section/Header/Header.css
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,8 @@
header {
height: 100vh;
padding-top: 5rem;
overflow: hidden;
}

.header_container {
height: 100%;
position: relative;
display: flex;
flex-direction: column;
}

.header_text {
margin-top: 10%;
padding: 0;
Expand Down Expand Up @@ -131,7 +123,8 @@ header {
}

.header_text span {
font-size: 60px;
font-size: 3rem;
line-height: normal;
}

.header_socials,
Expand Down
5 changes: 0 additions & 5 deletions src/components/Section/Header/Header.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ const Header = () => {
<div className="container header_container">
<div className="header_text">
<h3>Hi, my name is</h3>
{/* <h1>Aarab Nishchal</h1> */}
<TypingEffect />
<span>I build things that lives on Internet.</span>

Expand All @@ -21,10 +20,6 @@ const Header = () => {

<HeaderSocials />
</div>

{/* <div className="me image-card">
<img src={require('../../../assets/Pics/me2.jpg')} alt="me" />
</div> */}
</header>
);
};
Expand Down
32 changes: 1 addition & 31 deletions src/components/Section/Nav/Nav.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,39 +147,9 @@ input[type="checkbox"] {
}

.hamburger {
position: relative;
display: block;
width: 25px;
height: 20px;
cursor: pointer;
}

.hamburger span {
position: absolute;
width: 100%;
height: 2px;
background-color: white;
top: 0;
left: 0;
}

.hamburger::after {
content: "";
position: absolute;
width: 100%;
height: 2px;
top: 50%;
transform: translateY(-50%);
background-color: white;
}

.hamburger::before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
background-color: white;
font-size: 2.5rem;
}

.hamburger.active > span {
Expand Down
6 changes: 3 additions & 3 deletions src/components/Section/Nav/Nav.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,13 +99,13 @@ const Nav = ({ inView }) => {
</li>

<span>
<a
{/* <a
href={() => false}
onClick={() => alert("Coming Soon...")}
className="nav_btn"
>
> */}
Resume
</a>
{/* </a> */}
</span>
</div>
</ul>
Expand Down

0 comments on commit 594401f

Please sign in to comment.