diff --git a/css/style.css b/css/style.css index 0feb692..1def0f6 100644 --- a/css/style.css +++ b/css/style.css @@ -1,7 +1,9 @@ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap'); body { - background-color: #1c2333; /* blue-black */ + background-color: #121212; /* Darker background */ + background-image: radial-gradient(circle at 1px 1px, rgba(138, 43, 226, 0.05) 1px, transparent 0); + background-size: 25px 25px; color: #f0f0f0; /* light grey for text */ font-family: 'Poppins', sans-serif; margin: 0; @@ -47,14 +49,18 @@ main { section { margin-bottom: 3rem; padding: 2rem; - border-radius: 8px; - background-color: #2a344a; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); - transition: transform 0.3s ease; + border-radius: 15px; /* more rounded corners */ + background-color: rgba(28, 35, 51, 0.6); /* Slightly more opaque */ + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); /* For Safari */ + border: 1px solid rgba(138, 43, 226, 0.1); /* Even more subtle border */ + box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); + transition: transform 0.4s ease, filter 0.4s ease; } -section:hover { +section:hover:not(#games):not(#apps) { transform: translateY(-5px); + filter: grayscale(100%); } h1, h2, h3 { @@ -82,12 +88,9 @@ footer { #hero { text-align: center; - background: linear-gradient(rgba(28, 35, 51, 0.8), rgba(28, 35, 51, 0.8)), url('https://source.unsplash.com/random/1600x900/?abstract'); - background-size: cover; - background-position: center; + background: linear-gradient(135deg, #1c2333 0%, #2a344a 100%); padding: 4rem 2rem; - border: none; - box-shadow: none; + border-radius: 8px; /* Match other sections */ } #hero:hover { @@ -231,6 +234,9 @@ input[type="text"] { .chess-square { width: 100%; height: 100%; + display: flex; + justify-content: center; + align-items: center; } .chess-square.light { @@ -302,6 +308,16 @@ input[type="text"] { grid-column: span 2; } +.profile-picture { + width: 150px; + height: 150px; + border-radius: 50%; + border: 5px solid #8a2be2; /* violet */ + margin-bottom: 20px; + object-fit: cover; + box-shadow: 0 0 20px rgba(138, 43, 226, 0.5); +} + /* Search highlight styling */ mark { background-color: #8a2be2; @@ -309,3 +325,67 @@ mark { padding: 2px; border-radius: 3px; } + +.chess-piece { + font-size: 36px; /* Adjust size as needed */ + line-height: 1; + user-select: none; /* Prevent text selection */ + -webkit-user-select: none; + cursor: grab; + text-shadow: 1px 1px 3px rgba(0,0,0,0.5); +} + +.chess-square.selected { + background-color: #8a2be2 !important; /* A strong highlight */ + box-shadow: inset 0 0 10px #00000080; +} + +.valid-move { + position: relative; +} + +.valid-move::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 30%; + height: 30%; + border-radius: 50%; + background-color: rgba(138, 43, 226, 0.5); + pointer-events: none; /* Allows clicking through the dot */ +} + +.chess-square.in-check { + background-color: #ff4d4d !important; + box-shadow: inset 0 0 10px #00000080; +} + +/* Gallery Styling */ +.gallery-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; +} + +.gallery-item { + display: block; + background-color: #2a344a; + padding: 2rem; + border-radius: 10px; + text-decoration: none; + color: #f0f0f0; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.gallery-item:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0,0,0,0.2); +} + +.gallery-item h3 { + color: #8a2be2; + border-bottom: none; + margin-top: 0; +} diff --git a/games/calculator/index.html b/games/calculator/index.html new file mode 100644 index 0000000..5f55071 --- /dev/null +++ b/games/calculator/index.html @@ -0,0 +1,62 @@ + + + + + + Calculator - Rendani Manugeni + + + +
+ +
+ +
+
+

Calculator

+
+
+
0
+
+ + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+ + + + + + diff --git a/games/chess/index.html b/games/chess/index.html new file mode 100644 index 0000000..06f3d96 --- /dev/null +++ b/games/chess/index.html @@ -0,0 +1,37 @@ + + + + + + Chess - Rendani Manugeni + + + +
+ +
+ +
+
+

Chess

+
+
Turn: White
+
+
+
+
+ + + + + + + diff --git a/games/index.html b/games/index.html new file mode 100644 index 0000000..00c0724 --- /dev/null +++ b/games/index.html @@ -0,0 +1,46 @@ + + + + + + Games & Apps - Rendani Manugeni + + + +
+ +
+ +
+ +
+ + + + + + diff --git a/games/tictactoe/index.html b/games/tictactoe/index.html new file mode 100644 index 0000000..456c1f4 --- /dev/null +++ b/games/tictactoe/index.html @@ -0,0 +1,37 @@ + + + + + + Tic-Tac-Toe - Rendani Manugeni + + + +
+ +
+ +
+
+

Tic-Tac-Toe

+
+
+
+ +
+
+
+ + + + + + diff --git a/index.html b/index.html index fb7e655..e3b4539 100644 --- a/index.html +++ b/index.html @@ -10,16 +10,16 @@
+ Rendani Manugeni Profile Picture

Rendani Manugeni

Aspiring to build things that last.

@@ -45,68 +45,6 @@

Demoph Inc.

  • GitHub
    • - -
    -

    My Projects

    -
    - -
    -
    - -
    -

    Web Games

    -
    -

    Tic-Tac-Toe

    -
    -
    - -
    -
    -

    Chess

    -
    Coming Soon!
    -
    -
    -
    - -
    -

    Cool Apps

    -
    -

    Calculator

    -
    -
    0
    -
    - - - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -
    -

    Search

    - -
    -
    -