Update styles in SkillsGroup.module.css, NavbarLinks.module.css, Navb…

…arButtons.module.css, LandingSection.module.css, AboutMeSection.module.css, Input.module.css, Footer.module.css, Button.module.css, ProjectsSection.module.css, Logo.module.css, QuoteSection.module.css, and fonts.js
nanndo54 · Apr 8, 2024 · ce3fa41 · ce3fa41
1 parent 8c7adb0
commit ce3fa41
Show file tree

Hide file tree

Showing 19 changed files with 108 additions and 61 deletions.
diff --git a/app/[locale]/global.css b/app/[locale]/global.css
@@ -17,21 +17,21 @@
 
 body {
  position: relative;
- font-size: 1.125rem;
+ font-size: 1.15rem;
 
  color: var(--foreground-color);
  font-family: var(--body-font);
  font-weight: 300;
 
  background-color: var(--background-color);
  background-image: radial-gradient(
- 35vw 25vh at 25% 30vh,
+ 51vw 27vh at 28% 32vh,
  var(--dimmer-accent-color) 0,
  transparent 85%
  ),
  radial-gradient(
- 25vw 18vh at 70% 43vh,
- var(--dimmer-secondary-accent-color) 0,
+ 31vw 25vh at 78% 32vh,
+ var(--dim-secondary-accent-color) 0,
  transparent 85%
  );
 
@@ -79,6 +79,10 @@ body {
  --dimmest-secondary-accent-color: hsl(var(--secondary-accent), var(--dimmest));
 }
 
+body.no-scroll {
+ overflow-y: hidden;
+}
+
 :root:has(body[dark='true']) {
  color-scheme: dark;
 }
@@ -142,7 +146,7 @@ p {
 
 :is(h3, h4, h5, h6) {
  font-family: var(--body-font);
- font-weight: 500;
+ font-weight: 600;
  letter-spacing: -0.075rem;
  line-height: 1.3;
 }
@@ -162,15 +166,15 @@ h1 {
 }
 
 h2 {
- font-size: 2.25rem;
+ font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: -0.025rem;
- line-height: 1.3;
+ line-height: 1.25;
  color: var(--background-color);
 
  background-color: var(--foreground-color);
- padding-inline: 0.75rem;
- clip-path: polygon(0.75rem 0%, 100% 0%, calc(100% - 0.75rem) 100%, 0% 100%);
+ padding: 0.25rem 0.75rem;
+ clip-path: polygon(0.625rem 0%, 100% 0%, calc(100% - 0.625rem) 100%, 0% 100%);
 
  transition:
  color 0.5s,
@@ -192,7 +196,7 @@ h4 {
  }
 
  h2 {
- font-size: 2rem;
+ font-size: 1.7rem;
  }
 
  h3 {
@@ -215,7 +219,7 @@ h4 {
  }
 
  h2 {
- font-size: 1.725rem;
+ font-size: 1.6rem;
  }
 }
 
@@ -245,13 +249,13 @@ textarea {
 }
 
 b {
- font-weight: 500;
+ font-weight: 600;
 
  transition: color 0.5s;
 }
 
 strong {
- font-weight: 500;
+ font-weight: 600;
  background-image: linear-gradient(
  to right,
  var(--accent-color),
@@ -268,7 +272,7 @@ u {
 
 .interactive-border {
  position: relative;
- border: 0.2rem solid var(--dim-accent-color);
+ border: 0.125rem solid var(--dimmer-foreground-color);
  border-radius: 1.25rem;
  background-color: var(--dimmer-background-color);
 
@@ -280,7 +284,7 @@ u {
 }
 
 .interactive-border:hover {
- background-color: var(--dimmer-background-color);
+ background-color: var(--dim-background-color);
 }
 
 .interactive-button-secondary {
@@ -317,3 +321,9 @@ body :not(textarea)::-webkit-scrollbar {
  background-color: var(--foreground-color);
  -webkit-text-fill-color: var(--background-color);
 }
+
+h2::selection {
+ background-color: var(--background-color);
+ color: var(--foreground-color);
+ -webkit-text-fill-color: var(--foreground-color);
+}
diff --git a/app/[locale]/layout.jsx b/app/[locale]/layout.jsx
@@ -1,7 +1,7 @@
 import 'node_modules/hint.css/hint.min.css'
 import './global.css'
 
-import { bodyFont, subTitleFont, titleFont } from 'app/fonts'
+import { bodyFont, titleFont } from 'app/fonts'
 import clsx from 'clsx/lite'
 import { locales } from 'i18n/config'
 import getDictionary, { getStaticParams } from 'i18n/server'
@@ -52,10 +52,7 @@ export default async function LocaleLayout({ children, params: { locale } }) {
 
  return (
  <html lang={locale} translate='no'>
- <body
- className={clsx(titleFont.variable, subTitleFont.variable, bodyFont.variable)}
- top='true'
- >
+ <body className={clsx(titleFont.variable, bodyFont.variable)} top='true'>
  {children}
  </body>
  </html>

diff --git a/app/fonts.js b/app/fonts.js
@@ -1,25 +1,17 @@
-import { Kanit, Poppins } from 'next/font/google'
+import { Outfit, Poppins } from 'next/font/google'
 
 export const titleFont = Poppins({
  display: 'swap',
  style: 'italic',
- weight: ['600', '700'],
+ weight: ['400', '600', '700'],
  subsets: ['latin'],
  variable: '--title-font'
 })
 
-export const subTitleFont = Poppins({
+export const bodyFont = Outfit({
  display: 'swap',
- style: 'normal',
- weight: ['600'],
- subsets: ['latin'],
- variable: '--subtitle-font'
-})
-
-export const bodyFont = Kanit({
- display: 'swap',
- style: ['normal', 'italic'],
- weight: ['300', '500'],
+ style: ['normal'],
+ weight: ['400', '600'],
  subsets: ['latin'],
  variable: '--body-font'
 })
diff --git a/i18n/locales/es/dictionary.json b/i18n/locales/es/dictionary.json
@@ -349,7 +349,7 @@
  "text": "Mi nombre es Pablo pero mis allegados me llaman <strong>Nando</strong>. Me gusta mucho el desarrollo de software. Desde los <u>6 años</u> he mostrado interés en el mundo de la tecnología, empecé programando en Pascal a los <u>15 años</u>, y ahora con <strong>23 años</strong> he desarrollado productos innovadores dirigidos a empresas reconocidas en mi país."
  },
  {
- "text": "Estoy terminando un grado de <strong>Ingeniería en Ciencias y Sistemas</strong> en la <u>Universidad de San Carlos de Guatemala</u>, gracias al cual he pulido mis habilidades en el desarrollo de software. Soy fiel creyente de que has aprendido bien cuando eres capaz de enseñar a otros, y he tenido la oportunidad de enseñar siendo <u>auxiliar de cátedra</u> en la universidad.",
+ "text": "Estoy terminando un grado de <strong>Ingeniería en Sistemas</strong> en la <u>Universidad de San Carlos de Guatemala</u>, gracias al cual he pulido mis habilidades en el desarrollo de software. Soy fiel creyente de que has aprendido bien cuando eres capaz de enseñar a otros, y he tenido la oportunidad de enseñar siendo <u>auxiliar de cátedra</u> en la universidad.",
  "images": [
  {
  "src": "about-me/usac/img1.jpg",

diff --git a/src/components/Logo.jsx b/src/components/Logo.jsx
@@ -4,15 +4,18 @@ import styles from '@/styles/Logo.module.css'
 import Button from '@/components/Button'
 import Icon from '@/components/Icon'
 import { logoIcon } from '@/constants/icons'
+import useAppStore from '@/state/store'
+import clsx from 'clsx'
 import useDictionary from 'i18n/client'
 
 export default function Logo() {
+ const { currentSection } = useAppStore()
  const dictionary = useDictionary()
  const { aria } = dictionary
 
  return (
  <Button
- className={styles.base}
+ className={clsx(styles.base, currentSection === 'landing' && styles.current)}
  onClick={() => {
  document.getElementById('landing').scrollIntoView({ behavior: 'smooth' })
  }}

diff --git a/src/components/NavbarLinks.jsx b/src/components/NavbarLinks.jsx
@@ -18,6 +18,16 @@ export default function NavbarLinks() {
 
  const [isMenuOpen, setMenuOpen] = useState(false)
 
+ const handleOpenMenu = () => {
+ document.body.classList.add('no-scroll')
+ setMenuOpen(true)
+ }
+
+ const handleCloseMenu = () => {
+ document.body.classList.remove('no-scroll')
+ setMenuOpen(false)
+ }
+
  const links = sections
  .slice(1)
  .filter(({ ignore }) => !ignore)
@@ -45,7 +55,7 @@ export default function NavbarLinks() {
  {currentSection && (
  <Button
  className={clsx(styles.link, styles.current, styles.navigator)}
- onClick={() => setMenuOpen(true)}
+ onClick={handleOpenMenu}
  title={aria.navigateTo}
  >
  {currentSection}
@@ -54,7 +64,7 @@ export default function NavbarLinks() {
  </div>
  <div
  className={clsx(styles.menu, isMenuOpen && styles.open)}
- onClick={() => setMenuOpen(false)}
+ onClick={handleCloseMenu}
  >
  <IconButton
  src={closeIcon}

diff --git a/src/state/store.js b/src/state/store.js
@@ -15,10 +15,14 @@ const useAppStore = create(
  ...initialState,
  toggleTheme: (dark) => set(() => ({ theme: dark ? 'dark' : 'light' })),
  setCurrentSection: (currentSection) => set(() => ({ currentSection })),
- openShowcase: ({ open = true, index = 0, images = [], ...showcase }) =>
- set(() => ({ showcase: { open, index, images, ...showcase } })),
- closeShowcase: () =>
- set((state) => ({ showcase: { ...state.showcase, open: false } })),
+ openShowcase: ({ open = true, index = 0, images = [], ...showcase }) => {
+ document.body.classList.add('no-scroll')
+ set(() => ({ showcase: { open, index, images, ...showcase } }))
+ },
+ closeShowcase: () => {
+ document.body.classList.remove('no-scroll')
+ set((state) => ({ showcase: { ...state.showcase, open: false } }))
+ },
  setShowcase: (showcase) =>
  set((state) => ({ showcase: { ...state.showcase, ...showcase } }))
  }),

diff --git a/src/styles/AboutMeSection.module.css b/src/styles/AboutMeSection.module.css
@@ -30,11 +30,11 @@
  height: auto;
  width: 100%;
 
- flex: 3;
+ flex: 4;
 }
 
 .subsection p {
- flex: 7;
+ flex: 9;
 }
 
 @media (max-width: 800px) {

diff --git a/src/styles/Button.module.css b/src/styles/Button.module.css
@@ -4,8 +4,9 @@
  border-radius: 0.75rem;
 
  color: var(--background-color);
- font-family: var(--subtitle-font);
+ font-size: 1.3rem;
  font-weight: 600;
+ text-transform: capitalize;
  text-decoration: none;
  white-space: nowrap;
 
@@ -17,6 +18,7 @@
  transition:
  background-position 0.5s,
  background-color 0.5s,
+ border-color 0.5s,
  color 0.5s,
  box-shadow 0.1s;
 }

diff --git a/src/styles/Footer.module.css b/src/styles/Footer.module.css
@@ -3,9 +3,9 @@
  background-color: var(--foreground-color);
  color: var(--background-color);
 
- width: min(50rem, calc(100% - 2rem));
+ width: min(35rem, calc(100% - 2rem));
  padding: 0.75rem 1.5rem;
- margin: 0 auto 1rem;
+ margin: 0 auto;
 
  display: flex;
  justify-content: center;

diff --git a/src/styles/Input.module.css b/src/styles/Input.module.css
@@ -12,7 +12,7 @@
 
  padding-right: 0.75rem;
  margin-right: 0.75rem;
- border-right: 0.1875rem solid var(--dimmest-foreground-color);
+ border-right: 0.125rem solid var(--dimmer-foreground-color);
 
  transition: border-color 0.25s;
 }

diff --git a/src/styles/Interactive.module.css b/src/styles/Interactive.module.css
@@ -10,7 +10,7 @@
  width: 100%;
 
  opacity: 0;
- mask: radial-gradient(25rem at var(--x) var(--y), black 20%, transparent 100%);
+ mask: radial-gradient(20rem at var(--x) var(--y), black, #000c 50%, transparent 100%);
  pointer-events: none;
 
  transition:
@@ -21,6 +21,10 @@
  z-index: 5;
 }
 
+body:global(.no-scroll):hover .base {
+ opacity: 0;
+}
+
 body:hover .base {
  opacity: 1;
 }
@@ -36,9 +40,6 @@ body:hover .base {
  position: absolute;
  background-color: var(--dimmest-secondary-accent-color);
  border-color: var(--secondary-accent-color);
- box-shadow:
- 0 0 0 0.125rem var(--dimmest-foreground-color),
- 0 0 0.125rem 0.125rem var(--dim-background-color);
  backdrop-filter: unset;
  filter: unset;
  inset: inherit;
@@ -67,7 +68,6 @@ body:hover .base {
 .base h2 {
  position: absolute;
  background-color: var(--secondary-accent-color);
- /* background-color: var(--secondary-accent-color); */
 }
 
 .base :global(.interactive-icon) {

diff --git a/src/styles/LandingSection.module.css b/src/styles/LandingSection.module.css
@@ -34,7 +34,7 @@ header.base {
 .buttons {
  display: flex;
  align-items: center;
- gap: 0.75rem;
+ gap: 0.5rem;
 
  margin-top: 1rem;
 }

diff --git a/src/styles/Logo.module.css b/src/styles/Logo.module.css
@@ -1,7 +1,12 @@
 .base {
  height: 2rem;
  width: 2rem;
+
  padding: 0;
+ margin-left: 0;
+ border-radius: 0;
+ flex-shrink: 0;
+
  pointer-events: all;
 }
 
@@ -13,3 +18,17 @@
  height: 100%;
  width: 100%;
 }
+
+.base svg {
+ filter: grayscale(0.75) brightness(0.25);
+ transition: filter 0.5s;
+}
+
+body[dark='true'] .base svg {
+ filter: grayscale(0.75) brightness(1.75);
+}
+
+.base.current svg,
+body[dark='true'] .base.current svg {
+ filter: none;
+}