I'll provide you with a complete guide to set up and run your graphic design portfolio locally in VS Code without errors.
Complete Setup Guide
Step 1: Create a New Next.js Project
Open your terminal/command prompt and run:
npx create-next-app@latest graphic-design-portfolio --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"When prompted, choose:
- ✅ TypeScript
- ✅ ESLint
- ✅ Tailwind CSS
- ✅ App Router
- ✅ Import alias (@/*)
Step 2: Navigate to Project Directory
cd graphic-design-portfolioStep 3: Install Required Dependencies
# Install shadcn/ui CLI
npx shadcn@latest initWhen prompted for shadcn/ui setup:
- Style: Default
- Base color: Slate
- CSS variables: Yes
Then install the required UI components:
# Install all required shadcn/ui components
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add input
npx shadcn@latest add textarea
npx shadcn@latest add label
npx shadcn@latest add badgeInstall additional dependencies:
# Install Lucide React for icons
npm install lucide-react
# Install Next.js Image optimization dependencies
npm install next@latest react@latest react-dom@latestStep 4: Project Structure
Your project structure should look like this:
graphic-design-portfolio/
├── app/
│ ├── about/
│ │ └── page.tsx
│ ├── services/
│ │ └── page.tsx
│ ├── contact/
│ │ └── page.tsx
│ ├── globals.css
│ ├── layout.tsx
│ └── page.tsx
├── components/
│ ├── ui/
│ │ ├── button.tsx
│ │ ├── card.tsx
│ │ ├── input.tsx
│ │ ├── textarea.tsx
│ │ ├── label.tsx
│ │ └── badge.tsx
│ ├── header.tsx
│ ├── category-filter.tsx
│ ├── portfolio-grid.tsx
│ └── project-modal.tsx
├── lib/
│ └── utils.ts
└── package.jsonStep 5: Update package.json
Make sure your package.json includes these dependencies:
{
"name": "graphic-design-portfolio",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "14.0.0",
"react": "^18",
"react-dom": "^18",
"lucide-react": "^0.294.0",
"class-variance-authority": "^0.7.0",
"clsx": "^2.0.0",
"tailwind-merge": "^2.0.0"
},
"devDependencies": {
"typescript": "^5",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10.0.1",
"postcss": "^8",
"tailwindcss": "^3.3.0",
"eslint": "^8",
"eslint-config-next": "14.0.0"
}
}Step 6: Update tailwind.config.ts
import type { Config } from 'tailwindcss'
const config: Config = {
darkMode: ["class"],
content: [
'./pages/**/*.{ts,tsx}',
'./components/**/*.{ts,tsx}',
'./app/**/*.{ts,tsx}',
'./src/**/*.{ts,tsx}',
],
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [require("tailwindcss-animate")],
}
export default configStep 7: Install tailwindcss-animate
npm install tailwindcss-animateStep 8: Update lib/utils.ts
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}Step 9: Copy All Component Files
Now copy all the component files I provided earlier into their respective directories:
- Copy the main page files (
app/page.tsx,app/about/page.tsx, etc.) - Copy the component files (
components/header.tsx, etc.) - Copy the updated
app/globals.css
Step 10: Fix Common TypeScript Errors
If you encounter TypeScript errors, add this to your next.config.js:
/** @type {import('next').NextConfig} */
const nextConfig = {
typescript: {
ignoreBuildErrors: false,
},
images: {
domains: ['placeholder.svg'],
},
}
module.exports = nextConfigStep 11: Run the Development Server
npm run devYour portfolio should now be running at http://localhost:3000
Troubleshooting Common Issues
Issue 1: Module Not Found Errors
# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm installIssue 2: TypeScript Errors
# Install missing type definitions
npm install --save-dev @types/node @types/react @types/react-domIssue 3: Tailwind Classes Not Working
# Restart the development server
npm run devIssue 4: shadcn/ui Components Not Found
# Reinstall shadcn/ui components
npx shadcn@latest add button card input textarea label badgeVS Code Extensions (Recommended)
Install these VS Code extensions for better development experience:
- ES7+ React/Redux/React-Native snippets
- Tailwind CSS IntelliSense
- TypeScript Importer
- Auto Rename Tag
- Prettier - Code formatter
Final Steps
- Open VS Code in your project directory:
code . - Install recommended extensions when prompted
- Run
npm run devin the integrated terminal - Open
http://localhost:3000in your browser
Your graphic design portfolio should now be running without any errors! The blue and black color scheme will be applied, and all pages (Home, About, Services, Contact) will be fully functional.
246d ago
I'll provide you with a complete step-by-step guide to push your portfolio to GitHub and deploy it on Vercel.
Complete GitHub + Vercel Deployment Guide
Part 1: Push to GitHub from VS Code
Step 1: Initialize Git Repository (if not already done)
Open VS Code terminal (Ctrl + `` or View > Terminal) and run:
# Initialize git repository
git init
# Check git status
git statusStep 2: Create .gitignore File
Create a .gitignore file in your project root with this content:
# Dependencies
/node_modules
/.pnp
.pnp.js
# Testing
/coverage
# Next.js
/.next/
/out/
# Production
/build
# Misc
.DS_Store
*.pem
# Debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Local env files
.env*.local
.env
# Vercel
.vercel
# TypeScript
*.tsbuildinfo
next-env.d.ts
# IDE
.vscode/settings.json
.idea/Step 3: Stage and Commit Your Files
# Add all files to staging
git add .
# Create initial commit
git commit -m "Initial commit: Graphic Design Portfolio"Step 4: Create GitHub Repository
Option A: Using GitHub CLI (Recommended)
# Install GitHub CLI if not installed
# Windows: winget install GitHub.cli
# Mac: brew install gh
# Linux: Check GitHub CLI installation guide
# Login to GitHub
gh auth login
# Create repository and push
gh repo create graphic-design-portfolio --public --push --source=.Option B: Using GitHub Website
- Go to GitHub.com
- Click the "+" icon in the top right
- Select "New repository"
- Repository name:
graphic-design-portfolio - Description:
Modern graphic design portfolio with Pinterest-style layout - Make it Public
- Don't initialize with README (since you already have files)
- Click "Create repository"
Step 5: Connect Local Repository to GitHub (Option B only)
Copy the commands from GitHub's "push an existing repository" section:
# Add remote origin
git remote add origin https://github.com/YOUR_USERNAME/graphic-design-portfolio.git
# Push to GitHub
git branch -M main
git push -u origin mainStep 6: Verify Upload
- Refresh your GitHub repository page
- You should see all your files uploaded
- Check that the commit message appears correctly
Part 2: Deploy to Vercel
Step 1: Create Vercel Account
- Go to vercel.com
- Click "Sign Up"
- Choose "Continue with GitHub" for seamless integration
- Authorize Vercel to access your GitHub account
Step 2: Import Your Project
- Once logged in, click "New Project"
- You'll see your GitHub repositories
- Find
graphic-design-portfolioand click "Import"
Step 3: Configure Project Settings
Vercel will auto-detect your Next.js project. Configure these settings:
Project Name: graphic-design-portfolio
Framework Preset: Next.js
Root Directory: ./
Build Command: npm run build (auto-detected)
Output Directory: .next (auto-detected)
Install Command: npm install (auto-detected)Step 4: Environment Variables (if needed)
If you have any environment variables, add them in the "Environment Variables" section:
# Example (add if you have any):
NEXT_PUBLIC_SITE_URL=https://your-domain.vercel.appStep 5: Deploy
- Click "Deploy"
- Wait for the build process (usually 1-3 minutes)
- You'll see a success screen with your live URL
Step 6: Get Your Live URL
After successful deployment, you'll get:
- Production URL:
https://graphic-design-portfolio-username.vercel.app - Custom domain option (if you want to use your own domain)
Part 3: Set Up Automatic Deployments
Configure Auto-Deploy
Vercel automatically sets up continuous deployment:
- Every push to
mainbranch = automatic production deployment - Every push to other branches = preview deployment
- Pull requests = preview deployments
Test Auto-Deploy
Make a small change to test:
# Make a small change (e.g., update the header name)
# Edit components/header.tsx and change the name
# Commit and push
git add .
git commit -m "Update portfolio name"
git push origin mainVercel will automatically detect the change and redeploy!
Part 4: VS Code Git Integration
Using VS Code Git Panel
- Source Control Panel: Click the Git icon in the left sidebar
- Stage Changes: Click "+" next to files to stage
- Commit: Write commit message and click "✓"
- Push: Click "..." menu and select "Push"
VS Code Git Commands
# Pull latest changes
git pull origin main
# Create new branch
git checkout -b feature/new-feature
# Switch branches
git checkout main
# Check status
git status
# View commit history
git log --onelinePart 5: Custom Domain (Optional)
Add Custom Domain to Vercel
- Go to your Vercel dashboard
- Select your project
- Go to Settings > Domains
- Add your custom domain
- Update your domain's DNS settings as instructed
Example DNS Settings
Type: CNAME
Name: www
Value: cname.vercel-dns.com
Type: A
Name: @
Value: 76.76.19.61Part 6: Monitoring and Analytics
Vercel Analytics
- Go to your project dashboard
- Click "Analytics" tab
- Enable Web Analytics for visitor insights
Performance Monitoring
- Functions tab: Monitor API performance
- Deployments tab: View build logs and deployment history
- Settings tab: Configure notifications
Part 7: Troubleshooting Common Issues
Build Errors
# Check build locally first
npm run build
# If build fails, check the error logs in Vercel dashboard
# Common fixes:
npm install --save-dev @types/react @types/nodeEnvironment Variables
# Add to Vercel dashboard under Settings > Environment Variables
NEXT_PUBLIC_SITE_URL=https://yoursite.vercel.appCustom 404 Page
Create app/not-found.tsx:
export default function NotFound() {
return (
<div className="min-h-screen flex items-center justify-center">
<div className="text-center">
<h1 className="text-4xl font-bold mb-4">404 - Page Not Found</h1>
<p className="text-muted-foreground">The page you're looking for doesn't exist.</p>
</div>
</div>
)
}Part 8: Final Checklist
✅ Repository Setup
- Code pushed to GitHub
- .gitignore configured
- Repository is public
✅ Vercel Deployment
- Project imported to Vercel
- Build successful
- Live URL working
- Auto-deployment configured
✅ Testing
- All pages load correctly
- Mobile responsive
- Images display properly
- Contact form works
- Navigation functions
✅ Optional Enhancements
- Custom domain configured
- Analytics enabled
- SEO optimized
- Performance optimized
Congratulations!
Your graphic design portfolio is now:
- ✅ Live on the internet
- ✅ Automatically deployed from GitHub
- ✅ Professionally hosted on Vercel
- ✅ Mobile responsive and fast
- ✅ Ready for clients to view
Your URLs:
- GitHub Repository:
https://github.com/YOUR_USERNAME/graphic-design-portfolio - Live Website:
https://graphic-design-portfolio-username.vercel.app
Share your portfolio URL with clients and start showcasing your amazing work! 🚀
246d ago
