Skip to content

diegomnDev/resume-animation

Repository files navigation

🚀 Interactive Developer Resume

Next.js React TypeScript Tailwind CSS Jest

An interactive, animated, and responsive developer resume built with Next.js 15, React 19, TypeScript, and Tailwind CSS.

🌟 Features

  • Responsive design with a mobile-first approach
  • Dark mode support with theme switcher
  • Smooth scrolling and animations using Framer Motion
  • Interactive components (e.g., skills carousel, project cards)
  • Contact form with email integration using SendGrid
  • Downloadable CV in multiple languages
  • SEO optimized with dynamic meta tags
  • Performance optimized with Next.js App Router
  • Accessibility considerations
  • Analytics integration with Amplitude
  • Comprehensive test suite using Jest and React Testing Library
  • Developer-themed background with low color intensity
  • Custom error and not found pages for better user experience

🛠️ Technologies Used

  • Next.js 15: React framework with App Router for optimized rendering and routing
  • React 19: JavaScript library for building user interfaces with the latest features
  • TypeScript 5.2: Typed superset of JavaScript for enhanced developer experience
  • Tailwind CSS: Utility-first CSS framework for rapid UI development
  • Framer Motion: Animation library for React components
  • React Hook Form: Performant, flexible, and extensible forms with easy-to-use validation
  • Yup: Object schema validation for form inputs
  • SendGrid API: Direct API integration for email delivery service
  • Amplitude: Analytics for tracking user interactions and engagement
  • Jest: JavaScript testing framework
  • React Testing Library: Testing utilities for React components
  • ESLint: Linting utility for JavaScript and TypeScript
  • Prettier: Code formatter to ensure consistent code style
  • Husky: Git hooks to improve the commit process
  • Commitlint: Lint commit messages for consistency
  • shadcn/ui: Reusable component library built with Radix UI and Tailwind CSS

🚀 Getting Started

To run this project locally:

  1. Clone the repository:

    git clone https://github.com/diegomnDev/resume-animation.git
    cd resume-animation
  2. Install dependencies:

    npm install
    # or
    yarn install
  3. Start the development server:

    npm run dev
    # or
    yarn dev
  4. Open your browser and navigate to http://localhost:3000.

📊 Performance Analysis

This project includes performance optimization using:

  • Next.js App Router for server-side rendering and efficient page loads.
  • Bundle analysis tools to track and reduce the application size.

🧪 Testing

The application is tested using:

  • Jest for unit testing
  • React Testing Library for component testing

Run tests with:

npm test

📱 Responsive Design

  • Fully optimized for mobile, tablet, and desktop.
  • Uses Tailwind CSS for fluid, scalable layouts.

🎨 Design Philosophy

  • Focus on clean UI/UX with accessible components.
  • Minimalist aesthetic with a developer-friendly theme.
  • Smooth transitions and animations for enhanced user experience.

🔒 Security Measures

  • Uses environment variables for sensitive configurations.
  • Ensures secure email transmission via SendGrid API.
  • Enforces best security practices in API calls and authentication.

🔍 SEO Optimization

  • Dynamic meta tags for improved search visibility.
  • Structured data to enhance discoverability on search engines.
  • Optimized images and performance improvements for faster loading.

📝 Code Quality

  • ESLint and Prettier for code consistency.
  • Husky and Commitlint for enforcing commit message standards.
  • Strict TypeScript typing for maintainable and scalable code.

🚀 Deployment

  • Easily deployable using Vercel, Netlify, or GitHub Pages.
  • Automated deployment workflows using GitHub Actions.

👨‍💻 About Me

I consider myself someone who truly enjoys what I do. I like challenges, teamwork, and continuous learning. I’m always eager to grow, share knowledge, and help others, creating a positive and productive work environment.

I approach problems with curiosity and perseverance, always looking for efficient and well-structured solutions. Adaptability and a proactive mindset allow me to contribute effectively to any project.

📩 Contact

Feel free to reach out for collaboration or job opportunities:

📄 License

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

About

Modern Web Resume – A sleek and interactive personal resume built with Next.js 15, Tailwind CSS, and Shadcn UI.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages