You stumbled onto my personal portoflio, have a look around!!
https://brian-trang-portfolio.netlify.app/
This is the Lighthouse Google report showcasing Performance 🚀, Accessibility ♿️, Best practices ✅, and SEO 🔍.
Contains About Me, Experience, Skills, Projects, Contact, Resume, Email, Footer
also contains bad humour!
Technology | Description | Link |
---|---|---|
Node.js | Server-side JavaScript runtime | Node.js |
NPM | Node.js Package Manager | NPM |
Font Awesome | Icon set and toolkit | Font Awesome |
Font Awesome (React) | Font Awesome for React components | Font Awesome (React) |
EmailJS | Email delivery service | EmailJS |
EmailJS (Com) | Email service for developers | EmailJS (Com) |
React | JavaScript library for building UIs | React |
React DOM | React rendering for the DOM | |
react-router-dom | Declarative routing for React.js | react-router-dom |
react-router-hash-link | Hash link navigation for React Router | react-router-hash-link |
animate.css | Library for animations | animate.css |
react-on-screen | React component for on-screen events | react-on-screen |
bootstrap | Front-end framework | bootstrap |
install | Package manager for JavaScript | install |
React Icons | SVG icon library for React | React Icons |
React Simple Typewriter | React component for typewriter effect | React Simple Typewriter |
Semantic UI CSS | Front-end framework | Semantic UI CSS |
Semantic UI React | React integration for Semantic UI | Semantic UI React |
SweetAlert2 | Alert library for JavaScript | SweetAlert2 |
Vite (Plugin React) | Vite plugin for React apps | Vite (Plugin React) |
ESLint | JavaScript linter | ESLint |
ESLint (Plugin React) | ESLint plugin for React | ESLint (Plugin React) |
ESLint (Plugin React Hooks) | ESLint plugin for React Hooks | ESLint (Plugin React Hooks) |
ESLint (Plugin React Refresh) | ESLint plugin for React Refresh | ESLint (Plugin React Refresh) |
Vite | Frontend build tool | Vite |
Netlify | Web hosting and automation platform | Netlify |
Users can clone the code and run npm install to install the dependencies
npm install
Afterwards users can run the command npm run build
which will run the Vite build process which will bundle the React source code
npm run build
Afterwards users can run the command npm run dev
which will executes the vite command, which starts the development server provided by Vite
and allows users to run the code on their local host
npm run dev
This sequence ensures that your client-side code is built before starting the server.
Otherwise this app requires use of the Vite application to be used as well as the following installations.
Vite
`npm create vite@latest`
EmailJS
npm i emailjs
EmailJS-Com
npm i emailjs-com
React Icons
npm i react-icons
React Simple Typewriter
npm i react-simple-typewriter
Bootstrap
npm i bootstrap
React-boostrap
npm i react-bootstrap
Animate.css
npm i animate.css
React on screen
npm i react-on-screen
ESLint
npm i eslint
ESLint Plugin React
npm i eslint-plugin-react
Netlify CLI
npm i netlify-cli -g
React DOM
npm i react-dom
Package.json dependencies ⚙️
"@fortawesome/free-brands-svg-icons": "^6.4.2",
"@fortawesome/react-fontawesome": "^0.2.0",
"devicon": "^2.15.1",
"bootstrap": "^5.3.2",
"emailjs": "^4.0.3",
"emailjs-com": "^3.2.0",
"install": "^0.13.0",
"react": "^18.2.0",
"react-bootstrap": "^2.9.2",
"react-dom": "^18.2.0",
"react-icons": "^4.11.0",
"react-simple-typewriter": "^5.0.1",
"react-router-dom": "^6.3.0",
"react-router-hash-link": "^2.4.3",
"semantic-ui-css": "^2.5.0",
"semantic-ui-react": "^2.1.4",
"sweetalert2": "^11.7.32",
"animate.css": "^4.1.1",
"react-on-screen": "^2.1.1"
Have a look around!! Link to deployed application https://brian-trang-portfolio.netlify.app
Screenshot of Email Uses EmailJS to send emails to Brian.trang9@gmail.com
GIF Showing npm run dev
as well as the Header , About , Skills, Experience, Projects, Nav bar functionality
as well as Email functionality
This project is licensed under MIT
Brian Trang
With thanks to USYD
N/A
If you have any questions about this project, please contact me directly at brian.trang9@gmail.com. Feel free to view more of my projects at https://github.com/MakeRedundant.