trajano/portfolio

trajano-portfolio

镜像概述和主要用途

trajano-portfolio是Archimedes Trajano的个人作品集网站，用于展示其项目经历和专业技能。该网站采用VueJS前端框架、webpack构建工具和MaterializeCSS UI库开发，提供现代化的用户界面和响应式设计。

核心功能和特性

• 技术栈组合：使用VueJS构建交互界面，结合webpack进行项目打包，通过MaterializeCSS实现响应式布局和美观的UI组件
• 自动化构建：通过npm命令自动执行webpack构建流程，生成生产环境代码至dist目录
• 开发热重载：支持本地开发服务器，配置实时热重载功能，实现代码变更时的自动页面刷新

使用场景和适用范围

适用于开发者个人作品集展示场景，可作为个人技术能力与项目经验的在线展示平台，帮助潜在雇主或合作伙伴快速了解个人专业背景。

使用方法和配置说明

安装与构建

1. 安装依赖并构建
   执行以下命令安装项目依赖并构建生产环境代码：

   bash
   npm install
   

   该命令会自动运行webpack --mode=production，将构建结果输出到dist文件夹。

开发模式

1. 启动本地开发服务器
   执行以下命令启动开发服务器：

   bash
   npm start
   

   服务器将运行在http://localhost:8080，并在应用代码发生变化时自动刷新页面，便于实时开发调试。

Docker部署示例

Dockerfile配置

dockerfile
# 构建阶段
FROM docker.xuanyuan.run/node:16-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 运行阶段
FROM docker.xuanyuan.run/nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

构建并运行镜像

bash
# 构建镜像
docker build -t trajano-portfolio .

# 运行容器
docker run -d -p 80:80 --name portfolio-site docker.xuanyuan.run/trajano-portfolio

访问http://localhost即可查看部署的作品集网站。