donny/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update app pages and styles

Browse Source
This commit is contained in:
angelmankel
2026-05-29 18:57:07 -07:00
parent ab36d99ba3
commit 9222292b9f
4 changed files with 72 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/about/page.tsx
+48 -37
View File
@@ -27,7 +27,7 @@ export const metadata: Metadata = {
export default function AboutPage() {
return (
<div className="space-y-14">
<div className="flex flex-col gap-12">
{/* Hero Section */}
<Hero label="About">
@@ -68,47 +68,58 @@ export default function AboutPage() {
</ul>
</section>
<AccentLink link="/Angel_Mankel_Resume_2026.pdf" label="Download CV (PDF)" download />
<div className="flex flex-col gap-6">
<AccentLink link="/Angel_Mankel_Resume_2026.pdf" label="Download Resume (PDF)" download />
{/* Social Links */}
<nav aria-label="Contact" className="flex gap-5 text-neutral-300">
<CopyButton
value={email}
label="Copy email"
className={`hover:text-neutral-200 rounded-md hover:bg-[${colors.accent}] p-1 transition-colors duration-200`}
>
<IconMailFilled size={32} />
</CopyButton>
<CopyButton
value={phone}
label="Copy phone"
className={`hover:text-neutral-200 rounded-md hover:bg-[${colors.accent}] p-1 transition-colors duration-200`}
>
<IconPhoneFilled size={32} />
</CopyButton>
<Tooltip text="LinkedIn">
<a
href={linkedIn}
target="_blank"
rel="noreferrer"
aria-label="LinkedIn"
<div className="flex flex-col gap-2 text-neutral-300">
<p>
<span className="font-bold">Email:</span> {email}
</p>
<p>
<span className="font-bold">Phone:</span> {phone}
</p>
</div>
{/* Social Links */}
<nav aria-label="Contact" className="flex gap-5 text-neutral-300">
<CopyButton
value={email}
label="Copy email"
className={`hover:text-neutral-200 rounded-md hover:bg-[${colors.accent}] p-1 transition-colors duration-200`}
>
<IconBrandLinkedinFilled size={32} />
</a>
</Tooltip>
<Tooltip text="Gitea">
<a
href={gitea}
target="_blank"
rel="noreferrer"
aria-label="Gitea"
<IconMailFilled size={32} />
</CopyButton>
<CopyButton
value={phone}
label="Copy phone"
className={`hover:text-neutral-200 rounded-md hover:bg-[${colors.accent}] p-1 transition-colors duration-200`}
>
<GiteaIcon size={32} />
</a>
</Tooltip>
</nav>
<IconPhoneFilled size={32} />
</CopyButton>
<Tooltip text="LinkedIn">
<a
href={linkedIn}
target="_blank"
rel="noreferrer"
aria-label="LinkedIn"
className={`hover:text-neutral-200 rounded-md hover:bg-[${colors.accent}] p-1 transition-colors duration-200`}
>
<IconBrandLinkedinFilled size={32} />
</a>
</Tooltip>
<Tooltip text="Gitea">
<a
href={gitea}
target="_blank"
rel="noreferrer"
aria-label="Gitea"
className={`hover:text-neutral-200 rounded-md hover:bg-[${colors.accent}] p-1 transition-colors duration-200`}
>
<GiteaIcon size={32} />
</a>
</Tooltip>
</nav>
</div>
</div>
);
}
app/globals.css
+9
View File
@@ -16,3 +16,12 @@ body {
background: var(--background);
color: var(--foreground);
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.animate-fade-in {
animation: fade-in 400ms ease;
}
app/page.tsx
+2
View File
@@ -1,3 +1,5 @@
'use client';
import Hero from "@/components/content/Hero";
import Testimonials from "@/components/content/Testimonials";
import RotatingWord from "@/components/content/RotatingWord";
app/projects/[slug]/page.tsx
+13 -22
View File
@@ -1,11 +1,11 @@
import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { notFound } from "next/navigation";
import { IconArrowNarrowLeft, IconExternalLink } from "@tabler/icons-react";
import Hero from "@/components/content/Hero";
import SectionLabel from "@/components/layout/SectionLabel";
import { colors, projects } from "@/constants";
import ProjectCarousel from "@/components/content/ProjectCarousel";
export function generateStaticParams() {
return projects.map((project) => ({ slug: project.slug }));
@@ -48,7 +48,7 @@ export default async function ProjectPage({
</Link>
<Hero label={project.title} subtitle={project.description}>
<div className="space-y-5">
<div className="space-y-3">
<p className="text-md text-neutral-400">
{project.year} — {project.stack.join(" · ")}
</p>
@@ -68,31 +68,22 @@ export default async function ProjectPage({
{/* Screenshots */}
{project.screenshots.length > 0 && (
<section className="space-y-4">
{project.screenshots.map((shot) => (
<div
key={shot.src}
className="overflow-hidden rounded-xl border border-neutral-800"
>
<Image
src={shot.src}
alt={shot.alt}
width={1200}
height={750}
className="h-auto w-full"
/>
</div>
))}
</section>
<ProjectCarousel screenshots={project.screenshots} />
)}
{/* Overview */}
<section className="space-y-4">
<SectionLabel label="Overview" />
<div className="space-y-4 text-[17px] leading-[1.65] text-neutral-200">
{project.overview.map((paragraph) => (
<p key={paragraph}>{paragraph}</p>
))}
<div className="text-[17px] leading-[1.65] text-neutral-200">
{project.overview[0]}
</div>
</section>
{/* Problem Solved */}
<section className="space-y-4">
<SectionLabel label="Problem Solved" />
<div className="text-[17px] leading-[1.65] text-neutral-200">
{project.overview[1]}
</div>
</section>