Skip to content

README.md

Latest commit

 

History

History
167 lines (118 loc) · 5.39 KB

README.md

File metadata and controls

167 lines (118 loc) · 5.39 KB
Raw

👨‍💻 Animated Portfolio

A personal portfolio built with React, TypeScript, Vite, Framer Motion, and Tailwind CSS. The project focuses on a maintainable frontend structure, polished motion design, responsive layouts, and a deployment-ready setup suited for a fullstack or backend-oriented developer.

Live Demo

Status React Vite TypeScript License

✨ Features

  • 🎨 Structured UI system — Built with Tailwind CSS and NextUI for consistent, composable styling.
  • 🌓 Theme switching — Persistent dark/light mode with instant UI updates.
  • ⚡ Motion-driven experience — Uses Framer Motion and React Spring for page transitions and subtle interface motion.
  • 📱 Responsive layout — Designed to adapt cleanly across mobile, tablet, and desktop screens.
  • 🧩 Developer-style skills section — Presents technical skills in a code-inspired format that matches the portfolio identity.
  • 🔍 SEO-friendly setup — Integrates React Helmet Async for document metadata and improved search presentation.
  • 🧭 Client-side routing — Organized with React Router v7 for a modular, page-based structure.

🚀 Quick Start

Prerequisites

  • Node.js 18+
  • npm or yarn

Installation

# Clone the repository
git clone https://github.com/jkdevcode/animated_portfolio.git
cd animated_portfolio

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

The app will be available at http://localhost:5173.

📁 Project Structure

animated_portfolio/
├── src/
│   ├── components/
│   │   ├── LanguagesSection.tsx  # Code-style skills presentation
│   │   ├── Navbar.tsx            # Responsive navigation
│   │   └── ThemeToggle.tsx       # Theme switching logic
│   ├── pages/
│   │   ├── Home.tsx              # Landing page
│   │   ├── Projects.tsx          # Project showcase
│   │   └── Contact.tsx           # Contact and profile details
│   ├── mocks/
│   │   └── mock-languages.ts     # Skills content source
│   ├── App.tsx                   # Application routing
│   └── main.tsx                  # App bootstrap and providers
├── public/                       # Static assets
├── package.json
├── vite.config.ts
└── tailwind.config.js

🛠️ Technologies

Technology Purpose
React 18 Component-based UI architecture
Vite Development and production build pipeline
TypeScript Strong typing for maintainability and refactoring
Tailwind CSS Utility-first styling system
NextUI Accessible and reusable UI primitives
Framer Motion Page transitions and interaction animations
React Spring Physics-based motion for selected UI effects
React Helmet Async Metadata management for SEO

🧠 Technical Decisions

  • React + TypeScript were chosen to keep the codebase predictable, easier to scale, and safer to refactor over time.
  • Vite keeps local development fast and supports a lightweight production build for static hosting.
  • Tailwind CSS reduces style drift and keeps layout decisions close to the component layer.
  • Framer Motion provides a clean abstraction for route transitions and interface motion without overcomplicating the component tree.
  • React Router v7 keeps the portfolio organized as a set of focused views instead of a single monolithic page.
  • Content is partially data-driven through mock files, which makes sections like skills easier to maintain and update.
  • SEO metadata is handled explicitly so the project reads well when shared and deployed publicly.

🎨 Customization

Update Skills

To modify the code-style "Languages" section, edit src/mocks/mock-languages.ts:

export const LanguageMock = {
  variable: "const",
  namevariable: "stack",
  // Update your skills here...
  onefrontendjs: "'React'",
  twofrontendjs: "'Next.js'",
};

Customize Theme

Theme behavior is handled in src/components/ThemeToggle.tsx and initialized in src/main.tsx. Update the color palette in tailwind.config.js to align the visual system with your personal brand.

📦 Build, Test & Deploy

Local build

# Build for production
npm run build

# Preview the production bundle locally
npm run preview

# Lint the codebase
npm run lint

Deployment & Hosting

  • Optimized for static deployment on Vercel.
  • Also compatible with Netlify and other static hosting providers.
  • The live deployment is available here: https://josedvargas.vercel.app

📞 Support

For questions or opportunities, feel free to reach out:

👨‍💻 Author

Created by Jos

Made with ❤️ using React