This document explains how to store the data for the website, along with other relevant and important features.
- Form submission with email validation. Functionality to allow only one submitted form per user.
- Add authentication to the website
- Add automatization of image import
- Update automatization of image import byt creating single export variables for ach image
- Add function to optimize images
- Responsive design
- Animations
- A dashboard with API calls to GitHub (upcoming)
- A centralized way to store all text (upcoming). Potentially creating a specific dashboard for admin to control all text from there.
- A dashboard for admin that will include: 1) RUD functionality for list of contacted people (recruiters and clients); 2) RUD functionality to change the text of the CV. Check this for get requests: https://www.mongodb.com/developer/videos/how-to-integrate-vercel---mongodb-step-by-step/ Also, check this tailwind component for adding new users: https://tailwindui.com/components/application-ui/page-examples/settings-screens
- Make sure each component has a single responsibility (e.g., the
ContactForm
component should only be responsible for the form, not for the animation, the same goes for the others e.g.,AboutMe
component). To that end, I will have one single file with text for each component; another file with animations for each component - Add tests
- Add google analytics
- Add SEO functionality
- Link to a medium article my experience (optional)
- Add loading component for better user experience in contact form
- CHeck alternatives to nodemailer (sendGrid, rapid api )
The images need to be stored in the /public/static/assets
directory.
It is important to note that the images need to be optimized before importing.
Also the filename for images should only be one word and never use '-' except for when you are specifying the size of the image (e.g., rawdev-sm.png). Further down in this documentation we explain the relevance of the image size (e.g., for projects).
In order to optimize images, update the file optimize.config.json
with either
the whole assets directory or single files. In either case, please add the full
directory path (e.g., "public/static/assets/collab-1.webp" - if a single file;
"public/static/assets" - if a full directory). Then, run the following command
in the terminal:
npm run optimize
Once you have optimized the images, run the following script in the terminal to
generate the corresponding import statements in the helper function
exportImages.js
This helper generates import statements, an images
object with all the
imported images, and single export statements for all images located in the
assets directory. This way, the web dev will be able to import in specific
components single images from the same file (i.e., exportImages.js
), also
import all images through exporting the images
object for the use of certain helpers.
The projects are stored in separate yaml files in the
/public/static/about/projects
directory. Each file has the following format:
id: Number
title: String
highlightFeatures: >-
String (no more than 20 words)
date: MMMM DD, YYYY
datetime: YYYY-MM-DD
techStack:
- icon: String (e.g., NEXT)
alt: String (e.g., NextJS)
- icon: String (e.g., NODE)
alt: String (e.g., Node.js)
# - other techSTack
links:
- icon: String (e.g., LINK)
alt: String (e.g., link)
target: _blank --> determines whether the link opens in a new tab or not (if this not an internal link, it should open in a new tab)
href: String (e.g., "http://www.rawdev.io")
# - other links
For the cover image, I am importing the image in the exportImages
helper file
(located in helpers/exportImages.js) so that I can further export it into
wherever I need all images.
The filename for the cover image should be the same as the filename of the yaml file and adding the size of the image at the end of the filename. For example, rawdev-sm.gif. The sizes are: sm, md, lg only (for small, medium, and large screens following the breakpoints of Tailwind).
When importing the image, I import it in uppercase like this "RAWDEV_SM". Follow the same convention for the other cover images for each project.
All you need to do is to add the image with the right naming convention and
import it into the helper exportImages
.
Each yaml file has a techStack array with the icon and the alt property for
the technologies used in each project. The icons are imported in the
exportImages
helper, and the icons themselves are saved in the
public/static/assets
directory.
Whatever naming convention you use to store the icons
in the /public/static/assets
directory, you need to follow the same convention
as in the yaml file with lowercase. For importing the icon into the
exportImages
helper, you need to use uppercase. For example, if you have an
icon called NEXT
in the yaml file, you need to import the icon as NEXT
in
the exportImages
helper and save the file as next.png
in the
public/static/assets
directory.
Each yaml file has a links array with the icon and the alt property for
the external links in each project (i.e., link to the website and github repo). The icons are imported in the
exportImages
helper, and the icons themselves are saved in the
public/static/assets
directory.
Whatever naming convention you use to store the icons
in the /public/static/assets
directory, you need to follow the same convention
as in the yaml file with lowercase. For importing the icon into the
exportImages
helper, you need to use uppercase. For example, if you have an
icon called LINK
in the yaml file, you need to import the icon as LINK
in
the exportImages
helper and save the file as link.svg
in the
public/static/assets
directory.
The way we are yielding the data is by defining the directory dynamically. Specifically, you need to define the name of the component (by adding const component = XXXX.name in each site we are using a helper to yield data from yaml files - e.g., const component = About.name). And pass it as a component parameter in the helper function located in getStaticProps.
If there is a subfolder, the existing function would take the function variable and replace "get" with "", so that you obtain the name of the folder. Thus, the function to get data from a yaml file needs to tie with the folder where the yaml file is (e.g., getProjects -> folder name is 'projects') with 'get' in front of it (e.g., getProjects).
The helpers getSnapshot and getBriefBio work a bit differently. In here, since the files are in the same folder but we need to only yield information from each file separately, we rely on the same method as in the paragraph above to get the filename.
If you need to update the text of the animation, you need to update the following:
let string = "ruben andino web Developer";
const acronym = ["r", "a", "w", "Dev"];
For the string, feel free to add whatever string you want to display and create an acronym from. For the acronym, you need to add the acronym you want to use in the animation. It could be a letter, or a portion of a word.
If you change this, you may need to review the props in the motion tags.
-
When using mongoDB and vercel, it's better to integrate any environment variables through the integration of mongodb directly from vercel.
-
For nodemailer to work with vercel, I had to turn the transport into a promise. See code in the helpers directory.
-
In Splash component, there was a flickering issue when reloading the site. This was happening because the initial animations were not applied immediately, resulting in a brief display of the initial state of the elements before the animation kicked in. to avoid this issue, we had to create an object with initial, animate, and transition properties to pass them thru props in the motion.h3 tag. The same applied for the aboutNavbar component. For more details on how I solved it, check out commits: dcaea3d4da0b3eff176a46bdf1793913447201db, 70f35b344d7a686af57f50fb6e3fd21a002bb9c5.
-
In order to fix the first row of a table with css, the sticky position only works with th tags.