chore: edits to ui

This commit is contained in:
Harivansh Rathi 2025-01-03 19:24:49 +05:30
parent 1b599490ae
commit 79615758d4
3 changed files with 148 additions and 148 deletions

View file

@ -1,9 +1,10 @@
import React, { useState } from "react"; import React, { useState } from "react";
import "./style.css"; import "./style.css";
import { VscGrabber, VscClose } from "react-icons/vsc"; import { VscGrabber, VscClose } from "react-icons/vsc";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { logotext ,socialprofils } from "../content_option"; import { logotext ,socialprofils } from "../content_option";
import Themetoggle from "../components/themetoggle"; import Themetoggle from "../components/themetoggle";
import { Socialicons } from "../components/socialicons";
const Headermain = () => { const Headermain = () => {
const [isActive, setActive] = useState("false"); const [isActive, setActive] = useState("false");
@ -50,13 +51,10 @@ const Headermain = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="menu_footer d-flex flex-column flex-md-row justify-content-between align-items-md-center position-absolute w-100 p-3"> <div className="menu_footer d-flex flex-column flex-md-row justify-content-center align-items-md-center position-absolute w-100 p-3">
<div className="d-flex"> <div className="d-flex">
<a href={socialprofils.github}>Github</a> <Socialicons />
<a href={socialprofils.linkedin}>LinkedIn</a>
<a href={socialprofils.portfolio}>Resume</a>
</div> </div>
<p className="copyright m-0">copyright __ {logotext}</p>
</div> </div>
</div> </div>
</header> </header>

View file

@ -141,7 +141,7 @@
background-color: var(--primary-color); background-color: var(--primary-color);
will-change: transform; will-change: transform;
transform: translateY(-100%); transform: translateY(-100%);
transition: .5s ease all; transition: 0.5s ease all;
} }
.menu__opend .bg__menu { .menu__opend .bg__menu {
@ -156,22 +156,24 @@
} }
.the_menu { .the_menu {
padding-top: 20vh; padding-top: 40vh;
padding-bottom: 20vh; padding-bottom: 10vh;
padding-left: 0; padding-left: 0;
text-align: center;
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.menu__container { .menu__container {
margin-left: 33.3333%; margin-left: 0;
text-align: center;
} }
.the_menu { .the_menu {
padding-top: 10vh; padding-top: 30vh;
padding-bottom: 10vh; padding-bottom: 10vh;
} }
} }
.the_menu .menu_item>a { .the_menu .menu_item > a {
color: var(--text-color-2); color: var(--text-color-2);
line-height: 1; line-height: 1;
font-size: 2rem; font-size: 2rem;
@ -183,12 +185,12 @@
font-family: Marcellus; font-family: Marcellus;
} }
.the_menu .menu_item>a:hover { .the_menu .menu_item > a:hover {
color: var(--text-color-3); color: var(--text-color-3);
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.the_menu .menu_item>a { .the_menu .menu_item > a {
font-size: 4.8vw; font-size: 4.8vw;
} }
} }

View file

@ -54,6 +54,29 @@ export const About = () => {
</table> </table>
</Col> </Col>
</Row> </Row>
<Row className="sec_sp">
<Col lg="5">
<h3 className="color_sec py-4">Education</h3>
</Col>
<Col lg="7">
<div>
<p>
<strong>University of Virginia, Charlottesville, VA</strong>
<br />
Bachelor of Arts, Computer Science
<br />
Expected May 2026
<br />
Cumulative GPA: 3.55/4.0
<br />
Relevant Coursework:
<br />
Data structures and algo, Computer systems and organization,
Software dev essentials
</p>
</div>
</Col>
</Row>
<Row className="sec_sp"> <Row className="sec_sp">
<Col lg="5"> <Col lg="5">
<h3 className="color_sec py-4">Skills</h3> <h3 className="color_sec py-4">Skills</h3>
@ -78,29 +101,6 @@ export const About = () => {
})} })}
</Col> </Col>
</Row> </Row>
<Row className="sec_sp">
<Col lg="5">
<h3 className="color_sec py-4">Education</h3>
</Col>
<Col lg="7">
<div>
<p>
<strong>University of Virginia, Charlottesville, VA</strong>
<br />
Bachelor of Arts, Computer Science
<br />
Expected May 2026
<br />
Cumulative GPA: 3.55/4.0
<br />
Relevant Coursework:
<br />
Data structures and algo, Computer systems and organization,
Software dev essentials
</p>
</div>
</Col>
</Row>
</Container> </Container>
</HelmetProvider> </HelmetProvider>
); );