diff --git a/app.vue b/app.vue index 8e7f33e..8f62b8b 100644 --- a/app.vue +++ b/app.vue @@ -1,7 +1,3 @@ diff --git a/assets/css/blog.scss b/assets/css/blog.scss new file mode 100644 index 0000000..e69de29 diff --git a/assets/css/home.scss b/assets/css/home.scss new file mode 100644 index 0000000..2b1c1fa --- /dev/null +++ b/assets/css/home.scss @@ -0,0 +1,157 @@ +#home { + header { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + align-items: center; + margin: 1rem 0; + + section { + display: flex; + flex-direction: column; + + h1 { + font-family: var(--slab); + font-size: 4rem; + border-left: 10px solid var(--main); + padding-left: 1rem; + } + + span { + color: var(--gray); + font-family: var(--sans); + font-weight: normal; + font-style: italic; + font-size: 1.3rem; + margin-top: 1rem; + } + } + + img { + width: 20rem; + border-radius: 3rem; + border: 1px var(--main) solid; + } + } + + main { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + margin: 1rem 0; + + article { + width: 60%; + padding: 2rem; + background-color: var(--black); + border: 1px var(--gray) solid; + border-radius: 3rem; + + p { + font-family: var(--serif); + line-height: 1.7; + margin: 1rem 0; + + a { + border-bottom: 3px solid var(--main); + } + + &::first-letter { + font-size: 1.4rem; + line-height: 1rem; + } + } + } + + nav { + width: 30%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-end; + + a { + font-family: var(--sans); + font-size: 2.5rem; + font-family: var(--slab); + + &:first-of-type { + margin-bottom: 3rem; + } + + &::before { + content: '>'; + color: var(--main); + font-family: var(--slab); + margin-right: 0.5rem; + } + } + } + } + + @media (max-width: 768px) { + header { + align-items: center; + flex-direction: column; + + section { + margin: 2rem 0; + align-items: center; + + h1 { + font-size: 3rem; + border-left: none; + border-bottom: 3px solid var(--main); + padding-left: 0; + } + + h2 { + color: var(--gray); + font-family: var(--sans); + font-weight: normal; + font-size: 1.3rem; + margin-bottom: 1rem; + } + } + } + + main { + flex-direction: column-reverse; + margin: 0; + + article { + width: 100%; + border-radius: 0; + border: none; + background-color: transparent; + + p { + font-size: 1.1rem; + } + } + + nav { + width: 100%; + margin: 3rem 0; + flex-direction: row; + align-items: center; + justify-content: space-evenly; + + a { + border-bottom: 3px solid var(--main); + + &:first-of-type { + margin-bottom: 0rem; + } + + &::before { + content: ''; + margin-right: 0; + } + } + } + } + } +} diff --git a/assets/css/portfolio.scss b/assets/css/portfolio.scss new file mode 100644 index 0000000..b8f7bbe --- /dev/null +++ b/assets/css/portfolio.scss @@ -0,0 +1,44 @@ +#portfolio { + header { + margin-top: 2rem; + display: flex; + justify-content: center; + + h1 { + font-size: 3rem; + border-left: 10px solid var(--main); + padding-left: 1rem; + font-family: var(--slab); + } + } + + main { + display: flex; + flex-direction: column; + align-items: center; + } + + footer { + margin: 2rem 0; + display: flex; + justify-content: center; + align-items: center; + + a { + color: var(--gray); + border: none; + font-size: 1rem; + font-family: var(--sans); + cursor: pointer; + border: 1px solid var(--gray); + border-radius: 1rem; + padding: 0.5rem 1rem; + transition-duration: 200ms; + + &:hover { + border-color: var(--white); + color: var(--white); + } + } + } +} diff --git a/assets/css/theme.css b/assets/css/theme.css new file mode 100644 index 0000000..2eb955e --- /dev/null +++ b/assets/css/theme.css @@ -0,0 +1,122 @@ +@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&family=Noto+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Noto+Serif:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Roboto+Slab:wght@700&display=swap'); + +:root { + --bg_h: #1d2021; + --bg: #282828; + --bg_s: #32302f; + --bg1: #3c3836; + --bg2: #504945; + --bg3: #665c54; + --bg4: #7c6f64; + + --fg: #fbf1c7; + --fg1: #ebdbb2; + --fg2: #d5c4a1; + --fg3: #bdae93; + --fg4: #a89984; + + --red: #fb4934; + --green: #b8bb26; + --yellow: #fabd2f; + --blue: #83a598; + --purple: #d3869b; + --aqua: #8ec07c; + --gray: #928374; + --orange: #fe8019; + + --red_dim: #cc2412; + --green_dim: #98971a; + --yellow_dim: #d79921; + --blue_dim: #458588; + --purple_dim: #b16286; + --aqua_dim: #689d6a; + --gray_dim: #a89984; + --orange_dim: #d65d0e; +} + +@media (prefers-color-scheme: light) { + :root { + --bg_h: #f9f5d7; + --bg: #fbf1c7; + --bg_s: #f2e5bc; + --bg1: #ebdbb2; + --bg2: #d5c4a1; + --bg3: #bdae93; + --bg4: #a89984; + + --fg: #282828; + --fg1: #3c3836; + --fg2: #504945; + --fg3: #665c54; + --fg4: #7c6f64; + + --red: #9d0006; + --green: #79740e; + --yellow: #b57614; + --blue: #076678; + --purple: #8f3f71; + --aqua: #427b58; + --orange: #af3a03; + --gray: #928374; + + --red_dim: #cc2412; + --green_dim: #98971a; + --yellow_dim: #d79921; + --blue_dim: #458598; + --purple_dim: #b16286; + --aqua_dim: #689d6a; + --orange_dim: #d65d0e; + --gray_dim: #7c6f64; + } +} + +:root { + --mono: 'JetBrains Mono', monospace; + --sans: 'Noto Sans', sans-serif; + --serif: 'Noto Serif', serif; + --slab: 'Roboto Slab', serif; + + --black: var(--bg_h); + --dark_gray: var(--bg); + --light-gray: var(--fg4); + --white: var(--fg); + + --main: var(--red_dim); + --foreground: var(--white); + --background: var(--black); +} + +* { + margin: 0; + padding: 0; + text-decoration: none; + box-sizing: border-box; + background-color: transparent; + color: var(--white); + font-weight: normal; +} + +*::selection { + color: var(--white); + background-color: var(--main); +} + +html, +body, +div#__nuxt { + margin: 0 auto; + + min-height: 100%; + max-width: 70rem; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + box-sizing: border-box; +} + +html { + background-color: var(--dark_gray); +} diff --git a/components/content/Home.vue b/components/content/Home.vue deleted file mode 100644 index f16a3d4..0000000 --- a/components/content/Home.vue +++ /dev/null @@ -1,15 +0,0 @@ - diff --git a/components/content/portfolio/PortfolioEntry.vue b/components/content/portfolio/PortfolioEntry.vue index 23a56d0..ea0003e 100644 --- a/components/content/portfolio/PortfolioEntry.vue +++ b/components/content/portfolio/PortfolioEntry.vue @@ -1,5 +1,100 @@ + + diff --git a/content/index.md b/content/index.md deleted file mode 100644 index ead12cc..0000000 --- a/content/index.md +++ /dev/null @@ -1,27 +0,0 @@ -::Home - -#header - -# Carlos Mendonça - -## Programador, músico, aspirante a professor. - -#profile-pic -![Foto de perfil, obtida diretamente do GitHub](https://avatars.githubusercontent.com/u/3859329) - -#content - -Pode me chamar de Carlinhos! - -Sou apaixonado por computação teórica e espero poder inspirar essa mesma paixão em outros no futuro! Sou formado em Ciências da Computação pela UAM, mas já era interessado por programação antes mesmo da faculdade. Minhas áreas de interesse dentro da computação incluem Linguagens, Compiladores, Web e Programação Funcional. - -Também faço música, caso você se interesse o link é [esse](https://linktr.ee/dyn.mic) - -Falando em blog: Meu blog não é muito frequentemente atualizado, particularmente porque ainda não entrei no ritmo e a minha ferramenta de publicação ainda não é totalmente a prova de balas. - -#nav - -- [Portfolio](/portfolio) -- [Blog](/blog) - -:: diff --git a/content/portfolio.md b/content/portfolio.md index 1d8e4ec..3b59811 100644 --- a/content/portfolio.md +++ b/content/portfolio.md @@ -8,9 +8,19 @@ :::PortfolioEntry +## [audiomath](https://peruibeloko.github.io/audiomath/) + +Calculadora de conversão de medidas de áudio. Oferece frequência, nota, período, comprimento de onda e contagem de samples digitais + +- [Vue](https://vuejs.org/) + +::: + +:::PortfolioEntry + ## [keylogger](https://peruibeloko.github.io/keylogger/) -Uma ferramenta para visualizar os dados de eventos do teclado de forma simples +Visualização de eventos do teclado de forma simples - [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) @@ -20,10 +30,10 @@ Uma ferramenta para visualizar os dados de eventos do teclado de forma simples ## [Time Calculator](https://peruibeloko.github.io/time-calculator/) -Uma calculadora de tempo! Utiliza o objeto experimental Temporal para manipular registros de tempo e realizar aritmética simples com eles, como somar dois intervalos de tempo ou subtraír 43 minutos de 1h e 25min, por exemplo. +Realize operações aritméticas simples entre intervalos de tempo, como somar dois intervalos de tempo ou subtraír 43 minutos de 1h e 25min, por exemplo. Usa o novo objeto experimental para manipulação de tempo e data, o Temporal. - [Temporal](https://github.com/tc39/proposal-temporal) -- [Vue 3](https://github.com/vuejs/vue) +- [Vue](https://vuejs.org/) ::: @@ -31,10 +41,10 @@ Uma calculadora de tempo! Utiliza o objeto experimental Temporal para manipular ## [typewriter](https://github.com/Peruibeloko/typewriter/) -Um CMS headless minimalista para gerenciamento de blogs simples. Oferece um punhado de endpoints REST para realizar CRUD de posts escritos em Markdown, que são armazenados num banco MongoDB. Ele que está por trás do blog desse site! Inclui um sistema de autenticação que eu pretendo separar no futuro. +CMS headless minimalista para blogs simples. Oferece um punhado de endpoints REST para realizar CRUD de posts escritos em Markdown, que são armazenados num banco MongoDB. Inclui um sistema de autenticação baseado em allowlist + TOTP que eu pretendo separar no futuro. -- [Express](https://github.com/expressjs/express) -- [Mongoose](https://github.com/Automattic/mongoose) +- [Express](https://expressjs.com/) +- [Mongoose](https://mongoosejs.com/) - [Marked](https://github.com/markedjs/marked) ::: @@ -43,11 +53,11 @@ Um CMS headless minimalista para gerenciamento de blogs simples. Oferece um punh ## [Q&A Bot](https://github.com/Peruibeloko/qnabot/) -O conjunto de um servidor Express que abriga um bot de Discord, e um aplicativo Vue que exibe as perguntas enviadas no canal configurado. Atualiza em tempo real usando WebScokets e oferece ordenação automática por votos! +Bot para realizar Q&As no Discord. Consiste em um web app escrito em Vue que mostra e ordena as perguntas do canal e um backend que roda no Deno Deploy. -- [Express](https://github.com/expressjs/express) -- [discord.js](https://github.com/discordjs/discord.js) -- [Vue 3](https://github.com/vuejs/vue) +- [Deno](https://deno.land/) +- [Harmony](https://harmony.mod.land/) +- [Vue](https://vuejs.org/) - [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API) ::: diff --git a/nuxt.config.ts b/nuxt.config.ts index fbaaa45..b40ef42 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -1,7 +1,11 @@ // https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ - modules: [ - '@nuxt/content' - ], - devtools: { enabled: true } -}) + modules: ['@nuxt/content'], + css: ['~/assets/css/theme.css'], + content: { + highlight: { + theme: 'one-dark-pro', + preload: ['typescript', 'javascript'] + } + } +}); diff --git a/package.json b/package.json index 9062364..ceb058b 100644 --- a/package.json +++ b/package.json @@ -9,9 +9,9 @@ "postinstall": "nuxt prepare" }, "devDependencies": { - "@nuxt/content": "^2.7.0", - "@nuxt/devtools": "latest", - "@types/node": "^18", - "nuxt": "^3.5.2" + "@nuxt/content": "^2.8.5", + "@types/node": "^20.8.7", + "nuxt": "^3.8.0", + "sass": "^1.69.4" } } diff --git a/pages/blog/[...slug].vue b/pages/blog/[...slug].vue new file mode 100644 index 0000000..e69de29 diff --git a/pages/blog/index.vue b/pages/blog/index.vue index f0bdb4e..384ea66 100644 --- a/pages/blog/index.vue +++ b/pages/blog/index.vue @@ -1,5 +1,8 @@ \ No newline at end of file +
+

Blag

+

Eu escrevo sobre tópicos sortidos. Desconfie de tudo, não duvide de nada.

+
+ + +