Skip to content

fix: x icon color #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
diegovfeder merged 4 commits into from
Nov 26, 2025
Merged

fix: x icon color #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1f0405a
fix: x icon color
diegovfeder Nov 26, 2025
9ea6af7
chore: add prettier
diegovfeder Nov 26, 2025
3e93def
fix: projects h position
diegovfeder Nov 26, 2025
2fdb76f
lint: fix
diegovfeder Nov 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .prettierignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
node_modules
.vinxi
.output
dist
build
*.md
public
10 changes: 10 additions & 0 deletions .prettierrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 80,
"bracketSpacing": true,
"jsxSingleQuote": false,
"arrowParens": "always"
}
Binary file modified bun.lockb
View file
Open in desktop
Binary file not shown.
4 changes: 4 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
"test": "vitest",
"lint": "eslint . --ext .ts,.tsx,.js,.jsx",
"lint:fix": "eslint . --ext .ts,.tsx,.js,.jsx --fix",
"format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css}\"",
"format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css}\"",
"version": "vinxi version"
},
"dependencies": {
Expand All @@ -32,9 +34,11 @@
"@typescript-eslint/parser": "^8.38.0",
"autoprefixer": "^10.4.19",
"eslint": "^9.32.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-solid": "^0.14.5",
"jsdom": "^26.0.0",
"postcss": "^8.4.38",
"prettier": "^3.6.2",
"tailwind-merge": "^2.3.0",
"tailwindcss": "^3.4.3",
"tailwindcss-animate": "^1.0.7",
Expand Down
22 changes: 11 additions & 11 deletions src/components/core/dialog-close-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,18 @@ export const DialogCloseButton = (props: DialogCloseButtonProps) => {
const imageVariantClasses = `${baseClasses} bg-white/95 backdrop-blur-sm border border-white/30 shadow-lg hover:scale-105`
const modalVariantClasses = `${baseClasses} hover:scale-105`

const iconClasses = () =>
props.variant === 'image' ? 'h-6 w-6 text-black' : 'h-6 w-6'
const classes = () =>
props.variant === 'image' ? imageVariantClasses : modalVariantClasses

return (
<>
{props.variant === 'image' ? (
<Dialog.Close class={`${imageVariantClasses} ${props.class || ''}`}>
<IoCloseSharp class="h-6 w-6" />
</Dialog.Close>
) : (
<Dialog.Close class={`${modalVariantClasses} ${props.class || ''}`}>
<IoCloseSharp class="h-6 w-6" />
</Dialog.Close>
)}
</>
<Dialog.Close
class={`${classes()} ${props.class || ''}`}
aria-label="Close dialog"
>
<IoCloseSharp class={iconClasses()} />
</Dialog.Close>
)
}

Expand Down
8 changes: 7 additions & 1 deletion src/components/core/nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,14 @@ const Nav = () => {
const isActive = (hash: string) =>
hashname() === hash ? 'font-bold underline' : ''

// Hide nav on blog routes
const shouldShowNav = createMemo(() => !location.pathname.startsWith('/blog'))

return (
<nav class="fixed flex flex-col justify-around left-0 top-0 h-full w-14 sm:w-20 p-2 sm:p-4 pl-8 sm:pl-10 bg-transparent whitespace-nowrap bg-white dark:bg-black dark:text-white min-h-[480px]">
<nav
class="fixed flex flex-col justify-around left-0 top-0 h-full w-14 sm:w-20 p-2 sm:p-4 pl-8 sm:pl-10 bg-transparent whitespace-nowrap bg-white dark:bg-black dark:text-white min-h-[480px]"
classList={{ hidden: !shouldShowNav() }}
>
<A
href="#home"
class={`w-fit font-mono transform -rotate-90 origin-left hover:underline hover:scale-105 transition-all duration-500 focus-bold-and-underline ${isActive(
Expand Down
16 changes: 3 additions & 13 deletions src/components/home/project.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { For, Show } from 'solid-js'
import { For } from 'solid-js'
import { A } from '@solidjs/router'

import { LazyImage, DialogImage } from '../core'
Expand All @@ -20,19 +20,9 @@ const Project = ({
subTitle,
description,
url,
archived = false,
}: ProjectProps) => {
return (
<div
class={`grid grid-cols-1 md:grid-cols-2 gap-4 p-4 md:p-6 w-full max-w-4xl relative ${
archived ? 'opacity-60' : ''
}`}
>
<Show when={archived}>
<div class="absolute top-2 right-2 z-10 bg-slate-900 dark:bg-slate-100 text-white dark:text-black text-xs font-bold px-2 py-1 rounded-full">
ARCHIVED
</div>
</Show>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 md:p-6 w-full max-w-4xl relative">
<div class="flex flex-col justify-between">
<div class="pb-2">
<div class="flex flex-wrap gap-2 items-end pb-2">
Expand All @@ -45,7 +35,7 @@ const Project = ({
{description}
</p>
</div>
{url && !archived ? (
{url ? (
<A
href={url}
target="_blank"
Expand Down
2 changes: 1 addition & 1 deletion src/components/sections/cases.section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const CasesSection = () => {
return (
<section id="cases" class="relative pt-4">
<h2 class="text-start text-xl font-bold mb-4 whitespace-nowrap">
cases
enterprise cases
<div class="border-b-4 w-16 text-xl font-bold border-slate-700 dark:border-slate-300" />
</h2>
<div
Expand Down
18 changes: 13 additions & 5 deletions src/components/sections/projects.section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { createSignal, Show, createEffect, For } from 'solid-js'
import { createSignal, Show, createEffect, For, createMemo } from 'solid-js'

import { Project } from '../home'
import { projects, hiddenProjects } from '../../data/projects'
Expand All @@ -9,6 +9,14 @@ const ProjectsSection = () => {
let toggleButtonRef: HTMLButtonElement | undefined
let scrollPosition = 0

// Filter out archived projects
const activeProjects = createMemo(() =>
projects.filter((project) => !project.archived),
)
const activeHiddenProjects = createMemo(() =>
hiddenProjects.filter((project) => !project.archived),
)

createEffect(() => {
if (shouldScroll()) {
if (projectsVisible()) {
Expand Down Expand Up @@ -36,12 +44,12 @@ const ProjectsSection = () => {

return (
<section id="projects" class="pb-16">
<div class="flex flex-col justify-right items-end pt-8 md:pt-12 pb-4 md:pb-8">
<h2 class="text-xl font-bold pr-6">personal projects</h2>
<div class="flex flex-col justify-left items-start pt-8 md:pt-12 pb-4 md:pb-8">
<h2 class="text-xl font-bold pr-6">client projects</h2>
<div class="text-xl font-bold border-slate-700 dark:border-slate-300 border-b-8 w-16" />
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 pr-4">
<For each={projects}>
<For each={activeProjects()}>
{(project) => (
<Project
image={project.image}
Expand All @@ -55,7 +63,7 @@ const ProjectsSection = () => {
)}
</For>
<Show when={projectsVisible()} fallback={null}>
<For each={hiddenProjects}>
<For each={activeHiddenProjects()}>
{(project) => (
<Project
image={project.image}
Expand Down
24 changes: 12 additions & 12 deletions src/data/projects.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,6 @@ export const projects: ProjectData[] = [
'Founded in 1930 and based in Curitiba, ICAB Chocolates is a heritage chocolatier. The site highlights the brand’s legacy and complements its city boutiques with e-commerce, connecting tradition to a modern buying experience.',
url: 'https://www.icabchocolates.com.br/',
},
{
image: '/images/projects/seumecanico.png',
tags: ['Typescript', 'NextJS', 'Vercel'],
title: 'Seu Mecânico',
subTitle: 'Startup',
description:
'An innovative startup that aims to connects car owners with reliable mechanics. "Seu Mecânico" intends to simplify the process of finding, rating, and booking car services.',
url: 'https://www.seumecanico.com/',
},
{
image: '/images/projects/zuno.png',
tags: ['Typescript', 'TailwindCSS', 'SEO'],
Expand All @@ -45,9 +36,6 @@ export const projects: ProjectData[] = [
"Zuno Cable Park, located in Curitiba, is a premier destination for wakeboarding enthusiasts. The website highlights the park's facilities, activities, and booking options, providing an engaging experience for visitors to plan their adventure.",
url: 'https://www.zunocablepark.com/',
},
]

export const hiddenProjects: ProjectData[] = [
{
image: '/images/projects/analuizarocha.png',
tags: ['NextJS', 'TailwindCSS', 'Medical'],
Expand All @@ -57,6 +45,9 @@ export const hiddenProjects: ProjectData[] = [
'A specialized medical website for Dr. Ana Luiza Rocha, a coloproctologist in Curitiba. The site provides information about clinical and surgical treatments for intestinal, rectal, and anal conditions, emphasizing humanized medical care and breaking taboos around specialized healthcare.',
url: 'https://www.analuizarocha.com.br/',
},
]

export const hiddenProjects: ProjectData[] = [
{
image: '/images/projects/anapierin.png',
tags: ['NextJS', 'TailwindCSS', 'Medical'],
Expand All @@ -75,6 +66,15 @@ export const hiddenProjects: ProjectData[] = [
'A modern medical website for Dr. Dayara Salomão, featuring her coloproctology practice in Curitiba. The site highlights minimally invasive treatments using laser technology and emphasizes patient-centered care with technical excellence and compassion.',
url: 'https://dayarasalomao.com.br',
},
{
image: '/images/projects/seumecanico.png',
tags: ['Typescript', 'NextJS', 'Vercel'],
title: 'Seu Mecânico',
subTitle: 'Startup',
description:
'An innovative startup that aims to connects car owners with reliable mechanics. "Seu Mecânico" intends to simplify the process of finding, rating, and booking car services.',
url: 'https://www.seumecanico.com/',
},
{
image: '/images/projects/versiani.png',
tags: ['Framer Motion', 'Undraw', 'TailwindCSS'],
Expand Down
2 changes: 1 addition & 1 deletion src/routes/blog/[slug].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ const BlogPost: Component = () => {

// Always render the same basic structure to avoid hydration mismatch
return (
<div class="relative ml-[48px] sm:ml-[64px] lg:ml-[120px] min-h-screen pb-28">
<div class="relative min-h-screen pb-28">
<div class="max-w-7xl px-4 py-16">
<Show when={isMounted()} fallback={<Loading />}>
<Show
Expand Down
4 changes: 2 additions & 2 deletions src/routes/blog/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import { BlogGrid, BlogHeader } from '~/components'

export default function Blog() {
return (
<div class="relative ml-[48px] sm:ml-[64px] lg:ml-[120px] min-h-screen">
<div class="relative min-h-screen">
<div class="max-w-7xl px-4 pb-10">
<div class="fixed top-0 left-[48px] sm:left-[64px] lg:left-[120px] right-0 bg-white dark:bg-black z-20 px-4 pt-6">
<div class="fixed top-0 left-0 right-0 bg-white dark:bg-black z-20 px-4 pt-6">
<BlogHeader />
</div>

Expand Down