Portfolio v2
About the project
Personal portfolio built with the latest React and Next.js technologies. The project stands out for its minimalist and elegant design, with a strong emphasis on fluid animations and editorial typography. It features a unique "Glimpse" component that shows image previews on hover over project links.
Main features
- Glimpse component with image previews on hover
- Advanced animations with Framer Motion and GSAP
- Cinematic noise effect in the background
- Editorial typography with PP Editorial New
- Responsive design with Tailwind CSS v4
- Performance optimization with Next.js 16
- Fullscreen menu system with staggered animations
- Smooth navigation between project pages
Technical challenges
- Optimize animations to maintain 60fps
- Create an image preview system without affecting layout
- Integrate custom fonts while maintaining performance
- Implement canvas noise effect without performance impact
Tech stack
Color Palette
Background
#141414
Dark main background
Foreground
#FFFFFF
Primary text
Gray Medium
#8A8A8A
Secondary text and details
Sky Blue Pastel
#A7C7E7
Frontend category
Mint Green Pastel
#B4E7CE
Backend category
Coral Pink Pastel
#F4C2C2
Tools category
Lavender Pastel
#E8D5F2
Featured projects
Typography & Iconography
PP Editorial New
Custom
Main titles, italic names, editorial emphasis
Ignacio Palacio
106px • 400 • italic
Full Stack
72px • 400 • italic
Poppins
Google Font
Section titles, headings
Desarrollador
72px • 500
Proyectos
72px • 500
Inter
Google Font
Body text, descriptions, UI elements
Texto de párrafo principal
18px • 400
Metadata y etiquetas
14px • 500
- Over 1,200+ icons available
- Duotone style with 0.2 opacity for depth
- Consistent 256x256 viewbox
- Inline integration for better performance
Tech Stack
Next.js 16
React Framework with App Router
- Server Components
- Automatic optimization
- Advanced routing
React 19
UI Library
- Modern hooks
- Concurrent rendering
- Improved Suspense
Framer Motion
Declarative animations
- Smooth transitions
- Scroll triggers
- Touch gestures
GSAP
Complex 3D animations
- 3D text flip
- Precise timeline
- Advanced transforms
Tailwind CSS v4
CSS utility framework
- @theme syntax
- JIT compiler
- Native CSS Variables
TypeScript 5
Static typing
- Type safety
- Intellisense
- Safe refactoring
Technical Details
Cinematic Noise Effect
Background texture dynamically generated using Canvas API
- Rendered at 24fps for optimization
- Resolution reduced to 50% of viewport
- Opacity: 0.05 with mix-blend-mode: soft-light
- Random black/white pixel generation
- Canvas on fixed layer z-50
const createNoise = () => {
const imageData = ctx.createImageData(canvas.width, canvas.height);
const buffer = new Uint32Array(imageData.data.buffer);
for (let i = 0; i < buffer.length; i++) {
const noise = Math.random() > 0.5 ? 255 : 0;
buffer[i] = (255 << 24) | (noise << 16) | (noise << 8) | noise;
}
ctx.putImageData(imageData, 0, 0);
};Glimpse Component
Unique image preview system on hover
- Portal rendering for fixed positioning
- Two modes: single image and fan layout
- Animations with blur and scale
- Real-time cursor tracking
- Support for SVG and raster images
Design Inspiration
Editorial Design
Italian typography from fashion magazines, use of italics for contrast
Swiss Design
Grid system, precise spacing, functional minimalism
Motion Design
Micro-interactions, smooth transitions, visual feedback
Brutalism
Extreme contrast, clear hierarchy, absence of unnecessary ornamentation