Skip to content

initial frontend design#13

Merged
Twahaaa merged 1 commit into
mainfrom
frontend
May 21, 2026
Merged

initial frontend design#13
Twahaaa merged 1 commit into
mainfrom
frontend

Conversation

@Twahaaa
Copy link
Copy Markdown
Contributor

@Twahaaa Twahaaa commented May 21, 2026

No description provided.

Copilot AI review requested due to automatic review settings May 21, 2026 01:28
@Twahaaa Twahaaa merged commit 39d17b3 into main May 21, 2026
6 checks passed
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR introduces the initial frontend design system and home page layout for the Orbit/DevNation UI, adding shared types/constants, core layout components, and a terminal/brutalist aesthetic with Framer Motion-driven interactions.

Changes:

  • Added shared TypeScript types and UI constants (navigation, branding, mock terminal data).
  • Implemented new UI/layout components (Navbar/Footer/PageShell, badges/stamps/buttons/cards, dot-grid background).
  • Replaced the home page with the new “terminal archive” design, including a scroll-driven terminal parallax section and animated hero/sections.

Reviewed changes

Copilot reviewed 20 out of 21 changed files in this pull request and generated 6 comments.

Show a summary per file
File Description
types/index.ts Adds shared TS unions/interfaces for UI variants and repo/nav data.
Skills.md Documents contribution/design rules for the new frontend direction.
package.json Adds framer-motion dependency for animations.
constants/terminalData.ts Provides mock member/project data for the terminal section.
constants/index.ts Centralizes navigation + branding + footer link constants.
components/ui/TerminalButton.tsx Adds a stylized CTA button using Framer Motion.
components/ui/StampLabel.tsx Adds stamp overlay UI element for cards/sections.
components/ui/SectionHeader.tsx Adds standardized section headers with optional path display.
components/ui/RepoRow.tsx Adds repository list row UI with status + stats.
components/ui/PolaroidCard.tsx Adds Polaroid-style card component for project showcase.
components/ui/DotGridBackground.tsx Adds fixed dot-grid background overlay.
components/ui/ArchiveTag.tsx Adds small page/hero tag UI element.
components/ui/ArchiveBadge.tsx Adds status badge component tied to CSS variants.
components/sections/TerminalParallax.tsx Adds scroll-driven terminal parallax/typing/reveal section.
components/layout/PageShell.tsx Adds shared page chrome wrapper (Navbar + Footer).
components/layout/Navbar.tsx Adds top navigation with active-route highlighting.
components/layout/Footer.tsx Adds footer with nav links and external social links.
bun.lock Updates Bun lockfile for dependency graph changes.
app/page.tsx Replaces previous dashboard with the new animated landing page.
app/layout.tsx Updates global fonts/metadata and mounts dot-grid background.
app/globals.css Introduces new theme tokens + stamp/badge variants + UI CSS utilities.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

"use client";

import { useRef, useState } from "react";
import { motion, useScroll, useMotionValueEvent, type MotionValue } from "framer-motion";
Comment thread app/page.tsx
Comment on lines 1 to +5
"use client";

import { signOut, useSession } from "next-auth/react";
import { motion } from "framer-motion";
import { PageShell } from "@/components/layout/PageShell";
import { ArchiveTag } from "@/components/ui/ArchiveTag";
Comment on lines +26 to +30
<div className="relative aspect-square overflow-hidden bg-surface-2">
<img
src={image}
alt={title}
className="h-full w-full object-cover"
Comment on lines +52 to +56
<motion.button
className={classes}
onClick={onClick}
whileTap={{ scale: 0.97 }}
>
Comment on lines +39 to +43
if (href) {
return (
<motion.a
href={href}
className={classes}
Comment thread Skills.md
Comment on lines +91 to +96
| Accent | Status green only (`#22c55e` or Tailwind `green-500`) |
| Palette | Strictly monochrome + single accent |
| Borders | Dashed or dotted, zero border-radius |
| Cards | Polaroid-style with physical stamp overlays |

> Do not introduce new colors, fonts, rounded corners, or gradients without a design review.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants