mirror of
https://github.com/harivansh-afk/React-Portfolio.git
synced 2026-04-15 13:03:46 +00:00
chore: project page edits etc
This commit is contained in:
parent
7bacec764b
commit
1b599490ae
6 changed files with 248 additions and 118 deletions
|
|
@ -1,86 +1,101 @@
|
|||
.stick_follow_icon {
|
||||
top: 50%;
|
||||
left: 30px;
|
||||
width: 20px;
|
||||
height: 200px;
|
||||
position: fixed;
|
||||
margin-top: -100px;
|
||||
top: 50%;
|
||||
left: 30px;
|
||||
width: 20px;
|
||||
height: 200px;
|
||||
position: fixed;
|
||||
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 {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.stick_follow_icon svg {
|
||||
width: 1.3em;
|
||||
height: 1.3em;
|
||||
fill: var(--text-color)
|
||||
width: 1.3em;
|
||||
height: 1.3em;
|
||||
fill: var(--text-color);
|
||||
}
|
||||
|
||||
.stick_follow_icon p {
|
||||
top: 70px;
|
||||
left: -24px;
|
||||
width: 68px;
|
||||
height: 20px;
|
||||
color: var(--text-color);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
transform: rotate( -90deg);
|
||||
top: 70px;
|
||||
left: -24px;
|
||||
width: 68px;
|
||||
height: 20px;
|
||||
color: var(--text-color);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.stick_follow_icon ul li {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
transition: all .3s;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.stick_follow_icon p:after {
|
||||
top: 9px;
|
||||
right: -48px;
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
background-color: var(--text-color);
|
||||
top: 9px;
|
||||
right: -48px;
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
background-color: var(--text-color);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 991px) {
|
||||
.stick_follow_icon {
|
||||
width: unset;
|
||||
height: unset;
|
||||
position: static;
|
||||
margin-top: unset;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: center;
|
||||
padding: 40px 0;
|
||||
align-items: center;
|
||||
}
|
||||
.stick_follow_icon p {
|
||||
top: unset;
|
||||
left: unset;
|
||||
width: unset;
|
||||
height: unset;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
transform: unset;
|
||||
font-size: 17px;
|
||||
margin-right: 65px;
|
||||
}
|
||||
.stick_follow_icon ul {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.stick_follow_icon ul li {
|
||||
display: inline;
|
||||
margin-bottom: 29px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.stick_follow_icon {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: static;
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: center;
|
||||
padding: 20px 0;
|
||||
align-items: center;
|
||||
background: var(--background-color);
|
||||
z-index: 1;
|
||||
}
|
||||
.stick_follow_icon p {
|
||||
top: unset;
|
||||
left: unset;
|
||||
width: unset;
|
||||
height: unset;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
transform: unset;
|
||||
font-size: 17px;
|
||||
margin-right: 65px;
|
||||
}
|
||||
.stick_follow_icon ul {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.stick_follow_icon ul li {
|
||||
display: inline;
|
||||
margin-bottom: 29px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,12 +2,12 @@ import React, {useEffect,useRef,useState,useCallback} from "react"
|
|||
|
||||
const IsDevice = (() => {
|
||||
if (typeof navigator == 'undefined') return
|
||||
|
||||
|
||||
let ua = navigator.userAgent
|
||||
|
||||
|
||||
return {
|
||||
info: ua,
|
||||
|
||||
|
||||
Android() {
|
||||
return ua.match(/Android/i)
|
||||
},
|
||||
|
|
@ -30,7 +30,7 @@ const IsDevice = (() => {
|
|||
OperaMini() {
|
||||
return ua.match(/Opera Mini/i)
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Any Device
|
||||
*/
|
||||
|
|
@ -50,25 +50,25 @@ const IsDevice = (() => {
|
|||
|
||||
function useEventListener(eventName, handler, element = document) {
|
||||
const savedHandler = useRef()
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
savedHandler.current = handler
|
||||
}, [handler])
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const isSupported = element && element.addEventListener
|
||||
if (!isSupported) return
|
||||
|
||||
|
||||
const eventListener = (event) => savedHandler.current(event)
|
||||
|
||||
|
||||
element.addEventListener(eventName, eventListener)
|
||||
|
||||
|
||||
return () => {
|
||||
element.removeEventListener(eventName, eventListener)
|
||||
}
|
||||
}, [eventName, element])
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Cursor Core
|
||||
* Replaces the native cursor with a custom animated cursor, consisting
|
||||
|
|
@ -121,7 +121,7 @@ function CursorCore({
|
|||
const [isActiveClickable, setIsActiveClickable] = useState(false)
|
||||
let endX = useRef(0)
|
||||
let endY = useRef(0)
|
||||
|
||||
|
||||
/**
|
||||
* Primary Mouse move event
|
||||
* @param {number} clientX - MouseEvent.clientx
|
||||
|
|
@ -134,7 +134,7 @@ function CursorCore({
|
|||
endX.current = clientX
|
||||
endY.current = clientY
|
||||
}, [])
|
||||
|
||||
|
||||
// Outer Cursor Animation Delay
|
||||
const animateOuterCursor = useCallback(
|
||||
(time) => {
|
||||
|
|
@ -149,25 +149,25 @@ function CursorCore({
|
|||
},
|
||||
[requestRef] // eslint-disable-line
|
||||
)
|
||||
|
||||
|
||||
// RAF for animateOuterCursor
|
||||
useEffect(() => {
|
||||
requestRef.current = requestAnimationFrame(animateOuterCursor)
|
||||
return () => cancelAnimationFrame(requestRef.current)
|
||||
}, [animateOuterCursor])
|
||||
|
||||
|
||||
// Mouse Events State updates
|
||||
const onMouseDown = useCallback(() => setIsActive(true), [])
|
||||
const onMouseUp = useCallback(() => setIsActive(false), [])
|
||||
const onMouseEnterViewport = useCallback(() => setIsVisible(true), [])
|
||||
const onMouseLeaveViewport = useCallback(() => setIsVisible(false), [])
|
||||
|
||||
|
||||
useEventListener('mousemove', onMouseMove)
|
||||
useEventListener('mousedown', onMouseDown)
|
||||
useEventListener('mouseup', onMouseUp)
|
||||
useEventListener('mouseover', onMouseEnterViewport)
|
||||
useEventListener('mouseout', onMouseLeaveViewport)
|
||||
|
||||
|
||||
// Cursors Hover/Active State
|
||||
useEffect(() => {
|
||||
if (isActive) {
|
||||
|
|
@ -178,7 +178,7 @@ function CursorCore({
|
|||
cursorOuterRef.current.style.transform = 'translate(-50%, -50%) scale(1)'
|
||||
}
|
||||
}, [innerScale, outerScale, isActive])
|
||||
|
||||
|
||||
// Cursors Click States
|
||||
useEffect(() => {
|
||||
if (isActiveClickable) {
|
||||
|
|
@ -190,7 +190,7 @@ function CursorCore({
|
|||
})`
|
||||
}
|
||||
}, [innerScale, outerScale, isActiveClickable])
|
||||
|
||||
|
||||
// Cursor Visibility State
|
||||
useEffect(() => {
|
||||
if (isVisible) {
|
||||
|
|
@ -201,13 +201,13 @@ function CursorCore({
|
|||
cursorOuterRef.current.style.opacity = 0
|
||||
}
|
||||
}, [isVisible])
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const clickableEls = document.querySelectorAll(clickables.join(','))
|
||||
|
||||
|
||||
clickableEls.forEach((el) => {
|
||||
el.style.cursor = 'none'
|
||||
|
||||
|
||||
el.addEventListener('mouseover', () => {
|
||||
setIsActive(true)
|
||||
})
|
||||
|
|
@ -226,7 +226,7 @@ function CursorCore({
|
|||
setIsActiveClickable(false)
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
return () => {
|
||||
clickableEls.forEach((el) => {
|
||||
el.removeEventListener('mouseover', () => {
|
||||
|
|
@ -249,7 +249,7 @@ function CursorCore({
|
|||
})
|
||||
}
|
||||
}, [isActive, clickables])
|
||||
|
||||
|
||||
// Cursor Styles
|
||||
const styles = {
|
||||
cursorInner: {
|
||||
|
|
@ -278,10 +278,12 @@ function CursorCore({
|
|||
...(outerStyle && outerStyle)
|
||||
}
|
||||
}
|
||||
|
||||
// Hide / Show global cursor
|
||||
document.body.style.cursor = 'none'
|
||||
|
||||
|
||||
// Hide native cursor only on non-mobile devices
|
||||
if (!IsDevice.any()) {
|
||||
document.body.style.cursor = 'none'
|
||||
}
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div ref={cursorOuterRef} style={styles.cursorOuter} />
|
||||
|
|
@ -289,7 +291,7 @@ function CursorCore({
|
|||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* AnimatedCursor
|
||||
* Calls and passes props to CursorCore if not a touch/mobile device.
|
||||
|
|
@ -324,6 +326,6 @@ function CursorCore({
|
|||
/>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
export default AnimatedCursor
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
--text-color-3: rgb(204, 0, 0);
|
||||
--overlay-color: rgb(8 8 8 / 63%);
|
||||
--image-container-bg: #060606;
|
||||
--card-border: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
|
|
@ -18,6 +19,7 @@
|
|||
--text-color-3: rgb(204, 0, 0);
|
||||
--overlay-color: rgb(227 218 201 / 70%);
|
||||
--image-container-bg: #d8c9b2;
|
||||
--card-border: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
html,
|
||||
|
|
@ -27,9 +29,9 @@ body {
|
|||
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: visible;
|
||||
overflow-y: hidden;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
font-family: "Raleway", sans-serif;
|
||||
|
|
@ -40,6 +42,14 @@ body {
|
|||
border-right: 10px solid var(--primary-color);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
overflow-y: auto;
|
||||
height: auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import "./style.css";
|
||||
import { Helmet, HelmetProvider } from "react-helmet-async";
|
||||
import Typewriter from "typewriter-effect";
|
||||
|
|
@ -6,6 +6,36 @@ import { introdata, meta } from "../../content_option";
|
|||
import { Link } from "react-router-dom";
|
||||
|
||||
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 (
|
||||
<HelmetProvider>
|
||||
<section id="home" className="home">
|
||||
|
|
|
|||
|
|
@ -34,13 +34,64 @@ section {
|
|||
height: calc(100vh - 60px);
|
||||
min-height: 700px;
|
||||
height: 100vh;
|
||||
margin-top: -60px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* Mobile-first responsive styles */
|
||||
@media (max-width: 991.98px) {
|
||||
.intro_sec {
|
||||
display: block;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
.project_items_ho {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
justify-content: flex-start;
|
||||
gap: 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.project_item {
|
||||
|
|
@ -10,16 +14,25 @@
|
|||
text-align: center;
|
||||
margin: 0.5rem;
|
||||
position: relative;
|
||||
background: var(--image-container-bg);
|
||||
padding: 6px;
|
||||
border: 1px solid var(--image-container-bg);
|
||||
transition: 0.3s ease;
|
||||
background: var(--card-bg, var(--background));
|
||||
padding: 1rem;
|
||||
border: 0.5px solid var(--card-border, var(--foreground));
|
||||
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;
|
||||
min-height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.project_item:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--card-outline-hover, var(--primary));
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
|
@ -50,10 +63,11 @@
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: var(--overlay-color);
|
||||
background: var(--overlay-bg, rgba(var(--background-rgb), 0.9));
|
||||
backdrop-filter: blur(4px);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
padding: 10px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
padding: 1.5rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
|
@ -62,21 +76,29 @@
|
|||
}
|
||||
|
||||
.project_item .content p {
|
||||
color: var(--text-color);
|
||||
font-size: 1rem;
|
||||
margin-bottom: 10px;
|
||||
color: var(--foreground);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.project_item .content a {
|
||||
background: var(--bg-color);
|
||||
border: solid 1px var(--text-color);
|
||||
padding: 4px 8px;
|
||||
background: var(--button-bg, var(--background));
|
||||
border: 1px solid var(--button-border, var(--border));
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem 1rem;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
color: var(--text-color);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--foreground);
|
||||
text-decoration: none;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue