The first iteration of anaflous.com built with Nextjs and hosted with Vercel
I can’t believe my portfolio now has over 200 visitors each day! It’s incredibly rewarding to see talented people using my work as inspiration for their own projects. I'm thrilled to contribute to the open-source community and am happy to see my portfolio making an impact!
You can use this code for your own website, but please with attribution 😊.
Please note that the design of the website is inspired from "brittanychiang.com", but didn't copied even a single piece of code from brittanyching repo, However, i built the portfolio from scratch with different technolgoies, like Tailwind CSS and Framer Motion and i added some other functionalities to it, so it might seems the same, but believe me i did a lot of work the code, website and how it works is entirely different!!!!. If you have questions about implementation, please refer to the Next.js DOCS same thing for Tailwind CSS and Framer Motion check out the Documentation, Or you can simply reach to me directly.
I'd like to highlight that the This website can't be reached trick featured on my portfolio is an original idea and not borrowed from any other source. It's intended as a playful element, reflecting my sense of humor. While I acknowledge that it might not be the most user-friendly approach, it's worth mentioning that my portfolio receives an average of 30-10 daily visitors. Through careful observation, I've calculated that the average reaction time is 2 seconds before users realize the playful nature of the message, at which point the content becomes accessible. It's a quirky touch meant to add a lighthearted element to the user experience.
Without a doubt a portfolio website is a unique way to showcase your work and let others know about yourself. It’s like an evergreen platform for your projects, case studies, and information about you. However, Why why did i choose Next.js? Because it is a React framework with Server-Side Rendering, which is good for SEO (Good for us if we get found on Google, right?).
Also, Next.js helps us build a full back-end & blazing-fast websites along with benefits such as Image optimization.
Why tailwindcss? Because TailwindCSS is a framework which reduces a lot of styling efforts. It has low level CSS classes that you can directly embed into the HTML code.
Since i integrated some of my project into my website i'll i mention most of technologies & libraries that i used.
- Next.js
- Nodejs
- TypeScript
- Tailwind CSS
- framer-motion
- Google API
- cookie-cutter
- react-leaflet
- Vercel Analytics
Yes, you can fork this repo. Please give me proper credit by linking back to anaflous.com. Thanks!
-
Clone the repo CLI
git clone https://github.com/hktitof/my-website.git
-
Install and use the correct version of Node using NVM
nvm install
-
Install dependencies
yarn
-
(OPTIONAL) : Add .env file to the root project
touch .env- (OPTIONAL) : Add your Google API key inside .env file.
not Adding Google API to the project will cause not returning the correct zip code, it might be always "00000"
NEXT_PUBLIC_KEY_GOOGLE_API="your API key"-
Start the development server
yarn dev
-
Generate a full static production build
yarn build
-
Preview the site as it will appear once deployed
yarn run serve
the following endpoint will return a json object contains a bunch of information about the ip address
/api/userInfoByIP/[IP-Address]
example :
/api/userInfoByIP/159.89.173.104
{"zip":"560002","country":"India","countryCode":"IN","region":"KA","regionName":"Karnataka","city":"Bengaluru","datetime":"9/6/2022, 1:24:30 AM","lat":12.9634,"lon":77.5855,"timezone":"Asia/Kolkata","isp":"DigitalOcean, LLC","org":"Digital Ocean","as":"AS14061 DigitalOcean, LLC","query":"159.89.173.104"}the following endpoint will return a json object contains the zip code for the latitude and logitude
"/api/userInfoByLatLon/" + lat + "/" + lon
example :
/api/userInfoByIP/159.89.173.104
{"zipcode" : "56998"}the Response below is returned if the lat and long provided has no zip code in Google maps, like lat & long in positioned in the ocean :
{"zipcode" : "00000"}the following endpoint will return a json object contains "quote" and "author", for SpeedTyping project i displayed only the quote, minLength is considered as the minimum of characters.
/api/typing/[minLength]
- minLength should be between 10 - 300.
- the returned quote is a chain of
- i costumized the original Endpoint using The API Route of Nextjs, here is the Original Endpoint.
https://api.quotable.io/random?minLength=[minLength]
| Color | Hex |
|---|---|
| Navy | #0a192f |
| Light Navy | #112240 |
| Lightest Navy | #233554 |
| Slate | #8892b0 |
| Light Slate | #a8b2d1 |
| Lightest Slate | #ccd6f6 |
| White | #e6f1ff |
| Green | #64ffda |
MIT License
Copyright (c) [2022] [Abdellatif Anaflous]
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- Linkedin - @abdellatif-anaflous
- Website - Abdellatif Anaflous