This portfolio is built in Typescript using NextJS, and ChakraUI. It fetches most of its data from a Headless CMS known as Contentful. This project was built to be made into a template project that can allow Entry-Level Developers quickly and easily create their own dynamic portfolio.
Clone the project (I recommend using SSH)
# HTTPS
git clone https://github.com/DevVoxel/portfolio-tsx.git
# SSH
[email protected]:DevVoxel/portfolio-tsx.gitGo to the project directory
cd portfolio-tsxInstall dependencies (This project uses yarn as a package manager. Avoid using npm when installing to prevent possible dependency problems.)
yarnStart Dev Server
yarn dev
# or
npm run devTo run this project, you will need to add the following environment variables to your .env file. (If using Vercel. There is a script setup to pull enviroment variables in package.json)
npm run env
# or
vercel env pull
These values can also be located in .env.example
// Common
NEXT_PUBLIC_URL=https://aidensmith.dev
// Contentful
CONTENTFUL_ACCESS_TOKEN=
CONTENTFUL_PREVIEW_ACCESS_TOKEN=
CONTENTFUL_SPACE_ID=
// SendGrid
SENDGRID_API_KEY=
In order to deploy this project, it is easiest to try using a Vercel Hobbyist account. This will give you access to Vercel technologies and easy deployment methods. I personally recommend this if you:
- Cannot afford a host
- Just want easy & free hosting.
Otherwise use what you want, there are production/deployment commands to support such. It is reccomended to deploy on your 'main' branch, or a seperate 'deployment' branch.
!!!Ensure you have defined your enviroment variables properly!!!
Contributions are always welcome! You can also create issues or PRs that I will individually review and add if beneficial.
The workshop portion of this project will be built to house small cards or icons of all my components, websites, creations, small ideas, apps, etc. There will be a navigation scroll at the top that will allow any user to sort the entries via Technology/Framework/Language. There may also be a tyoe to search section, but that is still up for debate. The search at the top will consistently slowly scroll right, and when you hover or click on an icon for a technology, that icon will glow with a cyan hue around it and enlarge a little increasing the margin/padding. Then the projects that have that specific tag will be shown. This workshop will be a small button to the right of the website logo in an attempt to make a minimal UI impact on the overall website.
The freelance section of this website will be used to house all my freelance services, and contracts. I will use this to showcase a step by step easy process for clients to take me (or anyone using this template) on under contract. This includes what is wanted to be built, the framework/technologies to be used, a custom task list, payout, quotas, contact information, base contracts, and other features to showcase freelance work effortlessly.
The backlog will be used as well... a backlog. Showcasing my Trello entries, as well as projects that I want to work on in the future. This section will have resources towards each project and will look similar to a Github commit history page (I assume). Changes are up for debate, but also this is just a simple section to show my progress as well as ideas.
I need to add a section that will showcase my resume and skills. This section will give a download option for a pdf version of my resume, as well as a cleanly designed page towards my direct resume. Fairly simple section, just is needed with some further updates.
Use Modal Popup for contact form instead of mailto. However there should be ample options for visitors of site to send information to developer.
--> Being worked on under the feature/ContactForm branch.
--> Modal has been added, the validation enhancement comes next.
--> Currently using SendGrid email API. Might switch to something else but for now it works.
--> All emails currently go to your 'spam' folder.
--> Might adjust modal dialog on mobile to disable the close button.
--> API sends messages properly, however future format changes may need to be made.
Create a subdomain of links.aidensmith.dev or social.aidensmith.dev and make it an adaptive link-in-bio style list. An example of one of these is LinkTree or Cardd.
