Portfolio website based on Next.js

Amelithic.com

Web designer

This website is currently in development, check back later for any updates...

# h1 Heading

## h2 Heading

### h3 Heading

#### h4 Heading

##### h5 Heading

###### h6 Heading

## Horizontal Rules

***

## Emphasis

**This is bold text**

**This is bold text**

*This is italic text*

*This is italic text*

~~Strikethrough~~

## Blockquotes

> Blockquotes can also be nested...
>
> > ...by using additional greater-than signs right next to each other...
> >
> > > ...or with spaces between arrows.

## Lists

Unordered

*   Lorem ipsum dolor sit amet
*   Consectetur adipiscing elit
*   Integer molestie lorem at massa

Ordered

1.  Lorem ipsum dolor sit amet
2.  Consectetur adipiscing elit
3.  Integer molestie lorem at massa

## Code

Inline `code`

Block code

```
npm install netlify-cli -g
```

Syntax highlighting

```js
var foo = function (bar) {
  return bar++;
};

console.log(foo(5));
```

## Tables

| Option | Description                                                               |
| ------ | ------------------------------------------------------------------------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default.    |
| ext    | extension to be used for dest files.                                      |

Right aligned columns

| Option |                                                               Description |
| -----: | ------------------------------------------------------------------------: |
|   data | path to data files to supply the data that will be passed into templates. |
| engine |    engine to be used for processing templates. Handlebars is the default. |
|    ext |                                      extension to be used for dest files. |

## Links

*   [Next.js on Netlify](https://docs.netlify.com/frameworks/next-js/overview/)
*   [Use Visual Editor with Next.js](https://docs.netlify.com/visual-editor/frameworks/next/)

## Image

Recommended image orientation is horizontal. You can adjust the image component to your needs in `components/CustomImage.js`.

![Image alt text](/images/random-image.jpeg "Image Title")


This website is currently in development, check back later for any updates...

Welcome


**This is an example post. There's another one [here](/posts/example-post-1).**

Combining **Next.js** and **Netlify** offers a powerful solution for building and deploying modern web applications with ease. Next.js, known for its versatility in handling both static and dynamic content, is a favorite for developers who need a React-based framework that supports server-side rendering, static site generation, and API routes—all essential for dynamic, SEO-friendly sites.

Pairing this with Netlify’s streamlined deployment workflow, continuous integration, and serverless functions provides a smooth, fast, and secure development-to-deployment process. Netlify’s built-in features for **automatic deployment** from Git, **CDN distribution**, and **edge functions** mean Next.js apps can scale easily while maintaining high performance.

For UI designers and developers, this combo enables rapid iteration, easier A/B testing, and optimized performance without the DevOps overhead. Plus, the ability to leverage **dynamic routing and API integrations** means more control over design and functionality.

## Additional resources

- [Next.js on Netlify](https://docs.netlify.com/frameworks/next-js/overview/)
- [Use Visual Editor with Next.js](https://docs.netlify.com/visual-editor/frameworks/next/)

Consider that for a moment: everything we see around us is assumed to have had a cause and is contingent upon.

Next.js and Netlify - The Perfect Duo for Modern Web Development


If you're using **Next.js** and **Netlify**, you’re tapping into a powerhouse combination for fast, reliable, and scalable web applications. 

**This is an example post. There's another one [here](/posts/example-post-1).**

Here’s why they work so well together:

1. **Seamless Deployment**: With Netlify’s Git-based deployment, pushing updates to a Next.js site is automatic and effortless. Every change pushed to GitHub or GitLab triggers a fresh build and deploys your site without any manual effort, perfect for fast-paced projects.

2. **Static and Dynamic Content Flexibility**: Next.js shines by allowing both static generation (SSG) and server-side rendering (SSR), and Netlify makes deploying either easy. Static content is globally cached on Netlify’s CDN, making your site lightning-fast, while Netlify Functions handle any server-side needs with zero configuration.

3. **Serverless Functions**: Netlify’s serverless functions work beautifully with Next.js API routes, enabling dynamic features (like forms, authentication, and data fetching) without additional servers. This lets you build interactive, backend-supported sites with just front-end code.

4. **Edge Caching and CDNs**: Next.js’s pages are distributed across Netlify’s global CDN, ensuring that your users get a fast experience no matter where they are. This setup optimizes load times and enhances site performance.

5. **Developer-Friendly Workflow**: Both Next.js and Netlify focus on a developer-friendly experience. Local development, previews, and rollbacks are simple, so you can focus on building a better user experience without worrying about the infrastructure.

For anyone building with Next.js, deploying on Netlify means you get the best of **speed, reliability, and ease**—all the ingredients needed to create high-performing, user-friendly web apps!

## Additional resources

- [Next.js on Netlify](https://docs.netlify.com/frameworks/next-js/overview/)
- [Use Visual Editor with Next.js](https://docs.netlify.com/visual-editor/frameworks/next/)

If you're using Next.js and Netlify, you’re tapping into a powerhouse combination for fast, reliable, and scalable web applications.

Why Next.js Works Great with Netlify


## Sitemap

* **Home/index** - Initial landing page, with a brief overview of who I am, what I do, and what I have previously done (experience section, showing previously paid commissions)

* **About me** - Contains a short personal profile (about my motivations, background and qualifications), links to socials, etc. ... (Need to research whether a separate contacts page is needed or not, as well as a link to my resume).

* **Projects** - Personal projects I have worked on displayed in a gallery format, with a title, date and description. On click, the image is expanded, and shows details below.

* **Blog** - Blogs covering projects I have completed or tested, findings, etc. - Projects in previous section may link to these blog posts. Can be sorted by category (web dev, graphic design, art), and by date (all time, or by the year).

* **Contact** - Formal page to offer email to contact about work or portfolio projects.

***

## Brief

I'd like to create a site that represents my interest and proficiency in graphic design, web development, art, and serves to summarise my experience for future employers or applying to courses. It will contain links to my relevant socials (LinkedIn, GitHub, Behance, Dribbble, etc.) and showcase my most recent and impressive projects. It will also have a blog section, to add detailed write-ups explaining the work put behind each project, including the planning, problems encountered and solved, frameworks and languages used, etc.
Ideally, I would like to include animations, a custom colour palette compatible for both light and dark mode, and detailed custom CSS elements to show my design skills and create a cool, creative and sleek feel.
It should be responsive on both large-scale and mobile devices, which may involved a different layout and some interaction cases (such as hovering) to be replaced.

## Resources and Research

To gain ideas for this website, these are some resources I found:
* [Dribbble](https://www.dribbble.com/)
* [Cofolios](https://www.cofolios.com/)
* Reviews of portfolio websites on [YouTube](https://www.youtube.com/)

For creating content ready to be presented, I found some handy resources also:
* [GoodBrief](https://www.goodbrief.io/)


To-do list and plan for website functionality and pages

Website planning


In the evolving world of UI design, a tool that has remained a steadfast favorite among designers is [Sketch](https://www.sketch.com/). Since its inception in 2010, Sketch has consistently proven to be a powerful, intuitive, and efficient platform for creating stunning, functional user interfaces. While many competitors have entered the market, Sketch continues to offer unique features that keep it in the toolkits of solo designers and design teams alike. Here’s why Sketch is still the ultimate tool for UI designers.

**This is an example post. There's another one [here](/posts/example-post-1).**

## User-Friendly Interface

Sketch is celebrated for its clean, minimalistic interface that feels welcoming to beginners and intuitive for seasoned designers. Unlike other platforms that may overwhelm with too many options or complex panels, Sketch offers a streamlined workspace that allows designers to focus on what matters: crafting excellent UI.

## Vector-Based Design for Scalability

Vector-based design is essential in UI, where icons and graphics need to scale across various screen sizes. Sketch’s vector capabilities ensure that designs stay sharp and consistent, no matter the device or resolution. Designers can create everything from tiny icons to full-screen mockups without losing image quality.

## Symbols and Reusable Components

One of Sketch’s most beloved features is its Symbols feature, which lets designers create reusable components. This is a game-changer for maintaining consistency across projects, as elements like buttons, icons, and navigation bars can be updated once and reflected throughout the design. The ability to nest Symbols and create overrides adds even more flexibility, enabling designers to craft complex design systems with ease.

## Powerful Plugins and Integrations

Sketch’s extensive plugin library is unmatched, offering tools for everything from animations to code export. Tools like Anima, Stark, and Craft by InVision extend Sketch’s functionality, enabling designers to customize the tool to their workflow. The robust plugin ecosystem allows designers to stay in Sketch while integrating seamlessly with prototyping, developer handoff, and collaboration tools, making Sketch highly adaptable for varied design processes.

## Cloud Collaboration and Sharing

Collaboration is critical in modern design workflows, and Sketch’s Cloud feature makes it easy to share work with clients, teammates, and developers. The ability to upload designs to the cloud allows for real-time feedback and streamlined developer handoff. Sketch Cloud supports commenting, version control, and asset exporting, making remote collaboration a breeze.



While new design platforms continue to emerge, Sketch has held its ground as a go-to for UI designers, offering an impressive mix of simplicity, precision, and power.

Amelie McCarthy

Creativity

Technology

Projects

projectTitle

projectTitle

projectTitle