harivansh-afk/React-Portfolio
1
0
Fork 0
mirror of https://github.com/harivansh-afk/React-Portfolio.git synced 2026-04-19 06:01:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: Enhance app structure by removing routing and social icons components. Implement full-page scrolling with section navigation. Update package dependencies and add new project details to content options.

Browse source
This commit is contained in:
Harivansh Rathi 2025-03-17 23:02:48 -04:00
parent c73262065d
commit 4ffb2ffc07
20 changed files with 19963 additions and 1775 deletions
Download patch file Download diff file Expand all files Collapse all files

88
src/pages/home/index.js
View file

@ -3,7 +3,13 @@ import "./style.css";
import { Helmet, HelmetProvider } from "react-helmet-async";
import Typewriter from "typewriter-effect";
import { introdata, meta } from "../../content_option";
import { Link } from "react-router-dom";
import {
RiGithubFill,
RiLinkedinFill,
RiFilePdfFill,
RiTwitterXFill
} from "react-icons/ri";
import { socialprofils } from "../../content_option";
export const Home = () => {
const [needsScroll, setNeedsScroll] = useState(false);
@ -57,7 +63,7 @@ export const Home = () => {
style={{ backgroundImage: `url(/assets/images/new_headshot.png)` }}
></div>
<h2 className="mb-1x">{introdata.title}</h2>
<h1 className="fluidz-48 mb-1x">
<h1 className="fluidz-48 mb-3">
<Typewriter
options={{
strings: [
@ -71,24 +77,70 @@ export const Home = () => {
}}
/>
</h1>
<div className="social-icons mb-3">
<a
href={socialprofils.github}
target="_blank"
rel="noopener noreferrer"
className="icon-link"
aria-label="GitHub"
>
<RiGithubFill />
</a>
<a
href={socialprofils.linkedin}
target="_blank"
rel="noopener noreferrer"
className="icon-link"
aria-label="LinkedIn"
>
<RiLinkedinFill />
</a>
<a
href={socialprofils.resume}
target="_blank"
rel="noopener noreferrer"
className="icon-link"
aria-label="Resume"
>
<RiFilePdfFill />
</a>
<a
href="https://x.com/HarivanshRathi"
target="_blank"
rel="noopener noreferrer"
className="icon-link"
aria-label="X (Twitter)"
>
<RiTwitterXFill />
</a>
</div>
<p className="mb-1x">{introdata.description}</p>
<div className="intro_btn-action pb-5">
<Link to="/portfolio" className="text_2">
<div id="button_p" className="ac_btn btn ">
My Portfolio
<div className="ring one"></div>
<div className="ring two"></div>
<div className="ring three"></div>
</div>
</Link>
<Link to="/contact">
<div id="button_h" className="ac_btn btn">
Contact Me
<div className="ring one"></div>
<div className="ring two"></div>
<div className="ring three"></div>
</div>
</Link>
<div className="buttons-container">
<a href="#portfolio" className="text_2" onClick={(e) => {
e.preventDefault();
document.getElementById('portfolio').scrollIntoView({ behavior: 'smooth' });
}}>
<div id="button_p" className="ac_btn btn ">
My Portfolio
<div className="ring one"></div>
<div className="ring two"></div>
<div className="ring three"></div>
</div>
</a>
<a href="#contact" onClick={(e) => {
e.preventDefault();
document.getElementById('contact').scrollIntoView({ behavior: 'smooth' });
}}>
<div id="button_h" className="ac_btn btn">
Contact Me
<div className="ring one"></div>
<div className="ring two"></div>
<div className="ring three"></div>
</div>
</a>
</div>
</div>
</div>
</div>

90
src/pages/home/style.css
View file

@ -90,6 +90,16 @@ section {
flex-direction: column;
align-items: center;
gap: 15px;
width: 100%;
padding: 0;
}
.intro_btn-action .buttons-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
width: 100%;
}
.ac_btn {
@ -103,6 +113,9 @@ section {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 100%;
padding: 0 20px;
}
.intro_sec .text p {
@ -110,6 +123,11 @@ section {
max-width: 90%;
margin: 0 auto 20px;
}
.social-icons {
justify-content: center;
margin-bottom: 20px;
}
}
/* Extra small devices (phones, 600px and down) */
@ -127,6 +145,11 @@ section {
font-size: 14px;
padding: 10px 20px;
}
.ac_btn {
width: 180px; /* Slightly smaller on very small screens */
padding: 10px 20px;
}
}
.intro_sec .text,
@ -330,4 +353,71 @@ section {
background-color: transparent;
border: 0.5px solid var(--secondary-color);
}
.intro_btn-action {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 15px;
width: 100%;
padding: 0;
}
.intro_btn-action .buttons-container {
display: flex;
flex-direction: column;
gap: 15px;
align-items: flex-start;
}
.ac_btn {
margin-right: 0; /* Remove default right margin */
}
}
.social-icons {
display: flex;
gap: 12px;
align-items: center;
justify-content: flex-start;
padding: 0;
margin: 0;
}
.social-icons .icon-link {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(var(--bg-color-rgb, 0, 0, 0), 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.social-icons .icon-link:hover {
background: rgba(var(--primary-color-rgb, 255, 1, 79), 0.1);
transform: translateY(-2px);
}
.social-icons .icon-link svg {
width: 18px;
height: 18px;
fill: var(--text-color);
opacity: 0.8;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.social-icons .icon-link:hover svg {
opacity: 1;
fill: var(--primary-color, #ff014f);
}
/* Mobile responsive adjustments */
@media (max-width: 991.98px) {
.social-icons {
justify-content: center;
}
}