My Personal Website

Basically, Im VueJS Developer on my previous company. Now Im personally learning new framework front-end framework which are React, NextJS.

For this personal website project will be my portfolio to be publish on public repository.

Frameworks & Technologies:

Front-End

• React,
• NextJS,
• TypeScript,

Back-End (Admin Panel) In the future version

• NodeJS,
• ExpressJS,
• TypeScript

Cloud Services:

• Google Cloud Deployments CI/CD via Github Actions

---

Current Features of this project repository

• Static "About Me" Section
• Static "Tech Stacks and Experience" Section
• Responsive navigation bar with animation, compatible with various screen sizes
• One-page scrolling with animation, designed for desktop users
• View resume functionality a redirection to my Google Drive PDF resume
• Integrated CI/CD pipeline for seamless deployment to a GCP VM (Ubuntu) with Nginx
• Default dark mode theme for a modern look
• Added SEO, Metadata Open graph metrics implemented to my personal website which makes my personal website appears in any search engines.
• Project Section for lightmode/darkmode theme allowing to showcase my previous projects.
• Adjustment on deployment of pipeline added production environment and env variables/values. https://github.com/eksqtr/my-personal-website-react/deployments
• Added URL Fragment Navigation that navigates the user when entering to the site with url query params to specific tab and job experience information e.g. https://eubiejay.dev/#tech-stack?tab=experience&job=0 it will scroll down to tech section and show the experience tab job id 0.
• Added hashtag#url auto changing when scrolling between sections.
• Downloadable Resume with Toast notification designed for Dark/Light Mode Theme.
• Say Hi button allowing the user to send direct email.

Additional Features of my personal website (https://eubiejay.dev)

• Personal custom domain (eubiejay.dev) with a professional email (clemente@eubiejay.dev) routed to my Gmail account—cost-effective and without additional email services!
• Cloudflare services and SSL implementation to enforce HTTPS

---

How to Run Locally

Prerequisites

• Node.js 18+: Make sure Node.js is installed. Node.js Download
• Git: Ensure Git is installed. Git Download
• Text Editor: (e.g., VS Code, Sublime Text, etc.)

Here are the Steps:

Clone the Repository

git clone https://github.com/eksqtr/my-personal-website-react.git
cd my-personal-website-react

Set Up Environment Variables

Create a .env.development file in the root directory and add the following:

APP_URL=http://localhost:3000
APP_TITLE=Your Site Title
APP_AUTHOR=Your Name
APP_DESCRIPTION=A short description of your website.
APP_METADATA_KEYWORDS=keyword1, keyword2, keyword3
APP_METADATA_OPENGRAPH_SITENAME=Your Site Name
NEXT_PUBLIC_AUTHOR_EMAIL_ADDRESS=your.email@example.com
NEXT_PUBLIC_DOWNLOADABLE_URL_RESUME=https://your-resume-direct-download-link.com
NEXT_PUBLIC_VIEW_URL_RESUME=https://your-resume-view-link.com

Install Dependencies

npm install

Run the Development ServerRun the Development Server

npm run dev

Your website should now be accessible at http://localhost:3000.

Operating System Specific Instructions

Windows

Follow the steps above using Git Bash or Command Prompt. Use npm run dev to start the server and open http://localhost:3000 in your browser.

Linux

Use your terminal to run the commands. Ensure Node.js is installed via package manager or direct download.

Start the server with npm run dev and visit http://localhost:3000.

macOS

Use your terminal to clone the repository and install dependencies. If needed, install Node.js using Homebrew (brew install node).

Run the server using npm run dev and navigate to http://localhost:3000.

Production Build (Optional)

If you want to build the project for production, use:

npm run build

But don't forget to create .env or .env.production file along with the required variables before running it for production

To start the production server:

npm start