Eric Philippe - Photo/DevPortfolio

This repository contains the source code of my portfolio website. It includes my DevPortfolio and my PhotoPortfolio, all in one !

Table of Contents

• Eric Philippe - Photo/DevPortfolio
  • Table of Contents
  • About The Project
    • Markdown Parser
    • DevPortfolio
    • PhotoPortfolio
  • Updates
  • What's Next
  • Technologies
  • Continuous Integration
    • GitHub Actions
    • GitHub Pages
  • Getting Started
    • Node
      • Prerequisites
      • Installation
      • Usage
    • Docker
      • Prerequisites
      • Installation
    • Usage
  • Authors
  • License

About The Project

I wanted to put all my creative work in one place, and also make the process to keep it up to date easier. I also wanted to focus for once only and fully on the Front-End part of the website.

I also tried as my best to make the website fast and light, so that it can be accessible to everyone, keeping every files under 1MB.

I used knip to remove unused files and node modules from the production build.

Markdown Parser 📄

The more I progressed in the development of this website, the more I realized that I needed a way to write my content in a more flexible way than HTML. This means that when I'm ready, I can concentrate on writing the content without having to worry about the layout.

After several iterations, I ended up writing my own Markdown Parser first in Python, then Julia. I chose Julia because it is a language that I wanted to learn, and it is also very fast.

Checkout the repository here

At the end, you can find all the markdown files in the _projects folder.

DevPortfolio 💻

This portfolio is a showcase of my work as a developer. It includes my projects, my skills, and my resume.

Projects 📁

The projects are written in markdown, and are located in the _projects folder. The parser will generate the content of the projects section from these files, during the CI/CD pipeline.

You can click on a project to see its details.

Skills 🧠

You'll then find a section with my skills. Nothing fancy here, just a list of skills with discrete animations.

About Me 🙋‍♂️

The about me section references my academic and career path, and also my resume. You can download it by clicking on the button.

Contact 📧

The contact section is a simple form that allows you to send me a message.

PhotoPortfolio 📷

This portfolio is a showcase of my work as a photographer. It includes my setup, my 3D models, and my albums.

Setup 📷

The setup section is a list of the equipment I use to take my photos. I used Three.js to render the 3D model of my camera. (Fancy, right ? :D)

You have also under it, a list of all the software I use to edit my photos.

Albums 📸

The Album section is a list of all my albums I'm proud of. You can filter the albums per year, and then consult them by clicking on them

Updates

Every time I update the website, I keep up to date the CHANGELOG.md file. You can check it out to see the latest updates.

Current version: 1.1.0

What's Next

The website is now completed ! I've added everything I wanted to add. There are a few things I'd like to do in the future, but it's out of the scope of this project.

• I'd like to make the website in English and French, but with the way I write the markdown files, it's not possible. I'll have to find a way to make it work.

• Redo the style of the Album Consultation Page. I'm not fully satisfied whith the way the Portrait photos are displayed.

... And that's it ! I'm pretty happy with the result, and I'm glad I've done it.

Technologies 📡

Nom	Description	Version
Node	Runtime	21.5.0
React	Front-End Framework	18.2.0
Vite	Bundler	5.0.8
TailwindCSS	CSS Framework	3.4.0
TypeScript	Language	5.2.2
Three.js	3D Library	0.160.0
Julia	Markdown Parser	1.10.0

Continuous Integration

GitHub Actions

I use GitHub Actions to build the website and publish it on GitHub Pages. The CI/CD pipeline is defined in the ci-cd.yml file.

GitHub Pages

The website is hosted on GitHub Pages. The configuration is defined in the vite.config.ts file.

Getting Started

Node 🟩

Prerequisites

• Node.js
• Julia (Optional, only if you want to use the Julia Markdown Parser)

Installation

1. Clone the repo

   git clone https://github.com/Eric-Philippe/portfolio.git

2. Install NPM packages

    npm install

   2.1 Install Julia packages (Optional)

    julia --project=. -e 'using Pkg; Pkg.instantiate()'

Usage

1. Start the development server

   npm run dev

The website is now available at http://localhost:5173/portfolio

2. Build the website

   npm run build

Docker 🐋

Prerequisites

• Docker

Installation

1. Clone the repo

   git clone https://github.com/Eric-Philippe/portfolio.git

2. Build the docker image

   docker build -t portfolio .

3. Run the docker image

   docker run -p 5173:5173 portfolio

   The website is now available at http://localhost:5173/portfolio

Authors

• Eric Philippe - Eric-Philippe

License

The portfolio is distributed under the GNU AFFERO GENERAL PUBLIC LICENSE. See LICENSE for more information.

It allows you to use, modify and distribute the code, as long as you make your modifications available to the public.