diff --git a/src/routes/Projects.svelte b/src/routes/Projects.svelte index 507ce78..48cbfc6 100644 --- a/src/routes/Projects.svelte +++ b/src/routes/Projects.svelte @@ -25,7 +25,6 @@ function openWebsite(url: string) { goto(url); } -
@@ -65,7 +64,37 @@

Projects

- + +
+
+
+ + +
+
+ + + + +
+
+ + +
+
+
+

+ Click on a
+ bubble for
+ more info. +

+
+
+
diff --git a/src/styles/mobile/projects.scss b/src/styles/mobile/projects.scss index 1b4341e..261aaca 100644 --- a/src/styles/mobile/projects.scss +++ b/src/styles/mobile/projects.scss @@ -1,5 +1,33 @@ @import "./mobile-header.scss"; @media (max-width: 850px) { + content { + .content-container { + flex-wrap: wrap; + margin: 0; + .container { + grid-template-columns: 6em 6em 6em 6em; + grid-template-rows: 6em 6em 6em; + gap: 1em 1em; + margin: 0; + margin-top: 10%; + // margin-bottom: -40%; + // margin-left: -20% + } + + .button { + width: 6em; + height: 6em; + border-radius: 20px; + margin: 0 0 0 1em; + background-size: 6em; + } + + .tip { + text-align: center; + line-height: 130%; + } + } + } } \ No newline at end of file diff --git a/src/styles/projects.scss b/src/styles/projects.scss index 17021c5..c6f4866 100644 --- a/src/styles/projects.scss +++ b/src/styles/projects.scss @@ -32,8 +32,114 @@ content { display: flex; height: 80%; - width: 60em; - margin-left: 6em; + width: 100%; + align-items: center; + justify-content: center; + + .content-container { + height: 100%; + display: flex; + align-items: center; + justify-content: center; + + .container { + display: grid; + grid-template-columns: 7em 7em 7em 7em; + grid-template-rows: 7em 7em 7em; + gap: 2em 2em; + grid-template-areas: + 'one one one one' + 'two two two two' + 'thr thr thr thr'; + transform: rotate(-45deg); + margin-right: -4em; + margin-bottom: -15%; + user-select: none; + cursor: default; + } + + .one { + grid-area: one; + } + + .two { + grid-area: two; + } + + .thr { + grid-area: thr; + } + + .button { + width: 8em; + height: 8em; + border-radius: 25px; + border: none; + color: white; + cursor: pointer; + transition: ease-in-out 0.1s; + margin: 0 0 0 2em; + overflow: hidden; + background-size: 8em; + } + + .button:hover { + opacity: 0.9; + } + + .button:active { + opacity: 0.8; + } + + .inactive { + visibility: hidden; + } + + .sangelo { + background-image: url('/assets/logos/sangelo.svg'); + } + + .lunivity { + background-image: url('/assets/logos/lunivity.svg'); + } + + .gitpot { + background-color: #161417; + background-image: url('/assets/logos/gitpot.svg'); + } + + .utility { + background-image: url('/assets/logos/utilityclient.svg'); + } + + // .spectrumgal { + // grid-area: 🌕; + // } + + // .spacebot { + // grid-area: 🤖; + // } + + // .sangefault { + // grid-area: 🎨; + // } + + .tip { + width: 10em; + text-align: left; + font-weight: 600; + font-size: 25px; + z-index: 100; + margin-left: 1em; + + .capri { + color: $capri; + } + .french-sky { + color: $french-sky-blue; + } + } + } } @import './mobile/projects.scss'; diff --git a/static/assets/logos/gitpot.svg b/static/assets/logos/gitpot.svg new file mode 100644 index 0000000..6e8476e --- /dev/null +++ b/static/assets/logos/gitpot.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/static/assets/logos/lunivity.svg b/static/assets/logos/lunivity.svg new file mode 100644 index 0000000..38e2c07 --- /dev/null +++ b/static/assets/logos/lunivity.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/assets/logos/sangelo.svg b/static/assets/logos/sangelo.svg new file mode 100644 index 0000000..930a028 --- /dev/null +++ b/static/assets/logos/sangelo.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/static/assets/logos/utilityclient.svg b/static/assets/logos/utilityclient.svg new file mode 100644 index 0000000..c5aace8 --- /dev/null +++ b/static/assets/logos/utilityclient.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +