Quick Start
Get David Carrascosa’s portfolio running on your local machine in just a few steps. This guide will have you up and running in under 5 minutes.Prerequisites
Before you begin, ensure you have:- Node.js 18 or higher installed (download here)
- A package manager: npm (comes with Node.js), yarn, pnpm, or bun
- Git for cloning the repository
This project was built with Bun, but works with npm, yarn, or pnpm as well.
Getting Started
Install Dependencies
Install all required packages using your preferred package manager:This installs:
- React and React DOM
- Vite build tools
- TypeScript
- Tailwind CSS
- shadcn/ui components
- All other dependencies from
package.json
Installation typically takes 30-60 seconds depending on your internet connection.
Open in Browser
Navigate to http://localhost:5173 in your browser.You should see:
- The portfolio landing page with hero section
- Navigation bar at the top
- Smooth animations on scroll
- Fully responsive layout
What You’ll See
When you open the portfolio locally, you’ll see:Main Sections
- Navigation Bar: Sticky header with navigation links
- Hero Section: Landing area with introduction and call-to-action
- About Section: Personal background and information
- Experience Section: Professional work history and achievements
- Skills Section: Technical competencies and expertise areas
- Contact Section: Contact form and social media links
Interactive Features
- Smooth scroll animations powered by Framer Motion
- Responsive navigation that adapts to mobile screens
- Dark/light theme support
- Interactive UI components from shadcn/ui
Development Server Options
Custom Port
If port 5173 is already in use, specify a different port:Network Access
The server is configured to listen on all network interfaces (host: "::"), meaning you can access it from other devices on your local network:
Making Changes
Try editing a file to see Hot Module Replacement in action:- Open
src/components/HeroSection.tsx - Make a change to any text or styling
- Save the file
- Watch the browser update instantly (usually under 100ms)
Available Scripts
Once the project is set up, you can run these commands:| Script | Command | Description |
|---|---|---|
| Development | bun run dev | Start dev server at http://localhost:5173 |
| Build | bun run build | Create optimized production build |
| Preview | bun run preview | Preview production build locally |
| Test | bun run test | Run test suite once |
| Test Watch | bun run test:watch | Run tests in watch mode |
| Lint | bun run lint | Check code quality with ESLint |
Replace
bun run with npm run, yarn, or pnpm based on your package manager.Next Steps
Now that you have the portfolio running:Explore the Codebase
- Check out
src/pages/Index.tsxfor the main page structure - Browse
src/components/for individual sections - Explore
src/components/ui/for reusable components
Build for Production
Run
bun run build to create an optimized production build in the dist/ directory.Customize Components
Edit shadcn/ui components in
src/components/ui/ or modify the theme in tailwind.config.ts.Add New Features
Create new sections by adding components to
src/components/ and importing them in src/pages/Index.tsx.Troubleshooting
Port Already in Use
If you seeError: listen EADDRINUSE: address already in use :::5173:
Module Not Found Errors
If you see import errors, try reinstalling dependencies:Slow Development Server
Vite should be very fast (under 100ms rebuilds). If it’s slow:- Check that you’re not running other heavy processes
- Ensure your IDE isn’t indexing node_modules
- Try clearing the Vite cache:
rm -rf node_modules/.vite
Getting Help
If you encounter issues:- Check the Installation Guide for detailed setup instructions
- Review the Vite documentation
- Open an issue on the GitHub repository
You’re now ready to explore and customize the portfolio!