mirror of
https://github.com/harivansh-afk/React-Portfolio.git
synced 2026-04-19 01:04:31 +00:00
initial commit
This commit is contained in:
commit
fb5b992b17
35 changed files with 11573 additions and 0 deletions
66
src/pages/home/index.js
Normal file
66
src/pages/home/index.js
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
import React from "react";
|
||||
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";
|
||||
|
||||
export const Home = () => {
|
||||
return (
|
||||
<HelmetProvider>
|
||||
<section id="home" className="home">
|
||||
<Helmet>
|
||||
<meta charSet="utf-8" />
|
||||
<title> {meta.title}</title>
|
||||
<meta name="description" content={meta.description} />
|
||||
</Helmet>
|
||||
<div className="intro_sec d-block d-lg-flex align-items-center ">
|
||||
<div
|
||||
className="h_bg-image order-1 order-lg-2 h-100 "
|
||||
style={{ backgroundImage: `url(/assets/images/Image%20with%20Background%20Removed.png)` }}
|
||||
></div>
|
||||
<div className="text order-2 order-lg-1 h-100 d-lg-flex justify-content-center">
|
||||
<div className="align-self-center ">
|
||||
<div className="intro mx-auto">
|
||||
<h2 className="mb-1x">{introdata.title}</h2>
|
||||
<h1 className="fluidz-48 mb-1x">
|
||||
<Typewriter
|
||||
options={{
|
||||
strings: [
|
||||
introdata.animated.first,
|
||||
introdata.animated.second,
|
||||
introdata.animated.third,
|
||||
],
|
||||
autoStart: true,
|
||||
loop: true,
|
||||
deleteSpeed: 10,
|
||||
}}
|
||||
/>
|
||||
</h1>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</HelmetProvider>
|
||||
);
|
||||
};
|
||||
208
src/pages/home/style.css
Normal file
208
src/pages/home/style.css
Normal file
|
|
@ -0,0 +1,208 @@
|
|||
section {
|
||||
flex: 1 0 auto;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
-webkit-transition: all 0.5s ease-in;
|
||||
-o-transition: all 0.5s ease-in;
|
||||
transition: all 0.5s ease-in;
|
||||
}
|
||||
|
||||
.who_am_I {
|
||||
font-family: Cinzel;
|
||||
}
|
||||
|
||||
.has-first-color {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.btn-portfolio {
|
||||
background: var(--primary-color);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.btn-portfolio a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-about a {
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.intro_sec {
|
||||
height: calc(100vh - 60px);
|
||||
min-height: 700px;
|
||||
height: 100vh;
|
||||
margin-top: -60px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.intro_sec {
|
||||
display: block;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.intro_sec .text,
|
||||
.intro_sec .h_bg-image {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.intro_sec .text,
|
||||
.intro_sec .h_bg-image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.intro_sec .intro {
|
||||
max-width: 450px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.intro_sec .intro {
|
||||
max-width: 700px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.intro_sec .intro .feature .wrap-icon {
|
||||
background: 0 0 !important;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.intro_sec .intro .feature .wrap-icon svg {
|
||||
color: #5cccc9;
|
||||
}
|
||||
|
||||
.intro_sec .text h1 {
|
||||
font-size: 30px;
|
||||
margin-bottom: 50px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.intro_sec .text h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.intro_sec .h_bg-image {
|
||||
background-size: cover;
|
||||
background-position: center 30%;
|
||||
min-height: 700px;
|
||||
position: relative;
|
||||
max-width: 600px;
|
||||
max-height: 600px;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.ac_btn {
|
||||
padding: 4px 19px;
|
||||
color: var(--secondary-color);
|
||||
position: relative;
|
||||
border: var(--secondary-color) 2px solid;
|
||||
overflow: hidden;
|
||||
transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
cursor: pointer;
|
||||
border-radius: 0;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.ac_btn a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ac_btn:hover {
|
||||
box-shadow: 8px 8px 0px var(--text-color), -8px -8px 0px var(--text-color);
|
||||
}
|
||||
|
||||
.ac_btn:hover .one {
|
||||
opacity: 1;
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
}
|
||||
|
||||
.ac_btn:hover .two {
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
}
|
||||
|
||||
.ac_btn:hover .three {
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
}
|
||||
|
||||
.ac_btn:hover .four {
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
}
|
||||
|
||||
.ac_btn .ring {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate3d(0px, 90px, 0px);
|
||||
}
|
||||
|
||||
.ac_btn .one {
|
||||
background-color: #000;
|
||||
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -3;
|
||||
z-index: -4;
|
||||
}
|
||||
|
||||
.ac_btn .two {
|
||||
background-color: var(--primary-color);
|
||||
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -3;
|
||||
}
|
||||
|
||||
.ac_btn .three {
|
||||
background-color: var(--secondary-color);
|
||||
z-index: -2;
|
||||
transition: all 0.7s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -3;
|
||||
}
|
||||
|
||||
#button_p {
|
||||
background: var(--secondary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
#button_h:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.intro_sec .h_bg-image .resume-icon {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.intro_sec .h_bg-image .resume-icon:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.intro_sec .h_bg-image .resume-icon {
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.intro_sec .h_bg-image {
|
||||
filter: saturate(0.5);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue