From 2aaf8354cfa5078266cad980320d0b251b7233e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Gabriel?= Date: Wed, 27 Mar 2024 22:24:47 -0300 Subject: [PATCH] Refactor whole "links" subdirectory --- src/Monambike.Links/Pages/Home.razor | 235 +++++++------- .../Properties/launchSettings.json | 40 +-- src/Monambike.Links/wwwroot/css/main.css | 301 ++++++++++-------- src/Monambike.Links/wwwroot/css/main.css.map | 1 + .../wwwroot/images/social/youtube.svg | 3 +- .../wwwroot/scss/base/_colors.scss | 18 ++ .../wwwroot/scss/base/_fonts.scss | 12 + .../wwwroot/scss/base/_reset.scss | 42 +++ .../wwwroot/scss/base/_typography.scss | 12 + src/Monambike.Links/wwwroot/scss/main.scss | 14 + .../wwwroot/scss/pages/_home.scss | 148 +++++++++ 11 files changed, 537 insertions(+), 289 deletions(-) create mode 100644 src/Monambike.Links/wwwroot/css/main.css.map create mode 100644 src/Monambike.Links/wwwroot/scss/base/_colors.scss create mode 100644 src/Monambike.Links/wwwroot/scss/base/_fonts.scss create mode 100644 src/Monambike.Links/wwwroot/scss/base/_reset.scss create mode 100644 src/Monambike.Links/wwwroot/scss/base/_typography.scss create mode 100644 src/Monambike.Links/wwwroot/scss/main.scss create mode 100644 src/Monambike.Links/wwwroot/scss/pages/_home.scss diff --git a/src/Monambike.Links/Pages/Home.razor b/src/Monambike.Links/Pages/Home.razor index ea0bb79..33a17f9 100644 --- a/src/Monambike.Links/Pages/Home.razor +++ b/src/Monambike.Links/Pages/Home.razor @@ -2,125 +2,118 @@ @using Monambike.Core.Data; Links | Monambike -
-
- Photo from Vinicius Gabriel. -

Vinícius Gabriel

-

@@monambike

-

Hello :) I'm a Software Developer now willing to be a Game Designer and 3D model animator.

- @Emails.Contact -
-
-
-

Links Gamers

- -
-
-
-

Links Profissionais

- -
+
+
+
+
+ Photo from Vinicius Gabriel. +

Vinícius Gabriel

+

@@monambike

+

Hello :) I'm a Software Developer now willing to be a Game Designer and 3D model animator.

+ @Emails.Contact + @Links.Website.BaseUrl +
+
+

Links Gamers

+ +
+
+

Links Profissionais

+
+ + +
  • + +
    + Instagram logo. +

    Instagram (Portfolio)

    +
    Go To Link
    +
    +     +
    • +
  • + +
    + YouTube logo. +

    YouTube (Portfolio)

    +
    Go To Link
    +
    +     +
    • +
  • + +
    + Itch.Io logo. +

    Itch.Io

    +
    Go To Link
    +
    +     +
    • + + +
    +
    diff --git a/src/Monambike.Links/Properties/launchSettings.json b/src/Monambike.Links/Properties/launchSettings.json index 5f1e203..7113afc 100644 --- a/src/Monambike.Links/Properties/launchSettings.json +++ b/src/Monambike.Links/Properties/launchSettings.json @@ -1,41 +1,7 @@ { - "$schema": "http://json.schemastore.org/launchsettings.json", - "iisSettings": { - "windowsAuthentication": false, - "anonymousAuthentication": true, - "iisExpress": { - "applicationUrl": "http://localhost:26278", - "sslPort": 44309 - } - }, "profiles": { - "http": { - "commandName": "Project", - "dotnetRunMessages": true, - "launchBrowser": true, - "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", - "applicationUrl": "http://localhost:5270", - "environmentVariables": { - "ASPNETCORE_ENVIRONMENT": "Development" - } - }, - "https": { - "commandName": "Project", - "dotnetRunMessages": true, - "launchBrowser": true, - "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", - "applicationUrl": "https://localhost:7046;http://localhost:5270", - "environmentVariables": { - "ASPNETCORE_ENVIRONMENT": "Development" - } - }, - "IIS Express": { - "commandName": "IISExpress", - "launchBrowser": true, - "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", - "environmentVariables": { - "ASPNETCORE_ENVIRONMENT": "Development" - } + "Start Website (.links)": { + "commandName": "Project" } } -} +} \ No newline at end of file diff --git a/src/Monambike.Links/wwwroot/css/main.css b/src/Monambike.Links/wwwroot/css/main.css index 7e89698..6594e6b 100644 --- a/src/Monambike.Links/wwwroot/css/main.css +++ b/src/Monambike.Links/wwwroot/css/main.css @@ -1,160 +1,203 @@ -/*Removing Formatting*/ +/************************************************************************** +Copyright(c) 2024 Vinicius Gabriel Marques de Melo. All rights reserved. +Contact: contact@monambike.com for more information. +For license information, please see the LICENSE file in the root directory. +**************************************************************************/ +/************************************************************************** +Copyright(c) 2024 Vinicius Gabriel Marques de Melo. All rights reserved. +Contact: contact@monambike.com for more information. +For license information, please see the LICENSE file in the root directory. +**************************************************************************/ +/************************************************************************** +Copyright(c) 2024 Vinicius Gabriel Marques de Melo. All rights reserved. +Contact: contact@monambike.com for more information. +For license information, please see the LICENSE file in the root directory. +**************************************************************************/ +/** + * Vinicius Gabriel Personal Website + * Author: Vinicius Gabriel + * Contact: contact@monambike.com + * Copyright (c) 2024 Vinicius Gabriel Marques de Melo. All rights reserved. + * This website and its contents are protected by copyright law. Unauthorized + * reproduction or distribution of this material without express and written + * permission from the author is strictly prohibited. +**/ +h1, h2, h3, h4, h5, h6, p { + margin: 0px; +} + +html, body { + height: 100%; + margin: 0px; +} + +a { + text-decoration: none; +} + +iframe { + border: 0px; +} -/*Formatting*/ +ul { + padding: 0px; + margin: 0px; +} + +li { + list-style: none; + margin: 0px; +} + +/************************************************************************** +Copyright(c) 2024 Vinicius Gabriel Marques de Melo. All rights reserved. +Contact: contact@monambike.com for more information. +For license information, please see the LICENSE file in the root directory. +**************************************************************************/ +/************************************************************************** +Copyright(c) 2024 Vinicius Gabriel Marques de Melo. All rights reserved. +Contact: contact@monambike.com for more information. +For license information, please see the LICENSE file in the root directory. +**************************************************************************/ +* { + font-family: "Segoe UI", Arial, sans-serif; +} + +/************************************************************************** +Copyright(c) 2024 Vinicius Gabriel Marques de Melo. All rights reserved. +Contact: contact@monambike.com for more information. +For license information, please see the LICENSE file in the root directory. +**************************************************************************/ +/************************************************************************** +Copyright(c) 2024 Vinicius Gabriel Marques de Melo. All rights reserved. +Contact: contact@monambike.com for more information. +For license information, please see the LICENSE file in the root directory. +**************************************************************************/ +/************************************************************************** +Copyright(c) 2024 Vinicius Gabriel Marques de Melo. All rights reserved. +Contact: contact@monambike.com for more information. +For license information, please see the LICENSE file in the root directory. +**************************************************************************/ body { - margin: 0; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; - background: url(../images/background.jpg) no-repeat; - background-attachment: fixed; - background-size: cover; + background-color: rgb(0, 0, 0); } -.profile-picture { +.profile { + background-color: rgb(245, 245, 245); + border-radius: 50px 0; + padding: 25px; + overflow: hidden; + text-overflow: ellipsis; +} +.profile__picture { width: 150px; height: 150px; border-radius: 50%; } - -.social-image { - width: 50px; - height: 50px; +.profile__name { + font-size: 42px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } -.container { - display: flex; - align-items: center; /* Center vertically */ +.profile__username { + color: rgb(144, 100, 202); + font-size: 32px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } -.text-container { - flex-grow: 1; /* Allow text container to grow and take remaining space */ - text-align: center; /* Center text horizontally */ +.profile__bio { + font-size: 22px; } - -h1 { - font-size: 2em; - font-weight: 600; - line-height: 2em; - margin: 0; +.profile__link { + font-size: 22px; + white-space: nowrap; } - -h2 { - font-size: 1.25em; - font-weight: 600; - margin: 0; +.profile__link a { + color: rgb(95, 50, 155); } - -.description { - line-height: 3em; +.profile__link a:hover { + color: rgb(144, 100, 202); } - -h3 { - font-size: 1.75em; - font-weight: 600; - line-height: 2em; /* 14px converted to em */ - margin: 0.5em; +.profile__link a:active { + color: rgb(227, 222, 236); } -a { - text-decoration: none; - color: inherit; +.page-container { + background: url(../images/background.jpg) no-repeat; + background-attachment: fixed; + background-size: cover; } - -li:hover { - transform: scale(1.05); - transition-duration: 0.25s; +.page-container__foreground { + backdrop-filter: brightness(10%); + height: 100%; + padding: 20px 0; } -li:active { - transform: scale(1.0753); - transition-duration: 0.25s; +.content-container { + color: rgb(25, 25, 25); + padding: 0 25%; } - -ul { - padding: 0; - margin: 0; +@media (max-width: 800px) { + .content-container { + padding-left: 5%; + padding-right: 5%; + } } -li { - list-style-type: none; - padding: 0; - margin: 2px 0; +.link-group { + width: 100%; +} +.link-group__title { + border-bottom: 5px solid rgb(95, 50, 155); + color: rgb(245, 245, 245); + font-size: 42px; + padding: 10px 0; + margin: 30px 0; } -hr { - overflow: visible; /* For IE */ - padding: 0; - border: none; - border-top: medium solid #fff; - color: #fff; - text-align: center; - margin: 0 50px; - opacity: 0.35; +.card-container { + display: grid; + gap: 20px; + grid-template-columns: repeat(1, 1fr); } -.acrylic { - padding: 4em 6em; +.card { + align-items: center; + background-color: rgb(245, 245, 245); + border-radius: 20px; + color: rgb(25, 25, 25); + display: flex; position: relative; - overflow: hidden; - margin: 1em; } - - .acrylic::before { - filter: blur(10px); - content: ""; - position: absolute; - left: -10px; - top: -10px; - width: calc(100% + 20px); - height: calc(100% + 20px); - z-index: -1; - } - - .acrylic:first-child::after { - opacity: 0.90; - } - - .acrylic::after { - content: ""; - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; - z-index: -1; - opacity: 0.75; - border: 1px solid #fff; - background: #fff; - background-image: url(data:image/png;base64,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); - } - -.shadow { - border-radius: 1px; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.2); +.card__title { + font-size: 32px; } - -.solid { - padding: 2em 3em; - position: relative; - overflow: hidden; - margin: 1em; +.card__image { + color: white; + max-width: 80px; + min-width: 80px; + padding: 20px; +} +.card__overlay { + align-items: center; + background-color: rgba(95, 50, 155, 0.85); + border-radius: 20px; + color: rgb(245, 245, 245); + display: flex; + font-size: 32px; + font-weight: 600; + height: 100%; + justify-content: center; + opacity: 0; + position: absolute; + text-transform: uppercase; + transition: opacity 0.3s ease; + width: 100%; +} +.card:hover .card__overlay { + opacity: 1; } - .solid::before { - content: ""; - position: absolute; - left: -10px; - top: -10px; - width: calc(100% + 20px); - height: calc(100% + 20px); - z-index: -1; - } - - .solid::after { - content: ""; - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; - z-index: -1; - border: 1px solid #fff; - background: #fff; - } +/*# sourceMappingURL=main.css.map */ diff --git a/src/Monambike.Links/wwwroot/css/main.css.map b/src/Monambike.Links/wwwroot/css/main.css.map new file mode 100644 index 0000000..3f30974 --- /dev/null +++ b/src/Monambike.Links/wwwroot/css/main.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/base/_colors.scss","../scss/base/_fonts.scss","../scss/base/_reset.scss","../scss/base/_typography.scss","../scss/pages/_home.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;EACE;;;AAIF;EACE;EACA;;;AAIF;EACE;;;AAIF;EACE;;;AAIF;EACE;EACA;;;AAIF;EACE;EACA;;;ACxCF;AAAA;AAAA;AAAA;AAAA;AFAA;AAAA;AAAA;AAAA;AAAA;AESA;EACE,aFHoB;;;AGPtB;AAAA;AAAA;AAAA;AAAA;AJAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AGSA;EACE;;;AAGF;EACE,kBJPM;EIQN;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE,WHhBc;EGiBd;EACA;EACA;;AAGF;EACE,OJtBY;EIuBZ,WHzBe;EG0Bf;EACA;EACA;;AAGF;EACE,WHjCc;;AGoChB;EACE,WHrCc;EGsCd;;AAEA;EACE,OJrCQ;;AIuCR;EACE,OJzCQ;;AI4CV;EACE,OJ9CO;;;AIoDf;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE,OJpEM;EIqEN;;AAGA;EALF;IAMI;IACA;;;;AAIJ;EACE;;AAEA;EACE;EACA,OJpFI;EIqFJ,WHjFc;EGkFd;EACA;;;AAKJ;EACE;EACA;EACA;;;AAKF;EACE;EACA,kBJtGM;EIuGN,eALc;EAMd,OJvGM;EIwGN;EACA;;AAEA;EACE,WH1Ge;;AG6GjB;EAEE;EACA,WAFmB;EAGnB,WAHmB;EAInB;;AAGF;EACE;EACA;EACA,eAzBY;EA0BZ,OJ5HI;EI6HJ;EACA,WH3He;EG4Hf;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE","file":"main.css"} \ No newline at end of file diff --git a/src/Monambike.Links/wwwroot/images/social/youtube.svg b/src/Monambike.Links/wwwroot/images/social/youtube.svg index 1cce2c4..4deb4f2 100644 --- a/src/Monambike.Links/wwwroot/images/social/youtube.svg +++ b/src/Monambike.Links/wwwroot/images/social/youtube.svg @@ -1,2 +1 @@ - - \ No newline at end of file + \ No newline at end of file diff --git a/src/Monambike.Links/wwwroot/scss/base/_colors.scss b/src/Monambike.Links/wwwroot/scss/base/_colors.scss new file mode 100644 index 0000000..71cd6ed --- /dev/null +++ b/src/Monambike.Links/wwwroot/scss/base/_colors.scss @@ -0,0 +1,18 @@ +/************************************************************************** +Copyright(c) 2024 Vinicius Gabriel Marques de Melo. All rights reserved. +Contact: contact@monambike.com for more information. +For license information, please see the LICENSE file in the root directory. +**************************************************************************/ + +// Gray +$white: rgba(245, 245, 245, 1); +$black: rgba(25, 25, 25, 1); + +// Purple Colors +$purple-light: rgba(227, 222, 236); +$purple-medium: rgba(144, 100, 202); +$purple-dark: rgba(95, 50, 155); +$purple-deep: rgba(77, 18, 161); + +$primary-color: $white; +$secondary-color: $black; diff --git a/src/Monambike.Links/wwwroot/scss/base/_fonts.scss b/src/Monambike.Links/wwwroot/scss/base/_fonts.scss new file mode 100644 index 0000000..b5479e1 --- /dev/null +++ b/src/Monambike.Links/wwwroot/scss/base/_fonts.scss @@ -0,0 +1,12 @@ +/************************************************************************** +Copyright(c) 2024 Vinicius Gabriel Marques de Melo. All rights reserved. +Contact: contact@monambike.com for more information. +For license information, please see the LICENSE file in the root directory. +**************************************************************************/ + +// Font Family +$font-family-default: "Segoe UI", Arial, sans-serif; + +$text-size-small: 22px; +$text-size-medium: 32px; +$text-size-large: 42px; diff --git a/src/Monambike.Links/wwwroot/scss/base/_reset.scss b/src/Monambike.Links/wwwroot/scss/base/_reset.scss new file mode 100644 index 0000000..da0c561 --- /dev/null +++ b/src/Monambike.Links/wwwroot/scss/base/_reset.scss @@ -0,0 +1,42 @@ +/** + * Vinicius Gabriel Personal Website + * Author: Vinicius Gabriel + * Contact: contact@monambike.com + * Copyright (c) 2024 Vinicius Gabriel Marques de Melo. All rights reserved. + * This website and its contents are protected by copyright law. Unauthorized + * reproduction or distribution of this material without express and written + * permission from the author is strictly prohibited. +**/ + +// Text +h1, h2, h3, h4, h5, h6, p { + margin: 0px; +} + +// Main Divisions +html, body { + height: 100%; + margin: 0px; +} + +// Links and Imports +a { + text-decoration: none; +} + +// Iframes +iframe { + border: 0px; +} + +// Lists +ul { + padding: 0px; + margin: 0px; +} + +// List Items +li { + list-style: none; + margin: 0px; +} diff --git a/src/Monambike.Links/wwwroot/scss/base/_typography.scss b/src/Monambike.Links/wwwroot/scss/base/_typography.scss new file mode 100644 index 0000000..718d0bd --- /dev/null +++ b/src/Monambike.Links/wwwroot/scss/base/_typography.scss @@ -0,0 +1,12 @@ +/************************************************************************** +Copyright(c) 2024 Vinicius Gabriel Marques de Melo. All rights reserved. +Contact: contact@monambike.com for more information. +For license information, please see the LICENSE file in the root directory. +**************************************************************************/ + +@import "_fonts.scss"; + +// Style for All Elements +* { + font-family: $font-family-default; +} diff --git a/src/Monambike.Links/wwwroot/scss/main.scss b/src/Monambike.Links/wwwroot/scss/main.scss new file mode 100644 index 0000000..7bb58f3 --- /dev/null +++ b/src/Monambike.Links/wwwroot/scss/main.scss @@ -0,0 +1,14 @@ +/************************************************************************** +Copyright(c) 2024 Vinicius Gabriel Marques de Melo. All rights reserved. +Contact: contact@monambike.com for more information. +For license information, please see the LICENSE file in the root directory. +**************************************************************************/ + +// base +@import "base/_colors.scss"; +@import "base/_fonts.scss"; +@import "base/_reset.scss"; +@import "base/_typography.scss"; + +// pages +@import "pages/_home.scss"; diff --git a/src/Monambike.Links/wwwroot/scss/pages/_home.scss b/src/Monambike.Links/wwwroot/scss/pages/_home.scss new file mode 100644 index 0000000..8b2be5b --- /dev/null +++ b/src/Monambike.Links/wwwroot/scss/pages/_home.scss @@ -0,0 +1,148 @@ +/************************************************************************** +Copyright(c) 2024 Vinicius Gabriel Marques de Melo. All rights reserved. +Contact: contact@monambike.com for more information. +For license information, please see the LICENSE file in the root directory. +**************************************************************************/ + +@import "../base/_colors.scss"; +@import "../base/_fonts.scss"; + +body { + background-color: rgba(0, 0, 0, 1); +} + +.profile { + background-color: $primary-color; + border-radius: 50px 0; + padding: 25px; + overflow: hidden; + text-overflow: ellipsis; + + &__picture { + width: 150px; + height: 150px; + border-radius: 50%; + } + + &__name { + font-size: $text-size-large; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + &__username { + color: $purple-medium; + font-size: $text-size-medium; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + &__bio { + font-size: $text-size-small; + } + + &__link { + font-size: $text-size-small; + white-space: nowrap; + + a { + color: $purple-dark; + + &:hover { + color: $purple-medium; + } + + &:active { + color: $purple-light; + } + } + } +} + +.page-container { + background: url(../images/background.jpg) no-repeat; + background-attachment: fixed; + background-size: cover; + + &__foreground { + backdrop-filter: brightness(10%); + height: 100%; + padding: 20px 0; + } +} + +.content-container { + color: $secondary-color; + padding: 0 25%; + + // Remove Padding for Smaller Screens + @media(max-width:800px) { + padding-left: 5%; + padding-right: 5%; + } +} + +.link-group { + width: 100%; + + &__title { + border-bottom: 5px solid $purple-dark; + color: $primary-color; + font-size: $text-size-large; + padding: 10px 0; + margin: 30px 0; + } +} + +// Card Container +.card-container { + display: grid; + gap: 20px; + grid-template-columns: repeat(1, 1fr); +} + +$border-radius: 20px; +// Cards +.card { + align-items: center; + background-color: $primary-color; + border-radius: $border-radius; + color: $secondary-color; + display: flex; + position: relative; + + &__title { + font-size: $text-size-medium; + } + + &__image { + $fixed-image-size: 80px; + color: white; + max-width: $fixed-image-size; + min-width: $fixed-image-size; + padding: 20px; + } + + &__overlay { + align-items: center; + background-color: rgba(95, 50, 155, 0.85); + border-radius: $border-radius; + color: $primary-color; + display: flex; + font-size: $text-size-medium; + font-weight: 600; + height: 100%; + justify-content: center; + opacity: 0; + position: absolute; + text-transform: uppercase; + transition: opacity 0.3s ease; + width: 100%; + } + + &:hover .card__overlay { + opacity: 1; + } +}