Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Redesign 2024 #9

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Introduce working parallax skills section
ygd committed Dec 14, 2024
commit 80ae703a608ad6af8d04982f66aa3cdf06d08286
Binary file added public/seabed/1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/seabed/2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/seabed/3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/seabed/4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/seabed/5.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/seabed/6.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions src/assets/SVG/1.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 18 additions & 0 deletions src/assets/SVG/2.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions src/assets/SVG/3.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions src/assets/SVG/4.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions src/assets/SVG/5.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 5 additions & 10 deletions src/components/Hero.astro
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@
---

<section
class="relative w-full h-screen bg-gradient-to-b from-blue-500 to-teal-500 overflow-hidden"
class="relative h-screen w-full bg-gradient-to-b from-blue-500 to-teal-500 overflow-hidden -z-0"
>
<div class="w-full h-screen flex items-center justify-center flex-col z-10">
<a href="https://yasin.guezeldal.com" class="mb-4 text-white/90">
@@ -43,16 +43,11 @@
overscroll-behavior-y: none;
scroll-behavior: smooth;
}
body {
position: relative;
width: 100vw;
min-height: 100vh;
overflow-x: hidden;
}

.hero {
position: relative;
width: 100vw;
min-height: 100vh;
min-height: 130vh;
background: linear-gradient(
to bottom,
oklch(60% 0.2 230),
@@ -66,7 +61,7 @@
top: 0;
left: 0;
width: 100vw;
height: 100vh;
height: 130vh;

background-image: linear-gradient(
to bottom,
@@ -139,7 +134,7 @@
transform: scale(-1, 1);

--duration: 20s;
--lowHeight: 30vh;
--lowHeight: 25vh;
--highHeight: 70vh;
--layerNum: 2;
--index: 0;
16 changes: 16 additions & 0 deletions src/components/Skills/Seabed1.astro

Large diffs are not rendered by default.

21 changes: 21 additions & 0 deletions src/components/Skills/Seabed2.astro

Large diffs are not rendered by default.

16 changes: 16 additions & 0 deletions src/components/Skills/Seabed3.astro

Large diffs are not rendered by default.

16 changes: 16 additions & 0 deletions src/components/Skills/Seabed4.astro

Large diffs are not rendered by default.

16 changes: 16 additions & 0 deletions src/components/Skills/Seabed5.astro

Large diffs are not rendered by default.

101 changes: 101 additions & 0 deletions src/components/Skills/Skills.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
---
import { Image } from "astro:assets";
import seabed1 from "../../../public/seabed/1.png";
import seabed2 from "../../../public/seabed/2.png";
import seabed3 from "../../../public/seabed/3.png";
import seabed4 from "../../../public/seabed/4.png";
import seabed5 from "../../../public/seabed/5.png";
import seabed6 from "../../../public/seabed/6.png";
---

<section class='z-50"'>
<div class="parallax">
<div class="parallax__layer parallax__layer__0">
<img src={seabed6.src} alt="Seabed bg 6" width={4000} height={210} />
</div>
<div class="parallax__layer parallax__layer__1">
<img src={seabed5.src} alt="Seabed bg 5" width={4000} height={210} />
</div>
<div class="parallax__layer parallax__layer__2">
<img src={seabed4.src} alt="Seabed bg 4" width={4000} height={210} />
</div>
<div class="parallax__layer parallax__layer__3">
<img src={seabed3.src} alt="Seabed bg 3" width={4000} height={210} />
</div>
<div class="parallax__layer parallax__layer__4">
<img src={seabed2.src} alt="Seabed bg 2" width={4000} height={210} />
</div>
<div class="parallax__layer parallax__layer__5">
<img src={seabed1.src} alt="Seabed bg 1" width={4000} height={210} />
</div>
<div
class="parallax__cover bg-gradient-to-b from-slate-950 via-blue-900 to-blue-700"
>
<h1 class="text-4xl font-bold">Skills</h1>
</div>
</div>
</section>

<style>
* {
box-sizing: border-box;
}

.parallax {
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 0;
left: 50%;
right: 0;
bottom: 0;
margin-left: -2000px;
}

.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: -210px;
left: 0;
}

.parallax__layer__0 {
transform: translateZ(-250px) scale(3.5);
}
.parallax__layer__1 {
transform: translateZ(-200px) scale(3);
}
.parallax__layer__2 {
transform: translateZ(-150px) scale(2.5);
}
.parallax__layer__3 {
transform: translateZ(-100px) scale(2);
}
.parallax__layer__4 {
transform: translateZ(-50px) scale(1.5);
}
.parallax__layer__5 {
transform: translateZ(0px) scale(1);
}

.parallax__layer img {
display: block;
position: absolute;
bottom: 0;
}

.parallax__cover {
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 2000px;
z-index: 2;
margin-top: 210px;
}
</style>
7 changes: 2 additions & 5 deletions src/pages/index.astro
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
---
import Hero from "../components/Hero.astro";
import Skills from "../components/Skills/Skills.astro";
import Layout from "../layouts/Layout.astro";
---

<Layout>
<Hero />
<section
class="h-screen bg-gradient-to-r from-[#66cdd6] via-[#053245] via-60% to-[#061c27]"
>
<h1 class="text-4xl font-bold">Merhaba,<br /> I am Yasin Güzeldal.</h1>
</section>
<Skills />
</Layout>