HTML, SASS, Font Awesome 5, GatsbyJS, ReactJS, JSON, React Markdown
CSS Grid, Flex, Markdown
This project is this website you’re looking at right now.
This project was originally built in ReactJS, but it lacked routes. This project was moved to GatsbyJS later on. I took it as an opportunity to learn GatsbyJS. Since I had some ReactJS background, it was simple to pick up, and I got the site moved in a day.
”Dav/Devs” stands for Davina develops, to emphasise what I enjoy doing: building (or developing) applications.
I specialise in building websites and web applications. Yellow is the main color of the
PHP when the project calls for the need to use a
PHP-based application like Laravel or CraftCMS.
This project had 3 phases: mockup, templating and development.
I first designed the mockups in Affinity Designer. It’s akin to Adobe’s Illustrator, and a good alternative if you don’t need a subscription-based graphics software. Affinity Photo is their answer to Adobe’s Photoshop.
The template is then developed in
SASS is used over raw
CSS to maintain code readability and maintainability. For repeatable-content like the project cards, I first stored a list of dummy project data into a
JSON file. The cards are then rendered with
jQuery, with the data pulled from the
JSON file. CSS Grid is used to lay out the navbar and main content. It is also used to lay out the project cards too both on the Home page and the Projects page.
Once the template is done, I developed the app in
ReactJS. To maintain code simplicity, I decided to keep it a purely static app; i.e. there is no database attached to it. The project’s images are stored in a public folder; accessible from the app’s root folder. I then used a
JSON file to store the app’s data like the site’s name and author. This is so I can modify the site’s content from a single file. Check out this project’s GitHub repo to see more.
I want to bring attention to the write-up portion of a project’s details page. I’m using a
Markdown renderer (React Markdown) to render the project’s about section.
By the way, need some something to cheer you up? Click the smiley icon to get some laughter in your life! 😁