A modern, minimal developer portfolio built with React, TypeScript, and Tailwind CSS. Features smooth animations, dark/light theme support, and a terminal-inspired aesthetic.
- Terminal-inspired design — Clean, developer-focused aesthetic with command-line touches
- Dark/Light theme — Seamless theme switching with system preference detection
- Smooth animations — Powered by Framer Motion for fluid transitions
- Typing effect — Dynamic hero section with typewriter animation
- Fully responsive — Mobile-first design that looks great on all devices
- Accessible — Skip-to-content links and semantic HTML
- Fast performance — Vite-powered build with optimized bundle
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run previewsrc/
├── components/ # Reusable UI components
│ ├── BottomNav.tsx # Floating navigation bar
│ ├── NavButton.tsx # Navigation button with tooltip
│ ├── ProjectCard.tsx # Project showcase card
│ └── SkillBadge.tsx # Skill tag component
├── sections/ # Page sections
│ ├── Hero.tsx # Landing section with typing effect
│ ├── About.tsx # Bio and introduction
│ ├── Experience.tsx # Work history timeline
│ ├── Skills.tsx # Technical skills grid
│ ├── Projects.tsx # Featured projects
│ ├── Contact.tsx # Contact information
│ └── Footer.tsx # Page footer
├── hooks/ # Custom React hooks
│ ├── useTheme.ts # Theme management
│ └── useTypingEffect.ts # Typewriter animation
├── data/ # Static content
│ ├── experience.ts # Work experience data
│ ├── projects.ts # Project entries
│ └── skills.ts # Skills list
└── styles/
└── globals.css # Global styles & CSS variables
| Technology | Purpose |
|---|---|
| React 18 | UI library with hooks |
| TypeScript | Type safety |
| Tailwind CSS | Utility-first styling |
| Framer Motion | Animations |
| Vite | Build tool & dev server |
| ESLint | Code linting |
Update your personal information in the src/data/ directory:
experience.ts— Work historyprojects.ts— Featured projectsskills.ts— Technical skills
Theme colors are defined in src/styles/globals.css using CSS custom properties for easy customization.
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm run preview |
Preview production build |
npm run lint |
Run ESLint |
MIT © Moin Malek