diff options
| -rw-r--r-- | about/index.html | 114 | ||||
| -rw-r--r-- | assets/images/skills/godot.png | bin | 0 -> 285540 bytes | |||
| -rw-r--r-- | assets/images/skills/godot_nvim.png | bin | 0 -> 192196 bytes | |||
| -rw-r--r-- | index.html | 14 | ||||
| -rw-r--r-- | style.css | 139 |
5 files changed, 253 insertions, 14 deletions
diff --git a/about/index.html b/about/index.html index 7f80e51..a7819ca 100644 --- a/about/index.html +++ b/about/index.html @@ -11,8 +11,9 @@ <link rel="stylesheet" href="/packages/fontawesome-free-6.5.2-web/css/all.css">
</head>
-<body>
+<body onload="addNodes();">
<script defer src="/scripts/scroll.js"></script>
+ <script defer src="/scripts/onload.js"></script>
<div class="floating-nav-container">
<div class="floating-nav">
<a href="/" class="mobile"><img src="/assets/images/hero/logo.png" alt="" class="sidebar-img mobile" style="margin-top: 0; margin-left: -20px;"></a>
@@ -27,6 +28,8 @@ </a>
<span>altaf-creator</span>
</div>
+ <div class="sidebar-progress-container" id="progressContainer">
+ </div>
<section style="border-top: none;">
<div class="center-grid">
<div class="div-sizing">
@@ -36,7 +39,7 @@ <div style="padding: 30px; color: gray;">
<span><i class="fa-solid fa-suitcase"></i> Student</span>
<br>
- <span><i class="fa-solid fa-star"></i> Software Development</span>
+ <span><i class="fa-solid fa-star"></i> Creating things</span>
<br>
<span>🇮🇩 Indonesia</span>
<br>
@@ -44,17 +47,114 @@ </div>
<br>
<p>
- <span class="big-text">About Me</span><br>
- <span>Hey there! I'm <span class="colored-text">Altaf</span>. I am a middle school student from
- <span class="colored-text">Indonesia</span> who likes to code as a <span
- class="colored-text">hobby</span>. I mostly make games and websites, but also likes to try
- new things.</span>
+ <h1>About Me</h1>
+ <p>
+ Hey there! I'm <span class="colored-text">Altaf</span>. I am a high school student from
+ <span class="colored-text">Indonesia</span> who likes to code as a <span class="colored-text">hobby</span>.
+ </p>
+ <p>
+ I'm mostly a <span class="colored-text">game developer</span> and <span class="colored-text">web developer</span>, but I
+ also like to make other things like desktop apps, and robots.<br>I'm still constantly learning and trying new things!
</p>
<p class="desktop" style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: gray;">↓ psst, scroll down! ↓</p>
</div>
</div>
</div>
</section>
+ <section style="overflow-x: scroll;">
+ <div class="shadow-filter">
+ <div class="center-grid">
+ <div id="about-skills-container">
+ <div id="a">
+ <div id="aa" class="flex-box center-grid" style="min-height: 100%;"><h1 style="font-size: 2.5rem; line-height: 1rem; margin: 0; font-weight: 400;">Skills</h1></div>
+ <div id="ab" class="flex-box"></div>
+ <div id="ac" class="flex-box center-grid" style="min-height: 100%;"><a class="button" href="">Hire me!</a></div>
+ <div id="ad" class="flex-box"></div>
+ </div>
+ <div id="b" class="flex-box">
+ <h1>Godot 4 Programmer</h1>
+ <progress max="10" value="7" class="prog"></progress>
+ <span class="half-opacity-text">Intermediate</span>
+ <p>GDScript</p>
+ <img src="/assets/images/skills/godot.png" alt="" class="bento-img-lr">
+ <i class="fa-solid fa-code bento-icon-lr"></i>
+ </div>
+ <div id="c" class="flex-box"><img src="/assets/images/skills/godot_nvim.png" alt="" class="bento-img-full"></div>
+ <div id="d" class="flex-box"><h1>Game Design</h1></div>
+ <div id="e" class="flex-box"><h1>2D / 3D Artist</h1></div>
+ <div id="f" class="flex-box"></div>
+ <div id="g" class="flex-box"></div>
+ <div id="h" class="flex-box"><h1>Programmer</h1></div>
+ </div>
+ </div>
+ </div>
+ </section>
+ <section>
+ <div class="flex-boxes-container">
+ <div class="shadow-filter">
+ <div class="flex-box">
+ <h1>Skills</h1>
+ </div>
+ </div>
+ <div class="shadow-filter">
+ <div class="flex-box">
+ <h2>Game Development</h2>
+ <ul>
+ <li><span class="half-opacity-text">[</span>🟩🟩🟩🟩⬛<span class="half-opacity-text">]</span>
+ Godot 4 Programmer (GDScript)</li>
+ <li><span class="half-opacity-text">[</span>🟩🟩🟩⬛⬛<span class="half-opacity-text">]</span>
+ Game Designer</li>
+ <li><span class="half-opacity-text">[</span>🟩🟩⬛⬛⬛<span class="half-opacity-text">]</span>
+ 2D / 3D Artist</li>
+ </ul>
+ <h2>Front-end Web Developer</h2>
+ <ul>
+ <li>
+ <span class="half-opacity-text">[</span>🟩🟩🟩🟩⬛<span class="half-opacity-text">]</span>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="shadow-filter">
+ <div class="flex-box">
+ <h2>Game Development</h2>
+ <ul>
+ <li><span class="half-opacity-text">[</span>🟩🟩🟩🟩⬛<span class="half-opacity-text">]</span>
+ Godot 4 Programmer (GDScript)</li>
+ <li><span class="half-opacity-text">[</span>🟩🟩🟩⬛⬛<span class="half-opacity-text">]</span>
+ Game Designer</li>
+ <li><span class="half-opacity-text">[</span>🟩🟩⬛⬛⬛<span class="half-opacity-text">]</span>
+ 2D / 3D Artist</li>
+ </ul>
+ <h2>Front-end Web Developer</h2>
+ <ul>
+ <li>
+ <span class="half-opacity-text">[</span>🟩🟩🟩🟩⬛<span class="half-opacity-text">]</span>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="shadow-filter">
+ <div class="flex-box">
+ <h2>Game Development</h2>
+ <ul>
+ <li><span class="half-opacity-text">[</span>🟩🟩🟩🟩⬛<span class="half-opacity-text">]</span>
+ Godot 4 Programmer (GDScript)</li>
+ <li><span class="half-opacity-text">[</span>🟩🟩🟩⬛⬛<span class="half-opacity-text">]</span>
+ Game Designer</li>
+ <li><span class="half-opacity-text">[</span>🟩🟩⬛⬛⬛<span class="half-opacity-text">]</span>
+ 2D / 3D Artist</li>
+ </ul>
+ <h2>Front-end Web Developer</h2>
+ <ul>
+ <li>
+ <span class="half-opacity-text">[</span>🟩🟩🟩🟩⬛<span class="half-opacity-text">]</span>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </section>
<section>
<div class="center-grid">
<div class="div-sizing">
diff --git a/assets/images/skills/godot.png b/assets/images/skills/godot.png Binary files differnew file mode 100644 index 0000000..f4534b8 --- /dev/null +++ b/assets/images/skills/godot.png diff --git a/assets/images/skills/godot_nvim.png b/assets/images/skills/godot_nvim.png Binary files differnew file mode 100644 index 0000000..0bcc93e --- /dev/null +++ b/assets/images/skills/godot_nvim.png @@ -38,19 +38,19 @@ style="z-index: 1; background-image: url(/assets/images/hero/simpliCity_web_0_ocean.png); "> </div> <span class="home-title" style="z-index: 0;">Altaf</span> - <div class="home-img" - style="z-index: 1; background-image: url(/assets/images/hero/simpliCity_web_0_island.png); "> -</div> - <a href="https://store.steampowered.com/app/2381230/simpliCity/" id="simpliCity-link" class="link">simpliCity - ↗</a> + <div class="home-img" style="z-index: 1; background-image: url(/assets/images/hero/simpliCity_web_0_island.png); "> + </div> + <a href="https://store.steampowered.com/app/2381230/simpliCity/" id="simpliCity-link" class="link">simpliCity ↗</a> </section> <section> <div class="center-grid"> <div class="div-sizing"> <span class="big-text">Hey there!</span> <br> - <span>I'm a middle school student from <b class="colored-text">Indonesia</b> who likes to code as a <b class="colored-text">hobby</b>.</span> - <br> + <p> + I'm a middle school student from <b class="colored-text">Indonesia</b> who likes to code as a <b class="colored-text">hobby</b>.<br> + A game developer, (frontend) web developer, but also likes to try new things, like robotics. + </p> <a href="about/" class="link" style="margin-top: 20px; display: inline-block;">Learn more about me →</a> </div> </div> @@ -590,6 +590,145 @@ li { box-sizing: border-box;
}
+.flex-boxes-container {
+ display: flex;
+ flex-wrap: wrap-reverse;
+ flex-direction: column;
+ padding: 20px;
+ gap: 20px;
+ box-sizing: border-box;
+}
+
+.flex-box {
+ clip-path: polygon(0 10.00px, 10px 10px, 10.00px 0, calc(100% - 10.00px) 0, calc(100% - 10px) 10px, 100% 10.00px, 100% calc(100% - 10.00px), calc(100% - 10px) calc(100% - 10px), calc(100% - 10.00px) 100%, 10.00px 100%, 10px calc(100% - 10px), 0 calc(100% - 10.00px));
+ background-color: white;
+ padding: 10px;
+ padding-left: 35px;
+ padding-right: 25px;
+ box-sizing: border-box;
+ position: relative;
+}
+
+.shadow-filter {
+ filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.15));
+ overflow: visible;
+}
+
+.prog {
+ height: 1rem;
+ border: none;
+}
+
+.prog {
+ color: var(--accent);
+}
+
+.prog::-moz-progress-bar {
+ background: var(--accent);
+}
+
+.prog::-webkit-progress-value {
+ background: var(--accent);
+}
+
+.prog::-webkit-progress-bar {
+ background: var(--accent);
+}
+
+.bento-img-lr {
+ position: absolute;
+ bottom: -15px;
+ right: 20px;
+ max-height: 50%;
+ height: 50%;
+ filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.25));
+ border-radius: 5px;
+}
+
+.bento-icon-lr {
+ position: absolute;
+ bottom: 35%;
+ right: 60px;
+ z-index: 1;
+ font-size: 4.2rem;
+ color: var(--accent);
+ filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.25));
+}
+
+.bento-img-full {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: left;
+}
+
+#about-skills-container {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+ grid-template-rows: 1fr 1fr 1fr;
+ gap: 10px;
+ grid-template-areas:
+ "b b c d"
+ "h a a e"
+ "g g f e";
+ min-height: 960px;
+ box-sizing: border-box;
+ padding: 20px;
+ min-width: 1400px;
+ width: 1400px;
+}
+
+#a {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-template-rows: 1fr 1fr;
+ gap: 10px;
+ grid-template-areas:
+ "aa aa ab"
+ "ad ac ac";
+ grid-area: a;
+}
+#aa {
+ grid-area: aa;
+}
+#ab {
+ grid-area: ab;
+}
+#ac {
+ grid-area: ac;
+}
+#ad {
+ grid-area: ad;
+}
+#b {
+ grid-area: b;
+}
+#c {
+ grid-area: c;
+
+}
+#d {
+ grid-area: d;
+
+}
+#e {
+ grid-area: e;
+
+}
+#f {
+ grid-area: f;
+
+}
+#g {
+ grid-area: g;
+}
+#h {
+ grid-area: h;
+}
+
#simpliCity-img {
z-index: 4;
background-image: url(/assets/images/game-hero/simpliCity.png);
|
