A modern, responsive portfolio showcasing web development projects and marketing work. Built with Next.js, React, and Tailwind CSS.
Brand Colors:
- Cream:
#F4F0E8(primary background) - Slate:
#435066(primary accent) - Pine:
#365349(secondary accent) - Graphite:
#1F1F1F(text) - Olive:
#768079(muted text)
Typography:
- Headings: DM Serif Display
- Body: DM Sans
- Responsive Design - Mobile-first approach with hamburger menu on mobile, clean text navigation on desktop
- Project Filtering - Filter web development projects by category (Web Applications, Client Websites, Landing Pages)
- About Section - Personal story highlighting "digital marketer who codes" positioning
- Project Results - Quantified outcomes for client work (performance scores, speed improvements, engagement metrics)
- Marketing Portfolio Link - Dedicated Behance banner for marketing and social media work
- Brand-Consistent UI - All components styled with cohesive color palette and hover states
- No Dark Mode - Single, polished theme for consistent user experience
- Node.js (v14 or higher)
- Yarn package manager
# Clone the repository
git clone https://github.com/yourusername/my-react-portfolio.git
# Navigate to project directory
cd my-react-portfolio
# Install dependencies
yarn install
# Start development server
yarn devOpen http://localhost:3000 to view in your browser.
my-react-portfolio/
├── components/
│ ├── About.js # About section component
│ ├── BehanceBanner.js # Marketing portfolio CTA
│ ├── Button.js # Reusable button component
│ ├── Footer.js # Footer with social links
│ ├── Header.js # Navigation header
│ ├── ProjectFilter.js # Category filter buttons
│ ├── ProjectGallery/ # Project grid display
│ ├── Socials.js # Social media links
│ └── WorkCard.js # Individual project card
├── data/
│ └── portfolio-updated.json # Portfolio content data
├── pages/
│ ├── _app.js # App wrapper
│ └── index.js # Main homepage
├── styles/
│ └── globals.css # Global styles and CSS variables
├── tailwind.config.js # Tailwind configuration
└── package.json # Dependencies
- Desktop: Clean text navigation
- Mobile: Hamburger menu with slide-out panel
- Links: Work, About, Creative Work, Case Studies, Contact
- Tech stack tags
- Project results (when available)
- "View Live" button (slate → pine hover)
- GitHub source button (when available)
- Filter by: All, Web Applications, Client Websites, Landing Pages
- Active state: slate background
- Hover state: slate background with cream text
- Gradient: slate to pine
- Links to marketing portfolio
- Cream button with hover effect
- Next.js - React framework
- React - UI library
- Tailwind CSS - Utility-first CSS
- Headless UI - Unstyled accessible components
- GSAP - Animation library
Edit data/portfolio-updated.json to update:
- Personal information
- Project listings
- About section content
- Social media links
- Navigation items
{
"id": "project-1",
"title": "Project Name",
"description": "Tech 1 | Tech 2 | Tech 3",
"imageSrc": "/images/project.jpg",
"url": "https://live-site.com",
"sourceURL": "https://github.com/username/repo",
"showSource": true,
"category": "web-apps",
"results": "85% performance score, 40% faster load time"
}# Build for production
yarn build
# Start production server
yarn startDeploy to Vercel (recommended):
vercel --prodOr deploy to your preferred hosting platform (Netlify, AWS, etc.)
- Lighthouse Score: 85%+ across all metrics
- Mobile-optimized with responsive breakpoints
- Lazy-loaded images
- Optimized fonts and assets
Edit tailwind.config.js and styles/globals.css to update the color palette.
Add entries to data/portfolio-updated.json with required fields.
Component files are in /components - each is self-contained and modular.
Bryan Lordeus - imaginedbybryan@gmail.com
Portfolio: https://bryanlordeus.com
GitHub: @blordeus
LinkedIn: bryanlordeus
This project is open source and available under the MIT License.
- Design inspiration from modern portfolio trends
- DM Sans and DM Serif Display fonts from Google Fonts
- Icons from Heroicons and custom SVGs