A modern, responsive personal portfolio website showcasing my projects, skills, and experience as a Software Developer. Built with Next.js 14, React 18, Tailwind CSS, and Jotai for state management.
- Responsive Design - Fully responsive layout that works seamlessly on desktop, tablet, and mobile devices
- Dark Mode Support - Toggle between light and dark themes for comfortable viewing
- Interactive Navigation - Smooth scrolling navigation with mobile burger menu
- Projects Showcase - Detailed project cards with links to live demos and GitHub repositories
- Skills Section - Organized display of technical skills across languages, frameworks, databases, and tools
- About Me - Personal story and professional background
- Social Links - Quick access to GitHub, LinkedIn, and other social platforms
- Resume Access - Direct link to downloadable resume
- Next.js 14 - React framework with App Router
- React 18 - UI library
- Tailwind CSS - Utility-first CSS framework
- Jotai - State management
- ESLint - Code linting
- PostCSS - CSS processing
- Autoprefixer - CSS vendor prefixes
src/
├── app/ # Next.js app directory
│ ├── layout.js # Root layout
│ ├── page.js # Home page
│ └── globals.css # Global styles
├── components/ # React components
│ ├── About/ # About section
│ ├── Hero/ # Hero section with social icons
│ ├── Nav/ # Navigation components
│ ├── Projects/ # Projects showcase
│ └── Skills/ # Skills display
├── store.js # Jotai state management
└── util/ # Utility functions
- Node.js (v16 or higher)
- npm, yarn, pnpm, or bun
- Clone the repository:
git clone https://github.com/benakdev/my_portfolio_v1.git
cd my_portfolio_v1- Install dependencies:
npm install
# or
yarn install
# or
pnpm install- Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev- Open http://localhost:3000 in your browser to see the portfolio.
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLint
To customize this portfolio for your own use:
- Update personal information in
src/components/Hero/Hero.jsx - Modify the About section in
src/components/About/About.jsx - Update projects in
src/components/Projects/projectsList.js - Update skills in
src/components/Skills/skillsList.js - Replace social media links in
src/components/Hero/SocialIcons.jsx - Update avatar/images in the
public/directory
- Workout Tracker Web App - Full-stack fitness tracking application with Next.js, MongoDB, and Clerk Auth
- Events Ticketing Management (Tickex) - Django-based event management platform with PostgreSQL
- Fragments Full Stack App - AWS-deployed microservice with Next.js frontend
- Metropolitan Museum Gallery - Next.js app for browsing and saving museum artifacts
- Email - benakdev@gmail.com
- LinkedIn - Ben Akram
- GitHub - @benakram4
This project is open source and available under the MIT License.
- Built with Next.js
- Styled with Tailwind CSS
- State management with Jotai
- Icons and images from various open-source resources
⭐ If you found this portfolio helpful, please consider giving it a star!