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.
- 🎨 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.
- Node.js 18+
- npm or yarn
# 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 buildThe app will be available at http://localhost:5173.
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
| 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 |
- 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.
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'",
};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 for production
npm run build
# Preview the production bundle locally
npm run preview
# Lint the codebase
npm run lint- 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
For questions or opportunities, feel free to reach out:
- 📧 Email: dajozavargas@gmail.com
- 🐙 GitHub: jkdevcode
Created by Jos
Made with ❤️ using React