ahmed/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 6 Activity

Polishing touches and tweaks

Browse Source
This commit is contained in:
Ahmed Al-Taiar
2024-10-06 00:31:59 -04:00
parent e5f9bbd462
commit fb542bb5b5
13 changed files with 96 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
web/config/tailwind.config.js
View File

@ -142,4 +142,16 @@ export const theme = {
export const darkMode = ['class', '[data-theme="dark"]']
export const plugins = [require('daisyui')]
export const daisyui = { themes: ['light', 'dark'] }
export const daisyui = {
themes: [
'light',
{
dark: {
...require('daisyui/src/theming/themes')['dark'],
'base-100': '#212121',
'base-200': '#1d1d1d',
'base-300': '#191919',
},
},
],
}

2
web/src/components/ColorPicker/ColorPicker.tsx
View File

@ -22,6 +22,7 @@ const ColorPicker = ({ color, setColor }: ColorPickerProps) => {
<HexColorInput color={color} className="w-16" />
</label>
<button
type="button"
className="btn btn-square btn-sm"
onClick={async () => {
try {
@ -35,6 +36,7 @@ const ColorPicker = ({ color, setColor }: ColorPickerProps) => {
<Icon path={mdiContentCopy} className="size-4" />
</button>
<button
type="button"
className="btn btn-square btn-sm "
onClick={async () => {
try {

4
web/src/components/ContactCard/ContactCard/ContactCard.tsx
View File

@ -1,4 +1,4 @@
import { useState, useRef, useEffect } from 'react'
import { useState, useRef, useLayoutEffect } from 'react'
import SocialLinksCell from 'src/components/Social/SocialLinksCell'
@ -12,7 +12,7 @@ const ContactCard = ({ portraitUrl }: ContactCardProps) => {
const observedDiv = useRef(null)
useEffect(() => {
useLayoutEffect(() => {
if (!observedDiv.current) return
const resizeObserver = new ResizeObserver(() => {

27
web/src/components/FormTextList/FormTextList.tsx
View File

@ -4,6 +4,7 @@ import Icon from '@mdi/react'
interface FormTextListProps {
name: string
hint?: string
itemPlaceholder: string
icon?: string
list: string[]
@ -13,6 +14,7 @@ interface FormTextListProps {
const FormTextList = ({
name,
hint,
itemPlaceholder,
icon,
list,
@ -23,15 +25,20 @@ const FormTextList = ({
<div className="flex flex-col space-y-2 bg-base-100 rounded-xl">
<div className="flex space-x-2 justify-between">
<div className="flex items-center">
<p className="font-semibold">{name}</p>
<p className="font-semibold text-center">{name}</p>
</div>
<div className="flex gap-2 items-center">
{hint && (
<p className="opacity-70 text-xs font-light text-center">{hint}</p>
)}
<button
className="btn btn-square btn-sm"
type="button"
onClick={() => setList([...list, ''])}
>
<Icon path={mdiPlus} className="size-4" />
</button>
</div>
<button
className="btn btn-square btn-sm"
type="button"
onClick={() => setList([...list, ''])}
>
<Icon path={mdiPlus} className="size-4" />
</button>
</div>
{list.map((item, i) => (
<label
@ -53,11 +60,11 @@ const FormTextList = ({
}
/>
<button
className="btn btn-square btn-sm flex-none"
className="btn btn-square btn-error btn-sm flex-none"
type="button"
onClick={() => setList(list.filter((_, j) => j !== i))}
>
<Icon path={mdiDelete} className="size-4 text-error" />
<Icon path={mdiDelete} className="size-4" />
</button>
</label>
))}

12
web/src/components/Portrait/PortraitForm/PortraitForm.tsx
View File

@ -1,4 +1,4 @@
import { useRef, useState } from 'react'
import { useState } from 'react'
import { Meta, UploadResult } from '@uppy/core'
import type {
@ -56,13 +56,7 @@ const CREATE_PORTRAIT_MUTATION: TypedDocumentNode<
`
const PortraitForm = ({ portrait }: PortraitFormProps) => {
const [fileId, _setFileId] = useState<string>(portrait?.fileId)
const fileIdRef = useRef<string>(fileId)
const setFileId = (fileId: string) => {
_setFileId(fileId)
fileIdRef.current = fileId
}
const [fileId, setFileId] = useState<string>(portrait?.fileId)
const unloadAbortController = new AbortController()
@ -96,7 +90,7 @@ const PortraitForm = ({ portrait }: PortraitFormProps) => {
setFileId(result.successful[0]?.uploadURL)
window.addEventListener(
'beforeunload',
(e) => handleBeforeUnload(e, [fileIdRef.current]),
(e) => handleBeforeUnload(e, [fileId]),
{
once: true,
signal: unloadAbortController.signal,

29
web/src/components/Project/Project/Project.tsx
View File

@ -46,18 +46,23 @@ const Project = ({ project }: Props) => {
<>
<h2 className="font-bold text-3xl w-fit">Links</h2>
<div className="flex flex-col gap-2 w-fit">
{project.links.map((link, i) => (
<a
key={i}
href={link}
target="_blank"
rel="noreferrer"
className="btn btn-wide"
>
<Icon path={mdiLinkVariant} className="size-5" />
{link}
</a>
))}
<ul className="list-none">
{project.links.map((link, i) => (
<li key={i}>
<div className="flex gap-2 items-center justify-start">
<Icon path={mdiLinkVariant} className="size-4" />
<a
href={link}
target="_blank"
rel="noreferrer"
className="list-item link link-hover"
>
{link}
</a>
</div>
</li>
))}
</ul>
</div>
</>
)}

8
web/src/components/Project/ProjectForm/ProjectForm.tsx
View File

@ -198,6 +198,7 @@ const ProjectForm = (props: ProjectFormProps) => {
<div className={`${!pickerVisible && 'pt-2'}`}>
<FormTextList
name="Links"
hint="Short links are recommended"
itemPlaceholder="URL"
icon={mdiLinkVariant}
list={links}
@ -246,16 +247,13 @@ const ProjectForm = (props: ProjectFormProps) => {
<div className="card-actions rounded-md justify-end">
<button
type="button"
className="btn btn-square btn-sm shadow-xl"
className="btn btn-square btn-sm btn-error shadow-xl"
onClick={() => {
setToDelete([...toDelete, fileId])
setFileIds(fileIds.filter((id) => id !== fileId))
}}
>
<Icon
path={mdiDelete}
className="size-4 text-error"
/>
<Icon path={mdiDelete} className="size-4" />
</button>
</div>
</div>

12
web/src/components/Resume/ResumeForm/ResumeForm.tsx
View File

@ -1,4 +1,4 @@
import { useRef, useState } from 'react'
import { useState } from 'react'
import { Meta, UploadResult } from '@uppy/core'
import type {
@ -55,13 +55,7 @@ const CREATE_RESUME_MUTATION: TypedDocumentNode<
`
const ResumeForm = ({ resume }: ResumeFormProps) => {
const [fileId, _setFileId] = useState<string>(resume?.fileId)
const fileIdRef = useRef<string>(fileId)
const setFileId = (fileId: string) => {
_setFileId(fileId)
fileIdRef.current = fileId
}
const [fileId, setFileId] = useState<string>(resume?.fileId)
const unloadAbortController = new AbortController()
@ -95,7 +89,7 @@ const ResumeForm = ({ resume }: ResumeFormProps) => {
setFileId(result.successful[0]?.uploadURL)
window.addEventListener(
'beforeunload',
(e) => handleBeforeUnload(e, [fileIdRef.current]),
(e) => handleBeforeUnload(e, [fileId]),
{
once: true,
signal: unloadAbortController.signal,

11
web/src/components/ThemeToggle/ThemeToggle.tsx
View File

@ -8,7 +8,7 @@ const DARK_THEME = 'dark'
const ThemeToggle = () => {
const [theme, setTheme] = useState(
localStorage.getItem('theme') ? localStorage.getItem('theme') : LIGHT_THEME
localStorage.getItem('theme') ?? LIGHT_THEME
)
const handleToggle = (e: React.ChangeEvent<HTMLInputElement>) => {
@ -37,13 +37,8 @@ const ThemeToggle = () => {
checked={theme === DARK_THEME}
onChange={handleToggle}
/>
<Icon
path={mdiWeatherSunny}
className="swap-off size-8 text-yellow-500"
/>
<Icon path={mdiWeatherNight} className="swap-on size-8 text-blue-500" />
<Icon path={mdiWeatherSunny} className="swap-off size-8 text-warning" />
<Icon path={mdiWeatherNight} className="swap-on size-8 text-primary" />
</label>
)
}

6
web/src/components/Title/Titles/Titles.tsx
View File

@ -23,6 +23,12 @@ export const Titles = ({ titles, className }: TitlesProps) => {
backDelay={1000}
startWhenVisible
loop
onStringTyped={(pos, self) => {
if (pos === 0) {
self.stop()
setTimeout(() => self.start(), 2500)
}
}}
/>
</>
)}

3
web/src/components/Title/TitlesForm/TitlesForm.tsx
View File

@ -56,6 +56,9 @@ const TitlesForm = ({ titles }: TitlesFormProps) => {
return (
<Form onSubmit={onSubmit} className="max-w-80 space-y-2">
<p className="text-center opacity-70">
The first one gets displayed for longer
</p>
{Array.from({ length: MAX_TITLES }).map((_, i) => (
<Label key={i} name={`title${i}`} className="form-control w-full">
<Label

3
web/src/lib/tus.ts
View File

@ -8,9 +8,8 @@ export const deleteFile = async (fileId: string) => {
})
}
export const handleBeforeUnload = (_e: BeforeUnloadEvent, files: string[]) => {
export const handleBeforeUnload = (_e: BeforeUnloadEvent, files: string[]) =>
batchDelete(files)
}
export const batchDelete = (files: string[]) => {
for (const file of files) deleteFile(file)

26
web/src/pages/HomePage/HomePage.tsx
View File

@ -1,3 +1,7 @@
import { mdiCompass, mdiContacts } from '@mdi/js'
import Icon from '@mdi/react'
import { Link, routes } from '@redwoodjs/router'
import { Metadata } from '@redwoodjs/web'
import TitlesCell from 'src/components/Title/TitlesCell'
@ -7,11 +11,27 @@ const HomePage = () => {
<>
<Metadata title="Home" />
<div className="hero min-h-64">
<div className="hero-content">
<div className="max-w-xl text-center">
<div className="hero min-h-[calc(100vh-6rem)]">
<div className="hero-content flex flex-col gap-8">
<div className="text-center">
<TitlesCell className="text-primary" />
</div>
<div className="flex gap-2">
<Link
to={routes.projects()}
className="btn btn-primary btn-outline sm:btn-wide btn-lg"
>
<Icon path={mdiCompass} className="size-6" />
Explore
</Link>
<Link
to={routes.contact()}
className="btn btn-primary btn-outline sm:btn-wide btn-lg"
>
<Icon path={mdiContacts} className="size-6" />
Contact
</Link>
</div>
</div>
</div>
</>