Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/cosmic-developer/llms.txt

Use this file to discover all available pages before exploring further.

The Home page is the portfolio’s dramatic opening act. A full-viewport parallax hero fuses cinematic typography with scroll-driven motion: as the visitor scrolls down, the giant heading glides upward and fades away, giving way to a split-panel introduction section. On the left, a glass-morphism card labelled Current Trajectory summarises your professional focus; on the right, an orbital animation of two rotating rings reinforces the cosmic visual language throughout the site.

​
Visual Overview

The page is divided into two primary visual zones.

​
Hero Section

The hero occupies at least 80 vh (min-h-[80vh]) and centers a stacked typographic composition:
LayerContentStyle
Teletype introSystem Online // Signal AcquiredAurora-teal monospace, character-by-character reveal
Primary heading (line 1)CosmicGradient — star-white → aurora-teal → aurora-magenta
Primary heading (line 2)Developer.Solid star-white
SubheadingCrafting digital experiences that bridge the gap between complex logic and awe-inspiring design.Muted white, centered
Bounce arrowDown-arrow icon, animatedFramer Motion y-keyframe loop [0, 10, 0]
The heading and bounce arrow are wrapped in a Framer Motion motion.div that reads the page scroll position via useScroll and maps it to a translateY transform (0 → 200 px) and an opacity fade (1 → 0). This means the content literally floats upward as the user scrolls, creating a depth illusion before the next section arrives.

​
Introduction Split Panel

Below the hero, a two-column grid (two columns on desktop, single column on mobile) presents a brief introduction:
  • Left — glass-panel card (Current Trajectory): A backdrop-blur glassmorphism card with an aurora-teal gradient overlay on hover. Edit this card to describe your current focus, open-to-work status, or professional headline.
  • Right — orbital animation: A purely decorative CSS composition of two concentric rotating rings centred on an Event Horizon label. One ring rotates clockwise, the other counter-clockwise, to suggest planetary motion.

​
Scroll Parallax Implementation

The parallax effect is powered by two Framer Motion hooks: 
import { useScroll, useTransform } from 'framer-motion';

// Inside the component (ut):
const { scrollYProgress } = useScroll({
  ref: containerRef,
  offset: ['start start', 'end start'],
});

// Heading drifts upward 200px as user scrolls through the hero
const heroY = useTransform(scrollYProgress, [0, 1], [0, 200]);

// Heading fades out over the first half of the scroll range
const heroOpacity = useTransform(scrollYProgress, [0, 0.5], [1, 0]);
Both heroY and heroOpacity are passed directly as style props on the hero motion.div — no useEffect or manual event listeners required. Framer Motion schedules all updates on the compositor thread, keeping the animation smooth at 60 fps even on mid-range devices.
The second split-panel section uses its own independent useTransform with [0, 1] → [0, -100] (a gentle upward counter-parallax) so both sections move at different rates, deepening the sense of depth.

​
TeletypeText Configuration

The intro line uses the shared TeletypeText component: 
<TeletypeText
  text="System Online // Signal Acquired"
  className="text-aurora-teal font-mono text-sm tracking-widest uppercase"
  delay={0.5}
/>
The delay prop (in seconds) controls how long after mount the typing animation begins. Increase it if you want the text to start after a page-transition animation has finished.

​
Content Sections at a Glance

SectionComponentKey Data to Edit
Teletype intro lineTeletypeTexttext prop string
Gradient heading<h1> with Tailwind gradient classesHard-coded strings "Cosmic" / "Developer."
Subheading<p>Hard-coded string
Current Trajectory cardGlass-panel <div>Inner paragraph text
Orbital animation label<span> inside orbital wrapper"Event Horizon" string

​
Customization

To personalise the Home page, open the ut component (compiled into assets/main.js; source lives in src/pages/Home.jsx or equivalent):
  1. Change the hero heading — Replace the "Cosmic" and "Developer." strings with your own name or tagline. Each word sits on its own line so the gradient effect spans both.
  2. Change the subheading — Update the paragraph below the heading to reflect your own elevator-pitch copy.
  3. Adjust parallax travel distance — Change the second value in [0, 200] inside useTransform to make the heading move more or less before fading out.
  4. Adjust parallax fade point — Change 0.5 in the opacity useTransform input range to shorten or lengthen the fade window (as a fraction of the scroll range through the hero section).
  5. Change the teletype string — Update the text prop on TeletypeText.
  6. Rename the orbital label — Replace "Event Horizon" with any short label (e.g., your job title).
  7. Edit the Current Trajectory card — Swap out the card’s body copy to describe your current work, availability, or focus area.
The bounce arrow at the bottom of the hero is a motion.div with a simple y keyframe loop: [0, 10, 0]. Increase the middle value (e.g., 20) to make the bounce more pronounced, or set transition.repeat to 0 to show it only once.
The useScroll hook is scoped to the page container ref with offset: ['start start', 'end start']. This means progress goes from 0 to 1 as the container scrolls from its top edge to its bottom edge reaching the viewport top — so the parallax completes exactly as the hero leaves the screen.

Build docs developers (and LLMs) love

Get started for freeTalk to us