Skip to content

Improve/UI #4

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
mitekk merged 4 commits into from
Mar 31, 2026
Merged

Improve/UI #4

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
69f7dee
darken buzz panel bg+border
mitekk Mar 31, 2026
8c373e7
theme toggle position
mitekk Mar 31, 2026
b5fabca
the buzz content height
mitekk Mar 31, 2026
fb1bc2f
format
mitekk Mar 31, 2026
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
2 changes: 1 addition & 1 deletion src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ body,
}

@media (max-width: 767px) {
.theme-toggle {
body:not(:has(.intro-root)) .theme-toggle {
bottom: calc(3rem + 1rem + env(safe-area-inset-bottom, 0px));
}
}
4 changes: 2 additions & 2 deletions src/components/UI/contentPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@ export const ContentPanel: React.FC<ContentPanelProps> = ({
backgroundColor: "var(--color-panel-bg)",
borderRadius: "0.75rem",
padding: "2rem 1rem 2rem 1rem",
height: "fit-content",
minHeight: "100%",
color: "var(--color-text)",
}}
className={`w-full max-w-full ${className ?? ""}`.trim()}
className={`w-full max-w-full min-h-full ${className ?? ""}`.trim()}
>
{children}
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,8 @@
--color-text-nav: rgba(255, 255, 255, 0.87);
--color-text-nav-accent: rgba(255, 255, 255, 0.55);
--color-link: #818cf8;
--color-panel-bg: rgba(255, 255, 255, 0.1);
--color-border: #52525b;
--color-panel-bg: #3f3f4696;
--color-border: #e4e4e75e;
--color-wave: #3f3f46;
--color-prompt-text: antiquewhite;
--color-cursor: #f97316;
Expand Down
4 changes: 3 additions & 1 deletion src/layout/section.layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ interface SectionLayoutProps {
}
export const SectionLayout: React.FC<SectionLayoutProps> = ({ children }) => {
return (
<section className="flex w-full min-w-0 p-4 md:p-8">{children}</section>
<section className="flex w-full min-w-0 min-h-full items-stretch p-4 md:p-8">
{children}
</section>
);
};
1 change: 1 addition & 0 deletions src/pages/intro/introPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ export const IntroPage: React.FC = () => {
<link rel="preload" as="image" href={avatarImg} />
</Helmet>
<h1
className="intro-root"
style={{
position: "absolute",
width: "1px",
Expand Down
4 changes: 2 additions & 2 deletions src/pages/theBuzz/about.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ describe("About", () => {
const section = container.querySelector("section");
const panel = container.querySelector("section > div");

expect(section).toHaveClass("w-full", "min-w-0");
expect(panel).toHaveClass("w-full", "max-w-full");
expect(section).toHaveClass("w-full", "min-w-0", "min-h-full");
expect(panel).toHaveClass("w-full", "max-w-full", "min-h-full");
});
});
2 changes: 1 addition & 1 deletion src/pages/theBuzz/buzzPage.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,6 @@ describe("BuzzPage", () => {

expect(pageOverlay).toHaveClass("absolute", "inset-0", "w-full", "h-full");
expect(pageOverlay).not.toHaveClass("fixed");
expect(contentWrapper).toHaveClass("min-w-0");
expect(contentWrapper).toHaveClass("h-full", "min-w-0");
});
});
2 changes: 1 addition & 1 deletion src/pages/theBuzz/buzzPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export const BuzzPage: React.FC = () => {
{/* Content */}
<div
key={location.pathname}
className="flex-1 min-w-0 min-h-0 mx-2 md:mx-5 overflow-y-auto overflow-x-hidden pt-16 pb-14 md:pt-0 md:pb-0"
className="flex-1 h-full min-w-0 min-h-0 mx-2 md:mx-5 overflow-y-auto overflow-x-hidden pt-16 pb-14 md:pt-0 md:pb-0"
>
<Suspense fallback={null}>
<Outlet />
Expand Down
4 changes: 2 additions & 2 deletions src/pages/theBuzz/experience.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ describe("Experience", () => {
const section = container.querySelector("section");
const panel = container.querySelector("section > div");

expect(section).toHaveClass("w-full", "min-w-0");
expect(panel).toHaveClass("w-full", "max-w-full");
expect(section).toHaveClass("w-full", "min-w-0", "min-h-full");
expect(panel).toHaveClass("w-full", "max-w-full", "min-h-full");
});
});
298 changes: 149 additions & 149 deletions src/pages/theBuzz/experience.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,161 +10,161 @@ export const Experience: React.FC = () => {
<SectionLayout>
<ContentPanel>
<div className="flex flex-col gap-5 max-w-150 justify-self-center">
<h1>Experience</h1>
<article className="flex flex-col gap-4">
<header className="gap-1">
<h2 className="text-base md:text-xl font-bold">
LawPDF, Independent
</h2>
<p className="text-sm md:text-lg">2025-2026</p>
<ul className="flex flex-wrap text-sm md:text-md font-semibold gap-x-2">
<li className="list-none">Next.js</li>
<li className="list-none">Node.js</li>
<li className="list-none">AWS</li>
<li className="list-none">AI</li>
</ul>
</header>
<p className="font-light">
Built a platform that allows legal professionals and clients to
gather case files and automatically generate referenced,
summarized documents. Handled all technical execution, from
initial infrastructure setup to production deployment and data
security.
</p>
</article>
<h1>Experience</h1>
<article className="flex flex-col gap-4">
<header className="gap-1">
<h2 className="text-base md:text-xl font-bold">
LawPDF, Independent
</h2>
<p className="text-sm md:text-lg">2025-2026</p>
<ul className="flex flex-wrap text-sm md:text-md font-semibold gap-x-2">
<li className="list-none">Next.js</li>
<li className="list-none">Node.js</li>
<li className="list-none">AWS</li>
<li className="list-none">AI</li>
</ul>
</header>
<p className="font-light">
Built a platform that allows legal professionals and clients to
gather case files and automatically generate referenced,
summarized documents. Handled all technical execution, from
initial infrastructure setup to production deployment and data
security.
</p>
</article>

<article className="flex flex-col gap-4">
<header className="gap-1">
<h2 className="text-base md:text-xl font-bold">
Clarity, Fullstack Team Lead
</h2>
<p className="text-sm md:text-lg">2023-2025</p>
<ul className="flex flex-wrap text-sm md:text-md font-semibold gap-x-2">
<li className="list-none">AWS</li>
<li className="list-none">Serverless</li>
<li className="list-none">Vue.js</li>
<li className="list-none">Node.js</li>
<li className="list-none">Apollo</li>
<li className="list-none">MongoDB</li>
</ul>
</header>
<p className="font-light">
Ran technical design and delivery for the company's core product.
Established architectural standards, managed the CI/CD pipeline,
and ensured high availability and performance for high-traffic,
business-critical features.
</p>
</article>
<article className="flex flex-col gap-4">
<header className="gap-1">
<h2 className="text-base md:text-xl font-bold">
Clarity, Fullstack Team Lead
</h2>
<p className="text-sm md:text-lg">2023-2025</p>
<ul className="flex flex-wrap text-sm md:text-md font-semibold gap-x-2">
<li className="list-none">AWS</li>
<li className="list-none">Serverless</li>
<li className="list-none">Vue.js</li>
<li className="list-none">Node.js</li>
<li className="list-none">Apollo</li>
<li className="list-none">MongoDB</li>
</ul>
</header>
<p className="font-light">
Ran technical design and delivery for the company's core
product. Established architectural standards, managed the CI/CD
pipeline, and ensured high availability and performance for
high-traffic, business-critical features.
</p>
</article>

<article className="flex flex-col gap-4">
<header className="gap-1">
<h2 className="text-base md:text-xl font-bold">
Daytwo, Fullstack Team Lead
</h2>
<p className="text-sm md:text-lg">2018-2023</p>
<ul className="flex flex-wrap text-sm md:text-md font-semibold gap-x-2">
<li className="list-none">GCP</li>
<li className="list-none">AWS</li>
<li className="list-none">CDK</li>
<li className="list-none">React</li>
<li className="list-none">Node.js</li>
<li className="list-none">mySQL</li>
</ul>
</header>
<p className="font-light">
Directed local and offshore engineering teams. Scaled backend
infrastructure to support high-throughput processing, enforcing
strict security and compliance standards for handling sensitive
international data.
</p>
</article>
<article className="flex flex-col gap-4">
<header className="gap-1">
<h2 className="text-base md:text-xl font-bold">
Daytwo, Fullstack Team Lead
</h2>
<p className="text-sm md:text-lg">2018-2023</p>
<ul className="flex flex-wrap text-sm md:text-md font-semibold gap-x-2">
<li className="list-none">GCP</li>
<li className="list-none">AWS</li>
<li className="list-none">CDK</li>
<li className="list-none">React</li>
<li className="list-none">Node.js</li>
<li className="list-none">mySQL</li>
</ul>
</header>
<p className="font-light">
Directed local and offshore engineering teams. Scaled backend
infrastructure to support high-throughput processing, enforcing
strict security and compliance standards for handling sensitive
international data.
</p>
</article>

<article className="flex flex-col gap-4">
<header className="gap-1">
<h2 className="text-base md:text-xl font-bold">
Softwave, Fullstack Dev
</h2>
<p className="text-sm md:text-lg">2016-2018</p>
<ul className="flex flex-wrap text-sm md:text-md font-semibold gap-x-2">
<li className="list-none">Azure</li>
<li className="list-none">Angular</li>
<li className="list-none">React</li>
<li className="list-none">.Net Core</li>
<li className="list-none">SQL</li>
</ul>
</header>
<p className="font-light">
Shipped end-to-end features for enterprise clients. Transitioned
legacy systems to modern frontend frameworks and built out the
supporting backend architecture and database schemas.
</p>
</article>
<article className="flex flex-col gap-4">
<header className="gap-1">
<h2 className="text-base md:text-xl font-bold">
Softwave, Fullstack Dev
</h2>
<p className="text-sm md:text-lg">2016-2018</p>
<ul className="flex flex-wrap text-sm md:text-md font-semibold gap-x-2">
<li className="list-none">Azure</li>
<li className="list-none">Angular</li>
<li className="list-none">React</li>
<li className="list-none">.Net Core</li>
<li className="list-none">SQL</li>
</ul>
</header>
<p className="font-light">
Shipped end-to-end features for enterprise clients. Transitioned
legacy systems to modern frontend frameworks and built out the
supporting backend architecture and database schemas.
</p>
</article>

<article className="flex flex-col gap-4">
<header className="gap-1">
<h2 className="text-base md:text-xl font-bold">
Eternity, Fullstack Dev
</h2>
<p className="text-sm md:text-lg">2015-2016</p>
<ul className="flex flex-wrap text-sm md:text-md font-semibold gap-x-2">
<li className="list-none">Azure</li>
<li className="list-none">Javascript</li>
<li className="list-none">HTML</li>
<li className="list-none">CSS</li>
<li className="list-none">ASP.Net</li>
<li className="list-none">C#</li>
<li className="list-none">SQL</li>
</ul>
</header>
<p className="font-light">
Provisioned and maintained production cloud environments on Azure.
Handled deployment pipelines, server configurations, and
operational monitoring for web applications.
</p>
</article>
<article className="flex flex-col gap-4">
<header className="gap-1">
<h2 className="text-base md:text-xl font-bold">
Eternity, Fullstack Dev
</h2>
<p className="text-sm md:text-lg">2015-2016</p>
<ul className="flex flex-wrap text-sm md:text-md font-semibold gap-x-2">
<li className="list-none">Azure</li>
<li className="list-none">Javascript</li>
<li className="list-none">HTML</li>
<li className="list-none">CSS</li>
<li className="list-none">ASP.Net</li>
<li className="list-none">C#</li>
<li className="list-none">SQL</li>
</ul>
</header>
<p className="font-light">
Provisioned and maintained production cloud environments on
Azure. Handled deployment pipelines, server configurations, and
operational monitoring for web applications.
</p>
</article>

<article className="flex flex-col gap-4">
<header className="gap-1">
<h2 className="text-base md:text-xl font-bold">
Qpoint, Fullstack Dev
</h2>
<p className="text-sm md:text-lg">2014-2015</p>
<ul className="flex flex-wrap text-sm md:text-md font-semibold gap-x-2">
<li className="list-none">Javascript</li>
<li className="list-none">HTML</li>
<li className="list-none">CSS</li>
<li className="list-none">ASP.Net</li>
<li className="list-none">C#</li>
<li className="list-none">SQL</li>
</ul>
</header>
<p className="font-light">
Contributed to a highly structured enterprise codebase. Focused on
writing testable code, conducting rigorous reviews, and
maintaining strict engineering and version control standards.
</p>
</article>
<article className="flex flex-col gap-4">
<header className="gap-1">
<h2 className="text-base md:text-xl font-bold">
Qpoint, Fullstack Dev
</h2>
<p className="text-sm md:text-lg">2014-2015</p>
<ul className="flex flex-wrap text-sm md:text-md font-semibold gap-x-2">
<li className="list-none">Javascript</li>
<li className="list-none">HTML</li>
<li className="list-none">CSS</li>
<li className="list-none">ASP.Net</li>
<li className="list-none">C#</li>
<li className="list-none">SQL</li>
</ul>
</header>
<p className="font-light">
Contributed to a highly structured enterprise codebase. Focused
on writing testable code, conducting rigorous reviews, and
maintaining strict engineering and version control standards.
</p>
</article>

<article className="flex flex-col gap-4">
<header className="gap-1">
<h2 className="text-base md:text-xl font-bold">
Bynet, Fullstack Dev
</h2>
<p className="text-sm md:text-lg">2012-2014</p>
<ul className="flex flex-wrap text-sm md:text-md font-semibold gap-x-2">
<li className="list-none">Javascript</li>
<li className="list-none">HTML</li>
<li className="list-none">CSS</li>
<li className="list-none">ASP.Net</li>
<li className="list-none">C#</li>
</ul>
</header>
<p className="font-light">
Developed foundational server-side and client-side logic for core
applications. Handled database design, API creation, and frontend
integration.
</p>
</article>
<article className="flex flex-col gap-4">
<header className="gap-1">
<h2 className="text-base md:text-xl font-bold">
Bynet, Fullstack Dev
</h2>
<p className="text-sm md:text-lg">2012-2014</p>
<ul className="flex flex-wrap text-sm md:text-md font-semibold gap-x-2">
<li className="list-none">Javascript</li>
<li className="list-none">HTML</li>
<li className="list-none">CSS</li>
<li className="list-none">ASP.Net</li>
<li className="list-none">C#</li>
</ul>
</header>
<p className="font-light">
Developed foundational server-side and client-side logic for
core applications. Handled database design, API creation, and
frontend integration.
</p>
</article>
</div>
</ContentPanel>
</SectionLayout>
Expand Down
Loading
Loading