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

chore: project page edits etc

Browse source
This commit is contained in:
Harivansh Rathi 2025-01-03 19:02:52 +05:30
parent 7bacec764b
commit 1b599490ae
6 changed files with 248 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

147
src/components/socialicons/style.css
View file

@ -1,86 +1,101 @@
.stick_follow_icon { .stick_follow_icon {
top: 50%; top: 50%;
left: 30px; left: 30px;
width: 20px; width: 20px;
height: 200px; height: 200px;
position: fixed; position: fixed;
margin-top: -100px; margin-top: -100px;
z-index: 10;
}
@media (max-width: 1200px) {
.stick_follow_icon {
left: 15px;
}
}
@media (max-width: 1100px) {
.stick_follow_icon {
left: 10px;
}
} }
.stick_follow_icon ul { .stick_follow_icon ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.stick_follow_icon svg { .stick_follow_icon svg {
width: 1.3em; width: 1.3em;
height: 1.3em; height: 1.3em;
fill: var(--text-color) fill: var(--text-color);
} }
.stick_follow_icon p { .stick_follow_icon p {
top: 70px; top: 70px;
left: -24px; left: -24px;
width: 68px; width: 68px;
height: 20px; height: 20px;
color: var(--text-color); color: var(--text-color);
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
line-height: 1.2; line-height: 1.2;
white-space: nowrap; white-space: nowrap;
position: relative; position: relative;
transform: rotate( -90deg); transform: rotate(-90deg);
} }
.stick_follow_icon ul li { .stick_follow_icon ul li {
display: block; display: block;
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
margin-bottom: 10px; margin-bottom: 10px;
transition: all .3s; transition: all 0.3s;
} }
.stick_follow_icon p:after { .stick_follow_icon p:after {
top: 9px; top: 9px;
right: -48px; right: -48px;
width: 40px; width: 40px;
height: 1px; height: 1px;
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
background-color: var(--text-color); background-color: var(--text-color);
} }
@media only screen and (max-width: 991px) { @media only screen and (max-width: 991px) {
.stick_follow_icon { .stick_follow_icon {
width: unset; width: 100%;
height: unset; height: auto;
position: static; position: static;
margin-top: unset; margin-top: 40px;
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
justify-content: center; justify-content: center;
padding: 40px 0; padding: 20px 0;
align-items: center; align-items: center;
} background: var(--background-color);
.stick_follow_icon p { z-index: 1;
top: unset; }
left: unset; .stick_follow_icon p {
width: unset; top: unset;
height: unset; left: unset;
white-space: nowrap; width: unset;
position: relative; height: unset;
transform: unset; white-space: nowrap;
font-size: 17px; position: relative;
margin-right: 65px; transform: unset;
} font-size: 17px;
.stick_follow_icon ul { margin-right: 65px;
margin-bottom: 20px; }
} .stick_follow_icon ul {
.stick_follow_icon ul li { margin-bottom: 20px;
display: inline; }
margin-bottom: 29px; .stick_follow_icon ul li {
margin-right: 10px; display: inline;
} margin-bottom: 29px;
margin-right: 10px;
}
} }

62
src/hooks/AnimatedCursor.js
View file

@ -2,12 +2,12 @@ import React, {useEffect,useRef,useState,useCallback} from "react"
const IsDevice = (() => { const IsDevice = (() => {
if (typeof navigator == 'undefined') return if (typeof navigator == 'undefined') return
let ua = navigator.userAgent let ua = navigator.userAgent
return { return {
info: ua, info: ua,
Android() { Android() {
return ua.match(/Android/i) return ua.match(/Android/i)
}, },
@ -30,7 +30,7 @@ const IsDevice = (() => {
OperaMini() { OperaMini() {
return ua.match(/Opera Mini/i) return ua.match(/Opera Mini/i)
}, },
/** /**
* Any Device * Any Device
*/ */
@ -50,25 +50,25 @@ const IsDevice = (() => {
function useEventListener(eventName, handler, element = document) { function useEventListener(eventName, handler, element = document) {
const savedHandler = useRef() const savedHandler = useRef()
useEffect(() => { useEffect(() => {
savedHandler.current = handler savedHandler.current = handler
}, [handler]) }, [handler])
useEffect(() => { useEffect(() => {
const isSupported = element && element.addEventListener const isSupported = element && element.addEventListener
if (!isSupported) return if (!isSupported) return
const eventListener = (event) => savedHandler.current(event) const eventListener = (event) => savedHandler.current(event)
element.addEventListener(eventName, eventListener) element.addEventListener(eventName, eventListener)
return () => { return () => {
element.removeEventListener(eventName, eventListener) element.removeEventListener(eventName, eventListener)
} }
}, [eventName, element]) }, [eventName, element])
} }
/** /**
* Cursor Core * Cursor Core
* Replaces the native cursor with a custom animated cursor, consisting * Replaces the native cursor with a custom animated cursor, consisting
@ -121,7 +121,7 @@ function CursorCore({
const [isActiveClickable, setIsActiveClickable] = useState(false) const [isActiveClickable, setIsActiveClickable] = useState(false)
let endX = useRef(0) let endX = useRef(0)
let endY = useRef(0) let endY = useRef(0)
/** /**
* Primary Mouse move event * Primary Mouse move event
* @param {number} clientX - MouseEvent.clientx * @param {number} clientX - MouseEvent.clientx
@ -134,7 +134,7 @@ function CursorCore({
endX.current = clientX endX.current = clientX
endY.current = clientY endY.current = clientY
}, []) }, [])
// Outer Cursor Animation Delay // Outer Cursor Animation Delay
const animateOuterCursor = useCallback( const animateOuterCursor = useCallback(
(time) => { (time) => {
@ -149,25 +149,25 @@ function CursorCore({
}, },
[requestRef] // eslint-disable-line [requestRef] // eslint-disable-line
) )
// RAF for animateOuterCursor // RAF for animateOuterCursor
useEffect(() => { useEffect(() => {
requestRef.current = requestAnimationFrame(animateOuterCursor) requestRef.current = requestAnimationFrame(animateOuterCursor)
return () => cancelAnimationFrame(requestRef.current) return () => cancelAnimationFrame(requestRef.current)
}, [animateOuterCursor]) }, [animateOuterCursor])
// Mouse Events State updates // Mouse Events State updates
const onMouseDown = useCallback(() => setIsActive(true), []) const onMouseDown = useCallback(() => setIsActive(true), [])
const onMouseUp = useCallback(() => setIsActive(false), []) const onMouseUp = useCallback(() => setIsActive(false), [])
const onMouseEnterViewport = useCallback(() => setIsVisible(true), []) const onMouseEnterViewport = useCallback(() => setIsVisible(true), [])
const onMouseLeaveViewport = useCallback(() => setIsVisible(false), []) const onMouseLeaveViewport = useCallback(() => setIsVisible(false), [])
useEventListener('mousemove', onMouseMove) useEventListener('mousemove', onMouseMove)
useEventListener('mousedown', onMouseDown) useEventListener('mousedown', onMouseDown)
useEventListener('mouseup', onMouseUp) useEventListener('mouseup', onMouseUp)
useEventListener('mouseover', onMouseEnterViewport) useEventListener('mouseover', onMouseEnterViewport)
useEventListener('mouseout', onMouseLeaveViewport) useEventListener('mouseout', onMouseLeaveViewport)
// Cursors Hover/Active State // Cursors Hover/Active State
useEffect(() => { useEffect(() => {
if (isActive) { if (isActive) {
@ -178,7 +178,7 @@ function CursorCore({
cursorOuterRef.current.style.transform = 'translate(-50%, -50%) scale(1)' cursorOuterRef.current.style.transform = 'translate(-50%, -50%) scale(1)'
} }
}, [innerScale, outerScale, isActive]) }, [innerScale, outerScale, isActive])
// Cursors Click States // Cursors Click States
useEffect(() => { useEffect(() => {
if (isActiveClickable) { if (isActiveClickable) {
@ -190,7 +190,7 @@ function CursorCore({
})` })`
} }
}, [innerScale, outerScale, isActiveClickable]) }, [innerScale, outerScale, isActiveClickable])
// Cursor Visibility State // Cursor Visibility State
useEffect(() => { useEffect(() => {
if (isVisible) { if (isVisible) {
@ -201,13 +201,13 @@ function CursorCore({
cursorOuterRef.current.style.opacity = 0 cursorOuterRef.current.style.opacity = 0
} }
}, [isVisible]) }, [isVisible])
useEffect(() => { useEffect(() => {
const clickableEls = document.querySelectorAll(clickables.join(',')) const clickableEls = document.querySelectorAll(clickables.join(','))
clickableEls.forEach((el) => { clickableEls.forEach((el) => {
el.style.cursor = 'none' el.style.cursor = 'none'
el.addEventListener('mouseover', () => { el.addEventListener('mouseover', () => {
setIsActive(true) setIsActive(true)
}) })
@ -226,7 +226,7 @@ function CursorCore({
setIsActiveClickable(false) setIsActiveClickable(false)
}) })
}) })
return () => { return () => {
clickableEls.forEach((el) => { clickableEls.forEach((el) => {
el.removeEventListener('mouseover', () => { el.removeEventListener('mouseover', () => {
@ -249,7 +249,7 @@ function CursorCore({
}) })
} }
}, [isActive, clickables]) }, [isActive, clickables])
// Cursor Styles // Cursor Styles
const styles = { const styles = {
cursorInner: { cursorInner: {
@ -278,10 +278,12 @@ function CursorCore({
...(outerStyle && outerStyle) ...(outerStyle && outerStyle)
} }
} }
// Hide / Show global cursor // Hide native cursor only on non-mobile devices
document.body.style.cursor = 'none' if (!IsDevice.any()) {
document.body.style.cursor = 'none'
}
return ( return (
<React.Fragment> <React.Fragment>
<div ref={cursorOuterRef} style={styles.cursorOuter} /> <div ref={cursorOuterRef} style={styles.cursorOuter} />
@ -289,7 +291,7 @@ function CursorCore({
</React.Fragment> </React.Fragment>
) )
} }
/** /**
* AnimatedCursor * AnimatedCursor
* Calls and passes props to CursorCore if not a touch/mobile device. * Calls and passes props to CursorCore if not a touch/mobile device.
@ -324,6 +326,6 @@ function CursorCore({
/> />
) )
} }
export default AnimatedCursor export default AnimatedCursor

14
src/index.css
View file

@ -7,6 +7,7 @@
--text-color-3: rgb(204, 0, 0); --text-color-3: rgb(204, 0, 0);
--overlay-color: rgb(8 8 8 / 63%); --overlay-color: rgb(8 8 8 / 63%);
--image-container-bg: #060606; --image-container-bg: #060606;
--card-border: rgba(255, 255, 255, 0.2);
} }
[data-theme="light"] { [data-theme="light"] {
@ -18,6 +19,7 @@
--text-color-3: rgb(204, 0, 0); --text-color-3: rgb(204, 0, 0);
--overlay-color: rgb(227 218 201 / 70%); --overlay-color: rgb(227 218 201 / 70%);
--image-container-bg: #d8c9b2; --image-container-bg: #d8c9b2;
--card-border: rgba(0, 0, 0, 0.2);
} }
html, html,
@ -27,9 +29,9 @@ body {
body { body {
margin: 0; margin: 0;
height: 100%; height: 100vh;
overflow-x: hidden; overflow-x: hidden;
overflow-y: visible; overflow-y: hidden;
background-color: var(--bg-color); background-color: var(--bg-color);
color: var(--text-color); color: var(--text-color);
font-family: "Raleway", sans-serif; font-family: "Raleway", sans-serif;
@ -40,6 +42,14 @@ body {
border-right: 10px solid var(--primary-color); border-right: 10px solid var(--primary-color);
} }
@media (max-width: 768px) {
body {
overflow-y: auto;
height: auto;
min-height: 100vh;
}
}
ul { ul {
list-style: none; list-style: none;
} }

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

@ -1,4 +1,4 @@
import React from "react"; import React, { useEffect, useState } from "react";
import "./style.css"; import "./style.css";
import { Helmet, HelmetProvider } from "react-helmet-async"; import { Helmet, HelmetProvider } from "react-helmet-async";
import Typewriter from "typewriter-effect"; import Typewriter from "typewriter-effect";
@ -6,6 +6,36 @@ import { introdata, meta } from "../../content_option";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
export const Home = () => { export const Home = () => {
const [needsScroll, setNeedsScroll] = useState(false);
useEffect(() => {
const checkOverflow = () => {
const body = document.body;
const html = document.documentElement;
const documentHeight = Math.max(
body.scrollHeight,
body.offsetHeight,
html.clientHeight,
html.scrollHeight,
html.offsetHeight
);
const windowHeight = window.innerHeight;
setNeedsScroll(documentHeight > windowHeight);
};
// Initial check
checkOverflow();
// Add resize listener
window.addEventListener('resize', checkOverflow);
// Cleanup
return () => window.removeEventListener('resize', checkOverflow);
}, []);
useEffect(() => {
document.body.style.overflowY = needsScroll ? 'auto' : 'hidden';
}, [needsScroll]);
return ( return (
<HelmetProvider> <HelmetProvider>
<section id="home" className="home"> <section id="home" className="home">

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

@ -34,13 +34,64 @@ section {
height: calc(100vh - 60px); height: calc(100vh - 60px);
min-height: 700px; min-height: 700px;
height: 100vh; height: 100vh;
margin-top: -60px; margin-top: 0;
} }
/* Mobile-first responsive styles */
@media (max-width: 991.98px) { @media (max-width: 991.98px) {
.intro_sec { .intro_sec {
display: block; display: flex;
flex-direction: column;
height: auto !important; height: auto !important;
padding: 20px 0;
margin-top: 40px;
}
.intro_sec .text,
.intro_sec .h_bg-image {
width: 100%;
margin: 0 auto;
}
.intro_sec .text h1 {
font-size: 24px;
margin-bottom: 20px;
padding-top: 10px;
padding-bottom: 20px;
}
.intro_sec .text h3 {
font-size: 14px;
}
.intro_sec > .h_bg-image {
min-height: 400px;
margin-top: 10px !important;
margin-bottom: 30px !important;
}
.ac_btn {
padding: 12px 24px;
margin: 10px 0;
width: 100%;
text-align: center;
}
}
/* Extra small devices (phones, 600px and down) */
@media (max-width: 600px) {
.intro_sec .text h1 {
font-size: 22px;
}
.intro_sec .h_bg-image {
min-height: 300px;
}
.btn-portfolio,
.btn-about {
font-size: 14px;
padding: 10px 20px;
} }
} }

56
src/pages/portfolio/style.css
View file

@ -1,8 +1,12 @@
.project_items_ho { .project_items_ho {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: flex-start;
gap: 2rem; gap: 2rem;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
margin-top: 2rem;
} }
.project_item { .project_item {
@ -10,16 +14,25 @@
text-align: center; text-align: center;
margin: 0.5rem; margin: 0.5rem;
position: relative; position: relative;
background: var(--image-container-bg); background: var(--card-bg, var(--background));
padding: 6px; padding: 1rem;
border: 1px solid var(--image-container-bg); border: 0.5px solid var(--card-border, var(--foreground));
transition: 0.3s ease; border-radius: 8px;
outline: 3px solid var(--card-outline-color, var(--primary));
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 0; font-size: 0;
min-height: 300px; min-height: 300px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: hidden;
}
.project_item:hover {
transform: translateY(-2px);
border-color: var(--card-outline-hover, var(--primary));
} }
@media (max-width: 768px) { @media (max-width: 768px) {
@ -50,10 +63,11 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: var(--overlay-color); background: var(--overlay-bg, rgba(var(--background-rgb), 0.9));
backdrop-filter: blur(4px);
opacity: 0; opacity: 0;
transition: opacity 0.3s ease-in-out; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
padding: 10px; padding: 1.5rem;
box-sizing: border-box; box-sizing: border-box;
} }
@ -62,21 +76,29 @@
} }
.project_item .content p { .project_item .content p {
color: var(--text-color); color: var(--foreground);
font-size: 1rem; font-size: 0.875rem;
margin-bottom: 10px; line-height: 1.25rem;
margin-bottom: 1rem;
text-align: center;
max-width: 90%;
} }
.project_item .content a { .project_item .content a {
background: var(--bg-color); background: var(--button-bg, var(--background));
border: solid 1px var(--text-color); border: 1px solid var(--button-border, var(--border));
padding: 4px 8px; border-radius: 6px;
padding: 0.5rem 1rem;
text-align: center; text-align: center;
font-size: 1rem; font-size: 0.875rem;
color: var(--text-color); font-weight: 500;
color: var(--foreground);
text-decoration: none; text-decoration: none;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
} }
.project_item .content a:hover { .project_item .content a:hover {
text-decoration: none; background: var(--button-hover-bg, var(--muted));
transform: translateY(-1px);
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
} }