https://github.com/nexusdevv/batuhaneroglu.vercel.app
Remastered own portfolio made with Next.js
https://github.com/nexusdevv/batuhaneroglu.vercel.app
hydra nextjs nextjs-template portfolio portfolio-website vercel website website-template
Last synced: 3 months ago
JSON representation
Remastered own portfolio made with Next.js
- Host: GitHub
- URL: https://github.com/nexusdevv/batuhaneroglu.vercel.app
- Owner: nexusdevv
- License: gpl-3.0
- Created: 2025-03-08T22:37:40.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-03-17T21:22:14.000Z (3 months ago)
- Last Synced: 2025-03-17T22:22:55.968Z (3 months ago)
- Topics: hydra, nextjs, nextjs-template, portfolio, portfolio-website, vercel, website, website-template
- Language: TypeScript
- Homepage: https://batuhaneroglu.vercel.app
- Size: 1.24 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Next.js Portfolio & Blog
A modern, responsive personal portfolio and blog website built with Next.js 14 and Tailwind CSS. This minimalist design showcases my work, skills, and blog articles with elegant animations and a clean interface.
## Features
- **Responsive Design**: Fully responsive layout that works on all devices
- **Modern UI**: Clean, minimalist interface with smooth animations
- **Portfolio Section**: Showcase your projects and skills
- **Blog Platform**: Share your thoughts and expertise with a built-in blog
- **About Page**: Tell visitors about yourself and your background
- **Gallery**: Display visual content in an elegant gallery format
- **Social Media Integration**: Connect with GitHub and Instagram
- **Animations**: Beautiful page transitions and content animations using Framer Motion
- **Performance Optimized**: Fast loading and rendering
## Technologies Used
- **Framework**: Next.js 14
- **Styling**: Tailwind CSS
- **Animations**: Framer Motion
- **State Management**: React Hooks
- **Content Rendering**: Markdown for blog posts
- **Icons**: SVG icons
## Getting Started
### Prerequisites
- Node.js 16.8.0 or later
- npm or yarn
### Installation
1. Clone the repository:
```bash
git clone https://github.com/nexusdevv/next-app-v3.git
```
2. Navigate to the project directory:
```bash
cd next-app-v3
```
3. Install dependencies:
```bash
npm install
# or
yarn install
```
4. Run the development server:
```bash
npm run dev
# or
yarn dev
```
5. Open [http://localhost:3000](http://localhost:3000) in your browser to see the result.
## Project Structure
```
next-app-v3/
├── app/
│ ├── about/ # About page
│ ├── blog/ # Blog pages
│ │ ├── [slug]/ # Individual blog post pages
│ │ └── page.tsx # Blog list page
│ ├── components/ # Reusable components
│ │ ├── animations/ # Animation components
│ │ └── ...
│ ├── context/ # React context providers
│ ├── data/ # Static data (blog posts, etc.)
│ ├── gallery/ # Gallery page
│ ├── lib/ # Utility functions
│ ├── portfolio/ # Portfolio pages
│ ├── favicon.ico # Site favicon
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page
├── public/ # Static assets
├── .gitignore
├── next.config.js
├── package.json
├── README.md
└── tailwind.config.js
```
## Pages
- **Home**: Introduction and recent works
- **Portfolio**: Showcase of projects
- **Blog**: Articles on web development and technology
- **Gallery**: Visual content display
- **About**: Personal information and skills
## Blog Features
- Markdown support for rich content
- Categories for organization
- Reading time estimation
- Related posts
- Publish dates
## Customization
### Social Media Links
Edit the footer component to update your social media links:
```tsx
// Update these links with your profiles
GitHub
Instagram
```
### Blog Content
Blog posts are stored in JSON format in `app/data/blog-en.json`. Add new posts by appending to this file:
```json
{
"slug": "your-post-slug",
"title": "Your Post Title",
"date": "YYYY-MM-DD",
"excerpt": "Brief description of your post",
"category": "Category",
"author": "Your Name",
"readTime": "X min read",
"content": "# Your Markdown Content Here"
}
```
## Deployment
This project can be easily deployed to Vercel, Netlify, or any other hosting platform that supports Next.js:
```bash
# For Vercel
vercel
# For Netlify
netlify deploy
```
## License
This project is licensed under the GPL-3.0 License - see the LICENSE file for details.
## Acknowledgments
- Next.js team for the amazing framework
- Tailwind CSS for the utility-first CSS framework
- Framer Motion for the animation library