Deanportfolio Used AI
A personal portfolio website made to showcase my skills, projects and thoughts!
Followers
No followers yet
Ship Your Project
Get ready!
Once you ship this you can't edit the description of the project, but you'll be able to add more devlogs and re-ship it as you add new features!
Timeline
Used tailwind css utility classes to create a responsive design, scaling different components to fit on smaller screens like those on phones and tablets.
Did a complete revamp of the UI, removing all of the cards (boxes with borders) that made the website less clean while also removing the contact page and integrating everything into the home page. Also made a number of SEO optimizations, bringing the lighthouse score to 100.
Updated the README.md file to have actual information about the project as well as future goals.
Fixed the admin panel login for local development because the nextauth default url was set to the production url for both local development and the actual deployment. Also used the reusable RenderedMarkdown component on the admin panel, which was previously handling all logic itself, and updated the component to better handle receiving content.
Revamped the blog display page to include date instead of tags and to not use border because there were way too many nested boxes, instead using separators between them. Also removed horizontal scrollbar on the page because there was no need for it.
I made changes to the structure of the project so that the pages displaying the list of blogs and projects are dynamically (SSR) rendered, ensuring that changes to the list of blogs and projects are properly dealt with. In addition, used resolvedTheme instead of theme as the theme for code highlighting so that users who have dark mode enabled by default get dark mode code highlighting when they open the page for the first time. Finally, removed a number of nested scroll bars that didn't actually do anything, but were visible due to older css properties.
Finally got the theme of the code highlighting to change based on the website theme by manually downloading the catpuccin css files for highlight.js and dynamically applying a dark-theme and light-theme class to the code blocks based on the website theme.
Made the theme of the mermaid diagrams in my markdown based blogs/project descriptions dynamic (based on dark/light mode of website) through the useTheme hook. Made multiple attempts to do the same for codeblocks, trying to dynamically import css files in various ways, but this ultimately didn't work as the former styles seemed to stay with the elements, overriding any changes. Also tried to make two separate files for dark and light modes, but this still didn't end up working.
