-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
127 lines (112 loc) · 5.54 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
---
layout: default
---
<nav id="nav" class="fixed right-3 left-3 top-3 text-gray-200 z-10 px-3 md:px-5 py-3 lg:py-5 rounded-md transition">
<div
class="hidden dark:shadow-custom-xl dark:bg-slate-700/70 bg-slate-700/70 backdrop-blur-md text-slate-700 dark:text-white">
hello
</div>
<div class="flex justify-between items-center h-full">
<a href="{{site.baseurl}}/" class="font-medium text-md lg:text-xl flex items-center">
<img src="/assets/image/favicon.png" alt="My Logo" width="30" class="mr-1">
<span>Rizki Kadafi</span>
</a>
<div class="flex">
<ul class="hidden md:flex *:mx-5">
{% for item in site.data.navigation %}
<li class="hover:underline hover:underline-offset-4"><a href="{{item.link}}" {% if item.name=='Blog' %}
target="_blank" {% endif %}>{{item.name}}</a></li>
{% endfor %}
</ul>
<div class="*:cursor-pointer">
<i id="dark-mode" class="bi bi-moon-stars-fill mr-2 text-lg dark:hidden"></i>
<i id="light-mode" class="bi bi-brightness-high-fill mr-2 text-xl hidden dark:inline-block"></i>
<i data-modal-target="default-modal" data-modal-toggle="default-modal" class="bi bi-list md:hidden text-xl"></i>
</div>
</div>
</div>
</nav>
<div class="w-full">
<section id="hero" class="h-72 sm:h-96 lg:h-screen p-3 dark:bg-radial-gradient-bottom-left">
{% include modal-navigation.html %}
<div
class="hero-image bg-hero2 dark:bg-hero1 text-white w-full h-full bg-no-repeat bg-center bg-cover rounded-lg shadow-custom-lg dark:shadow-custom">
<div class="h-full w-full flex flex-col backdrop-brightness-50 rounded-lg p-3 lg:p-8">
<div class="h-full flex flex-col justify-center items-center">
<h1 class="font-bold text-xl sm:text-2xl lg:text-3xl xl:text-5xl">{{site.data.content.hero.title}}</h1>
<div class="text-xs sm:text-base lg:text-lg text-center my-3 sm:my-4">
<p>{{site.data.content.hero.subtitle}}</p>
</div>
<a href="#contact"
class="text-center bg-slate-500 hover:bg-slate-700 active:bg-slate-700 w-32 rounded-3xl py-2 text-xs lg:text-base">Contact
Me</a>
</div>
</div>
</div>
</section>
<section id="about" class="px-5 dark:bg-radial-gradient-diagonal text-gray-800 dark:text-gray-200 pt-20 lg:pt-5">
{% include header-title.html title='About Me' subtitle='A short description about me' %}
<div class="flex flex-col px-5 md:px-10 sm:flex-row sm:mx-auto sm:items-center lg:w-4/5">
<div
class="flex-grow bg-slate-600/70 dark:bg-slate-700 mb-5 sm:mb-0 rounded-md mx-auto shadow-custom-lg dark:shadow-custom w-3/5 sm:w-4/5">
<img src="/assets/image/profile.png" class="mx-auto" alt="">
</div>
<div class="">
<p class="px-5 text-justify text-sm md:text-base lg:text-lg">
{{site.data.content.about}}
</p>
</div>
</div>
</section>
<section id="technology" class="dark:bg-radial-gradient-diagonal-reverse pt-20 lg:pt-5">
{% include header-title.html title='Technology' subtitle='The technology I use or that I am learning about' %}
<div class="lg:grid lg:grid-cols-2 lg:px-8">
{% include tech_card.html title='Programming Languages' data=site.data.programming_languages %}
{% include tech_card.html title='Frameworks & Libraries' data=site.data.frameworks_libraries %}
</div>
</section>
<section id="project" class="dark:bg-radial-gradient-diagonal pt-20 lg:pt-5">
{% include header-title.html title='Projects' subtitle="Projects that I have worked on" %}
<div class="dark:text-white flex justify-between sm:px-10 relative">
<div class="hidden sm:block sm:w-3/5">
<ul class="text-lg mr-8 lg:mr-10">
{% for item in site.data.projects limit: 5 %}
<li
class="project-item cursor-pointer px-5 py-3 lg:py-5 border-b-slate-500 dark:border-b-slate-600 border-b-2">
{{item.name}}
</li>
{% endfor %}
</ul>
</div>
<div class="swiper w-4/5 sm:w-2/5 pb-8">
<div class="swiper-wrapper">
{% for item in site.data.projects %}
{% include project_card.html name=item.name desc=item.desc tech=item.tech img=item.img link=item.link %}
{% endfor %}
</div>
<div class="swiper-pagination *:bg-slate-600 *:dark:bg-white mt-20 sm:hidden"></div>
</div>
</div>
<a href="{{site.baseurl}}/projects"
class="group flex justify-center sm:justify-end items-center text-sm dark:text-white hover:underline mx-16">
<span class="block mr-2">view all projects</span>
<i class="bi bi-arrow-right block mt-[4px] group-hover:translate-x-2 transition-transform"></i>
</a>
</section>
<section id="contact" class="dark:bg-radial-gradient-top-right pt-20 lg:pt-5">
{% include header-title.html title='Contact Me' subtitle="Let's connect with me" %}
<div class="px-3 mb-5 box-border text-white">
<div class="bg-slate-600/70 dark:bg-slate-700 rounded-md shadow-custom-lg dark:shadow-custom p-3">
<div class="flex *:mx-2 justify-center text-center mb-3 py-3 border-b-slate-600 border-b-2">
{% for item in site.data.contact %}
{% include contact.html name=item.name link=item.link icon=item.icon %}
{% endfor %}
</div>
<div class="text-xs lg:text-sm text-center">
<p><i class="bi bi-c-circle"></i> 2024 Muhamad Rizki Kadafi. All Rights Reserved.</p>
</div>
</div>
</div>
</section>
</div>
<script src="/assets/js/navbar.js"></script>