Hello World! This is Jared Yeung.
My first post in blog section. In May of this year, I started to think about creating a blog and portfolio website for hobby and work. You know, it's really hard to start something at the beginning. Then, I used ChatGPT as my advisor.
My ChatGPT List
*Here is the Prompts and Responses. (Prompt =P | Response =R)
Photo by Hal Gatewood on Unsplash
Advices
P: Do you have any advice for creating a portfolio website
R: Sure, here are some tips for creating a great portfolio website:
1. Define your purpose: Before you start designing your website, take the time to define the purpose of your portfolio. What are your goals? What do you want to showcase? What kind of impression do you want to make? Answering these questions will help guide your design decisions.
2. Keep it simple: A cluttered website can be overwhelming and distracting. Keep your design simple and clean to make it easy for visitors to navigate and find what they're looking for.
3. Showcase your best work: Your portfolio website is all about showcasing your best work. Make sure to include high-quality images and descriptions of your projects. If possible, include examples of your work in action to give visitors a better sense of what you can do.
4. Make it easy to contact you: Don't make it difficult for potential clients or employers to get in touch with you. Include clear contact information, such as an email address or phone number, on your website.
5. Consider mobile responsiveness: More and more people are browsing the web on their mobile devices. Make sure your portfolio website is optimized for mobile by using responsive design.
6. Be authentic: Your portfolio website is also an opportunity to showcase your personality and style. Make sure your website reflects who you are as a designer or creative professional.
7. Keep it up to date: Your portfolio website should be a living document that is updated regularly with your latest work and accomplishments. Make sure to carve out time to update your website on a regular basis.
Hope these tips help! Good luck with your portfolio website.
I found that it a great starting to think about my portfolio website. ChatGPT listed out 7 guidelines: Purposes; KISS(Keep it simple, stupid); Best showcases; Contact ; RWD(Responsive Web Design); Authenticity; Regular Update.
Next Step, I want to find some examples for my reference.
Examples
P: Any examples for web design portfolio website
1. Jessica Walsh: https://www.jessicawalsh.com/
2. Ian Lunn: https://ianlunn.co.uk/
3. Tobias van Schneider: https://www.vanschneider.com/
4. Brad Frost: https://bradfrost.com/
5. Dann Petty: https://dannpetty.com/
6. Antoni Tudisco: https://antonitudisco.com/
7. Mike Kus: https://mikekus.com/
8. Chris Lee: https://chrisleedesign.com/
9. Humaan: https://humaan.com/
10. Phil Coffman: https://philcoffman.com/
These websites all do a great job of showcasing the designer's work and personality, while also being easy to navigate and visually appealing. Take a look at these examples for inspiration, but remember to make your portfolio website unique to you and your style.
Based on the data that ChatGPT has been trained on up until 2021, some examples of portfolio websites may not work, although most of them met my expectations. The ChatGPT is still a great tool for me to think about how to make my portfolio website.
More detailed, we already have the concepts and examples. What about the elements of the website. So, I took the easiest part - fonts/typeface as the basic elements of website.
Typefaces
P: Top 10 famous fonts
R: Here are 10 famous fonts that have made a significant impact in design and typography:
1. Helvetica: Known for its clean and modern appearance, Helvetica is one of the most widely used sans-serif fonts, recognized for its versatility and legibility.
2. Times New Roman: Originally designed for the Times newspaper, this serif font became popular due to its readability and classic appeal. It is commonly used for formal documents.
3. Arial: Another widely used sans-serif font, Arial is known for its simplicity and similarity to Helvetica. It is commonly used in digital and print media.
4. Comic Sans MS: Despite being criticized for its informal and overuse, Comic Sans MS gained fame for its playful and casual look, making it popular for children's materials.
5. Garamond: This elegant and timeless serif font has a long history dating back to the 16th century. It is often used in books and formal documents due to its legibility and classic style.
6. Futura: With its geometric shapes and clean lines, Futura has a distinct modernist aesthetic. It has been widely used in branding, logos, and posters.
7. Baskerville: Developed in the 18th century, Baskerville is a classic serif font known for its elegance and readability. It is often used for printed materials and high-quality publications.
8. Impact: Recognized for its bold and heavy appearance, Impact became popular for headlines and display purposes, especially in the early days of web design.
9. Univers: Designed to have a wide range of weights and widths, Univers is a versatile sans-serif font known for its clear and neutral appearance. It is commonly used in corporate branding and signage.
10. Cooper Black: This bold and curvaceous serif font gained popularity for its unique retro aesthetic. It has been widely used in branding, advertisements, and packaging design.
These fonts have left a significant mark on the design world and continue to be influential in various applications.
As the list above, the typeface name is very clear, classic and epic. However, these 10 type faces did not meet my expectations. Then, I have to explore it by myself( Neue Haas Grotesk & Merriweather).
What's next? the sitemap of the website is important.
Sitemap
P: what is the sitemap in a portfolio website
R: A sitemap in a portfolio website is a visual or text-based representation of the website's structure and organization. It serves as a hierarchical list or diagram that outlines all the pages, sections, and content within the website. The sitemap provides an overview of the website's architecture, helping visitors and search engines understand the relationship between different pages and navigate the site effectively. In the context of a portfolio website, the sitemap typically includes sections such as:
1. Home: The main landing page of the portfolio website.
2. About: Information about the portfolio owner, their background, skills, and experience.
3. Portfolio: Showcasing the work samples, projects, or creative works of the portfolio owner.
4. Services: Description of the services offered by the portfolio owner, if applicable.
5. Contact: Contact details and a form for visitors to get in touch with the portfolio owner.
6. Blog: Optional section for sharing articles, insights, or news related to the portfolio owner's field. Including a sitemap in a portfolio website helps visitors navigate through the content and find what they are looking for easily.
Additionally, it also aids search engines in indexing and understanding the structure of the website, potentially improving its visibility in search results.
I know, it is very simple question about the sitemap of portfolio website. As mentioned the portfolio examples before, there are examples for reference. However, I just want to know what's the response of ChatGPT. The list is very precise and concise above, I forgot the page "services" in the portfolio, it is a good option for freelancer portfolio website.
For easier to manage the content of the website, CMS(Content Management System) play a key role in this field. Then, I would ask any recommendation of CMS?
CMS
P: Which CMS do you prefer in terms of using javascript?
R: As an AI language model, I don't have personal preferences. However, there are several content management systems (CMS) that utilize JavaScript and are popular among developers. Here are a few examples:
1. WordPress with JavaScript: WordPress is a widely used CMS that allows the integration of JavaScript through plugins and themes. With the REST API and the availability of JavaScript frameworks like React, developers can build custom and interactive interfaces on top of WordPress.
2. Ghost: Ghost is a CMS specifically designed for bloggers and content creators. It is built using Node.js and utilizes JavaScript extensively. Ghost provides a modern and intuitive interface for managing and publishing content.
3. Strapi: Strapi is an open-source headless CMS that allows you to build APIs quickly and easily. It is built on Node.js and uses JavaScript as the primary programming language. Strapi provides a flexible and customizable CMS solution for creating content-driven applications.
4. KeystoneJS: KeystoneJS is a powerful CMS and web application framework built on Node.js. It provides a flexible and extensible architecture and allows developers to use JavaScript to build dynamic websites and applications.
These are just a few examples, and the choice of CMS ultimately depends on your specific requirements and preferences. It's important to evaluate different options based on factors such as ease of use, community support, scalability, and the specific features you need for your project.
Quite good, the list above is not bad. For Wordpress with javascript, I think that it refer to headless CMS Wordpress. I have used WordPress for various projects or tasks, but I have never tried the headless CMS version of WordPress before; Ghost is a popular CMS in the latest trend, I think that known for its speed and efficiency; For Strapi CMS, I have tried using Strapi CMS before, but I encountered an issue with fetching the API, and I'm unsure of the cause.
KeystoneJS, It's my first time to hear this headless CMS. As mentioned on their official website below, it seem like the CMS is easy to use based on the graphQL API and the user-friendly UI (seem like)
Keystone helps you build faster and scale further than any other CMS or App Framework. Just describe your schema, and get a powerful GraphQL API & beautiful Management UI for content and data.
Finally, the list of cms did not meet my expectation. I did not choose the CMS from the list.
In addition, I want to know more about the web design, web development, javascript and interaction latest trend.
Let's start at the design part first.
Web Design
P: What is the latest trend about web design?
R: As of my knowledge cutoff in September 2021, some of the latest trends in web design include:
1. Dark Mode: Dark-themed websites have become increasingly popular, providing a sleek and modern look while reducing eye strain.
2. Minimalism: Clean and minimalist designs with ample white space and simple typography are still in vogue, emphasizing clarity and ease of use.
3. Neumorphism: Neumorphism, also known as soft UI, combines skeuomorphic design elements with minimalist aesthetics, creating a soft and tactile visual style.
4. Bold Typography: Large and attention-grabbing typography is being used to create focal points and enhance the overall visual impact of websites.
5. Microinteractions: Microinteractions refer to small animations or interactive elements that provide feedback and enhance the user experience. They can be used to add personality and delight to the website.
6. Immersive Multimedia: The use of videos, animations, and interactive multimedia elements to create immersive and engaging experiences is a growing trend in web design.
7. Asymmetrical Layouts: Breaking away from traditional grid-based designs, asymmetrical layouts and overlapping elements are being used to create dynamic and visually interesting compositions.
8. 3D and Depth Effects: Three-dimensional elements, parallax scrolling, and depth effects are being employed to add depth and create a more engaging visual experience.
9. Responsive Design: With the increasing use of mobile devices, responsive design that ensures optimal viewing and interaction across different screen sizes and devices remains a crucial trend. 10. Sustainability and Eco-friendly Design: Websites are incorporating eco-friendly design principles, such as using sustainable colors, optimizing energy consumption, and promoting environmental causes.
It's important to note that design trends evolve rapidly, and new trends may have emerged since my knowledge cutoff. Keeping up with the latest design blogs, industry publications, and design communities can help you stay updated on the current trends in web design.
Great, the latest trend list is not bad. The list is so amazing, a very concised and detailed brainstorming tool for web design. You know, mind is empty when it comes to the beginning of layout.
You can see that, its not outdated. Most of the advices related to the elements have used in website nowadays, even though the knowledge cut off in September 2021.
A great to-do list for web designer and web developer to start with.
Web Development
P: What is the latest trend about web development?
R: As of my knowledge cutoff in September 2021, here are some of the latest trends in web development:
1. Progressive Web Apps (PWAs): PWAs offer a native app-like experience on the web, with features like offline functionality, push notifications, and device hardware access. They provide fast, reliable, and engaging experiences for users.
2. Responsive Web Design: Responsive design continues to be a significant trend, ensuring that websites are optimized for various devices and screen sizes, including mobile devices.
3. Single Page Applications (SPAs): SPAs provide a seamless user experience by loading content dynamically and updating the page without full refreshes. They offer faster performance and improved interactivity.
4. Serverless Architecture: Serverless computing allows developers to focus on writing code without worrying about infrastructure management. Services like AWS Lambda and Azure Functions are popular choices for building scalable and cost-effective web applications.
5. Headless CMS: Headless CMS separates the content management backend from the frontend presentation layer, providing flexibility to developers for delivering content across multiple platforms and channels.
6. Jamstack: Jamstack (JavaScript, APIs, and Markup) is an architecture that decouples the frontend from the backend, enabling faster and more secure web development. It leverages static site generators, serverless functions, and content delivery networks (CDNs) for performance and scalability.
7. GraphQL: GraphQL is an alternative to traditional REST APIs that allows clients to request specific data they need. It offers more efficient data fetching, reducing over-fetching and under-fetching of data.
8. Automation and DevOps: Automation tools, continuous integration/continuous deployment (CI/CD) pipelines, and DevOps practices are gaining popularity to streamline development workflows, improve collaboration, and ensure faster and more reliable deployments.
9. WebAssembly (Wasm): WebAssembly is a binary format for executing code on the web, allowing languages other than JavaScript, such as C++, Rust, and Go, to run in the browser. It offers improved performance and opens up new possibilities for web development.
10. Accessibility and Inclusive Design: Making websites accessible to all users, including those with disabilities, is an ongoing trend. Inclusive design principles and practices are being prioritized to ensure equal access and usability for everyone.
It's worth noting that web development trends evolve quickly, and new technologies and approaches may have emerged since my knowledge cutoff. Staying up to date with industry blogs, developer communities, and online resources will help you stay current with the latest trends in web development.
Although ChatGPT does not have real-time access to the internet, its quite updated. When it comes to the trend of web development, how to know that?
So lets take some examples to talk.
I just took a look on a survey, "Jamstack gives developers full-stack powers", from Jamstack Community in 2022. The result is quite similar with the list above.
For the Headless CMS, the survey shown that most of the CMS are Headless CMS in Top 5, except Wordpress.
For the serverless architecture, the survey shown that only 30% of respondents do not use serverless architecture. We can see that here is a increasing trend of using serverless.
