From 61082423e6a0c32734adf517fd710d3141b52d33 Mon Sep 17 00:00:00 2001 From: altaf-creator Date: Sat, 28 Sep 2024 10:07:51 +0700 Subject: in progress freelancing page --- about/index.html | 114 +++++++++++++++++++++++++++-- assets/images/skills/godot.png | Bin 0 -> 285540 bytes assets/images/skills/godot_nvim.png | Bin 0 -> 192196 bytes index.html | 14 ++-- style.css | 139 ++++++++++++++++++++++++++++++++++++ 5 files changed, 253 insertions(+), 14 deletions(-) create mode 100644 assets/images/skills/godot.png create mode 100644 assets/images/skills/godot_nvim.png 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 @@ - + +
@@ -27,6 +28,8 @@ altaf-creator
+
@@ -36,7 +39,7 @@
Student
- Software Development + Creating things
🇮🇩 Indonesia
@@ -44,17 +47,114 @@

- About Me
- Hey there! I'm Altaf. I am a middle school student from - Indonesia who likes to code as a hobby. I mostly make games and websites, but also likes to try - new things. +

About Me

+

+ Hey there! I'm Altaf. I am a high school student from + Indonesia who likes to code as a hobby. +

+

+ I'm mostly a game developer and web developer, but I + also like to make other things like desktop apps, and robots.
I'm still constantly learning and trying new things!

↓ psst, scroll down! ↓

+
+
+
+
+
+

Skills

+
+ + +
+
+

Godot 4 Programmer

+ + Intermediate +

GDScript

+ + +
+
+

Game Design

+

2D / 3D Artist

+
+
+

Programmer

+
+
+
+
+
+
+
+
+

Skills

+
+
+
+
+

Game Development

+
    +
  • [🟩🟩🟩🟩⬛] + Godot 4 Programmer (GDScript)
    • +
  • [🟩🟩🟩⬛⬛] + Game Designer
    • +
  • [🟩🟩⬛⬛⬛] + 2D / 3D Artist
    • +
+

Front-end Web Developer

+
    +
  • + [🟩🟩🟩🟩⬛] +
    • +
+
+
+
+
+

Game Development

+
    +
  • [🟩🟩🟩🟩⬛] + Godot 4 Programmer (GDScript)
    • +
  • [🟩🟩🟩⬛⬛] + Game Designer
    • +
  • [🟩🟩⬛⬛⬛] + 2D / 3D Artist
    • +
+

Front-end Web Developer

+
    +
  • + [🟩🟩🟩🟩⬛] +
    • +
+
+
+
+
+

Game Development

+
    +
  • [🟩🟩🟩🟩⬛] + Godot 4 Programmer (GDScript)
    • +
  • [🟩🟩🟩⬛⬛] + Game Designer
    • +
  • [🟩🟩⬛⬛⬛] + 2D / 3D Artist
    • +
+

Front-end Web Developer

+
    +
  • + [🟩🟩🟩🟩⬛] +
    • +
+
+
+
+
diff --git a/assets/images/skills/godot.png b/assets/images/skills/godot.png new file mode 100644 index 0000000..f4534b8 Binary files /dev/null and b/assets/images/skills/godot.png differ diff --git a/assets/images/skills/godot_nvim.png b/assets/images/skills/godot_nvim.png new file mode 100644 index 0000000..0bcc93e Binary files /dev/null and b/assets/images/skills/godot_nvim.png differ diff --git a/index.html b/index.html index cdfdaa1..070531a 100644 --- a/index.html +++ b/index.html @@ -38,19 +38,19 @@ style="z-index: 1; background-image: url(/assets/images/hero/simpliCity_web_0_ocean.png); ">
Altaf -
-
- simpliCity - ↗ +
+
+ simpliCity ↗
Hey there!
- I'm a middle school student from Indonesia who likes to code as a hobby. -
+

+ I'm a middle school student from Indonesia who likes to code as a hobby.
+ A game developer, (frontend) web developer, but also likes to try new things, like robotics. +

Learn more about me →
diff --git a/style.css b/style.css index ba52255..84dbdf7 100644 --- a/style.css +++ b/style.css @@ -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); -- cgit v1.2.3