Portfolio

A modern, responsive portfolio website built with Next.js and TypeScript, featuring a beautiful UI with a Bento-grid layout.

🚀 Tech Stack

• Frontend Framework: Next.js
• Language: TypeScript
• Styling: Tailwind CSS and Aceternity UI
• Icons: React Icons
• UI Components: Custom Bento Grid implementation
• Deployment: Vercel

🛠️ Installation

1. Clone the repository:

   git clone <your-repo-url>
   

2. Install dependencies:

   npm install
   

3. Run the development server:

   npm run dev
   

The application will be available at http://localhost:3000

🏗️ Project Structure

portfolio/
├── components/     # React components
├── public/         # Static assets
├── styles/        # Global styles
└── pages/         # Next.js pages

🎨 Features

• Responsive Bento Grid layout
• Dark/Light mode support
• Interactive UI components
• Professional skill showcase
• Project portfolio display
• Social media integration

🔧 Technical Implementation

Static Routes with Next.js

The portfolio uses Next.js's file-system based routing for optimal performance:

• Pre-rendered static pages for faster loading
• Optimized image loading with next/image
• Server-side generation for consistent SEO performance

TypeScript Integration

Strong typing is implemented throughout the project:

• Custom interfaces for component props
• Type-safe state management
• Strict type checking for all components
• Typed API responses and data structures

Component Architecture

• Modular components with TypeScript interfaces
• Custom hooks with proper type definitions
• Reusable UI components with strict prop typing
• Type-safe event handlers and callbacks

Performance Optimizations

• Static Site Generation (SSG) for optimal loading
• Code splitting and lazy loading
• Optimized asset delivery
• Type-based tree shaking

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Contact

Feel free to connect with me on [LinkedIn] https://www.linkedin.com/in/marisi-romanillos/