animated_portfolio

KO | EN

gitlite — search

#javascript #python #hacktoberfest #ai #typescript #llm #go #golang #rust #nodejs #windows #cli #security #ios

animated_portfolio

(★ 41)

Jose's portfolio made with React Tailwind & Motion 👾

animated_portfolio Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 👨‍💻 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](https://img.shields.io/badge/Live_Demo-%23000000?style=for-the-badge&logo=vercel&logoColor=white)](https://josedvargas.vercel.app)

![Status](https://img.shields.io/badge/status-active-brightgreen)
![React](https://img.shields.io/badge/React-18+-61DAFB?logo=react)
![Vite](https://img.shields.io/badge/Vite-5+-646CFF?logo=vite)
![TypeScript](https://img.shields.io/badge/TypeScript-5+-3178C6?logo=typescript)
![License](https://img.shields.io/badge/license-MIT-blue)

---

## ✨ 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

```bash
# 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`:

```typescript
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

```bash
# 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:

- 📧 Email: dajozavargas@gmail.com
- 🐙 GitHub: [jkdevcode](https://github.com/jkdevcode)

---

## 👨‍💻 Author

Created by **Jos**

---

**Made with ❤️ using React**

animated_portfolio

animated_portfolio Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

animated_portfolio

animated_portfolio Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README