Skip to content

Commit

Permalink
fix
Browse files Browse the repository at this point in the history
  • Loading branch information
Rifzkhy committed Aug 24, 2023
1 parent 741dc5f commit 7a28b12
Show file tree
Hide file tree
Showing 15 changed files with 304 additions and 49 deletions.
79 changes: 73 additions & 6 deletions css/global.css
Original file line number Diff line number Diff line change
@@ -1,24 +1,91 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
*{
font-family: 'Poppins', sans-serif;
}

body::-webkit-scrollbar{
display: none;
}

body{
height: 100vh;
overflow-x: hidden;
color: #101010;
background-color: #e3e3e3;
color: #e3e3e3;
background-color: #303030;
scroll-behavior: smooth;
}

/* TODO: Scroll animation */
.js-scroll {
opacity: 0;
transition: opacity 500ms;
}

.js-scroll.scrolled {
opacity: 1;
}
.scrolled.fade-in {
animation: fade-in 1s ease-in-out both;
}
.scrolled.fade-in-bottom {
animation: fade-in-bottom 1s ease-in-out both;
}
.scrolled.slide-left {
animation: slide-in-left 1s ease-in-out both;
}
.scrolled.slide-right {
animation: slide-in-right 1s ease-in-out both;
}
@keyframes slide-in-left {
0% {
transform: translateX(-100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-in-right {
0% {
transform: translateX(100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes fade-in-bottom {
0% {
transform: translateY(50px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

.content{
display: none;
overflow: hidden;
}

.loader{
height: 100vh;
display: flex;
overflow: hidden;
justify-content: center;
align-items: center;
color: #e3e3e3;
background-color: black;
}

img{
transition: .5s;
}
22 changes: 19 additions & 3 deletions css/profile.css
Original file line number Diff line number Diff line change
Expand Up @@ -43,20 +43,37 @@ background-color: #fff;
}

.about .card .card-body{
left: 2px;
position: absolute;
top: 270px;
transform: translateZ(20px);
transition: .5s;
transition: all ease-in-out .5s;
opacity: 1;
}
.about .card:hover .card-body{
position: absolute;
top: 300px;
transform: translateZ(20px);
transition: .5s;
opacity: 0;
}

/* TODO: Skill */
.skill .col img{
width: 80px;
}

.skill .col p{
padding-top: 10px;
transform: translateY(-10px);
transition: all ease-in-out .5s;
opacity: 0;
}

.skill .col:hover p{
transform: translateY(0px);
opacity: 1;
}

/* TODO: Project Card */
.project .card{
/* box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8); */
Expand All @@ -70,7 +87,6 @@ background-color: #fff;
max-width: 150px;
transform: translateZ(20px);
border-radius: 5px;
transition: .5s;
}

.project .card .card-body{
Expand Down
119 changes: 79 additions & 40 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,39 +15,40 @@
</head>
<body>
<div class="loader">
<div class="spinner-border" style="width: 5rem; height: 5rem;" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div align="center">
<h1 role="status">Hello World!</h1>
<span class="spinner-border spinner-border-sm" aria-hidden="true" style="width: 2rem; height: 2rem;"></>
</div>
</div>
<div class="content">

<!-- TODO: Landing page -->
<section>
<div align="center">
<h1>I'm Rifzkhy</h1>
<h3>PORTOFOLIO</h3>
<h1 class="typing"></h1>
<h4>PORTFOLIO</h4>
</div>
</section>

<!-- TODO: About Me -->
<section class="about" style="background-color: #101010; color: #e3e3e3;">
<div class="jumbotron p-3">
<div class="title" align="center">
<div class="jumbotron p-5">
<div class="title pt-5 js-scroll fade-in-bottom" align="center">
<h1>ABOUT ME</h1>
</div>
<div class="row pt-3">
<div class="col" style="text-align: justify;">
<h1>MUHAMMAD RIFZKHY ALL FHAYED</h1>
<p>Hello! I'm Rifzkhy, a Fullstack Developer who is deeply passionate
<div class="row justify-content-center">
<div class="col-10">
<h3 class="js-scroll fade-in-bottom">MUHAMMAD RIFZKHY ALL FHAYED</h3>
<p class="js-scroll fade-in-bottom" style="text-align: justify;">Hello! I'm Rifzkhy, a Fullstack Developer who is deeply passionate
about 3D modeling, game development, chatbot creation, and digital art. My goal is to create simple and
clean solutions that deliver impactful experiences to users.</p>
</div>
<div class="col" align="center">
<div class="card" data-tilt style="width: 18rem;">
<div class="card js-scroll fade-in-bottom" data-tilt>
<!-- <img loading="lazy"src="src/rifzkhy.jpg" class="card-img-top" alt="..."> -->
<img loading="lazy" src="./src/rifzkhy.webp" class="profile-pics">
<div class="card-body">
<button type="button" class="btn btn-secondary">Hire me</button>
<button type="button" class="btn btn-secondary" style="width: 250px;" disabled>Hire me</button>
</div>
</div>
</div>
Expand All @@ -56,55 +57,91 @@ <h1>MUHAMMAD RIFZKHY ALL FHAYED</h1>
</section>

<!-- TODO: Skill -->
<section align="center">
<section class="skill" align="center">
<div class="jumbotron p-3">
<div class="title">
<h1>DESIGN</h1>
<div class="designing js-scroll fade-in-bottom">
<div class="title pt-5 js-scroll fade-in-bottom">
<h1>DESIGNING</h1>
</div>
<div class="row pt-3" width="35%">
<div class="col p-3">
<img src="src/icon/photoshop.webp" >
<div class="row pt-3">
<div class="col p-3 js-scroll fade-in-bottom">
<img src="src/icon/photoshop.webp" style="border-radius: 20px;">
<p>Photoshop</p>
</div>
<div class="col p-3">
<img src="src/icon/premierepro.webp" >
<div class="col p-3 js-scroll fade-in-bottom">
<img src="src/icon/premierepro.webp" style="border-radius: 20px;">
<p>Premiere Pro</p>
</div>
<div class="col p-3">
<img src="src/icon/aftereffects.webp" >
<div class="col p-3 js-scroll fade-in-bottom">
<img src="src/icon/aftereffects.webp" style="border-radius: 20px;">
<p>After Effects</p>
</div>
<div class="col p-3">
<div class="col p-3 js-scroll fade-in-bottom">
<img src="src/icon/paintnet.webp" >
<p>Paint.NET</p>
</div>
<div class="col p-3">
<img src="src/icon/clipstudiopaint.webp" >
<div class="col p-3 js-scroll fade-in-bottom">
<img src="src/icon/clipstudiopaint.webp" style="border-radius: 20px;">
<p>Clip Studio Paint</p>
</div>
<div class="col p-3">
<div class="col p-3 js-scroll fade-in-bottom">
<img src="src/icon/gimp.webp" >
<p>GIMP</p>
</div>
<div class="col p-3 js-scroll fade-in-bottom">
<img src="src/icon/cinema4d.webp" style="border-radius: 50%;">
<p>Cinema 4D</p>
</div>
<div class="col p-3 js-scroll fade-in-bottom">
<img src="src/icon/blender.webp">
<p>Blender</p>
</div>
<div class="col p-3 js-scroll fade-in-bottom">
<img src="src/icon/blockbench.webp" style="border-radius: 50%;">
<p>Blockbench</p>
</div>
</div>
</div>

<div class="title pt-5">
<h1>CODING</h1>
<div class="programming">
<div class="title pt-5 js-scroll fade-in-bottom">
<h1>PROGRAMMING</h1>
</div>
<div class="row pt-3" width="35%">
<div class="col p-3">
<div class="row pt-3">
<div class="col p-3 js-scroll fade-in-bottom">
<img src="src/icon/javascript.webp" >
<p>Javascript</p>
</div>
<div class="col p-3">
<div class="col p-3 js-scroll fade-in-bottom">
<img src="src/icon/typescript.webp" >
<p>Typescript</p>
</div>
<div class="col p-3 js-scroll fade-in-bottom">
<img src="src/icon/nodejs.webp" >
<p>NodeJS</p>
</div>
<div class="col p-3 js-scroll fade-in-bottom">
<img src="src/icon/java.webp" >
<p>Java</p>
</div>
<div class="col p-3 js-scroll fade-in-bottom">
<img src="src/icon/python.webp" >
<p>Python</p>
</div>
</div>
</div>
</div>
</section>

<!-- TODO: Project -->
<section class="project" style="background-color: #101010; color: #e3e3e3;">
<div class="jumbotron p-3">
<div class="title" align="center">
<div class="title js-scroll fade-in-bottom" align="center">
<h1>PROJECT</h1>
</div>
<div class="row pt-3">
<div class="col">
<div class="card" data-tilt style="width: 18rem;" align="center">
<div class="card js-scroll fade-in-bottom" data-tilt align="center" style="width: 18rem;">
<img loading="lazy" src="./src/matsuri-ai.webp" class="project-pics">
<img src="./src/whatsapp-background.webp" class="card-img-top">
<div class="card-body">
Expand All @@ -122,25 +159,25 @@ <h5 class="card-title">MatsuriAI</h5>
<!-- TODO: Certificate -->
<section>
<div class="jumbotron p-3">
<div class="title" align="center">
<div class="title pt-5 js-scroll fade-in-bottom" align="center">
<h1>CERTIFICATE</h1>
</div>
<div class="certificate">
<div class="row p-1">
<div class="col p-3" align="center"><img loading="lazy"src="src/certificate/Sertifikat PKL.webp" data-tilt
<div class="col p-3 js-scroll fade-in-bottom" align="center"><img loading="lazy"src="src/certificate/Sertifikat PKL.webp" data-tilt
data-tilt-glare></div>
<div class="col p-3" align="center"><img loading="lazy"src="src/certificate/Sertifikat LSP front.webp" data-tilt
<div class="col p-3 js-scroll fade-in-bottom" align="center"><img loading="lazy"src="src/certificate/Sertifikat LSP front.webp" data-tilt
data-tilt-glare></div>
<div class="col p-3" align="center"><img loading="lazy"src="src/certificate/Sertifikat Kompetensi front.webp" data-tilt
<div class="col p-3 js-scroll fade-in-bottom" align="center"><img loading="lazy"src="src/certificate/Sertifikat Kompetensi front.webp" data-tilt
data-tilt-glare></div>
</div>
</div>
<div class="title" align="center">
<div class="title pt-5 js-scroll fade-in-bottom" align="center">
<h1>AWARD CERTIFICATE</h1>
</div>
<div class="certificate">
<div class="row p-1">
<div class="col p-3" align="center"><img loading="lazy"src="src/certificate/piagam.webp" data-tilt
<div class="col p-3 js-scroll fade-in-bottom" align="center"><img loading="lazy"src="src/certificate/piagam.webp" data-tilt
data-tilt-glare></div>
</div>
</div>
Expand All @@ -149,6 +186,8 @@ <h1>AWARD CERTIFICATE</h1>

</div>

<script src="script/global.js"></script>

<script type="text/javascript" src="src/vanilla-tilt.js">
VanillaTilt.init(document.querySelector(".col"), {
max: 25,
Expand Down
Loading

0 comments on commit 7a28b12

Please sign in to comment.