MikeyNerd

MikeyNerd — Code, hacks, and projects that prove geek mode is a superpower.

Comment

CODE WITH MIKEY Portfolio

Inspiration

This project was inspired by the desire to create a modern, minimalistic portfolio that showcases technical skills, achievements, and projects in a visually appealing and interactive way. The goal was to build a platform that reflects both personal growth and professional capabilities as a software engineering student.

What it does

The portfolio highlights key achievements, technical skills, and featured projects. It provides an engaging user experience with animated sections, responsive design, and interactive components. Visitors can learn about my background, explore my work, and connect via social links.

How we built it

  • Framework: Built with Next.js for fast, server-side rendered React applications.
  • Styling: Utilizes Tailwind CSS for utility-first styling and custom themes.
  • Animations: Powered by Framer Motion for smooth transitions and effects.
  • Icons: Uses Tabler Icons for consistent, scalable iconography.
  • Font: Optimized with Geist for a clean, modern look.
  • Component Structure: Modular React components for easy maintenance and scalability.

Challenges we ran into

  • Integrating multiple animation libraries while maintaining performance.
  • Ensuring cross-browser compatibility and responsive design.
  • Managing state and theme switching for a seamless user experience.
  • Organizing content and assets for scalability.

Accomplishments that we're proud of

  • Built a visually appealing and highly interactive portfolio.
  • Achieved smooth animations and transitions throughout the site.
  • Implemented dark/light theme support.
  • Showcased a diverse range of projects and achievements.
  • Maintained clean, well-documented code for future improvements.

What we learned

  • Advanced usage of Next.js and React for modern web development.
  • Best practices for responsive design and accessibility.
  • Effective use of animation libraries to enhance UX.
  • Importance of modular code structure and reusable components.
  • Strategies for deploying and optimizing web applications.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

Learn More

To learn more about Next.js, take a look at the following resources:

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform.

Check out the Next.js deployment documentation

Built With

  • framermotion
  • nextjs
  • tailwindcss
Share this project:

Updates