feat: improve about page layout with centered heading and vertical alignment
This commit is contained in:
parent
7a90aa3492
commit
24e8bfa245
3 changed files with 197 additions and 7 deletions
145
README.html
Normal file
145
README.html
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Next.js Portfolio Template with Docker</title>
|
||||
<style>
|
||||
body {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
line-height: 1.6;
|
||||
}
|
||||
pre {
|
||||
background: #f6f8fa;
|
||||
padding: 16px;
|
||||
border-radius: 6px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
code {
|
||||
font-family: monospace;
|
||||
background: #f6f8fa;
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Next.js Portfolio Template with Docker</h1>
|
||||
|
||||
<p>Modern portfolio website template built with Next.js, Tailwind CSS, and Docker.</p>
|
||||
|
||||
<h2>Features</h2>
|
||||
<ul>
|
||||
<li>Next.js 14+ with App Router</li>
|
||||
<li>Tailwind CSS for styling</li>
|
||||
<li>Docker multi-stage builds</li>
|
||||
<li>PNPM package manager</li>
|
||||
<li>Production-ready configuration</li>
|
||||
<li>Contact form component</li>
|
||||
<li>Responsive design</li>
|
||||
</ul>
|
||||
|
||||
<h2>Core Dependencies</h2>
|
||||
<ul>
|
||||
<li>Next.js 14 (App Router)</li>
|
||||
<li>React 18</li>
|
||||
<li>Tailwind CSS 3</li>
|
||||
<li>PNPM 8</li>
|
||||
<li>TypeScript 5</li>
|
||||
<li>Lucide React Icons</li>
|
||||
<li>PostCSS 8</li>
|
||||
</ul>
|
||||
|
||||
<h2>Configuration Files</h2>
|
||||
|
||||
<h3>Git Configuration</h3>
|
||||
<h4>.gitignore</h4>
|
||||
<pre><code>node_modules/
|
||||
.next/
|
||||
.env*
|
||||
.DS_Store
|
||||
*.pem
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.pnpm-debug.log*
|
||||
.vercel</code></pre>
|
||||
|
||||
<h3>Docker Configuration</h3>
|
||||
<h4>.dockerignore</h4>
|
||||
<pre><code>node_modules
|
||||
.next
|
||||
.git
|
||||
.env*</code></pre>
|
||||
|
||||
<h4>docker-compose.yml (Production)</h4>
|
||||
<pre><code>version: '3.8'
|
||||
services:
|
||||
web:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile
|
||||
ports:
|
||||
- "805:805"
|
||||
environment:
|
||||
- NODE_ENV=production
|
||||
- PORT=805
|
||||
restart: unless-stopped</code></pre>
|
||||
|
||||
<h4>docker-compose.dev.yml (Development)</h4>
|
||||
<pre><code>version: '3.8'
|
||||
services:
|
||||
web-dev:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile.dev
|
||||
ports:
|
||||
- "3000:3000"
|
||||
volumes:
|
||||
- .:/app
|
||||
- /app/node_modules
|
||||
- /app/.next
|
||||
environment:
|
||||
- NODE_ENV=development
|
||||
command: pnpm dev</code></pre>
|
||||
|
||||
<h2>Development Setup</h2>
|
||||
<ol>
|
||||
<li>Install PNPM: <code>corepack enable && corepack prepare pnpm@latest --activate</code></li>
|
||||
<li>Install dependencies: <code>pnpm install</code></li>
|
||||
<li>Run development server: <code>docker compose -f docker-compose.dev.yml up</code></li>
|
||||
</ol>
|
||||
|
||||
<h2>Production Deployment</h2>
|
||||
<ol>
|
||||
<li>Build and run: <code>docker compose up -d</code></li>
|
||||
<li>Access site on port 805</li>
|
||||
</ol>
|
||||
|
||||
<h2>Portainer Deployment Steps</h2>
|
||||
<ol>
|
||||
<li>Add stack in Portainer</li>
|
||||
<li>Configure GitHub repository access</li>
|
||||
<li>Set compose path to docker-compose.yml</li>
|
||||
<li>Deploy and monitor through Portainer UI</li>
|
||||
</ol>
|
||||
|
||||
<h2>Project Structure</h2>
|
||||
<ul>
|
||||
<li><code>/src/app</code> - Next.js pages and routes</li>
|
||||
<li><code>/src/components</code> - Reusable React components</li>
|
||||
<li><code>/src/styles</code> - Global styles and Tailwind config</li>
|
||||
</ul>
|
||||
|
||||
<h2>Best Practices</h2>
|
||||
<ul>
|
||||
<li>Use PNPM for consistent dependency management</li>
|
||||
<li>Follow Next.js App Router patterns</li>
|
||||
<li>Maintain separate Docker configurations for dev/prod</li>
|
||||
<li>Keep sensitive data in .env files (not in repository)</li>
|
||||
<li>Use multi-stage builds for production</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
44
README.md
Normal file
44
README.md
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
# Next.js Portfolio Template with Docker
|
||||
|
||||
Modern portfolio website template built with Next.js, Tailwind CSS, and Docker.
|
||||
|
||||
## Features
|
||||
- Next.js 14+ with App Router
|
||||
- Tailwind CSS for styling
|
||||
- Docker multi-stage builds
|
||||
- PNPM package manager
|
||||
- Production-ready configuration
|
||||
- Responsive design
|
||||
|
||||
## Core Dependencies
|
||||
- Next.js 14 (App Router)
|
||||
- React 18
|
||||
- Tailwind CSS 3
|
||||
- PNPM 8
|
||||
- TypeScript 5
|
||||
- Lucide React Icons
|
||||
- PostCSS 8
|
||||
|
||||
## Development Setup
|
||||
1. Install PNPM: `corepack enable && corepack prepare pnpm@latest --activate`
|
||||
2. Install dependencies: `pnpm install`
|
||||
3. Run development server: `docker compose -f docker-compose.dev.yml up`
|
||||
|
||||
## Production Deployment
|
||||
1. Build and run: `docker compose up -d`
|
||||
2. Access site on port 805
|
||||
|
||||
## Docker Configurations
|
||||
- `docker-compose.yml` - Production deployment
|
||||
- `docker-compose.dev.yml` - Local development with hot reload
|
||||
- `docker-compose.staging.yml` - Staging environment
|
||||
|
||||
## Portainer Deployment
|
||||
1. Add repository to Portainer
|
||||
2. Use `docker-compose.yml` as compose path
|
||||
3. Deploy stack
|
||||
|
||||
## Structure
|
||||
- `/src/app` - Next.js pages and routes
|
||||
- `/src/components` - Reusable React components
|
||||
- `/src/styles` - Global styles and Tailwind config
|
||||
|
|
@ -4,15 +4,16 @@ export default function AboutPage() {
|
|||
return (
|
||||
<div className="bg-white">
|
||||
<div className="max-w-7xl mx-auto px-6 py-24 lg:px-8">
|
||||
<h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl text-center mb-16">
|
||||
About FINLION
|
||||
</h1>
|
||||
|
||||
<div className="grid grid-cols-1 gap-x-8 gap-y-16 lg:grid-cols-2">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
|
||||
About FINLION
|
||||
</h1>
|
||||
<p className="mt-6 text-lg leading-8 text-gray-600">
|
||||
<div className="flex flex-col justify-center">
|
||||
<p className="text-lg leading-8 text-gray-600 mb-8">
|
||||
A business & financial consulting firm since 1978
|
||||
</p>
|
||||
<div className="mt-8 space-y-6 text-base leading-7 text-gray-600">
|
||||
<div className="space-y-6 text-base leading-7 text-gray-600">
|
||||
<p>
|
||||
FINLION has been serving the needs of individuals and small businesses since 1978. Originally formed as an income tax practice in Los Angeles, California, the firm specializes in business startups, accounting and income taxes, financial management, and personal financial planning.
|
||||
</p>
|
||||
|
|
@ -34,4 +35,4 @@ export default function AboutPage() {
|
|||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue