diff --git a/package.json b/package.json index 7384cbc..f68dd24 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ }, "type": "module", "dependencies": { + "md-block": "^0.0.1", "svelte-material-icons": "^3.0.5", "svelte-transition": "^0.0.10" } diff --git a/src/app.html b/src/app.html index e26c5f7..f9c19af 100644 --- a/src/app.html +++ b/src/app.html @@ -5,7 +5,8 @@ - + + %sveltekit.head% diff --git a/src/app.scss b/src/app.scss index 93889f4..4ecc0f6 100644 --- a/src/app.scss +++ b/src/app.scss @@ -3,6 +3,7 @@ /* imports */ // @use "styles/scrollbar.scss"; @import url("https://fonts.cdnfonts.com/css/manrope"); +@import url('https://fonts.cdnfonts.com/css/hack'); /* general style */ html, @@ -43,6 +44,10 @@ h6.no-select{ text-decoration: underline; } +code { + font-family: $font-family-mono; +} + /* Scrollbars */ // Firefox diff --git a/src/routes/Modal.svelte b/src/routes/Modal.svelte new file mode 100644 index 0000000..8348b7d --- /dev/null +++ b/src/routes/Modal.svelte @@ -0,0 +1,116 @@ + + +{#if show} + + +
+ + +
+ {#if contentComponent} + + + {:else} +


No content provided

+ {/if} +
+
+{/if} + + diff --git a/src/routes/Projects.svelte b/src/routes/Projects.svelte index 7b8e0b8..3810cf8 100644 --- a/src/routes/Projects.svelte +++ b/src/routes/Projects.svelte @@ -1,5 +1,25 @@ + + +
+
+ +
+
+ + + +
+
+
+ + +
+ + + diff --git a/src/routes/modals/explorecraft.svelte b/src/routes/modals/explorecraft.svelte new file mode 100644 index 0000000..ba2cca6 --- /dev/null +++ b/src/routes/modals/explorecraft.svelte @@ -0,0 +1,49 @@ + + + +
+
+ +
+
+ + + +
+
+
+ + +
+ + + diff --git a/src/routes/modals/sangefault.svelte b/src/routes/modals/sangefault.svelte new file mode 100644 index 0000000..3075a86 --- /dev/null +++ b/src/routes/modals/sangefault.svelte @@ -0,0 +1,49 @@ + + + +
+
+ +
+
+ + + +
+
+
+ + +
+ + + diff --git a/src/routes/modals/sangelospace.svelte b/src/routes/modals/sangelospace.svelte new file mode 100644 index 0000000..e785744 --- /dev/null +++ b/src/routes/modals/sangelospace.svelte @@ -0,0 +1,49 @@ + + + +
+
+ +
+
+ + + +
+
+
+ + +
+ + + diff --git a/src/routes/modals/utilityclient.svelte b/src/routes/modals/utilityclient.svelte new file mode 100644 index 0000000..2209e8c --- /dev/null +++ b/src/routes/modals/utilityclient.svelte @@ -0,0 +1,49 @@ + + + +
+
+ +
+
+ + + +
+
+
+ + +
+ + + diff --git a/src/styles/mobile/modal-mobile.scss b/src/styles/mobile/modal-mobile.scss new file mode 100644 index 0000000..c914b26 --- /dev/null +++ b/src/styles/mobile/modal-mobile.scss @@ -0,0 +1,36 @@ +@media (max-width: 850px) { + content { + .parent { + display: grid; + grid-template-columns: repeat(1, 2fr); + grid-template-rows: auto 1fr; // Adjusted to 2 rows + grid-column-gap: 0px; + grid-row-gap: 0px; + overflow: scroll; + margin: 0 5% 15% 5%; + + .gallery { + display: grid; + justify-items: center; + + img.project-logo { + height: 5em; + margin-right: 0; + } + } + } + + .button-container { + bottom: 7.5%; + + &::before { + bottom: 5.9%; + width: 80%; + } + + button { + font-size: 20px; + } + } + } +} \ No newline at end of file diff --git a/src/styles/modal.scss b/src/styles/modal.scss new file mode 100644 index 0000000..8550b30 --- /dev/null +++ b/src/styles/modal.scss @@ -0,0 +1,86 @@ +content { + height: 100%; + text-align: left; + + .parent { + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto; + grid-column-gap: 0px; + grid-row-gap: 0px; + overflow: hidden; + margin: 0.5em 5% 6% 0.5em; + + .gallery { + img.project-logo { + margin-right: 2em; + border-radius: 0.8em; + height: 15em; + transition: ease-in-out 0.3s; + } + } + + + img.project-logo:hover { + box-shadow: 10px 10px 71px -32px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 10px 10px 71px -32px rgba(0,0,0,0.5); + } + } + + .button-container { + z-index: 1000; + position: fixed; + bottom: 10%; + grid-area: 2 / 1 / 3 / 2; + align-self: start; + justify-self: start; + width: 85%; + + // Create the gradient rectangle + &::before { + content: ''; + position: fixed; + left: 9%; + bottom: calc(10% - 0.96em); + height: calc(100% + 1em); // 1em higher than the button + height: 15%; + width: 82%; + pointer-events: none; + background: linear-gradient(to top, $space-gray, transparent); + z-index: 1001; // Place it behind the button + } + + button { + display: flex; + position: relative; // Ensure the button is above the gradient + z-index: 1002; + background-color: $deep-sky-blue; + color: white; + border: 0; + border-radius: 0.8em; + padding: 0.7em; + font-size: 20px; + font-weight: 600; + cursor: pointer; + transition: ease-in-out 0.1s; + + p { + margin: 0; + margin-left: 0.5em; + } + } + + button:hover { + opacity: 0.9; + } + + button:active { + opacity: 0.8; + } + + a.button { + display: inline-block; + text-decoration: none; + } + } +} diff --git a/src/styles/projects.scss b/src/styles/projects.scss index c486bff..e56e965 100644 --- a/src/styles/projects.scss +++ b/src/styles/projects.scss @@ -46,7 +46,7 @@ display: grid; grid-template-columns: 8em 8em 8em 8em; grid-template-rows: 8em 8em 8em; - gap: 2em 2em; + gap: 1em 2em; grid-template-areas: 'one one one one' 'two two two two' @@ -82,6 +82,8 @@ margin: 0 0 0 2em; overflow: hidden; background-size: 8em; + background-position: center; + background-repeat: no-repeat; } .button:hover { @@ -129,8 +131,6 @@ background-color: $space-cadet; background-image: url('/assets/icons/next.svg'); background-size: 3em; - background-position: center; - background-repeat: no-repeat; } .tip { @@ -138,7 +138,7 @@ text-align: left; font-weight: 600; font-size: 25px; - z-index: 100; + z-index: 1; margin-left: 1em; .capri { diff --git a/src/variables.scss b/src/variables.scss index ad27183..412bd9f 100644 --- a/src/variables.scss +++ b/src/variables.scss @@ -12,8 +12,11 @@ $space-gray: #3e4053; $star-gray: #878894; $white: #ffffff; -// Tooltip Alpha -$space-gray-tooltip: #3e4053b2; +// Alpha Versions +$space-gray-tooltip: rgba(61, 63, 81, 0.69); +$space-black-modal: rgba(18, 19, 22, 0.2); +$space-gray-modal: rgba(61, 63, 81, 0.8); // Font Family -$font-family: 'Manrope', sans-serif; \ No newline at end of file +$font-family: 'Manrope', sans-serif; +$font-family-mono: 'Hack', sans-serif; \ No newline at end of file diff --git a/static/assets/style/markdown.css b/static/assets/style/markdown.css new file mode 100644 index 0000000..5aa3ee2 --- /dev/null +++ b/static/assets/style/markdown.css @@ -0,0 +1,38 @@ +.markdown-body { + /* padding: 0.5em; + border-radius: 12px; */ + margin-top: 1em; + background: transparent; + font-family: 'Manrope', sans-serif; + overflow: auto; + + h1, + h2 { + border-bottom: 1px solid #878894; + } + + blockquote { + background-color: #2b2d426c; + color: #ffffff; + border-left: .25em solid #121316; + padding: 0.5em; + } +} + +a { + color: #0091fb; +} + +a:hover { + color: #00b2fa; +} + +a:visited { + color: #00c4fb; +} +code { + font-family: 'Hack', sans-serif; + background-color: #2b2d42; + border-radius: 8px; + padding: 0.1em 0.2em 0.1em 0.2em; +} diff --git a/static/docs/assets/README.txt b/static/docs/assets/README.txt new file mode 100644 index 0000000..247bc12 --- /dev/null +++ b/static/docs/assets/README.txt @@ -0,0 +1 @@ +# this directory is a fix for explorecraft project readme not loading screenshots \ No newline at end of file diff --git a/static/docs/assets/screenshot-dark.png b/static/docs/assets/screenshot-dark.png new file mode 100644 index 0000000..0ba0d0e Binary files /dev/null and b/static/docs/assets/screenshot-dark.png differ diff --git a/static/docs/assets/screenshot-light.png b/static/docs/assets/screenshot-light.png new file mode 100644 index 0000000..266ad56 Binary files /dev/null and b/static/docs/assets/screenshot-light.png differ diff --git a/yarn.lock b/yarn.lock index fa3545d..635ab42 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1111,6 +1111,11 @@ magic-string@^0.30.0, magic-string@^0.30.3, magic-string@^0.30.4: dependencies: "@jridgewell/sourcemap-codec" "^1.4.15" +md-block@^0.0.1: + version "0.0.1" + resolved "https://registry.yarnpkg.com/md-block/-/md-block-0.0.1.tgz#d2b8c34dbd7158333e603a482413162c49ac0fb8" + integrity sha512-uXAp27jR+ztgoWyQfaktpWYNbknlpzmeYfIkeYGwGjkZDXTcWmom9eVgUsjEn4/I9evLdfydWB0PIzHq9VjUwg== + mdn-data@2.0.30: version "2.0.30" resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.30.tgz#ce4df6f80af6cfbe218ecd5c552ba13c4dfa08cc"