🎨 Complete Portfolio Redesign: Modern Dark Theme + Admin Dashboard + Enhanced Markdown Editor
✨ New Features: - Complete dark theme redesign with glassmorphism effects - Responsive admin dashboard with collapsible projects list - Enhanced markdown editor with live preview - Project image upload functionality - Improved project management (create, edit, delete, publish/unpublish) - Slug-based project URLs - Legal pages (Impressum, Privacy Policy) - Modern animations with Framer Motion 🔧 Improvements: - Fixed hydration errors with mounted state - Enhanced UI/UX with better spacing and proportions - Improved markdown rendering with custom components - Better project image placeholders with initials - Conditional rendering for GitHub/Live Demo links - Enhanced toolbar with categorized quick actions - Responsive grid layout for admin dashboard 📱 Technical: - Next.js 15 + TypeScript + Tailwind CSS - Local storage for project persistence - Optimized performance and responsive design
This commit is contained in:
Dennis Konkol
258
README.md
258
README.md
@@ -1,248 +1,30 @@
|
||||
# Dennis Konkol's Portfolio Website
|
||||
# Dennis Konkol Portfolio - Modern Dark Theme
|
||||
|
||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [
|
||||
`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, clone the repository:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/Denshooter/my_portfolio.git
|
||||
cd my_portfolio
|
||||
```
|
||||
|
||||
Then, install the dependencies:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
# or
|
||||
yarn install
|
||||
# or
|
||||
pnpm install
|
||||
# or
|
||||
bun install
|
||||
```
|
||||
|
||||
### Development
|
||||
|
||||
To run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
|
||||
### Build
|
||||
|
||||
To build the application for production:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
# or
|
||||
yarn build
|
||||
# or
|
||||
pnpm build
|
||||
# or
|
||||
bun build
|
||||
```
|
||||
|
||||
### Start
|
||||
|
||||
To start the application in production mode:
|
||||
|
||||
```bash
|
||||
npm run start
|
||||
# or
|
||||
yarn start
|
||||
# or
|
||||
pnpm start
|
||||
# or
|
||||
bun start
|
||||
```
|
||||
|
||||
### Lint
|
||||
|
||||
To run the linter:
|
||||
|
||||
```bash
|
||||
npm run lint
|
||||
# or
|
||||
yarn lint
|
||||
# or
|
||||
pnpm lint
|
||||
# or
|
||||
bun lint
|
||||
```
|
||||
|
||||
## Project Structure
|
||||
|
||||
```plaintext
|
||||
my_portfolio/
|
||||
├── .github/
|
||||
│ └── workflows/
|
||||
│ └── main.yml
|
||||
├── app/
|
||||
│ ├── api/
|
||||
│ │ ├── email/
|
||||
│ │ │ └── route.tsx
|
||||
│ │ ├── fetchAllProjects/
|
||||
│ │ │ └── route.tsx
|
||||
│ │ ├── fetchImage/
|
||||
│ │ │ └── route.tsx
|
||||
│ │ ├── fetchProject/
|
||||
│ │ │ └── route.tsx
|
||||
│ │
|
||||
|
||||
i mean to give more examples how it was built what it features and how it works not how to run it, but more explanations about the project and how its deployed etc.
|
||||
|
||||
Got it! Here's an updated README.md that provides more detailed explanations about the project, its features, how it was built, and how it is deployed:
|
||||
|
||||
```md
|
||||
# Dennis Konkol's Portfolio
|
||||
|
||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). It showcases my projects, provides a way to contact me, and includes various other features.
|
||||
Ein modernes, responsives Portfolio mit dunklem Design, coolen Animationen und einem integrierten Markdown-Editor.
|
||||
|
||||
## Features
|
||||
|
||||
- **Responsive Design**: The portfolio is fully responsive and works on all devices.
|
||||
- **Project Showcase**: Displays a list of projects fetched from a Ghost CMS.
|
||||
- **Contact Form**: Allows visitors to send me messages via email.
|
||||
- **SEO Optimized**: Includes metadata and Open Graph tags for better SEO.
|
||||
- **Dynamic Sitemap**: Automatically generates a sitemap for better search engine indexing.
|
||||
- **Cookie Consent**: Includes a cookie consent banner to comply with GDPR.
|
||||
- **Zero-Downtime Deployment**: Uses Docker and GitHub Actions for seamless deployments to a Raspberry Pi.
|
||||
- **Dunkles Theme** mit Glassmorphism-Effekten
|
||||
- **Responsive Design** für alle Geräte
|
||||
- **Smooth Animationen** mit Framer Motion
|
||||
- **Markdown-Editor** für Projekte
|
||||
- **Admin Dashboard** für Content-Management
|
||||
|
||||
## Project Structure
|
||||
## Technologien
|
||||
|
||||
```plaintext
|
||||
my_portfolio/
|
||||
├── .github/
|
||||
│ └── workflows/
|
||||
│ └── main.yml
|
||||
├── app/
|
||||
│ ├── api/
|
||||
│ │ ├── email/
|
||||
│ │ │ └── route.tsx
|
||||
│ │ ├── fetchAllProjects/
|
||||
│ │ │ └── route.tsx
|
||||
│ │ ├── fetchImage/
|
||||
│ │ │ └── route.tsx
|
||||
│ │ ├── fetchProject/
|
||||
│ │ │ └── route.tsx
|
||||
│ │ ├── og/
|
||||
│ │ │ └── route.tsx
|
||||
│ │ ├── projects/
|
||||
│ │ │ └── route.tsx
|
||||
│ │ ├── sitemap/
|
||||
│ │ │ └── route.tsx
|
||||
│ ├── components/
|
||||
│ │ ├── ClientCookieConsentBanner.tsx
|
||||
│ │ ├── Contact.tsx
|
||||
│ │ ├── CookieConsentBanner.tsx
|
||||
│ │ ├── Footer.tsx
|
||||
│ │ ├── Footer_Back.tsx
|
||||
│ │ ├── Header.tsx
|
||||
│ │ ├── Hero.tsx
|
||||
│ │ ├── Projects.tsx
|
||||
│ ├── styles/
|
||||
│ │ └── ghostContent.css
|
||||
│ ├── globals.css
|
||||
│ ├── layout.tsx
|
||||
│ ├── metadata.tsx
|
||||
│ ├── not-found.tsx
|
||||
│ ├── page.tsx
|
||||
│ ├── privacy-policy/
|
||||
│ │ └── page.tsx
|
||||
│ ├── legal-notice/
|
||||
│ │ └── page.tsx
|
||||
│ ├── projects/
|
||||
│ │ └── [slug]/
|
||||
│ │ └── page.tsx
|
||||
│ ├── sitemap.xml/
|
||||
│ │ └── route.tsx
|
||||
│ ├── utils/
|
||||
│ │ └── send-email.tsx
|
||||
├── public/
|
||||
│ ├── icons/
|
||||
│ │ ├── github.svg
|
||||
│ │ ├── linkedin.svg
|
||||
│ ├── images/
|
||||
│ ├── robots.txt
|
||||
├── Dockerfile
|
||||
├── README.md
|
||||
├── next.config.ts
|
||||
├── package.json
|
||||
├── tailwind.config.ts
|
||||
├── tsconfig.json
|
||||
└── eslint.config.mjs
|
||||
```
|
||||
- Next.js 15 mit App Router
|
||||
- TypeScript für Type Safety
|
||||
- Tailwind CSS für Styling
|
||||
- Framer Motion für Animationen
|
||||
- React Markdown für Content
|
||||
|
||||
## How It Works
|
||||
## Installation
|
||||
|
||||
### Project Showcase
|
||||
npm install
|
||||
npm run dev
|
||||
|
||||
Projects are fetched from a Ghost CMS using the Ghost Content API. The API routes in the `app/api` directory handle
|
||||
fetching all projects, fetching a single project by slug, and fetching images.
|
||||
## Verwendung
|
||||
|
||||
### Contact Form
|
||||
|
||||
The contact form allows visitors to send me messages via email. It uses the `nodemailer` package to send emails through
|
||||
an SMTP server. The API route `app/api/email/route.tsx` handles the email sending logic.
|
||||
|
||||
### SEO and Open Graph
|
||||
|
||||
The project includes metadata and Open Graph tags to improve SEO. The `app/metadata.tsx` file defines the metadata for
|
||||
the site. The `app/api/og/route.tsx` file generates dynamic Open Graph images.
|
||||
|
||||
### Dynamic Sitemap
|
||||
|
||||
A dynamic sitemap is generated to help search engines index the site. The `app/api/sitemap/route.tsx` file generates the
|
||||
sitemap, and the `app/sitemap.xml/route.tsx` file serves it.
|
||||
|
||||
### Cookie Consent
|
||||
|
||||
A cookie consent banner is included to comply with GDPR. The `app/components/CookieConsentBanner.tsx` and
|
||||
`app/components/ClientCookieConsentBanner.tsx` components handle the display and logic of the cookie consent banner.
|
||||
|
||||
### Zero-Downtime Deployment
|
||||
|
||||
The project uses Docker and GitHub Actions for zero-downtime deployments to a Raspberry Pi. The
|
||||
`.github/workflows/main.yml` file defines the GitHub Actions workflow for deploying the project. The `Dockerfile`
|
||||
defines the Docker image for the project.
|
||||
|
||||
## Deployment
|
||||
|
||||
The project is deployed using Docker and GitHub Actions. The GitHub Actions workflow is defined in
|
||||
`.github/workflows/main.yml`. It builds the Docker image and deploys it to a Raspberry Pi with zero downtime.
|
||||
|
||||
### Steps to Deploy
|
||||
|
||||
1. **Set Up Raspberry Pi**: Ensure Docker is installed on your Raspberry Pi.
|
||||
2. **Configure GitHub Secrets**: Add the necessary secrets (e.g., `GHOST_API_KEY`, `MY_EMAIL`, `MY_PASSWORD`) to your
|
||||
GitHub repository.
|
||||
3. **Push to GitHub**: Push your changes to the `production`, `dev`, or `preview` branches to trigger the deployment
|
||||
workflow.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions
|
||||
are welcome!
|
||||
|
||||
## Author
|
||||
|
||||
- **Dennis Konkol** - [GitHub](https://github.com/Denshooter) | [LinkedIn](https://linkedin.com/in/dkonkol)
|
||||
- `/` - Homepage
|
||||
- `/projects` - Alle Projekte
|
||||
- `/admin` - Admin Dashboard mit Markdown-Editor
|
||||
|
||||
Reference in New Issue
Block a user