This project is licensed under the MIT License. See the LICENSE file for details.
Follow the steps to Fork this repository using the instructions found in the parent repository.
Open the repository using IDX, or on your local machine with your favorite text editor.
To view the portfolio, run npm run dev in the terminal -- you should see the contents of the website on localhost:4321. This content will be refreshed anytime a file is saved.
Alternatively, if you're using Project IDX, click on the link in the terminal to open up your website.
First we want to run the code using npm run dev, make sure you've got a page that looks like this:
To customise this, we can start by taking a look under src/pages. This folder includes the code for all your pages, routed by filename.
Open the index.astro file -- this corresponds to the home page.
Under the Hero component, you can edit the text on lines 32 and 33 to your liking. Save the file and the change should be reflected on the browser.
You can change the image by replacing public/assets/portrait.jpg with your own image.
To edit your skills, you want to open to skills component in src/components/Skills.astro and edit the corresponding text. The /components folder will hold all the components, which are the building blocks to the website.
Icons are defined using svgs in IconPaths.ts.
In the about.astro file, we'll change the About Section. We recommend writing something about your interests, career objectives, skills, and maybe even hobbies.
You can add a new page just by creating a new .astro file under the pages folder, using the same template.
For each page, you can change the title and description prop for the BaseLayout component. These edit the title and description tag for each page.
If you want to change the default title and description tags, you can do so in the layouts/BaseLayout.astro Component.
Now take a look at the Nav.astro component under the /components folder. You can replace the placeholder [Your Name] on line 21, and you can also add or remove links from the navbar by editing the textLinks array on line 5.
You can also edit the footer with the Footer.astro file; you can replace the text with whatever you want, and also edit the links to your socials.
Now let's take a look at the projects page. You will notice a few dummy projects. Click on one of them to see what it looks like.
To edit these pages, let's take a look at the files under src/content/projects. The pages are dynamically generated based on the content in these files. Try editing the content of one of the files, adding a new file using the same template, or deleting a file to see your changes.
The img property takes in images from public/assets. You can replace the placeholder images with more relevant ones.
The text uses markdown syntax, an example better utilising this is in project4.md.
Finally, let's update what email people should contact you at.
Open the components/ContactCTA.astro file, and replace the mailto:[email protected] to your own mailing address.
Note: Be aware that this constitutes putting your email on the internet. You probably already have it available on other social media platforms but if you are not comfortable with the idea of putting your personal email out there then we recommend deleting the contact section.
Finally, you can open the src/styles/global.css file to view the project wide styling.
The main stuff you might want to change is the accent colours on lines 19 to 22, and font on lines 74 to 77.
Now commit your changes! You can do this by clicking the source control button:
Staging all your changes,
Entering a message and pressing commit
Now click Sync Changes and press OK if it informs you that this action will pull and push commits from and to "origin/main"
Of course, you can customise your portfolio and add virtually anything you want. If you want to do this, we recommend looking at the more comprehensive Astro Documentation at https://docs.astro.build/en/basics/astro-components/.
To learn about how to deploy your newly created portfolio on netlify, please return to the parent repo and follow the Deployment Instructions there.