diff options
| -rw-r--r-- | src/app.scss | 13 | ||||
| -rw-r--r-- | src/lib/assets/css/projects.scss | 62 | ||||
| -rw-r--r-- | src/lib/projects.json | 28 | ||||
| -rw-r--r-- | src/routes/+page.svelte | 2 | ||||
| -rw-r--r-- | src/routes/projects/+page.svelte | 35 |
5 files changed, 125 insertions, 15 deletions
diff --git a/src/app.scss b/src/app.scss index 764f1b0..7e47126 100644 --- a/src/app.scss +++ b/src/app.scss @@ -42,18 +42,6 @@ a { } } -.ii { - width: 20vh; - height: 20vh; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%,-50%); - background-color: #1e1e2e; - border-radius: 2vh; - box-shadow: -12px -12px 28px #27273b73, 12px 12px 20px #12121c73; -} - .container { display: flex; height: 100dvh; @@ -61,6 +49,7 @@ a { justify-content: center; overflow: hidden; flex-direction: column; + width: 100%; } .main { diff --git a/src/lib/assets/css/projects.scss b/src/lib/assets/css/projects.scss new file mode 100644 index 0000000..e9c2f6a --- /dev/null +++ b/src/lib/assets/css/projects.scss @@ -0,0 +1,62 @@ +$font-min: 16px; +$font-desired: 1vw; +$font-max: 32px; + +.project-container { + padding: 0 10vw; + display: grid; + grid-template-columns: repeat(2, minmax(40vw, 1fr)); + height: 85dvh; + align-items: center; + justify-items: center; + overflow: auto; + align-content: center; + -ms-overflow-style: none; + scrollbar-width: none; + + ::-webkit-scrollbar { + display: none; + } +} + +.project { + margin: 30px 15px; + font-size: clamp($font-min, $font-desired, $font-max); + padding: 25px 10px; + display: flex; + align-items: center; + background: #1e1e2e; + transition: transform .3s ease-in-out; + border-radius: 2vh; + box-shadow: -12px -12px 28px #27273b73, 12px 12px 20px #12121c73; +} + +.spacer { + height: 15dvh; + display: flex; + flex-direction: column; + justify-content: end; +} + +.home { + font-size: clamp($font-min, 2.5vw, 48px); + margin-bottom: 15px; +} + +.project-icon { + width: 4rem; + height: 4rem; + margin-right: 10px; +} + +@media (max-width: 839px) { + .project-container { + grid-template-columns: minmax(90vw, 1fr); + padding: 0 5vw; + } +} + +a:hover .project { + transform: scale(110%); + transition: transform .3s ease-in-out; +} diff --git a/src/lib/projects.json b/src/lib/projects.json new file mode 100644 index 0000000..bb637bb --- /dev/null +++ b/src/lib/projects.json @@ -0,0 +1,28 @@ +{ + "projects": [ + { + "iconLink": "https://raw.githubusercontent.com/Olah-Barbershop/website/master/src/lib/assets/icon.png", + "link": "https://github.com/Olah-Barbershop/website/", + "title": "Oláh Barbershop", + "description": "Lorem ipsum dolor sit amet, qui minim labore adipisicing." + }, + { + "iconLink": "https://raw.githubusercontent.com/Olah-Barbershop/website/master/src/lib/assets/icon.png", + "link": "https://github.com/Olah-Barbershop/API", + "title": "Oláh Barbershop - API", + "description": "Lorem ipsum dolor sit amet, qui minim labore adipisicing." + }, + { + "iconLink": "https://raw.githubusercontent.com/Olah-Barbershop/website/master/src/lib/assets/icon.png", + "link": "https://github.com/Olah-Barbershop/website/", + "title": "Oláh Barbershop", + "description": "Lorem ipsum dolor sit amet, qui minim labore adipisicing." + }, + { + "iconLink": "https://raw.githubusercontent.com/Olah-Barbershop/website/master/src/lib/assets/icon.png", + "link": "https://github.com/Olah-Barbershop/website/", + "title": "Oláh Barbershop", + "description": "Lorem ipsum dolor sit amet, qui minim labore adipisicing." + } + ] +} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 4391bf3..17129e9 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -31,6 +31,6 @@ </div> <br> <div class="projects"> - Check out my projects <a href={base + '/projects'}><b>here ⮞</b></a> + Check out my projects <a href={base + '/projects'}><b>here</b></a> </div> </div> diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte index 5a074b6..8b64856 100644 --- a/src/routes/projects/+page.svelte +++ b/src/routes/projects/+page.svelte @@ -1,7 +1,38 @@ <script lang="ts"> + import '$lib/assets/css/projects.scss' + import { base } from "$app/paths" + import { projects } from '$lib/projects.json' + + type Project = { + iconLink: string, + link: string, + title: string, + description: string + } + + const projectsList: Project[] = projects </script> -<div class="home"> - ⮜ Take me back <a href={base + '/'}><b>home</b></a> +<svelte:head> + <title>Projects</title> +</svelte:head> + +<div class="spacer"> + <div class="home"> + Take me back <a href={base + '/'}><b>home</b></a> + </div> +</div> +<div class="project-container"> + {#each projectsList as {iconLink, link, title, description}} + <a href={link} target="_blank"> + <div class="project"> + <img src={iconLink} alt={title + ' icon'} class="project-icon"> + <div class="content"> + <h3>{title}</h3> + <p>{description}</p> + </div> + </div> + </a> + {/each} </div> |