Back to projects

NorthernBytes

2025
Design & Full Stack Development
View project
NorthernBytes

About the project

NorthernBytes is the official landing page for my software development company. Designed to convey professionalism and modernity, the website showcases the services offered with an elegant design that combines editorial serif typography with organic visual elements. It features advanced animations, a contact form, and a smooth navigation system.

Main features

  • Editorial design with modern serif typography
  • Advanced animations with GSAP and Framer Motion
  • Interactive hero with animated code and word rotation
  • Service cards with organic decorative shapes
  • Functional contact form
  • SEO optimized with structured data
  • View Transitions for smooth navigation
  • Fully responsive adaptive design

Technical challenges

  • Implement 3D letter rotation with GSAP letter flip
  • Create organic blob shapes with SVG paths
  • Optimize scroll animations with ScrollTrigger
  • Harmoniously combine serif and sans-serif typography

Tech stack

Next.jsReactTypeScriptTailwindFramer MotionGSAP

Color Palette

Background

#F0EEE6

Light beige main background, elegant and warm

Foreground

#171717

Dark primary text for maximum contrast

Accent

#047EDD

Corporate blue for CTAs and links

Footer BG

#141413

Dark footer background, creating contrast

Web Dev

#B8D8E8

Soft pastel blue for web development

E-commerce

#E8D4F0

Pastel purple for online stores

Desktop Apps

#CBCADB

Lavender gray for desktop apps

Mobile Dev

#F5D5CB

Pastel peach for mobile development

Custom Software

#C8E6C9

Pastel mint green for custom software

Typography & Iconography

Work Sans

Google Font (Sans-serif)

Headings, navigation, buttons and UI elements

400 (Regular)500 (Medium)600 (Semibold)700 (Bold)

NorthernBytes

clamp(28px, 6vw, 48px) • 600

Transformamos ideas

clamp(32px, 8vw, 72px) • 700

Source Serif 4

Google Font (Serif)

Body text, descriptions and editorial content

400 (Regular)500 (Medium)600 (Semibold)

Desarrollamos soluciones tecnológicas innovadoras

20px • 400

Transformamos ideas en experiencias digitales

18px • 400

Lucide Icons

Lucide React

Regular • Modern and minimalist iconography for the entire interface

https://lucide.dev
  • Lucide React as the main library
  • Custom inline SVGs for decorative elements
  • Organic blob shapes in service cards
  • Integrated navigation and social media icons

Tech Stack

Next.js 15

React Framework with Turbopack

  • App Router
  • Server Components
  • Turbopack for fast development

React 19

UI Library version 19

  • Modern hooks
  • Concurrent features
  • Better performance

Framer Motion

Smooth declarative animations

  • Smooth transitions
  • Entry animations
  • whileInView triggers

GSAP

Complex animations and scroll

  • 3D Letter flip
  • ScrollTrigger
  • Precise timeline

Tailwind CSS v4

CSS utility framework v4

  • @theme inline syntax
  • Native CSS Variables
  • JIT compiler

Lucide React

Modern icon library

  • Optimized SVG icons
  • Tree-shakeable
  • Visual consistency

Technical Details

Interactive Hero with Code

Hero section with animated code snippet showing rotating words with 3D letter flip effect using GSAP

  • Word rotation every 2.5 seconds
  • Letter flip effect with 3D transformation
  • Animated blinking cursor
  • Code snippet with syntax highlighting
const proyecto = {
  tecnologia: "moderna",
  diseño: "elegante",
  resultado: "exitoso"
};

transform(proyecto);
// ✓ Listo para lanzar

Animated Service Cards

Services grid with scroll animations and unique organic decorative shapes

  • On-scroll animation with GSAP ScrollTrigger
  • 3D transformation with rotateX and scale
  • Organic SVG paths as decoration
  • Hover effects with smooth transition