diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..11004a8 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md new file mode 100644 index 0000000..27e5469 Binary files /dev/null and b/README.md differ diff --git a/images/.DS_Store b/images/.DS_Store new file mode 100644 index 0000000..fcece06 Binary files /dev/null and b/images/.DS_Store differ diff --git a/images/projects/Project1.png b/images/projects/Project1.png new file mode 100644 index 0000000..2115aab Binary files /dev/null and b/images/projects/Project1.png differ diff --git a/images/projects/Project2.png b/images/projects/Project2.png new file mode 100644 index 0000000..23c67c3 Binary files /dev/null and b/images/projects/Project2.png differ diff --git a/images/projects/Project3.png b/images/projects/Project3.png new file mode 100644 index 0000000..894b4d3 Binary files /dev/null and b/images/projects/Project3.png differ diff --git a/images/projects/Project4.png b/images/projects/Project4.png new file mode 100644 index 0000000..21ed873 Binary files /dev/null and b/images/projects/Project4.png differ diff --git a/images/stack/.DS_Store b/images/stack/.DS_Store new file mode 100644 index 0000000..c49e923 Binary files /dev/null and b/images/stack/.DS_Store differ diff --git a/images/stack/Bash.svg b/images/stack/Bash.svg new file mode 100644 index 0000000..b3f3125 --- /dev/null +++ b/images/stack/Bash.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/images/stack/Bootstrap.svg b/images/stack/Bootstrap.svg new file mode 100644 index 0000000..7965e4c --- /dev/null +++ b/images/stack/Bootstrap.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/stack/CSS.png b/images/stack/CSS.png new file mode 100644 index 0000000..d897f0f Binary files /dev/null and b/images/stack/CSS.png differ diff --git a/images/stack/ChartJs.svg b/images/stack/ChartJs.svg new file mode 100644 index 0000000..24f5a2b --- /dev/null +++ b/images/stack/ChartJs.svg @@ -0,0 +1 @@ +Artboard 6 \ No newline at end of file diff --git a/images/stack/Docker.svg b/images/stack/Docker.svg new file mode 100644 index 0000000..6f66bd3 --- /dev/null +++ b/images/stack/Docker.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/stack/Express.png b/images/stack/Express.png new file mode 100644 index 0000000..568baba Binary files /dev/null and b/images/stack/Express.png differ diff --git a/images/stack/Git.svg b/images/stack/Git.svg new file mode 100644 index 0000000..e52b883 --- /dev/null +++ b/images/stack/Git.svg @@ -0,0 +1,5 @@ + + +git + + diff --git a/images/stack/Github.svg b/images/stack/Github.svg new file mode 100644 index 0000000..985f3e3 --- /dev/null +++ b/images/stack/Github.svg @@ -0,0 +1,5 @@ + + +github + + diff --git a/images/stack/Graphql.svg b/images/stack/Graphql.svg new file mode 100644 index 0000000..afa84f3 --- /dev/null +++ b/images/stack/Graphql.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/stack/HTML.png b/images/stack/HTML.png new file mode 100644 index 0000000..5f2157a Binary files /dev/null and b/images/stack/HTML.png differ diff --git a/images/stack/Javascript.svg b/images/stack/Javascript.svg new file mode 100644 index 0000000..37d265b --- /dev/null +++ b/images/stack/Javascript.svg @@ -0,0 +1,5 @@ + + +javascript + + diff --git a/images/stack/K8s.svg b/images/stack/K8s.svg new file mode 100644 index 0000000..e4520b4 --- /dev/null +++ b/images/stack/K8s.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/stack/MaterialUI.svg b/images/stack/MaterialUI.svg new file mode 100644 index 0000000..cbcd08c --- /dev/null +++ b/images/stack/MaterialUI.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/stack/MongoDB.svg b/images/stack/MongoDB.svg new file mode 100644 index 0000000..685dc86 --- /dev/null +++ b/images/stack/MongoDB.svg @@ -0,0 +1,5 @@ + + +mongodb + + diff --git a/images/stack/Next.svg b/images/stack/Next.svg new file mode 100644 index 0000000..312dc61 --- /dev/null +++ b/images/stack/Next.svg @@ -0,0 +1,18 @@ + + + + next-black + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/stack/NextJsCircle.png b/images/stack/NextJsCircle.png new file mode 100644 index 0000000..bc5e45c Binary files /dev/null and b/images/stack/NextJsCircle.png differ diff --git a/images/stack/NodeJs.svg b/images/stack/NodeJs.svg new file mode 100644 index 0000000..32a174f --- /dev/null +++ b/images/stack/NodeJs.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/images/stack/React.png b/images/stack/React.png new file mode 100644 index 0000000..31d3d0b Binary files /dev/null and b/images/stack/React.png differ diff --git a/images/stack/Redux.svg b/images/stack/Redux.svg new file mode 100644 index 0000000..6051cba --- /dev/null +++ b/images/stack/Redux.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/stack/Saas.svg b/images/stack/Saas.svg new file mode 100644 index 0000000..cfea4e6 --- /dev/null +++ b/images/stack/Saas.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + diff --git a/images/stack/Tailwind.png b/images/stack/Tailwind.png new file mode 100644 index 0000000..9f5680c Binary files /dev/null and b/images/stack/Tailwind.png differ diff --git a/images/stack/Typescript.svg b/images/stack/Typescript.svg new file mode 100644 index 0000000..19edd56 --- /dev/null +++ b/images/stack/Typescript.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/stack/Vercel.svg b/images/stack/Vercel.svg new file mode 100644 index 0000000..fdb6a41 --- /dev/null +++ b/images/stack/Vercel.svg @@ -0,0 +1,15 @@ + + + + + diff --git a/images/userAsset/.DS_Store b/images/userAsset/.DS_Store new file mode 100644 index 0000000..80188e2 Binary files /dev/null and b/images/userAsset/.DS_Store differ diff --git a/images/userAsset/blob vector.png b/images/userAsset/blob vector.png new file mode 100644 index 0000000..efc8b24 Binary files /dev/null and b/images/userAsset/blob vector.png differ diff --git a/images/userAsset/circle.png b/images/userAsset/circle.png new file mode 100644 index 0000000..d817195 Binary files /dev/null and b/images/userAsset/circle.png differ diff --git a/images/userAsset/cube.png b/images/userAsset/cube.png new file mode 100644 index 0000000..192e674 Binary files /dev/null and b/images/userAsset/cube.png differ diff --git a/images/userAsset/dots.png b/images/userAsset/dots.png new file mode 100644 index 0000000..2ec0459 Binary files /dev/null and b/images/userAsset/dots.png differ diff --git a/images/userAsset/plus.png b/images/userAsset/plus.png new file mode 100644 index 0000000..9a12fd7 Binary files /dev/null and b/images/userAsset/plus.png differ diff --git a/images/userAsset/userimage.png b/images/userAsset/userimage.png new file mode 100644 index 0000000..e7c6f6d Binary files /dev/null and b/images/userAsset/userimage.png differ diff --git a/images/userAsset/zigzags.png b/images/userAsset/zigzags.png new file mode 100644 index 0000000..5e8c34c Binary files /dev/null and b/images/userAsset/zigzags.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..d002610 --- /dev/null +++ b/index.html @@ -0,0 +1,355 @@ + + + + + + + Portfolio Website - Ashutosh kumar + + + + +
+ +
+
+ +
+ +
shu
+
+ +
+
Projects
+
Skills
+
Contact Me
+
+ +
+ +
+ +
Ashu
+ +
+
Hi! Ashutosh kumar
+ +
+ I am a +
+ +
+ I’m a software developer and here is my portfolio website. Here you’ll + learn about my journey as a software developer. +
+ +
Hire me
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+

Projects

+ +
+
+
01
+
+ +
+ + + + + + + + + + +
+ +

Tint & Orange

+ +

Its is a car modification copany + which provide you sheets to protect your car from scratch +

+
+ + + + + + + +
+
+
+ +
+
02
+
+
+ + + + + + + +
+

Breaking Copyrights

+

+ A platform to download copyrights free youtube music +

+
+ + + + + + + +
+
+
+ +
+
03
+
+
+ + + + + + +
+ +

Isha Tattva

+

+ A Website for interior designer to showcase her works and samples +

+
+ + + + + + + +
+
+
+ +
+
04
+
+
+ + + +
+

Granit

+

+ A architectural website to plan your building or home (Hebrew + Language) +

+
+ + + + + + + +
+
+
+
+ +
+ +
+
Skills
+ +
+

+ Me and +
+ MyTech Stack +

+ +
+

+ Hi Everyone My name is Ashutosh kumar. I am a Full Stack Web Developer I + have been working for last 3 Years and Currently I am working with a + Budding Startup in USA and a full Time Freelancer. Currently I am + working on NextJs and Making Beautiful UI-UX are my fey features +

+

+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non + doloremque aspernatur, maiores voluptatum minus laudantium? + Perspiciatis accusamus minima porro dolores necessitatibus, magni + dolorem et qui veniam nulla sequi molestiae maxime. +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis quidem + quos ullam veritatis voluptates tenetur qui ipsa nulla culpa itaque? +

+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ +
+
+ +

Contact me

+ +

+ Questions, thoughts, or just want to say hello? +

+ + +
+
+
+ + + + + + + + +
+ +
+ +
+ +
+ +
+ + +
+
+ + + +
+ + + + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..c81b33c --- /dev/null +++ b/styles.css @@ -0,0 +1,715 @@ +@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300&display=swap"); + +*{ + margin:0; + padding:0; + /* box-sizing:border-box; */ + font-family: "Be Vietnam Pro", sans-serif; + scroll-behavior: smooth; +} +:root { + --bgOrange: #e84949; +} + +#wrapper{ + height:100vh; + overflow-y:auto; + overflow-x: hidden; +} + +.container{ + width:1200px; + margin:0 auto; +} + +.navbar{ + display: flex; + justify-content:space-between; + align-items:center; + + padding-top:1rem; +} + +.logo{ + width:80px; +} + +.logo-container{ + display:flex; + justify-content: baseline; + align-items: center; +} + +.logo-text{ + margin-left:-1.2rem; + font-size:28px; +} + +.nav-items{ + display:flex; + gap:2rem; + padding: 0 4em; +} + +.nav-items div{ + font-size:20px; + font-weight:500; + cursor:pointer; + +} +.nav-items div a{ + color:black; + /* transition: all 5s ease; */ +} + +a{ + text-decoration: none; +} + + +.nav-items div:hover{ + transition:0.8s; + font-weight: bold; +} + +.hero-section{ + position:relative; + display:flex; + justify-content: center; + align-items: center; + + gap: 5rem; + margin: 4rem auto; + padding: 0 1rem; + padding-bottom: 8rem; +} + +.faded-text{ + position:absolute; + user-select:none; + font-size: 7em; + color:rgb(231,231,231); + + bottom: -16%; + left: -5%; + font-weight: bold; + transition: all 3s; +} + +.hero-section-left{ + /* width:100%; */ + display: flex; + flex-direction: column; + justify-content:center; + gap: 2rem; +} + +.hero-section-heading{ + font-size: 35px; + color: #343d68; + font-weight: 500; +} + +.role{ + color: #4e45d5; + font-weight: 800; +} + +.hero-section-sub-heading{ + font-size: 45px; + line-height: 45px; +} + +.hero-section-description{ + margin-top: 1rem; + width: 70%; + font-weight: 500; +} + +.btn-pink { + background-color: var(--bgOrange); + width: fit-content; + color: white; + padding: 0.8rem 2.3rem; + box-shadow: 5px 5px 7px 0px #0000003f; + font-size: 18px; + cursor: pointer; + transition: all 0.5s; + font-weight: 500; + border: solid 3px transparent; + position: relative; + z-index: 1; + } + .btn-pink::before { + content: ""; + position: absolute; + background-color: #fff; + top: 0px; + left: 0; + right: 0; + bottom: 0px; + z-index: -1; + transform: scaleX(0); + transform-origin: left; + transition: all 0.8s; + } + .btn-pink:hover::before { + transform: scaleX(1); + } + .btn-pink:hover { + border: solid 3px var(--bgOrange); + color: black; + } + + .hero-section-right{ + position:relative; + } + + .absolute{ + position:absolute; + } + + .user-image{ + padding:2.5rem; + filter:grayscale(1); + transition:all 1s; + animation: scaleImage 5s linear infinite; + } + + .user-image img{ + z-index:-9; + max-width: 85%; + height: auto; + + } + + @keyframes scaleImage { + + 0%{ + filter:grayscale(0); + transform:scale(1); + + } + + 50%{ + transform:scale(1.1); + filter:grayscale(1); + box-shadow: 3px 3px 10px black; + } + + 100%{ + transform:scale(1); + filter:grayscale(0); + } + + } + + + .icon-dots{ + z-index:9; + bottom:-1rem; + right:0; + animation-name:dotsAnimation; + animation-duration: 5s; + animation-iteration-count: infinite; + } + + @keyframes dotsAnimation { + 0%{ + transform:translateY(0px); + } + 50%{ + transform: translateY(-15px); + } + 100%{ + transform: translateY(0px); + } + + } + + .icon-cube{ + z-index:9; + top:-0.8em; + right:1em; + animation-name: cubeRotate; + animation-duration: 3s; + animation-iteration-count: infinite; + } + + @keyframes cubeRotate { + 0%{ + transform: rotateY(0deg) translateY(0px); + } + 50%{ + transform: rotateY(180deg) translateY(-12px); + } + 100%{ + transform: rotateY(360deg) translateY(0px); + } + } + + .icon-circle{ + z-index:9; + left:0; + bottom:0; + animation-name:shakeEffect; + animation-duration: 6s; + animation-timing-function: linear; + animation-iteration-count: infinite; +} + @keyframes shakeEffect { + + 50%{ + left:5%; + bottom:10%; + } + + } + + .icon-zigzag{ + z-index:9; + top:1.5em; + left:-0.3em; + animation:zigzagAnimation 5s ease-in infinite; + } + + @keyframes zigzagAnimation{ + 50%{ + left:5%; + top:2%; + } + } + .icon-plus{ + z-index:9; + top:-0.8rem; + left: 50%; + animation:shakeEffectPlus 5s ease-in infinite; + } + + @keyframes shakeEffectPlus { + 50%{ + top:3%; + left:48% + } + } + + .project-section{ + background-color: rgb(231,231,231); + margin-top:4rem; + } + + .page-header{ + color:var(--bgOrange); + font-size:90px; + text-align:center; + padding-top:30px; + } + .project-container{ + max-width: 1200px; + margin:0 auto; + padding:3rem 0; + + display:flex; + flex-direction:column; + gap:120px; + } + + .project-card{ + width:90%; + height:550px; + background-image: url(./images/projects/Project1.png); + background-size: cover; + /* background-repeat: no-repeat; */ + position:relative; + box-shadow:0px 0px 40px #1f1f1f; + } + + .project-card::after{ + content:""; + position:absolute; + top:0; + left:0; + right:0; + bottom:0; + background-color: #1f1f1f9a; + z-index:0; + /* transform: scaleX(1); */ + } + + .project-card::before{ + content:""; + position:absolute; + top:0; + left:0; + right:0; + bottom:0; + background: linear-gradient(45deg, #343d68, #343d68be, #343d687c); + transform:scaleX(0); + transform-origin: left; + transition: all 0.4s; + z-index:1; + } + + .project-card:hover::before{ + transform:scaleX(1); + } + + .project-number{ + position:absolute; + font-size:200px; + font-weight:600; + color:white; + z-index:10; + /* display:none; */ + opacity: 0; + } + + .project-card:hover .project-number{ + /* display:block; */ + opacity: 1; + } + + .project-number-right{ + right:-40px; + top:-45px; + } + + .project-number-left{ + left:-40px; + top:-45px; + } + + .project-content{ + position:absolute; + display:flex; + flex-direction:column; + color:white; + padding:2em; + bottom:20%; + z-index:5; + gap:1em; + transition:all 0.4s; + } + + + .project-content-left{ + left:10%; + } + + .project-content-right{ + right:10%; + } + + .project-skills-container{ + width:60%; + display:flex; + gap:10px; + flex-wrap:wrap; + + } + + .project-skill{ + width:40px; + } + + .project-heading{ + font-size:50px; + font-weight: bold; + line-height:3rem; + } + + .project-subHeading{ + width:70%; + font-size:16px; + font-style: italic; + } + + + .btn-grp{ + display:flex; + gap:0.9rem; + align-items:center; + } + + .btn-project:hover{ + border:none; + } + + .icon{ + cursor:pointer; + color:white; + font-size:35px; + transition:all 0.4s; + } + + .icon:hover{ + color:var(--bgOrange); + } + + .project-card:hover .project-content{ + transform:scale(1.1); + } + + #project1{ + background-image: url(./images/projects/Project1.png); + } + + #project2{ + margin-left:120px; + background-image: url(./images/projects/Project2.png); + } + #project3{ + background-image: url(./images/projects/Project3.png); + } + #project4{ + margin-left:120px; + background-image: url(./images/projects/Project4.png); + } + + @media (max-width:1300px) { + .page-header { + padding-top: 30px; + color: var(--bgOrange); + text-align: center; + font-size: 40px; + } + .project-container { + padding: 5px; + margin: 10px; + gap: 60px; + } + .project-card { + width: 100%; + height: 300px; + } + .project-card { + background-size: cover; + background-position: center; + } + .project-content { + scale: 0.5; + bottom: 0; + left: 0; + right: 0; + top: 0; + } + .project-content-left { + left: 0; + } + .project-heading { + font-size: 40px; + width: 100%; + } + .project-sub-heading { + width: 100%; + } + #project2 { + margin-left: 0; + } + #project4 { + margin-left: 0; + } + .project-skill-container { + width: 100%; + } + .project-skill { + width: 35px; + } + .project-card:hover .project-number { + display: none; + } + .project-card:hover .project-content { + scale: 0.55; + } + } + + .skills-container{ + position:relative; + display:flex; + padding:5rem; + margin:10rem auto; + gap:30px; + } + +.skill-container-left{ + width:50%; + display:flex; + flex-direction:column; +} + +.skill-container-right{ + display:flex; + flex-wrap:wrap; + width:50%; + position:relative; + gap:2rem; + justify-content: center; +} + +.skill-fade-text{ + position:absolute; + font-size:15em; + font-style:bold; + color:rgb(231,231,231); + bottom:-34.5%; + right:-25%; + user-select:none; + overflow-y:hidden; +} + +.blob-style{ + position:absolute; + top:50%; + left:50%; + z-index:-5; + transform:translate(-50%, -50%); + animation: blobAnimate 3s linear infinite; +} + +@keyframes blobAnimate { + 50%{ + top:54%; + left:46%; + } +} + +.skills-logo{ + width:90px; + transition:all 0.5s; +} + +.skills-logo:hover{ + transform:scale(1.2); +} + +.skill-heading{ + font-size:50px; + font-style: bold; + color: var(--bgOrange); + line-height: 50px; +} + +.caps{ + font-size:90px; +} + +.skill-subHeading{ + margin-top: 1rem; + width:85%; + text-align: justify; +} + +.skill-subHeading p{ + margin:15px 0; +} + +.contactus-form-container{ + width:100%; + background-color: rgb(231,231,231); +} + +.contactus-heading{ + font-size:5em; + color:var(--bgOrange); + padding-top: 2rem; +} + +.contactus-sub-heading{ + font-size:3rem; + color:#343d68aa; + text-transform: capitalize; +} + +.contactus-form-container{ + margin-top:25px; + display:flex; + align-items: center; + justify-content: center; +} + +.form{ + display:flex; + flex-direction: column; + gap:30px; + width:70%; + margin: 2rem 5rem; +} + +.formfield-container{ + width:100%; +} + +.formfield{ + width:100%; + height:42px; + padding: 0 2rem; + font-size:18px; + border-radius: 5px; + box-shadow: 2px 2px 10px #1f1f1f; + font-weight:500; + border:none; + margin-top:27px; +} + +.formfield-textarea{ + height:auto; + padding-top:1rem; +} + +#submit-btn{ + border:none; + font-size: 1.4rem; + margin: 1rem 0; +} + +#submit-btn:hover{ + scale:0.9; +} + +.submit-icon{ + padding:0 1rem; + font-size:1.5rem; +} + +footer{ + position:relative; + margin-top:-1px; + background-color: #343d68; + padding:5rem; +} + +.footer-wrapper{ + display:flex; + gap:1rem; + padding:1.2rem; + justify-content: space-between; + align-items:center; +} + +.footer-faded-text{ + position:absolute; + left:0; + bottom:0;color:#535c87; + user-select:none; + font-size:5em; +} + +.link-wrapper{ + display:flex; + gap:1.2rem; +} + +.link-wrapper div a{ + color:white; + text-decoration:none; + transition:all 0.6s; +} + +.link-wrapper div a:hover{ + color:var(--bgOrange); +} + +.icon-wrapper{ + display:flex; + gap:1rem; +} \ No newline at end of file